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

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

@@ -0,0 +1,90 @@
+import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
+
+const pnTableCss = "pn-table{display:block;margin-bottom:16px}pn-table.bordered .pn-table-container table thead tr:last-child th,pn-table.bordered .pn-table-container table thead tr:last-child td{border-bottom-width:2px}pn-table.bordered .pn-table-container table thead tr:first-child th,pn-table.bordered .pn-table-container table thead tr:first-child td{border-top:1px solid #F3F2F2}pn-table.bordered .pn-table-container table thead tr th,pn-table.bordered .pn-table-container table thead tr td{border-right:1px solid #F3F2F2;border-bottom:1px solid #F3F2F2}pn-table.bordered .pn-table-container table thead tr th:first-child,pn-table.bordered .pn-table-container table thead tr td:first-child{border-left:1px solid #F3F2F2}pn-table.bordered .pn-table-container table tbody tr.hover-before th,pn-table.bordered .pn-table-container table tbody tr.hover-before td{border-bottom-color:#E0F8FF}pn-table.bordered .pn-table-container table tbody tr.hover th,pn-table.bordered .pn-table-container table tbody tr.hover td{border-bottom-color:#E0F8FF}pn-table.bordered .pn-table-container table tbody tr.hover th:first-child,pn-table.bordered .pn-table-container table tbody tr.hover td:first-child{border-left-color:#E0F8FF}pn-table.bordered .pn-table-container table tbody tr.hover th:last-child,pn-table.bordered .pn-table-container table tbody tr.hover td:last-child{border-right-color:#E0F8FF}pn-table.bordered .pn-table-container table tbody tr th,pn-table.bordered .pn-table-container table tbody tr td{border-bottom:1px solid #F3F2F2}pn-table.bordered .pn-table-container table tbody tr th:first-child,pn-table.bordered .pn-table-container table tbody tr td:first-child{border-left:1px solid #F3F2F2}pn-table.bordered .pn-table-container table tbody tr th:last-child,pn-table.bordered .pn-table-container table tbody tr td:last-child{border-right:1px solid #F3F2F2}pn-table.bordered.no-prev.hover .pn-table-container table thead tr th,pn-table.bordered.no-prev.hover .pn-table-container table thead tr td{border-bottom-color:#E0F8FF}pn-table.bordered.clicked.no-prev .pn-table-container table thead tr th,pn-table.bordered.clicked.no-prev .pn-table-container table thead tr td{border-bottom-color:#00A0D6}pn-table.bordered.clicked .pn-table-container table tbody tr.hover-before th,pn-table.bordered.clicked .pn-table-container table tbody tr.hover-before td{border-bottom-color:#00A0D6}pn-table.bordered.clicked .pn-table-container table tbody tr.hover th,pn-table.bordered.clicked .pn-table-container table tbody tr.hover td{border-bottom-color:#00A0D6}pn-table.bordered.clicked .pn-table-container table tbody tr.hover th:first-child,pn-table.bordered.clicked .pn-table-container table tbody tr.hover td:first-child{border-left-color:#00A0D6}pn-table.bordered.clicked .pn-table-container table tbody tr.hover th:last-child,pn-table.bordered.clicked .pn-table-container table tbody tr.hover td:last-child{border-right-color:#00A0D6}pn-table.bordered.striped .pn-table-container table tbody tr th,pn-table.bordered.striped .pn-table-container table tbody tr td{border-bottom-width:0}pn-table.bordered.striped .pn-table-container table tbody tr:last-child th,pn-table.bordered.striped .pn-table-container table tbody tr:last-child td{border-bottom-width:1px}pn-table.striped .pn-table-container table tbody tr:nth-child(odd) th,pn-table.striped .pn-table-container table tbody tr:nth-child(odd) td{background-color:#E0F8FF}pn-table.striped.disabled .pn-table-container table tbody tr:nth-child(odd) th,pn-table.striped.disabled .pn-table-container table tbody tr:nth-child(odd) td{background-color:#F3F2F2}pn-table .pn-table-container table{width:100%}pn-table .pn-table-container table,pn-table .pn-table-container table th,pn-table .pn-table-container table td{padding:0;margin:0;border:0;outline:0;border-collapse:collapse;max-width:100%}pn-table .pn-table-container table th,pn-table .pn-table-container table td{text-align:left;font-size:14px;line-height:20px;vertical-align:middle;padding:14px 16px}pn-table .pn-table-container table th pn-icon,pn-table .pn-table-container table td pn-icon{vertical-align:middle}pn-table .pn-table-container table thead tr th,pn-table .pn-table-container table thead tr td{color:#00A0D6;font-weight:500}pn-table .pn-table-container table thead tr th .column-wrapper,pn-table .pn-table-container table thead tr td .column-wrapper{display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}pn-table .pn-table-container table thead tr th .column-wrapper pn-icon,pn-table .pn-table-container table thead tr td .column-wrapper pn-icon{cursor:pointer}pn-table .pn-table-container table tbody tr th,pn-table .pn-table-container table tbody tr td{color:#5E554A;font-weight:300}pn-table .pn-table-container table tbody tr th{font-weight:500;color:#2D2013}";
+
+let PnTable$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  componentWillLoad() {
+    const context = this;
+    if (this.bordered && !this.striped) {
+      const tr = Array.from(this.hostElement.querySelectorAll("tbody tr"));
+      tr.forEach(function (row, index) {
+        row.addEventListener("mousedown", function () {
+          context.hostElement.classList.add("clicked");
+        });
+        row.addEventListener("mouseup", function () {
+          context.hostElement.classList.remove("clicked");
+        });
+        row.addEventListener("mouseover", function () {
+          if (index) {
+            tr[index - 1].classList.add("hover-before");
+          }
+          else {
+            context.hostElement.classList.add("no-prev");
+          }
+          context.hostElement.classList.add("hover");
+          row.classList.add("hover");
+        });
+        row.addEventListener("mouseout", function () {
+          if (index) {
+            tr[index - 1].classList.remove("hover-before");
+          }
+          else {
+            context.hostElement.classList.remove("no-prev");
+          }
+          context.hostElement.classList.remove("hover");
+          row.classList.remove("hover");
+        });
+      });
+    }
+    if (this.disabled) {
+      this.hostElement.classList.add("disabled");
+    }
+    else {
+      this.hostElement.classList.remove("disabled");
+    }
+    if (this.bordered) {
+      this.hostElement.classList.add("bordered");
+    }
+    else {
+      this.hostElement.classList.remove("bordered");
+    }
+    if (this.striped) {
+      this.hostElement.classList.add("striped");
+    }
+    else {
+      this.hostElement.classList.remove("striped");
+    }
+  }
+  render() {
+    return (h("div", { class: "pn-table-container" }, h("slot", null)));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnTableCss; }
+};
+PnTable$1 = /*@__PURE__*/ proxyCustomElement(PnTable$1, [4, "pn-table", {
+    "disabled": [4],
+    "bordered": [4],
+    "striped": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-table"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnTable$1);
+      }
+      break;
+  } });
+}
+
+const PnTable = PnTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnTable, defineCustomElement };

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

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

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

@@ -0,0 +1,188 @@
+import { HTMLElement, createEvent, forceUpdate, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const pnTablistCss = ".pn-tablist{width:100%;position:relative;border-bottom:0.1em solid #D4CECB;display:block}.pn-tablist>.tablist{overflow-y:hidden;overflow-x:auto;display:-ms-flexbox;display:flex;position:relative;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.pn-tablist>.tablist::-webkit-scrollbar{display:none}.pn-tablist.stacked button.pn-tab{-ms-flex-direction:column;flex-direction:column}.pn-tablist.stacked button.pn-tab svg{margin:0 0 0.2em}.pn-tablist .scroll-arrows{position:absolute;top:50%;left:0;right:0;overflow:hidden;pointer-events:none;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;z-index:1;height:100%}.pn-tablist .scroll-arrows.left>.arrow-left{opacity:1;-webkit-transform:translate(0);transform:translate(0)}.pn-tablist .scroll-arrows.right>.arrow-right{opacity:1;-webkit-transform:translate(0);transform:translate(0)}.pn-tablist .scroll-arrows svg{width:1.5em}.pn-tablist .scroll-arrows svg path{fill:#005D92}.pn-tablist .scroll-arrows>*{-webkit-transition:opacity 0.2s, background 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;transition:opacity 0.2s, background 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;pointer-events:all;width:2.5em;height:2.5em;background:white;border:none;opacity:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;cursor:pointer}.pn-tablist .scroll-arrows>*.arrow-left{-webkit-transform:translateX(-100%);transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;-webkit-box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}.pn-tablist .scroll-arrows>*.arrow-right{-webkit-transform:translateX(100%);transform:translateX(100%);border-radius:50% 0 0 50%;padding:0 0 0 0.3em;-webkit-box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}.pn-tablist .scroll-arrows>*:active{background:#F3F2F2}.pn-tablist .line{height:0.1em;width:100%;position:absolute;bottom:0}.pn-tablist .line .active-line,.pn-tablist .line .hovered-line{position:absolute;-webkit-transform-origin:left center;transform-origin:left center;width:100%;-webkit-transition:opacity 0.2s ease-in-out, -webkit-transform 0.3s cubic-bezier(0.29, 0.15, 0.24, 0.97);transition:opacity 0.2s ease-in-out, -webkit-transform 0.3s cubic-bezier(0.29, 0.15, 0.24, 0.97);transition:transform 0.3s cubic-bezier(0.29, 0.15, 0.24, 0.97), opacity 0.2s ease-in-out;transition:transform 0.3s cubic-bezier(0.29, 0.15, 0.24, 0.97), opacity 0.2s ease-in-out, -webkit-transform 0.3s cubic-bezier(0.29, 0.15, 0.24, 0.97)}.pn-tablist .line .active-line{background-color:#005D92;height:0.5em;bottom:-0.3em;z-index:1;opacity:0}.pn-tablist .line .hovered-line{background-color:#00A0D6;height:0.1em;opacity:0}";
+
+let PnTablist$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.tabchange = createEvent(this, "tabchange", 7);
+    /** The value of the tab that is currently active */
+    this.value = null;
+    /** Icons are stacked vertically instead of the default rows */
+    this.stackedicons = false;
+    this.showScrollArrows = false;
+    this.isTabHovered = false;
+    this.enterHandler = this.handleEnter.bind(this);
+    this.leaveHandler = this.handleLeave.bind(this);
+    // We need this to be stateful because we need it to update on scroll
+    this.scrollArrowClasses = 'scroll-arrows ';
+  }
+  valueWatcher() {
+    this.setValue();
+  }
+  setActiveTabHandler({ detail }) {
+    this.tabElement = detail.el;
+    requestAnimationFrame(() => this.activateTab());
+    if (this.value === detail.val)
+      return;
+    this.value = detail.val;
+    this.tabchange.emit(this.value);
+  }
+  handleResize() {
+    this.rerender();
+  }
+  componentDidLoad() {
+    this.rerender();
+    this.setValue();
+    this.registerEvents();
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = this.mo = new MutationObserver(() => {
+      forceUpdate(this.hostElement);
+      this.rerender();
+      this.registerEvents();
+    });
+    mo.observe(this.hostElement, { childList: true });
+  }
+  setValue() {
+    const children = Array.from(this.hostElement.querySelectorAll("pn-tab"));
+    children.forEach(child => {
+      child.activeTab = this.value;
+    });
+  }
+  rerender() {
+    requestAnimationFrame(() => {
+      this.scrollIndicators();
+      this.calcActiveItemHighlight();
+    });
+  }
+  activateTab() {
+    const tabListCoords = this.hostElement.getBoundingClientRect();
+    const activeTabCoords = this.tabElement.querySelector('button').getBoundingClientRect();
+    const scrollOffset = this.hostElement.querySelector(".tablist").scrollLeft;
+    const activeLine = this.hostElement.querySelector(".line .active-line");
+    const coords = {
+      scale: activeTabCoords.width / tabListCoords.width,
+      offset: (activeTabCoords.left + scrollOffset) - tabListCoords.left
+    };
+    activeLine.style.setProperty("transform", `translateX(${coords.offset}px) scaleX(${coords.scale})`);
+    activeLine.style.setProperty("opacity", "1");
+  }
+  calcActiveItemHighlight() {
+    this.isTabHovered = false;
+    this.tabListEl = this.hostElement.querySelector(".tablist");
+    this.hoveredLine = this.tabListEl.querySelector(".hovered-line");
+  }
+  handleEnter(e) {
+    this.isTabHovered = true;
+    const hoveredTabCoords = e.target.getBoundingClientRect();
+    const tabListCoords = this.tabListEl.getBoundingClientRect();
+    const scrollOffset = this.tabListEl.scrollLeft;
+    const coords = {
+      scale: hoveredTabCoords.width / tabListCoords.width,
+      offset: (hoveredTabCoords.left + scrollOffset) - tabListCoords.left
+    };
+    this.hoveredLine.style.setProperty("transform", `translateX(${coords.offset}px) scaleX(${coords.scale})`);
+    this.hoveredLine.style.setProperty("opacity", "1");
+  }
+  handleLeave() {
+    this.isTabHovered = false;
+    setTimeout(() => {
+      if (!this.isTabHovered)
+        this.hoveredLine.style.setProperty("opacity", "0");
+    }, 500);
+  }
+  registerEvents() {
+    const preExistingTabs = this.availableTabs ? this.availableTabs : null;
+    this.availableTabs = this.hostElement.querySelectorAll("button.pn-tab");
+    if (preExistingTabs) {
+      this.availableTabs.forEach(tab => {
+        tab.removeEventListener("mouseenter", this.enterHandler);
+        tab.removeEventListener("focus", this.enterHandler);
+        tab.removeEventListener("mouseleave", this.leaveHandler);
+        tab.removeEventListener("blur", this.leaveHandler);
+      });
+    }
+    this.availableTabs.forEach(tab => {
+      tab.addEventListener("mouseenter", this.enterHandler);
+      tab.addEventListener("focus", this.enterHandler);
+      tab.addEventListener("mouseleave", this.leaveHandler);
+      tab.addEventListener("blur", this.leaveHandler);
+    });
+  }
+  /*---------------------------------------/HOVER LOGIC-------------------------------------------*/
+  /*-------------------------------------- SCROLL RELATED ---------------------------------------------**/
+  scrollHandler() {
+    if (this.showScrollArrows) {
+      this.hostElement.querySelector(".tablist").addEventListener("scroll", () => this.scrollIndicators());
+    }
+    else {
+      this.hostElement.querySelector(".tablist").removeEventListener("scroll", () => this.scrollIndicators());
+    }
+  }
+  scrollIndicators() {
+    const tabListWidth = this.hostElement.querySelector(".tablist").scrollWidth;
+    const containerWidth = this.hostElement.clientWidth + 15;
+    const scrollOffset = this.hostElement.querySelector(".tablist").scrollLeft;
+    this.showScrollArrows = (tabListWidth > containerWidth);
+    this.scrollArrowClasses = "scroll-arrows ";
+    if (this.showScrollArrows) {
+      if (scrollOffset > 0)
+        this.scrollArrowClasses += "left ";
+      if (containerWidth + scrollOffset < tabListWidth)
+        this.scrollArrowClasses += "right ";
+    }
+  }
+  scroll(val) {
+    const tabList = this.hostElement.querySelector(".tablist");
+    let amount = tabList.scrollLeft + val;
+    // Options aren't supported in Safari, I think this might needed as a fallback but might be wrong.
+    // tabList.scroll(amount, 0);
+    tabList.scroll({
+      left: amount,
+      behavior: "smooth"
+    });
+  }
+  /*-------------------------------------- /SCROLL RELATED ---------------------------------------------**/
+  getClassNames() {
+    let classNames = "pn-tablist";
+    if (this.stackedicons)
+      classNames += " stacked";
+    return classNames;
+  }
+  render() {
+    return (h(Host, { role: "tablist", "aria-label": "tablist", class: this.getClassNames() }, h("div", { class: "tablist" }, h("slot", null), h("div", { class: "line" }, h("div", { class: "active-line" }), h("div", { class: "hovered-line" }))), this.showScrollArrows && (h("div", { class: this.scrollArrowClasses }, h("button", { class: "arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.414 12l7.293-7.293-1.414-1.414L6.586 12l8.707 8.707 1.414-1.414L9.414 12z" }))), h("button", { class: "arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.707 3.293L17.414 12l-8.707 8.707-1.414-1.414L14.586 12 7.293 4.707l1.414-1.414z" })))))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "value": ["valueWatcher"],
+    "showScrollArrows": ["scrollHandler"]
+  }; }
+  static get style() { return pnTablistCss; }
+};
+PnTablist$1 = /*@__PURE__*/ proxyCustomElement(PnTablist$1, [4, "pn-tablist", {
+    "value": [1025],
+    "stackedicons": [4],
+    "tabElement": [32],
+    "showScrollArrows": [32],
+    "scrollArrowClasses": [32]
+  }, [[0, "setactivetab", "setActiveTabHandler"], [9, "resize", "handleResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-tablist"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-tablist":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnTablist$1);
+      }
+      break;
+  } });
+}
+
+const PnTablist = PnTablist$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnTablist, defineCustomElement };

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

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

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

@@ -0,0 +1,181 @@
+import { HTMLElement, forceUpdate, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { a as allIllustrations } from './illustrations.js';
+import { d as defineCustomElement$2 } from './pn-icon2.js';
+
+const pnTileCss = "pn-tile{position:relative;font-size:1em;}pn-tile a.pn-tile-link{position:absolute;top:0;left:0;height:100%;width:100%;pointer-events:none;opacity:0}pn-tile .pn-tile{border:0.1rem solid #D3CECB;outline:none;background:white;-webkit-box-shadow:0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);box-shadow:0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center;padding:1.5em;padding:min(7%, 1.5em);word-break:break-word;text-decoration:none;border-radius:0.8rem;-webkit-transition:background 0.2s linear, border 0.1s linear, -webkit-box-shadow 0.1s cubic-bezier(0.6, 0, 0.2, 1) 0.1s;transition:background 0.2s linear, border 0.1s linear, -webkit-box-shadow 0.1s cubic-bezier(0.6, 0, 0.2, 1) 0.1s;transition:box-shadow 0.1s cubic-bezier(0.6, 0, 0.2, 1) 0.1s, background 0.2s linear, border 0.1s linear;transition:box-shadow 0.1s cubic-bezier(0.6, 0, 0.2, 1) 0.1s, background 0.2s linear, border 0.1s linear, -webkit-box-shadow 0.1s cubic-bezier(0.6, 0, 0.2, 1) 0.1s;position:relative;overflow:hidden;text-align:left;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;height:100%}pn-tile .pn-tile.vertical,pn-tile .pn-tile.simple{text-align:center}pn-tile .pn-tile.vertical h3,pn-tile .pn-tile.simple h3{font-size:1.5em;font-size:clamp(1em, calc(var(--w) * 1.4), 1.5em)}pn-tile .pn-tile.vertical .tile-slot,pn-tile .pn-tile.simple .tile-slot{font-size:1em;font-size:clamp(1.2rem, var(--w), 1em)}pn-tile .pn-tile.vertical>*,pn-tile .pn-tile.simple>*{margin:0.5em 0}pn-tile .pn-tile.simple{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}pn-tile .pn-tile.simple .tile-slot{display:none}pn-tile .pn-tile.simple h3>pn-icon{margin-left:0.1em;vertical-align:bottom}pn-tile .pn-tile.simple>*{margin:0.5em}pn-tile .pn-tile.simple>.text-cont{margin:0.5em}pn-tile .pn-tile.simple>svg,pn-tile .pn-tile.simple>.tile-illustration-slot{max-width:clamp(3em, 70%, 10em)}pn-tile .pn-tile.simple>svg,pn-tile .pn-tile.simple>.tile-illustration-slot,pn-tile .pn-tile.simple>.text-cont{-ms-flex:auto;flex:auto}pn-tile .pn-tile>*{margin:0.5em;z-index:2}pn-tile .pn-tile>svg,pn-tile .pn-tile>.tile-illustration-slot{width:100%;max-width:8em;-ms-flex:0.5 3 calc(calc(32rem - 100%) * 999);flex:0.5 3 calc(calc(32rem - 100%) * 999);z-index:2}pn-tile .pn-tile>.tile-illustration-slot{max-width:13em}pn-tile .pn-tile>.tile-illustration-slot>*{width:100%;display:block}pn-tile .pn-tile>.text-cont{-ms-flex:1 1 calc(calc(32rem - 100%) * 999);flex:1 1 calc(calc(32rem - 100%) * 999)}pn-tile .pn-tile h3{color:#005D92;font-size:1.5em}pn-tile .pn-tile .tile-slot{color:#5E554A;margin-top:0.25em}pn-tile a:focus+.pn-tile{-webkit-box-shadow:0 0 0 0.3rem white, 0 0 0 0.6rem #005D92;box-shadow:0 0 0 0.3rem white, 0 0 0 0.6rem #005D92}pn-tile a:focus+.pn-tile,pn-tile .pn-tile:hover{background:#EFFBFF}pn-tile .pn-tile:hover,pn-tile a:focus+.pn-tile{border:0.1rem solid #8EDDF9}pn-tile .pn-tile:hover.vertical .tile-circle,pn-tile .pn-tile:hover.simple .tile-circle,pn-tile a:focus+.pn-tile.vertical .tile-circle,pn-tile a:focus+.pn-tile.simple .tile-circle{-webkit-transform:translate(-50%, -90%);transform:translate(-50%, -90%);-webkit-transform:translate(-50%, calc(var(--w) * 2 - 90%));transform:translate(-50%, calc(var(--w) * 2 - 90%));opacity:1}pn-tile .pn-tile .tile-circle{position:absolute;top:0;left:50%;width:40em;height:40em;margin:0;background-color:#005D92;border-radius:50%;z-index:1;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);-webkit-transition:opacity 0.4s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);transition:opacity 0.4s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.4s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.4s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);opacity:0}pn-tile .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:#005D92;-webkit-transform:translate(-50%, -50%) scale(0);transform:translate(-50%, -50%) scale(0);opacity:0.05}@-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}}";
+
+let Pntile = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** The rel attribute of the link */
+    this.rel = "noopener";
+    /** You can pass an illustration name, but if you want to pass your own image you can add an image as a slot with the name of "illustration", check the "tile with slot" story. */
+    this.illustration = null;
+    /** This is to keep track of whether the tile has a description or just a title */
+    this.simple = false;
+    this.emInPx = 16;
+    this.titleEl = null;
+    //@ts-ignore
+    this.checkCardSize = new ResizeObserver(cards => {
+      const getCardWidth = (width) => {
+        // CardWidth is the em equivalent to 10% of the width of the card
+        const cardWidth = (width * 0.1) / this.emInPx;
+        return `${cardWidth}em`;
+      };
+      cards.forEach((card) => {
+        const width = card.contentRect.width;
+        card.target.classList.toggle('vertical', width < this.remToPx(31.99));
+        requestAnimationFrame(() => {
+          card.target.style.setProperty('--w', getCardWidth(width));
+        });
+      });
+    });
+    /*---------------------------------------UTILS-------------------------------------------*/
+    this.longpress = false;
+  }
+  setIllustration() {
+    const illustrationElement = this.hostElement.querySelector('.tile-illustration');
+    if (!this.illustration) {
+      illustrationElement.remove();
+      return;
+    }
+    const illustration = (allIllustrations[this.illustration]);
+    illustrationElement.outerHTML = illustration;
+  }
+  componentWillLoad() {
+    const slottedIllustration = this.hostElement.querySelector('[slot="illustration"]');
+    this.illustration = slottedIllustration ? null : this.illustration;
+  }
+  componentDidLoad() {
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
+    mo.observe(this.hostElement, { childList: true });
+    this.setIllustration();
+    const cardEl = this.hostElement.querySelector('.pn-tile');
+    const linkEl = this.hostElement.querySelector('.pn-tile-link');
+    this.checkCardSize.observe(cardEl);
+    this.clickHandler([linkEl, cardEl], (e) => this.ripple(e, cardEl));
+    this.simple = !this.hostElement.querySelector('.tile-slot').textContent.trim();
+    this.emInPx = parseFloat(window.getComputedStyle(this.hostElement).fontSize);
+  }
+  remToPx(rem) {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+  }
+  ripple(e, el) {
+    if (!e.isTrusted)
+      return;
+    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.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);
+  }
+  clickHandler(els, callback) {
+    const events = ['mouseup', 'mousedown'];
+    const excludedElements = ['pn-button', 'button', 'a', 'input', 'pn-checkbox', 'pn-radio-button'];
+    els.forEach(el => {
+      if (el.tagName === 'A') {
+        el.addEventListener('click', (e) => {
+          callback(e);
+        });
+      }
+      else {
+        events.forEach((e) => {
+          el.addEventListener(e, (event) => {
+            // Stop the tile-link from being pressed if the user clicks a link or a button that exists on the tile
+            // This is to allow the consumer to add external actions to the tile
+            const isExcludedElement = excludedElements.some((el) => event.target.closest(el));
+            if (isExcludedElement)
+              return;
+            if (event.type === 'mousedown') {
+              this.longpress = false;
+              this.timer = setTimeout(() => this.longpress = true, 200);
+            }
+            if (event.type === 'mouseup') {
+              clearTimeout(this.timer);
+              // Stop clicks in case of:
+              // * Long press
+              // * Right mouse button is used
+              if (this.longpress || event.button === 2)
+                return;
+              const link = event.target.closest('pn-tile').querySelector('a');
+              event.preventDefault();
+              callback(event);
+              // Don't refocus if already in focus
+              if (!link.matches(':focus'))
+                link.focus();
+              // If the tile or link was clicked when the ctrl key, cmd key or middle mouse button
+              // was pressed, open in a new window
+              if (event.ctrlKey || event.metaKey || event.button === 1) {
+                window.open(link.getAttribute('href'), "_blank");
+                return;
+              }
+              link.click();
+            }
+          });
+        });
+      }
+    });
+  }
+  /*---------------------------------------/UTILS-------------------------------------------*/
+  getClassNames() {
+    let classNames = 'pn-tile ';
+    if (this.simple)
+      classNames += 'simple ';
+    return classNames;
+  }
+  render() {
+    const linkAttributes = {
+      href: this.url,
+      target: this.target,
+      rel: (!this.rel && this.target === "_blank") ? "noopener" : this.rel
+    };
+    return (h(Host, null, h("a", Object.assign({ class: "pn-tile-link" }, linkAttributes), this.label), h("div", { class: this.getClassNames() }, h("div", { class: "tile-circle" }), h("div", { class: "tile-illustration" }), !this.illustration &&
+      h("div", { class: "tile-illustration-slot" }, h("slot", { name: "illustration" })), h("div", { class: "text-cont" }, h("h3", null, this.label, (this.target === "_blank") ? (h("pn-icon", { symbol: "open-in-new", small: true, color: "blue700" })) : null), h("div", { class: "tile-slot" }, h("slot", null))))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnTileCss; }
+};
+Pntile = /*@__PURE__*/ proxyCustomElement(Pntile, [4, "pn-tile", {
+    "label": [1],
+    "url": [1],
+    "target": [1],
+    "rel": [1],
+    "illustration": [1025],
+    "simple": [32],
+    "checkCardSize": [32],
+    "longpress": [32],
+    "timer": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-tile", "pn-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-tile":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Pntile);
+      }
+      break;
+    case "pn-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PnTile = Pntile;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnTile, defineCustomElement };

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

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

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

@@ -0,0 +1,95 @@
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './pn-icon2.js';
+
+const pnToastCss = "pn-toast.pn-toast{color:#000;padding:1em;border:0.1rem solid #005D92;border-radius:0.8rem;outline:none;font-size:1em;font-weight:400;background:#E0F8FF;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:start;align-items:flex-start;opacity:1;visibility:visible;-webkit-transition:visibility 0s linear 0s, opacity 0.35s, -webkit-box-shadow 0.2s;transition:visibility 0s linear 0s, opacity 0.35s, -webkit-box-shadow 0.2s;transition:visibility 0s linear 0s, opacity 0.35s, box-shadow 0.2s;transition:visibility 0s linear 0s, opacity 0.35s, box-shadow 0.2s, -webkit-box-shadow 0.2s;z-index:10;}pn-toast.pn-toast[data-hidden]{opacity:0;visibility:hidden;-webkit-transition:visibility 0s linear 0.35s, opacity 0.35s, -webkit-box-shadow 0.2s;transition:visibility 0s linear 0.35s, opacity 0.35s, -webkit-box-shadow 0.2s;transition:visibility 0s linear 0.35s, opacity 0.35s, box-shadow 0.2s;transition:visibility 0s linear 0.35s, opacity 0.35s, box-shadow 0.2s, -webkit-box-shadow 0.2s}pn-toast.pn-toast pn-icon svg path{fill:#005D92;-webkit-transition:fill 0.3s;transition:fill 0.3s}pn-toast.pn-toast>.content{margin-right:0.5em;-ms-flex-item-align:center;align-self:center}pn-toast.pn-toast>pn-icon{margin-right:0.5em}pn-toast.pn-toast button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.1em;font-size:1.2em;margin-left:auto;outline:none;-webkit-transition:background 0.2s, -webkit-box-shadow 0.2s;transition:background 0.2s, -webkit-box-shadow 0.2s;transition:background 0.2s, box-shadow 0.2s;transition:background 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}pn-toast.pn-toast button:hover{background:#8EDDF9}pn-toast.pn-toast button:focus{background:#8EDDF9;-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-toast.pn-toast.pn-toast-warning{border:0.1rem solid #A70707;background:#FDEFEE}pn-toast.pn-toast.pn-toast-warning button:hover{background:#FBC2C1}pn-toast.pn-toast.pn-toast-warning button:focus{background:#FBC2C1;-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-toast.pn-toast.pn-toast-warning pn-icon svg path{fill:#A70707;-webkit-transition:fill 0.3s;transition:fill 0.3s}pn-toast.pn-toast.pn-toast-success{border:0.1rem solid #005E41;background:#DCF6E7}pn-toast.pn-toast.pn-toast-success button:focus{background:#ABE3BB;-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-toast.pn-toast.pn-toast-success button:hover{background:#ABE3BB}pn-toast.pn-toast.pn-toast-success pn-icon svg path{fill:#005E41;-webkit-transition:fill 0.3s;transition:fill 0.3s}pn-toast.pn-toast.pn-toast-temporary{-webkit-box-shadow:0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);box-shadow:0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13)}";
+
+let Pntoast = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.close = createEvent(this, "close", 7);
+    /**  set left icon */
+    this.icon = null;
+    /** Show close button? */
+    this.closable = true;
+    /** Temporarily visible toast, the time of which is determined by the length of your message. Close button will be shown automatically if the time shown exceeds 6s. */
+    this.temporary = false;
+    /** If you want to control visibility with your own data you can bind to this attribute */
+    this.hidden = false;
+  }
+  componentDidLoad() {
+    if (this.temporary) {
+      const content = this.hostElement.querySelector('.content');
+      const readingTime = content.textContent.split(' ').length / 4 * 1000; //Average read speed is 4wps.
+      this.hidden = true;
+      this.timer = readingTime > 3000 ? readingTime : 3000; //For short messages, default to 3s.
+      if (this.manualDuration)
+        this.timer = this.manualDuration; //Allow consumers to manually adjust duration if needed.
+      this.closable = this.timer > 6000; //If duration is longer than 6s, allow the user to close manually.
+    }
+  }
+  visibilityHandler() {
+    if (!this.temporary)
+      return;
+    if (this.timeout && this.hidden) {
+      clearTimeout(this.timeout);
+      return;
+    }
+    this.timeout = setTimeout(() => {
+      this.closeToast();
+    }, this.timer);
+  }
+  closeToast() {
+    this.hidden = true;
+    this.close.emit();
+  }
+  getClassNames() {
+    let classNames = "pn-toast ";
+    if (this.appearance)
+      classNames += `pn-toast-${this.appearance} `;
+    if (this.temporary)
+      classNames += `pn-toast-temporary `;
+    return classNames;
+  }
+  render() {
+    return (h(Host, { "data-hidden": this.hidden, class: this.getClassNames() }, this.icon && h("pn-icon", { symbol: this.icon }), h("div", { class: "content" }, h("slot", null)), this.closable &&
+      h("button", { onClick: () => this.closeToast(), type: "button", title: "close", "aria-label": "close" }, h("pn-icon", { symbol: "close", small: true }))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "hidden": ["visibilityHandler"]
+  }; }
+  static get style() { return pnToastCss; }
+};
+Pntoast = /*@__PURE__*/ proxyCustomElement(Pntoast, [4, "pn-toast", {
+    "appearance": [1],
+    "icon": [1],
+    "closable": [4],
+    "temporary": [4],
+    "manualDuration": [2, "manual-duration"],
+    "hidden": [1028],
+    "timeout": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-toast", "pn-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-toast":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Pntoast);
+      }
+      break;
+    case "pn-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PnToast = Pntoast;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnToast, defineCustomElement };

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

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