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

package/umd/modules/@postnord/web-components/cjs/pn-icon-grid.cjs.entry.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+const icons = require('./icons-76ebc27b.js');
+const colors = require('./colors-bb509869.js');
+
+const pnIconGridCss = "#sb-addon-centered-wrapper{background-color:#f2f2f2}.sb-show-main{background-color:#f2f2f2}.icon-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:5rem auto;width:100%;display:grid;grid-template-columns:repeat(auto-fill, 17rem);grid-gap:5rem;max-width:120rem}.icon-grid .icon{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:2.5rem;background-color:#f2f2f2;-webkit-box-shadow:0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);box-shadow:0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);height:14rem;position:relative;cursor:pointer;overflow:hidden}.icon-grid .icon:after{content:\"\";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;-webkit-transition:all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}.icon-grid .icon.active{-webkit-box-shadow:0 15px 20px rgba(0, 0, 0, 0.02);box-shadow:0 15px 20px rgba(0, 0, 0, 0.02)}.icon-grid .icon.active:after{-webkit-box-shadow:inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15);box-shadow:inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15)}.icon-grid .icon span{position:absolute;top:1.5rem;right:1.5rem;color:#5E554A;font-size:0.9em}.icon-grid .icon p{position:absolute;padding:0 0.5rem 1rem;text-align:center;bottom:0.5rem;font-size:0.9em;color:#5E554A;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease-in-out;transition:opacity 0.2s ease, -webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, opacity 0.2s ease;transition:transform 0.3s ease-in-out, opacity 0.2s ease, -webkit-transform 0.3s ease-in-out}.icon-grid .icon p.copy{-webkit-transform:translateY(3.5rem);transform:translateY(3.5rem);opacity:0}.icon-grid .icon:hover p.symbol-name{-webkit-transform:translateY(3.5rem);transform:translateY(3.5rem);opacity:0}.icon-grid .icon:hover p.copy{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}";
+
+let PnIconGrid = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.small = false;
+    this.color = colors.colors["grey-08-night"];
+    this.activeSymbol = null;
+  }
+  async copySymbolName(symbolName) {
+    if (!navigator.clipboard) {
+      // Clipboard API not available
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(`<pn-icon symbol="${symbolName}" small="${this.small}" color="${this.color}" />`);
+      this.activeSymbol = symbolName;
+      setTimeout(() => {
+        this.activeSymbol = null;
+      }, 3000);
+    }
+    catch (err) {
+      console.error("Failed to copy!", err);
+    }
+  }
+  render() {
+    return (index.h("div", { class: "icon-grid" }, Object.keys(icons.allIcons).map(symbolName => (index.h("div", { class: symbolName === this.activeSymbol ? "active icon" : "icon", onClick: () => this.copySymbolName(symbolName) }, symbolName === this.activeSymbol && (index.h("span", { class: "copied" }, "Copied")), index.h("pn-icon", { symbol: symbolName, color: this.color, small: this.small }), index.h("p", { class: "symbol-name" }, symbolName), index.h("p", { class: "copy" }, "Click to copy"))))));
+  }
+};
+PnIconGrid.style = pnIconGridCss;
+
+exports.pn_icon_grid = PnIconGrid;

package/umd/modules/@postnord/web-components/cjs/pn-icon.cjs.entry.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+const icons = require('./icons-76ebc27b.js');
+const colors = require('./colors-bb509869.js');
+
+const pnIconCss = "pn-icon{display:inline-block;vertical-align:top}pn-icon svg{display:block;height:1.5em;width:1.5em}pn-icon.small svg{height:1em;width:1em}";
+
+let PnIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** The name of the icon you want to use */
+    this.symbol = null;
+    /** Medium is default but you can pass "small" for a 16x16 icon */
+    this.small = false;
+    /** Check for the available colors in the knobs panel in the story */
+    this.color = "black";
+  }
+  getIcon() {
+    // The replace is just setting the fill attribute on the SVG to the color passed to the component
+    return (icons.allIcons[this.symbol] || "").replace(/#000/g, colors.colors[this.color]);
+  }
+  render() {
+    return (index.h(index.Host, { class: `pn-icon ${this.small ? "small" : ""}`, innerHTML: this.getIcon() }));
+  }
+};
+PnIcon.style = pnIconCss;
+
+exports.pn_icon = PnIcon;

package/umd/modules/@postnord/web-components/cjs/pn-illustration-grid.cjs.entry.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+const illustrations = require('./illustrations-96acc117.js');
+const colors = require('./colors-bb509869.js');
+
+const pnIllustrationGridCss = "#sb-addon-centered-wrapper{background-color:#f2f2f2}.sb-show-main{background-color:#f2f2f2}.illustration-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:5rem auto;width:100%;display:grid;grid-template-columns:repeat(auto-fill, 19rem);grid-gap:5rem;max-width:120rem}.illustration-grid .illustration{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:2.5rem;background-color:#f2f2f2;-webkit-box-shadow:0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);box-shadow:0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);height:16rem;position:relative;cursor:pointer;overflow:hidden}.illustration-grid .illustration svg{height:8rem}.illustration-grid .illustration:after{content:\"\";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;-webkit-transition:all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}.illustration-grid .illustration.active{-webkit-box-shadow:0 15px 20px rgba(0, 0, 0, 0.02);box-shadow:0 15px 20px rgba(0, 0, 0, 0.02)}.illustration-grid .illustration.active:after{-webkit-box-shadow:inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15);box-shadow:inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15)}.illustration-grid .illustration span{position:absolute;top:1.5rem;right:1.5rem;color:#5E554A;font-size:0.9em}.illustration-grid .illustration p{position:absolute;padding:0 0.5rem 1rem;text-align:center;bottom:0.5rem;font-size:0.9em;color:#5E554A;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease-in-out;transition:opacity 0.2s ease, -webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, opacity 0.2s ease;transition:transform 0.3s ease-in-out, opacity 0.2s ease, -webkit-transform 0.3s ease-in-out}.illustration-grid .illustration p.copy{-webkit-transform:translateY(3.5rem);transform:translateY(3.5rem);opacity:0}.illustration-grid .illustration:hover p.illustration-name{-webkit-transform:translateY(3.5rem);transform:translateY(3.5rem);opacity:0}.illustration-grid .illustration:hover p.copy{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}";
+
+let PnIllustrationGrid = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.size = "medium";
+    this.color = colors.colors["postnord-default"];
+    this.activeIllustration = null;
+  }
+  async copyIllustrationName(illustrationName) {
+    if (!navigator.clipboard) {
+      // Clipboard API not available
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(`<pn-illustration illustration="${illustrationName}" />`);
+      this.activeIllustration = illustrationName;
+      setTimeout(() => {
+        this.activeIllustration = null;
+      }, 3000);
+    }
+    catch (err) {
+      console.error("Failed to copy!", err);
+    }
+  }
+  render() {
+    return (index.h("div", { class: "illustration-grid" }, Object.keys(illustrations.allIllustrations).map(illustrationName => (index.h("div", { class: illustrationName === this.activeIllustration
+        ? "active illustration"
+        : "illustration", onClick: () => this.copyIllustrationName(illustrationName) }, illustrationName === this.activeIllustration && (index.h("span", { class: "copied" }, "Copied")), index.h("pn-illustration", { illustration: illustrationName }), index.h("p", { class: "illustration-name" }, illustrationName), index.h("p", { class: "copy" }, "Click to copy"))))));
+  }
+};
+PnIllustrationGrid.style = pnIllustrationGridCss;
+
+exports.pn_illustration_grid = PnIllustrationGrid;

package/umd/modules/@postnord/web-components/cjs/pn-illustration.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+const illustrations = require('./illustrations-96acc117.js');
+
+const pnIllustrationCss = "pn-icon{display:inline-block;vertical-align:top}pn-icon svg{display:block}";
+
+let PnIllustration = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.illustration = null;
+  }
+  render() {
+    return (index.h("div", { class: "pn-illustration", innerHTML: illustrations.allIllustrations[this.illustration] }));
+  }
+};
+PnIllustration.style = pnIllustrationCss;
+
+exports.pn_illustration = PnIllustration;

package/umd/modules/@postnord/web-components/cjs/pn-input.cjs.entry.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+
+const pnInputCss = "pn-input{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}pn-input input{padding:0.75em;font-size:1em;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:0.8rem;border:0.1rem solid #5E554A;-webkit-transition:border 0.15s, -webkit-box-shadow 0.15s;transition:border 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, border 0.15s;transition:box-shadow 0.15s, border 0.15s, -webkit-box-shadow 0.15s;color:#000000;width:100%}pn-input input::-webkit-input-placeholder{color:#969087;font-weight:normal}pn-input input::-moz-placeholder{color:#969087;font-weight:normal}pn-input input:-ms-input-placeholder{color:#969087;font-weight:normal}pn-input input::-ms-input-placeholder{color:#969087;font-weight:normal}pn-input input::placeholder{color:#969087;font-weight:normal}pn-input input:focus{border:0.1rem solid #005D92;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-input input:hover{border:0.1rem solid #00A0D6}pn-input input:disabled{background:#F3F2F2;border:none}pn-input>.input-container{position:relative}pn-input>.input-container>button{position:absolute;right:1.2rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#005D92;padding:0.6rem;border-radius:0.8rem;outline:none;-webkit-transition:border 0.1s, background 0.2s, color 0.1s;transition:border 0.1s, background 0.2s, color 0.1s;border:0.1rem solid transparent}pn-input>.input-container>button:focus{border:0.1rem solid #005D92}pn-input>.input-container>button:hover{background:#E0F8FF}pn-input>.input-container>button:active{background:#005D92;color:white}pn-input>.input-container>svg{position:absolute;right:0.75em;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:1.5em;width:1.5em;pointer-events:none}pn-input>.input-container>svg polyline{stroke-linecap:round;-webkit-transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86)}pn-input>.input-container>svg.checkmark polyline{stroke:#005E41;stroke-dashoffset:23;stroke-dasharray:23}pn-input .label-container{margin-bottom:0.4rem;color:#5E554A;font-size:0.875em;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:end;align-items:flex-end}pn-input .label-container label{cursor:pointer;-webkit-transition:color 0.2s;transition:color 0.2s}.label-container label.char-count{-ms-flex-negative:0;flex-shrink:0;padding-left:0.5em}pn-input small{font-size:0.75em;font-size:max(.6em, 1.2rem);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:-webkit-transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86), -webkit-transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);margin-top:0.5em;color:#5E554A}pn-input.error{color:#A70707}pn-input.error label{color:#A70707}pn-input.error small{color:#A70707}pn-input.error small>pn-icon{margin-right:0.25em}pn-input.error input{border:0.1rem solid #A70707}pn-input.error input:focus{border:0.1rem solid #A70707;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707}pn-input.error input:hover{border:0.1rem solid #F06365}pn-input.valid{color:#005E41}pn-input.valid .input-container>svg.checkmark polyline{stroke-dashoffset:0}pn-input.valid label{color:#005E41}pn-input.valid input{border:0.1rem solid #005E41}pn-input.valid input:focus{border:0.1rem solid #005E41;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005E41;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005E41}pn-input.valid input:hover{border:0.1rem solid #5EC584}pn-input.password input{padding-right:4em}pn-input.icon input{padding-right:2.3em}";
+
+let Pninput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.disabled = false;
+    /** Error message; will take precedence over helpertext if both are provided (applies invalid styles automatically) */
+    this.error = '';
+    /** Error state without message (If you want to control the error messaging on your own) */
+    this.invalid = false;
+    /** Text message placed underneath the input field */
+    this.helpertext = '';
+    /** Text label placed above the input field */
+    this.label = '';
+    this.placeholder = '';
+    this.inputid = `${Math.random()}`;
+    this.name = '';
+    this.required = null;
+    this.type = 'text';
+    this.autocomplete = '';
+    this.valid = null;
+    this.value = '';
+    /** The maximum number of characters the user should be able to add, also adds a visible counter */
+    this.maxlength = '';
+    this.showText = false;
+  }
+  getTextMessage() {
+    if (this.error)
+      return this.error;
+    if (this.helpertext)
+      return this.helpertext;
+    return null;
+  }
+  toggleTextVisibility() {
+    this.showText = !this.showText;
+  }
+  getInputType() {
+    let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email'];
+    return (types.includes(this.type) && !this.showText) ? this.type : 'text';
+  }
+  setVal(e) {
+    var _a;
+    const target = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)[0];
+    this.value = target.value;
+  }
+  getClassNames() {
+    let classNames = 'pn-input ';
+    if (this.error.length > 0 || this.invalid)
+      classNames += 'error ';
+    if (this.valid)
+      classNames += 'valid ';
+    if (this.type === 'password')
+      classNames += 'password ';
+    if (this.error || this.invalid || this.valid)
+      classNames += 'icon ';
+    return classNames;
+  }
+  render() {
+    return (index.h(index.Host, { class: this.getClassNames() }, (this.label || this.maxlength) &&
+      index.h("div", { class: "label-container" }, this.label && index.h("label", { htmlFor: this.inputid }, this.label), parseInt(this.maxlength) > 0 && index.h("label", { class: "char-count", htmlFor: this.inputid }, `${this.value.length}/${this.maxlength}`)), index.h("div", { class: "input-container" }, index.h("input", { type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onInput: (e) => this.setVal(e), maxlength: this.maxlength }), index.h("svg", { class: "checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })), this.type === 'password' && !this.disabled && index.h("button", { onClick: () => this.toggleTextVisibility() }, "Show")), this.getTextMessage() &&
+      index.h("small", null, this.error && index.h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }), this.getTextMessage())));
+  }
+};
+Pninput.style = pnInputCss;
+
+exports.pn_input = Pninput;

package/umd/modules/@postnord/web-components/cjs/pn-modal.cjs.entry.js

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+
+const pnModalCss = "pn-modal .pn-modal{position:fixed;bottom:50%;left:50%;width:95%;max-width:45em;max-height:85vh;border:0.1rem solid #F3F2F2;border-radius:0.8rem;-webkit-transform:translate(-50%, 60%);transform:translate(-50%, 60%);-webkit-box-shadow:0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);box-shadow:0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);background:#FFFFFF;z-index:999;-webkit-transition:none;transition:none;pointer-events:none;opacity:0;visibility:hidden;overflow-y:auto;-webkit-transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1)}pn-modal[data-open] .pn-modal{visibility:visible;opacity:1;pointer-events:auto;-webkit-transition:visibility 0s linear 0s, opacity 0.55s, -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0s, opacity 0.55s, -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0s, opacity 0.55s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0s, opacity 0.55s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}.pn-modal>.pn-modal-content{width:100%;padding:1.5em}.pn-modal>.pn-modal-close-button{position:absolute;right:1em;top:1em;outline:none;border:none;border-radius:50%;padding:0.3em;-webkit-transition:background 0.15s, -webkit-box-shadow 0.15s;transition:background 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, background 0.15s;transition:box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;cursor:pointer;background:#FFFFFF}.pn-modal>.pn-modal-close-button svg path{-webkit-transition:fill 0.15s;transition:fill 0.15s;pointer-events:none}.pn-modal>.pn-modal-close-button:hover,.pn-modal>.pn-modal-close-button:focus{background:#E0F8FF}.pn-modal>.pn-modal-close-button:focus{-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-modal>.pn-modal-close-button:active{background:#0D234B}.pn-modal>.pn-modal-close-button:active svg path{fill:#FFFFFF}pn-modal .pn-modal>[slot=buttons]{position:static;width:100%;background:white;border-top:0.1rem solid #D3CECB;padding:0.5em 1em;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}pn-modal .pn-modal>[slot=buttons]>*{margin:0.5em}pn-modal>.pn-modal-backdrop{position:fixed;width:120vw;height:120vh;top:-10vh;left:-10vw;background:#2D2013;opacity:0;z-index:9;visibility:hidden;-webkit-transition:visibility 0s linear 0.3s, opacity 0.3s;transition:visibility 0s linear 0.3s, opacity 0.3s}pn-modal[data-open] .pn-modal-backdrop{opacity:0.65;visibility:visible;-webkit-transition:visibility 0s linear 0s, opacity 0.3s;transition:visibility 0s linear 0s, opacity 0.3s}@media screen and (max-width: 30em){pn-modal .pn-modal{width:100%;max-height:95vh;bottom:0;-webkit-transform:translate(-50%, 10%);transform:translate(-50%, 10%);border-radius:0.8rem 0.8rem 0 0}pn-modal[data-open] .pn-modal{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}pn-modal .pn-modal>[slot=buttons]{-ms-flex-pack:center;justify-content:center}pn-modal .pn-modal>[slot=buttons]>*{-ms-flex:1 0 auto;flex:1 0 auto}}@supports ((position: -webkit-sticky) or (position: sticky)){pn-modal .pn-modal>[slot=buttons]{position:-webkit-sticky;position:sticky;bottom:0;left:0;z-index:2}pn-modal .pn-modal>.pn-modal-close-button{position:-webkit-sticky;position:sticky;display:block;left:100%;margin:1em 1em 0 0;z-index:10}pn-modal .pn-modal>.pn-modal-content{margin-top:-3em}}";
+
+let PnModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.close = index.createEvent(this, "close", 7);
+    /** Bind to this property if you want to control the visibility of the modal from your own data. */
+    this.open = false;
+    this.handleFocus = this.focusHandler.bind(this);
+    this.handleBlur = this.blurHandler.bind(this);
+    this.handleEsc = this.escHandler.bind(this);
+    this.handleGlobalClick = this.globalClickHandler.bind(this);
+  }
+  componentDidLoad() {
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = this.mo = new MutationObserver(() => {
+      index.forceUpdate(this.hostElement);
+      this.setFocusableElements();
+    });
+    mo.observe(this.hostElement.querySelector('.pn-modal'), { childList: true, subtree: true });
+    // If the modal is opened when the page loads we still want to register the events.
+    if (this.open)
+      this.addEventListeners();
+    this.setFocusableElements();
+  }
+  openHandler() {
+    if (this.open) {
+      this.addEventListeners();
+    }
+    else {
+      this.removeEventListeners();
+      this.elToFocus = null;
+      this.close.emit(this.open);
+    }
+  }
+  setFocusableElements() {
+    // This place is where I see the most coming changes/bugs taking place.
+    requestAnimationFrame(() => {
+      this.focusableEls = Array.from(this.hostElement.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]):not(.pn-modal-backdrop), pn-option'));
+      this.untabbable = Array.from(this.hostElement.querySelectorAll('[tabindex="-1"]'));
+    });
+  }
+  addEventListeners() {
+    const root = this.hostElement.getRootNode();
+    root.addEventListener('focusin', this.handleFocus);
+    root.addEventListener('focusout', this.handleBlur);
+    root.addEventListener('keydown', this.handleEsc);
+    // Adding RAF to ensure clicks aren't registered before the modal has opened.
+    requestAnimationFrame(() => {
+      document.addEventListener('pointerdown', this.handleGlobalClick);
+    });
+  }
+  removeEventListeners() {
+    const root = this.hostElement.getRootNode();
+    root.removeEventListener('focusin', this.handleFocus);
+    root.removeEventListener('focusout', this.handleBlur);
+    root.removeEventListener('keydown', this.handleEsc);
+    document.removeEventListener('pointerdown', this.handleGlobalClick);
+  }
+  focusHandler(e) {
+    const target = e.composedPath()[0];
+    if (!this.focusableEls.includes(target) && !this.untabbable.includes(target) || target.classList.contains('pn-modal-backdrop')) {
+      if (this.elToFocus) {
+        this.elToFocus.focus();
+        return;
+      }
+      this.focusableEls[0].focus();
+    }
+  }
+  blurHandler(e) {
+    var _a;
+    const target = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)[0];
+    const index = this.focusableEls.indexOf(target);
+    const numberOfEls = this.focusableEls.length - 1;
+    if (index === 0)
+      this.elToFocus = this.focusableEls[numberOfEls];
+    if (index === numberOfEls)
+      this.elToFocus = this.focusableEls[0];
+  }
+  escHandler({ code }) {
+    if ((code) === 'Escape')
+      this.open = false;
+  }
+  globalClickHandler(e) {
+    var _a;
+    const target = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)[0];
+    if (!this.hostElement.contains(target) || target.classList.contains('pn-modal-backdrop')) {
+      // This is to prevent the focus and blur events from being triggered when closing the modal.
+      e.preventDefault();
+      this.open = false;
+    }
+  }
+  render() {
+    return (index.h(index.Host, { "data-open": this.open }, index.h("div", { class: "pn-modal-backdrop", tabindex: "0" }), index.h("div", { class: "pn-modal" }, index.h("button", { class: "pn-modal-close-button", onClick: () => this.open = false, type: "button", title: "close", "aria-label": "close" }, index.h("pn-icon", { symbol: "close", color: "blue700" })), index.h("div", { class: "pn-modal-content" }, index.h("slot", null)), index.h("slot", { name: "buttons" })), index.h("div", { class: "pn-modal-backdrop", tabindex: "0" })));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["openHandler"]
+  }; }
+};
+PnModal.style = pnModalCss;
+
+exports.pn_modal = PnModal;

package/umd/modules/@postnord/web-components/cjs/pn-nav-dropdown.cjs.entry.js

@@ -0,0 +1,121 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+
+const pnNavDropdownCss = "pn-nav-dropdown{display:inline-block;position:relative}pn-nav-dropdown>button{background:none;outline:none;border-radius:0.8rem;border:none;cursor:pointer;padding:0.25em;font-size:1em;-webkit-transition:background 0.15s, -webkit-box-shadow 0.15s;transition:background 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, background 0.15s;transition:box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;position:relative;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:#005D92;font-weight:normal}pn-nav-dropdown>button:focus{-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-nav-dropdown>button:hover,pn-nav-dropdown>button:focus{background:#EFFBFF}.pn-nav-dropdown-label>pn-icon{margin-left:0.4em}.nav-dropdown-content-container{position:absolute;top:130%;left:0;border-radius:1em;-webkit-box-shadow:0 0.2rem 1.6rem rgba(0, 0, 0, 0.2);box-shadow:0 0.2rem 1.6rem rgba(0, 0, 0, 0.2);-webkit-transform-origin:top left;transform-origin:top left;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;transition:-webkit-transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;transition:transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;transition:transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s, -webkit-transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;-webkit-transform:scale(0);transform:scale(0);overflow-y:auto;max-width:95vw;max-width:min(95vw, 40em);max-height:80vh;z-index:10;background:#FFFFFF}pn-nav-dropdown.nav-dropdown-right .nav-dropdown-content-container{left:unset;right:0;-webkit-transform-origin:top right;transform-origin:top right}.nav-dropdown-content{padding:1em;opacity:0;-webkit-transition:opacity 0.1s cubic-bezier(0.6, 0, 0.4, 1);transition:opacity 0.1s cubic-bezier(0.6, 0, 0.4, 1);-webkit-transition-delay:0s;transition-delay:0s;position:relative;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%}pn-nav-dropdown[data-open=true] .nav-dropdown-content-container{-webkit-transition-delay:0s;transition-delay:0s}pn-nav-dropdown[data-open=true] .nav-dropdown-content{-webkit-transition-delay:0.3s;transition-delay:0.3s;-webkit-transition-duration:0.18s;transition-duration:0.18s;opacity:1}pn-nav-dropdown .pn-ripple{-webkit-animation:ripple 0.4s cubic-bezier(0.6, 0, 0.4, 1);animation:ripple 0.4s cubic-bezier(0.6, 0, 0.4, 1);position:absolute;border-radius:50%;background:#005D92;-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}}";
+
+let PnnavDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** The label on the button */
+    this.label = "Dropdown";
+    /** Optional icon in the button */
+    this.icon = "";
+    this.open = false;
+    this.position = '';
+    this.right = false;
+    this.handleGlobalEvents = this.globalHandler.bind(this);
+  }
+  componentDidLoad() {
+    const links = Array.from(this.hostElement.querySelectorAll('.nav-dropdown-content a'));
+    const btns = Array.from(this.hostElement.querySelectorAll('.nav-dropdown-content button'));
+    const inputs = Array.from(this.hostElement.querySelectorAll('.nav-dropdown-content input'));
+    this.dropdown = this.hostElement.querySelector('.nav-dropdown-content-container');
+    this.focusableElements = [...btns, ...links, ...inputs];
+    this.toggleTabOrder();
+  }
+  openHandler() {
+    this.toggleTabOrder();
+    this.toggleDropdown();
+    if (this.open) {
+      document.addEventListener('click', this.handleGlobalEvents);
+      document.addEventListener('keyup', this.handleGlobalEvents);
+    }
+    if (!this.open) {
+      document.removeEventListener('click', this.handleGlobalEvents);
+      document.removeEventListener('keyup', this.handleGlobalEvents);
+    }
+  }
+  globalHandler(e) {
+    // global events that we want to track to close the select, like "click outside" or tab out
+    if ((!this.hostElement.contains(e.target) && e.type !== 'scroll') ||
+      ((e === null || e === void 0 ? void 0 : e.key) === 'Escape')) {
+      this.open = false;
+    }
+    else if (e.type === 'scroll') {
+      const top = this.hostElement.getBoundingClientRect().top;
+      const bottom = window.innerHeight - this.hostElement.getBoundingClientRect().bottom;
+      if (bottom <= 0 || top <= 0) {
+        this.open = false;
+      }
+    }
+  }
+  toggleDropdown() {
+    this.right = (this.hostElement.offsetLeft > window.innerWidth / 2);
+    requestAnimationFrame(() => {
+      if (this.open) {
+        this.dropdown.style.transition = 'none';
+        this.dropdown.style.transform = 'none';
+      }
+      const dropdownEl = this.dropdown.getBoundingClientRect();
+      let x;
+      if (dropdownEl.right > window.innerWidth || dropdownEl.x < 0) {
+        // 0.025 because the max width of the element is 95vw and we want the same margin on both sides
+        x = (dropdownEl.x + dropdownEl.width + window.innerWidth * 0.025 - window.innerWidth);
+      }
+      else {
+        x = 0;
+      }
+      this.dropdown.style.transform = '';
+      requestAnimationFrame(() => {
+        this.dropdown.style.transition = '';
+        this.dropdown.style.transform = this.open ? `scale(1) translateX(-${x}px)` : '';
+        requestAnimationFrame(() => {
+          this.hostElement.dataset.open = `${this.open}`;
+        });
+      });
+    });
+  }
+  toggleTabOrder() {
+    if (!this.focusableElements.length)
+      return;
+    const tabindex = this.open ? '0' : '-1';
+    this.focusableElements.forEach(el => {
+      el.setAttribute('tabindex', tabindex);
+    });
+  }
+  ripple(e) {
+    const el = this.hostElement.querySelector('.pn-nav-dropdown-label');
+    this.open = !this.open;
+    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);
+  }
+  getClassNames() {
+    let classNames = '';
+    if (this.right)
+      classNames += 'nav-dropdown-right ';
+    return classNames;
+  }
+  render() {
+    return (index.h(index.Host, { class: this.getClassNames() }, index.h("button", { class: "pn-nav-dropdown-label", type: "button", onClick: (e) => this.ripple(e) }, this.label, this.icon ? (index.h("pn-icon", { symbol: this.icon, color: "blue700" })) : null), index.h("div", { class: "nav-dropdown-content-container" }, index.h("div", { class: "nav-dropdown-content" }, index.h("slot", null)))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["openHandler"]
+  }; }
+};
+PnnavDropdown.style = pnNavDropdownCss;
+
+exports.pn_nav_dropdown = PnnavDropdown;

package/umd/modules/@postnord/web-components/cjs/pn-ocr-search.cjs.entry.js

@@ -0,0 +1,141 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+
+const translations = {
+  SEARCH_BUTTON: {
+    da: "Search",
+    en: "Search",
+    fi: "Search",
+    no: "Search",
+    sv: "Sök",
+  },
+  SEARCH_SUCCESS: {
+    da: "Your OCR number is",
+    en: "Your OCR number is",
+    fi: "Your OCR number is",
+    no: "Your OCR number is",
+    sv: "Ditt OCR-nummer är",
+  },
+  ERROR_INVALID_LICENSE_NUMBER: {
+    da: "Invalid license number",
+    en: "Invalid license number",
+    fi: "Invalid license number",
+    no: "Invalid license number",
+    sv: "Ogiltligt licensnummer",
+  },
+  ERROR_NO_RESULTS: {
+    da: "The search did not generate any results",
+    en: "The search did not generate any results",
+    fi: "The search did not generate any results",
+    no: "The search did not generate any results",
+    sv: "Sökningen genererade inga träffar",
+  },
+  ERROR_REASON_HEADER: {
+    da: "It may be due to:",
+    en: "It may be due to:",
+    fi: "It may be due to:",
+    no: "It may be due to:",
+    sv: "Det kan bero på:",
+  },
+  ERROR_REASON_ONE: {
+    da: "We could not find that license number",
+    en: "We could not find that license number",
+    fi: "We could not find that license number",
+    no: "We could not find that license number",
+    sv: "Vi hittar inget sådant licensnummer",
+  },
+  ERROR_REASON_TWO: {
+    da: "Check the information and try again.",
+    en: "Check the information and try again.",
+    fi: "Check the information and try again.",
+    no: "Check the information and try again.",
+    sv: "Kontrollera uppgifterna och försök igen.",
+  },
+  PLACEHOLDER_TEXT: {
+    da: "License number 6 digits",
+    en: "License number 6 digits",
+    fi: "License number 6 digits",
+    no: "License number 6 digits",
+    sv: "Licensnummer 6 tecken",
+  },
+};
+
+const pnOcrSearchCss = "pn-ocr-search .bold{font-weight:700}pn-ocr-search .search-results,pn-ocr-search .error-text-container{padding:1em 0.5em}pn-ocr-search .invalid-text-container{padding:0.5em 1em}pn-ocr-search .invalid-text-container .invalid-ocr{color:#A70707}";
+
+let PnOcrSearch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    // Supported languages are en and sv
+    this.language = "";
+    this.loading = false;
+    this.error = false;
+    this.ocrNumber = "";
+    this.searchSuccess = false;
+    this.invalidOcrNumber = false;
+  }
+  getTranslation(key, language) {
+    var _a, _b;
+    return ((_a = translations[key]) === null || _a === void 0 ? void 0 : _a[language]) || ((_b = translations[key]) === null || _b === void 0 ? void 0 : _b.sv) || key;
+  }
+  handleSearch(e) {
+    // reset states
+    this.invalidOcrNumber = false;
+    this.searchSuccess = false;
+    this.error = false;
+    const validationResult = this.validateOcrNumber(e.detail);
+    if (validationResult.error) {
+      this.invalidOcrNumber = true;
+      return;
+    }
+    // call endpoint
+    this.ocrNumberSearch(validationResult.value);
+  }
+  async ocrNumberSearch(ocrNumber) {
+    this.loading = true;
+    await fetch(`https://portal.postnord.com/public-service/api/ocr?key=${ocrNumber}`)
+      .then((response) => {
+      return response.json();
+    })
+      .then((data) => {
+      this.loading = false;
+      this.ocrNumber = data.newOcr;
+      this.searchSuccess = true;
+    })
+      .catch(() => {
+      this.error = true;
+      this.loading = false;
+      this.searchSuccess = false;
+    });
+  }
+  validateOcrNumber(value) {
+    // Removes spaces and dashes
+    const formatValue = value ? value.replace(/[ -]/gi, "") : "";
+    // Looks for non-digits
+    const ocrRegex = new RegExp(/\D+/);
+    // Needs to be atleast 6 numbers
+    const error = ocrRegex.test(formatValue) || formatValue.length !== 6;
+    return { error, value: formatValue };
+  }
+  renderSearchResult() {
+    if (!this.loading && !this.error && this.searchSuccess) {
+      return (index.h("div", { class: "search-results" }, this.getTranslation("SEARCH_SUCCESS", this.language), ": ", index.h("b", null, this.ocrNumber)));
+    }
+  }
+  renderErrorMessage() {
+    if (this.invalidOcrNumber && !this.loading) {
+      return (index.h("div", { class: "invalid-text-container" }, index.h("p", { class: "invalid-ocr" }, this.getTranslation("ERROR_INVALID_LICENSE_NUMBER", this.language))));
+    }
+    if (this.error && !this.loading) {
+      return (index.h("div", { class: "error-text-container" }, index.h("p", { class: "bold" }, this.getTranslation("ERROR_NO_RESULTS", this.language)), index.h("p", { class: "bold" }, this.getTranslation("ERROR_REASON_HEADER", this.language)), index.h("p", null, this.getTranslation("ERROR_REASON_ONE", this.language)), index.h("p", null, this.getTranslation("ERROR_REASON_TWO", this.language))));
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("pn-search-field", { loading: this.loading, label: this.getTranslation("SEARCH_BUTTON", this.language), button: "", placeholder: this.getTranslation("PLACEHOLDER_TEXT", this.language), onSearch: (e) => this.handleSearch(e) }), this.renderSearchResult(), this.renderErrorMessage()));
+  }
+};
+PnOcrSearch.style = pnOcrSearchCss;
+
+exports.pn_ocr_search = PnOcrSearch;

package/umd/modules/@postnord/web-components/cjs/pn-option.cjs.entry.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+
+const pnOptionCss = "pn-option{outline:none;background:#fff;color:black;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow-wrap:break-word}pn-option .pn-option-content{max-width:100%}pn-option pn-checkbox{margin-right:0.5em}pn-option:hover,pn-option:focus{background-color:#E0F8FF}pn-option:focus{-webkit-box-shadow:0 0.1rem 0 0 #005D92, 0 -0.1rem 0 0 #005D92;box-shadow:0 0.1rem 0 0 #005D92, 0 -0.1rem 0 0 #005D92}";
+
+let PnOption = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectOption = index.createEvent(this, "selectOption", 7);
+    this.checkchange = index.createEvent(this, "checkchange", 3);
+    this.selected = false;
+    this.selectHasLoaded = false;
+    this.parentValue = null;
+    this.checked = false;
+    this.checkbox = false;
+    this.index = null;
+  }
+  changeHandler(e) {
+    this.checked = e.target.checked;
+  }
+  componentDidLoad() {
+    this.registerEventHandlers();
+  }
+  componentDidUpdate() {
+    if (this.selected || this.value === this.parentValue)
+      this.selectOption.emit(this.value);
+    this.checkchange.emit(this.checked);
+  }
+  registerEventHandlers() {
+    const events = ['click', 'keydown'];
+    const codes = ['Enter', 'Space'];
+    events.forEach(e => {
+      this.hostElement.addEventListener(e, (ev) => {
+        if (ev.type === 'click' || codes.includes(ev.code)) {
+          if (ev.type === 'keydown')
+            ev.preventDefault();
+          if (this.checkbox) {
+            this.checked = !this.checked;
+          }
+          else {
+            this.selected = true;
+          }
+        }
+      });
+    });
+  }
+  render() {
+    return (index.h(index.Host, { tabindex: "-1" }, this.checkbox ? (index.h("pn-checkbox", { checkboxid: `id-${this.index}`, onChange: (e) => this.changeHandler(e), checked: this.checked })) : (''), index.h("div", { class: "pn-option-content" }, index.h("slot", null))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+PnOption.style = pnOptionCss;
+
+exports.pn_option = PnOption;