@postnord/pn-marketweb-components 2.0.3-beta4 → 2.0.5

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

@@ -0,0 +1,164 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, a as Host, g as getElement } from './index-1b1c55fe.js';
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+  static get watchers() { return {
+    "value": ["valueWatcher"],
+    "showScrollArrows": ["scrollHandler"]
+  }; }
+};
+PnTablist.style = pnTablistCss;
+
+export { PnTablist as pn_tablist };

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

@@ -0,0 +1,147 @@
+import { r as registerInstance, f as forceUpdate, h, a as Host, g as getElement } from './index-1b1c55fe.js';
+import { a as allIllustrations } from './illustrations-3ebd7a9b.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 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** 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 getElement(this); }
+};
+Pntile.style = pnTileCss;
+
+export { Pntile as pn_tile };

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

@@ -0,0 +1,63 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-1b1c55fe.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 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+  static get watchers() { return {
+    "hidden": ["visibilityHandler"]
+  }; }
+};
+Pntoast.style = pnToastCss;
+
+export { Pntoast as pn_toast };

package/umd/modules/@postnord/web-components/esm/pn-toggle-switch.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-1b1c55fe.js';
+
+const pnToggleSwitchCss = "pn-toggle-switch{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;position:relative;font-size:3rem}pn-toggle-switch .pn-toggle-switch{width:100%;height:100%;opacity:0;margin:0;position:absolute}.pn-toggle{width:1em;height:1em;padding:0.2em;position:relative;cursor:pointer;-webkit-box-sizing:content-box;box-sizing:content-box;margin-right:1.4em;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.5, 0, 0.5, 1);transition:-webkit-transform 0.2s cubic-bezier(0.5, 0, 0.5, 1);transition:transform 0.2s cubic-bezier(0.5, 0, 0.5, 1);transition:transform 0.2s cubic-bezier(0.5, 0, 0.5, 1), -webkit-transform 0.2s cubic-bezier(0.5, 0, 0.5, 1);-webkit-tap-highlight-color:transparent}.pn-toggle .bg{position:absolute;top:0;left:0;width:175%;height:100%;z-index:0;border-radius:2em;-webkit-transition:width 0.2s cubic-bezier(0.5, 0, 0.5, 1), background-color 0.2s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.5, 0, 0.5, 1), background-color 0.2s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.5, 0, 0.5, 1), box-shadow 0.1s, background-color 0.2s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.1s;transition:width 0.2s cubic-bezier(0.5, 0, 0.5, 1), box-shadow 0.1s, background-color 0.2s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.1s, -webkit-box-shadow 0.1s}.pn-toggle>.circle{width:1em;height:1em;background:white;-webkit-box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.1);box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.1);border-radius:50%;-webkit-transition:inherit;transition:inherit;z-index:1;position:relative;padding:0.1em}.pn-toggle>.circle>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);margin:-0.1em}.pn-toggle pn-spinner{opacity:0;-webkit-transition:opacity 0.15s cubic-bezier(0.5, 0, 0.5, 1);transition:opacity 0.15s cubic-bezier(0.5, 0, 0.5, 1);width:100%;height:100%}pn-toggle-switch .pn-toggle-switch{}pn-toggle-switch .pn-toggle-switch+.pn-toggle .bg{background:#969087}pn-toggle-switch .pn-toggle-switch:focus+.pn-toggle .bg,pn-toggle-switch .pn-toggle-switch:active+.pn-toggle .bg{-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-toggle-switch .pn-toggle-switch:hover+.pn-toggle .bg{background:#5E554A}pn-toggle-switch .pn-toggle-switch:hover:checked+.pn-toggle .bg{background:#0D234B;opacity:1}pn-toggle-switch .pn-toggle-switch:indeterminate+.pn-toggle{-webkit-transform:translateX(50%);transform:translateX(50%)}pn-toggle-switch .pn-toggle-switch:indeterminate+.pn-toggle .bg{width:100%}pn-toggle-switch .pn-toggle-switch:indeterminate+.pn-toggle pn-spinner{opacity:1;-webkit-transition-delay:0.3s;transition-delay:0.3s}pn-toggle-switch .pn-toggle-switch:checked+.pn-toggle .bg{background:#005D92}pn-toggle-switch .pn-toggle-switch:checked+.pn-toggle>.circle{-webkit-transform:translateX(100%);transform:translateX(100%)}pn-toggle-switch .pn-toggle-switch:disabled+.pn-toggle{cursor:not-allowed}pn-toggle-switch .pn-toggle-switch:disabled+.pn-toggle .bg{-webkit-box-shadow:none;box-shadow:none;opacity:0.5}pn-toggle-switch .pn-toggle-switch:disabled:hover+.pn-toggle .bg{opacity:0.5;background:#969087}pn-toggle-switch .pn-toggle-switch:disabled:hover:checked+.pn-toggle .bg{background:#005D92}";
+
+let PnToggleSwitch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.checked = false;
+    this.disabled = false;
+    this.indeterminate = false;
+    this.name = null;
+  }
+  componentDidUpdate() {
+    this.checkIndeterminateState();
+  }
+  componentDidLoad() {
+    this.checkIndeterminateState();
+  }
+  checkIndeterminateState() {
+    const toggleSwitch = this.hostElement.querySelector(`#${this.toggleid}`);
+    if (toggleSwitch)
+      toggleSwitch.indeterminate = this.indeterminate;
+  }
+  render() {
+    return (h(Host, null, h("input", { id: this.toggleid, name: this.name || this.toggleid, type: "checkbox", checked: this.checked, class: "pn-toggle-switch", disabled: this.disabled }), h("label", { htmlFor: this.toggleid, class: "pn-toggle" }, h("div", { class: "bg" }), h("div", { class: "circle" }, h("pn-spinner", null)))));
+  }
+  get hostElement() { return getElement(this); }
+};
+PnToggleSwitch.style = pnToggleSwitchCss;
+
+export { PnToggleSwitch as pn_toggle_switch };

package/umd/modules/@postnord/web-components/esm/pn-tooltip.entry.js

@@ -0,0 +1,109 @@
+import { r as registerInstance, h, g as getElement } from './index-1b1c55fe.js';
+
+const pnTooltipCss = "pn-tooltip{display:inline-block;font-size:1em}button.pn-tooltip{background:none;outline:none;border:none;position:relative;padding:0;border-radius:50%;-webkit-transition:background 0.15s cubic-bezier(0.5, 0.5, 0.2, 1), -webkit-box-shadow 0.15s cubic-bezier(0.5, 0.5, 0.2, 1);transition:background 0.15s cubic-bezier(0.5, 0.5, 0.2, 1), -webkit-box-shadow 0.15s cubic-bezier(0.5, 0.5, 0.2, 1);transition:box-shadow 0.15s cubic-bezier(0.5, 0.5, 0.2, 1), background 0.15s cubic-bezier(0.5, 0.5, 0.2, 1);transition:box-shadow 0.15s cubic-bezier(0.5, 0.5, 0.2, 1), background 0.15s cubic-bezier(0.5, 0.5, 0.2, 1), -webkit-box-shadow 0.15s cubic-bezier(0.5, 0.5, 0.2, 1);cursor:pointer;font-size:inherit}button.pn-tooltip:focus{-webkit-box-shadow:0 0 0 0.1rem #FFFFFF, 0 0 0 0.3rem #005D92;box-shadow:0 0 0 0.1rem #FFFFFF, 0 0 0 0.3rem #005D92;background:#E0F8FF}button.pn-tooltip:hover{background:#E0F8FF}button.pn-tooltip.tooltip-white:focus,button.pn-tooltip.tooltip-white:hover{background:#0D234B}button.pn-tooltip>.pn-tooltip-content{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.5, 0.5, 0.2, 1);transition:-webkit-transform 0.15s cubic-bezier(0.5, 0.5, 0.2, 1);transition:transform 0.15s cubic-bezier(0.5, 0.5, 0.2, 1);transition:transform 0.15s cubic-bezier(0.5, 0.5, 0.2, 1), -webkit-transform 0.15s cubic-bezier(0.5, 0.5, 0.2, 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}button.pn-tooltip>pn-icon{position:relative;pointer-events:none}button.pn-tooltip>pn-icon: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.14s;transition-delay:0.14s;-webkit-transform-origin:bottom left;transform-origin:bottom left;pointer-events:none}button.pn-tooltip.pn-tooltip-downwards .pn-tooltip-content{bottom:unset;top:calc(100% + 0.75em);-webkit-transform-origin:top left;transform-origin:top left}button.pn-tooltip.pn-tooltip-downwards pn-icon: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}button.pn-tooltip[data-open] .pn-tooltip-content{-webkit-transition-delay:0.1s;transition-delay:0.1s}button.pn-tooltip[data-open] pn-icon:before{-webkit-transform:scale(1) translateX(-50%);transform:scale(1) translateX(-50%);-webkit-transition-delay:0s;transition-delay:0s;pointer-events:auto}";
+
+let PnTooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.warning = false;
+    this.color = 'blue700';
+    this.downwards = false;
+    this.open = false;
+    this.deltaX = '0';
+  }
+  componentWillLoad() {
+    const appearances = ['warning', 'white'];
+    this.color = appearances.includes(this.color) ? this.color : 'blue700';
+  }
+  componentDidLoad() {
+    this.initialize();
+    this.eventHandler();
+  }
+  initialize() {
+    this.pnTooltipContent = this.hostElement.querySelector('.pn-tooltip-content');
+  }
+  openHandler() {
+    if (this.open) {
+      this.checkPosition();
+      return;
+    }
+    this.setTransform();
+  }
+  eventHandler() {
+    const openEvents = ['mouseover', 'focus'];
+    const closeEvents = ['mouseleave', 'blur'];
+    const eventListeners = ['click', ...openEvents, ...closeEvents];
+    eventListeners.forEach((e) => {
+      this.hostElement.querySelector('.pn-tooltip').addEventListener(e, (event) => {
+        // Should toggle?
+        if (event.type === 'click') {
+          this.toggle();
+          return;
+        }
+        // Should open?
+        if (openEvents.includes(event.type)) {
+          if (event.type === 'mouseover' && this.timeout)
+            clearTimeout(this.timeout);
+          this.open = true;
+          return;
+        }
+        // Should close?
+        if (closeEvents.includes(event.type)) {
+          if (event.type === 'mouseleave') {
+            this.timeout = setTimeout(() => this.open = false, 800);
+          }
+          else {
+            this.open = false;
+          }
+        }
+      });
+    });
+  }
+  setTransform() {
+    this.pnTooltipContent.style.transform = `scale(${Number(this.open)}) translateX(-50%) translateX(${this.deltaX}px)`;
+  }
+  checkPosition() {
+    this.pnTooltipContent.style.transition = 'none';
+    this.pnTooltipContent.style.transform = 'scale(1) translateX(-50%)';
+    this.downwards = false;
+    requestAnimationFrame(() => {
+      const { x, y, right } = this.pnTooltipContent.getBoundingClientRect();
+      const extraMargin = 8;
+      this.deltaX = '0';
+      this.downwards = y < 0;
+      this.pnTooltipContent.style.transform = '';
+      if (x < 0)
+        this.deltaX = `${x * -1 + extraMargin}`;
+      if (right > window.innerWidth)
+        this.deltaX = `${window.innerWidth - right - extraMargin}`;
+      requestAnimationFrame(() => {
+        this.pnTooltipContent.style.transition = '';
+        this.setTransform();
+      });
+    });
+  }
+  getSymbol() {
+    return this.warning ? 'alert-info-circle' : 'alert-question-circle';
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+  getClassNames() {
+    let classNames = 'pn-tooltip ';
+    if (this.color === 'white')
+      classNames += 'tooltip-white ';
+    if (this.downwards)
+      classNames += 'pn-tooltip-downwards ';
+    return classNames;
+  }
+  render() {
+    return (h("button", { class: this.getClassNames(), "data-open": this.open }, h("pn-icon", { symbol: this.getSymbol(), color: this.color }), h("div", { class: "pn-tooltip-content" }, h("slot", null))));
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["openHandler"]
+  }; }
+};
+PnTooltip.style = pnTooltipCss;
+
+export { PnTooltip as pn_tooltip };