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

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

@@ -0,0 +1,186 @@
+import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './pn-button2.js';
+import { d as defineCustomElement$4 } from './pn-icon2.js';
+import { d as defineCustomElement$3 } from './pn-search-field2.js';
+import { d as defineCustomElement$2 } from './pn-spinner2.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$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    // 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 (h("div", { class: "search-results" }, this.getTranslation("SEARCH_SUCCESS", this.language), ": ", h("b", null, this.ocrNumber)));
+    }
+  }
+  renderErrorMessage() {
+    if (this.invalidOcrNumber && !this.loading) {
+      return (h("div", { class: "invalid-text-container" }, h("p", { class: "invalid-ocr" }, this.getTranslation("ERROR_INVALID_LICENSE_NUMBER", this.language))));
+    }
+    if (this.error && !this.loading) {
+      return (h("div", { class: "error-text-container" }, h("p", { class: "bold" }, this.getTranslation("ERROR_NO_RESULTS", this.language)), h("p", { class: "bold" }, this.getTranslation("ERROR_REASON_HEADER", this.language)), h("p", null, this.getTranslation("ERROR_REASON_ONE", this.language)), h("p", null, this.getTranslation("ERROR_REASON_TWO", this.language))));
+    }
+  }
+  render() {
+    return (h(Host, null, 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()));
+  }
+  static get style() { return pnOcrSearchCss; }
+};
+PnOcrSearch$1 = /*@__PURE__*/ proxyCustomElement(PnOcrSearch$1, [0, "pn-ocr-search", {
+    "language": [1],
+    "loading": [32],
+    "error": [32],
+    "ocrNumber": [32],
+    "searchSuccess": [32],
+    "invalidOcrNumber": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-ocr-search", "pn-button", "pn-icon", "pn-search-field", "pn-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-ocr-search":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnOcrSearch$1);
+      }
+      break;
+    case "pn-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "pn-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pn-search-field":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pn-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PnOcrSearch = PnOcrSearch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnOcrSearch, defineCustomElement };

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

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

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

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

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

@@ -0,0 +1,82 @@
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './pn-checkbox2.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 extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.selectOption = createEvent(this, "selectOption", 7);
+    this.checkchange = 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 (h(Host, { tabindex: "-1" }, this.checkbox ? (h("pn-checkbox", { checkboxid: `id-${this.index}`, onChange: (e) => this.changeHandler(e), checked: this.checked })) : (''), h("div", { class: "pn-option-content" }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnOptionCss; }
+};
+PnOption = /*@__PURE__*/ proxyCustomElement(PnOption, [4, "pn-option", {
+    "value": [1],
+    "selected": [1540],
+    "selectHasLoaded": [4, "select-has-loaded"],
+    "parentValue": [8, "parent-value"],
+    "checked": [1028],
+    "checkbox": [4],
+    "index": [1]
+  }, [[0, "change", "changeHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-option", "pn-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-option":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnOption);
+      }
+      break;
+    case "pn-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PnOption as P, defineCustomElement as d };

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

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

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

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

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

@@ -0,0 +1,72 @@
+import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './pn-spinner2.js';
+
+const pnProgressBarCss = "pn-progress-bar{display:inline;overflow:hidden}pn-progress-bar .pn-progress-container{margin:16px 16px 8px 0;display:inline-block;min-width:380px}pn-progress-bar .pn-progress-container .pn-progress-label{height:20px;color:#1e1e1e;font-size:14px;font-weight:bold;line-height:20px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis}pn-progress-bar .pn-progress-container .pn-progress-label>pn-spinner{vertical-align:middle;margin-left:5px}pn-progress-bar .pn-progress-container .pn-progress-bar{position:relative;padding-top:1px}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line{width:0;position:absolute;top:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1,pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2{width:100%;height:7px}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1{background-color:#8EDDF9}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2{background-color:#00A0D6}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-bg{height:12px;background-color:#D3CECB}pn-progress-bar .pn-progress-container .pn-progress-percentage{margin-top:5px;text-align:right;font-size:12px;line-height:16px;color:#00A0D6}pn-progress-bar.pn-progress-size-small .pn-progress-container .pn-progress-bar .pn-progress-bar-line1,pn-progress-bar.pn-progress-size-small .pn-progress-container .pn-progress-bar .pn-progress-bar-line2{height:4px}pn-progress-bar.pn-progress-size-small .pn-progress-container .pn-progress-bar .pn-progress-bar-bg{height:6px}pn-progress-bar.pn-progress-color-success .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1{background-color:#5EC584}pn-progress-bar.pn-progress-color-success .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2{background-color:#005E41}pn-progress-bar.pn-progress-color-error .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1{background-color:#A70707}pn-progress-bar.pn-progress-color-error .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2{background-color:#A70707}";
+
+let PnSpinner = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.progress = 0;
+    this.size = "medium";
+    this.color = "default";
+    this.width = "300px";
+    this.label = null;
+    this.showSpinner = false;
+    this.showPercentage = false;
+  }
+  render() {
+    const progress = this.progress !== undefined ? this.progress : 0;
+    const progressWidth = progress < 100 ? Math.ceil(progress) : 100;
+    const progressStyles = {
+      width: progressWidth.toString() + "%"
+    };
+    const styles = {
+      width: this.width || "300px"
+    };
+    const sizes = ["medium", "small"];
+    const size = !!~sizes.indexOf(this.size) ? this.size : "medium";
+    this.hostElement.classList.add("pn-progress-size-" + size);
+    const colors = ["default", "success", "error"];
+    const color = !!~colors.indexOf(this.color) ? this.color : "default";
+    this.hostElement.classList.add("pn-progress-color-" + color);
+    if (this.showPercentage) {
+      this.hostElement.classList.add("pn-progress-show-percentage");
+    }
+    return (h("div", { class: "pn-progress-container", style: styles }, this._hasLabel() ? (h("div", { class: "pn-progress-label" }, this.label, this.showSpinner ? h("pn-spinner", null) : null)) : null, h("div", { class: "pn-progress-bar" }, h("div", { class: "pn-progress-bar-line", style: progressStyles }, h("div", { class: "pn-progress-bar-line1" }), h("div", { class: "pn-progress-bar-line2" })), h("div", { class: "pn-progress-bar-bg" })), this.showPercentage ? (h("div", { class: "pn-progress-percentage", style: progressStyles }, progress, "%")) : null));
+  }
+  _hasLabel() {
+    return this.label && this.label !== "";
+  }
+  get hostElement() { return this; }
+  static get style() { return pnProgressBarCss; }
+};
+PnSpinner = /*@__PURE__*/ proxyCustomElement(PnSpinner, [0, "pn-progress-bar", {
+    "progress": [2],
+    "size": [1],
+    "color": [1],
+    "width": [1],
+    "label": [1],
+    "showSpinner": [4, "show-spinner"],
+    "showPercentage": [4, "show-percentage"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-progress-bar", "pn-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-progress-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnSpinner);
+      }
+      break;
+    case "pn-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PnSpinner as P, defineCustomElement as d };

package/umd/modules/@postnord/web-components/components/pn-progress-indicator-step.d.ts

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

package/umd/modules/@postnord/web-components/components/pn-progress-indicator-step.js

@@ -0,0 +1,78 @@
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const pnProgressIndicatorStepCss = "pn-progress-indicator-step{display:-ms-flexbox;display:flex;-ms-flex:1 0 4em;flex:1 0 4em}pn-progress-indicator-step:first-child{-ms-flex:0 0 auto;flex:0 0 auto}pn-progress-indicator-step:first-child .progress-line{display:none}pn-progress-indicator-step:first-child .info-container{-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%}.pn-progress-indicator-step{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 0 4em;flex:1 0 4em;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent}.pn-progress-indicator-step .circle{width:1.5em;height:1.5em;padding:0.3rem;border-radius:50%;background-color:#F3F2F2;-webkit-transition:background-color 0.3s ease-in-out;transition:background-color 0.3s ease-in-out}.pn-progress-indicator-step .info-container{position:absolute;bottom:-2.5em;right:0;-webkit-transform:translateX(50%) translateX(-1.2rem);transform:translateX(50%) translateX(-1.2rem);white-space:nowrap;color:#F3F2F2;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-webkit-transition:color 0.3s ease-in-out;transition:color 0.3s ease-in-out;font-size:1em;font-weight:normal}.pn-progress-indicator-step .info-container svg{height:1.7em;width:1.7em;margin-bottom:0.1em}.pn-progress-indicator-step .info-container svg path,.pn-progress-indicator-step .info-container svg polygon{fill:#F3F2F2;-webkit-transition:fill 0.3s ease-in-out;transition:fill 0.3s ease-in-out}.pn-progress-indicator-step .progress-line{-ms-flex:1 1 auto;flex:1 1 auto;margin:auto 4px;height:0.8rem;background-color:#F3F2F2;position:relative;overflow:hidden;pointer-events:none;border-radius:10rem}.pn-progress-indicator-step .progress-line:after{content:\"\";position:absolute;top:0;left:0;height:0.8rem;width:100%;background-color:#005D92;-webkit-transition:-webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;transition:-webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;transition:transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;transition:transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s, -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.pn-progress-indicator-step.active .info-container{color:black}.pn-progress-indicator-step.active .info-container svg path{fill:#000}.pn-progress-indicator-step.active .info-container svg polygon{fill:#000}.pn-progress-indicator-step.activated{cursor:pointer}.pn-progress-indicator-step.done .progress-line:after,.pn-progress-indicator-step.active .progress-line:after{-webkit-transform:translateX(0);transform:translateX(0)}.pn-progress-indicator-step.done .circle,.pn-progress-indicator-step.active .circle{background-color:#005D92}.pn-progress-indicator-step.done .checkmark-path{stroke-linecap:round;stroke-dasharray:27;stroke-dashoffset:-23;-webkit-animation:dash 0.3s cubic-bezier(0.55, 0, 0.1, 1) both;animation:dash 0.3s cubic-bezier(0.55, 0, 0.1, 1) both}@-webkit-keyframes dash{to{stroke-dashoffset:0}}@keyframes dash{to{stroke-dashoffset:0}}";
+
+let PnProgressIndicatorStep$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.setactivestep = createEvent(this, "setactivestep", 7);
+  }
+  setActiveStepHandler() {
+    if (this.done || this.activated) {
+      this.setactivestep.emit(this.index);
+    }
+  }
+  componentWillLoad() {
+    this.checkStatus();
+  }
+  componentDidUpdate() {
+    this.checkStatus();
+  }
+  checkStatus() {
+    if (!this.done) {
+      this.done = this.checked || this.activeStep > this.index;
+    }
+    if (this.active === "yes") {
+      this.activated = true;
+    }
+    else if (this.active === "no") {
+      this.activated = false;
+      this.done = false;
+    }
+    else if (!this.activated) {
+      this.activated = this.activeStep >= this.index;
+    }
+  }
+  getClassNames() {
+    let className = "pn-progress-indicator-step";
+    if (this.done || this.checked)
+      className += " done";
+    if (this.activated)
+      className += " activated";
+    if (this.activeStep === this.index)
+      className += " active";
+    return className;
+  }
+  render() {
+    return (h(Host, { class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { class: "progress-line" }), h("div", { class: "info-container" }, h("slot", null), this.name), h("div", { class: "circle" }, this.done || this.checked ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" }, h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: "#FFF", "stroke-miterlimit": "10", "stroke-width": "3" }))) : (""))));
+  }
+  static get style() { return pnProgressIndicatorStepCss; }
+};
+PnProgressIndicatorStep$1 = /*@__PURE__*/ proxyCustomElement(PnProgressIndicatorStep$1, [4, "pn-progress-indicator-step", {
+    "activeStep": [2, "active-step"],
+    "index": [2],
+    "name": [1],
+    "checked": [4],
+    "active": [1],
+    "activated": [32],
+    "done": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-progress-indicator-step"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-progress-indicator-step":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnProgressIndicatorStep$1);
+      }
+      break;
+  } });
+}
+
+const PnProgressIndicatorStep = PnProgressIndicatorStep$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnProgressIndicatorStep, defineCustomElement };

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

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

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

@@ -0,0 +1,56 @@
+import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+
+const pnProgressIndicatorCss = ".pn-progress-indicator{display:-ms-flexbox;display:flex;padding:2.8em 1em 0}";
+
+let PnProgressIndicator$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.progresschange = createEvent(this, "progresschange", 7);
+    /** Takes the index of the active step */
+    this.activeStep = 0;
+  }
+  setActiveStepHandler({ detail }) {
+    this.activeStep = detail;
+    this.progresschange.emit(this.activeStep);
+  }
+  componentWillLoad() {
+    this.passPropsToChildren();
+  }
+  componentDidUpdate() {
+    this.passPropsToChildren();
+  }
+  passPropsToChildren() {
+    let children = Array.from(this.hostElement.querySelectorAll("pn-progress-indicator-step"));
+    children.forEach((child, i) => {
+      child.activeStep = this.activeStep;
+      child.index = i;
+    });
+  }
+  render() {
+    return (h("div", { class: "pn-progress-indicator" }, h("slot", null)));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnProgressIndicatorCss; }
+};
+PnProgressIndicator$1 = /*@__PURE__*/ proxyCustomElement(PnProgressIndicator$1, [4, "pn-progress-indicator", {
+    "activeStep": [1026, "active-step"]
+  }, [[0, "setactivestep", "setActiveStepHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-progress-indicator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-progress-indicator":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnProgressIndicator$1);
+      }
+      break;
+  } });
+}
+
+const PnProgressIndicator = PnProgressIndicator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnProgressIndicator, defineCustomElement };

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

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

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

@@ -0,0 +1,41 @@
+import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const pnRadioButtonCss = "pn-radio-button{}pn-radio-button input[type=radio]{opacity:0;position:absolute;white-space:nowrap;pointer-events:none}pn-radio-button input[type=radio]+label{display:inline-block;cursor:pointer;}pn-radio-button input[type=radio]+label .pn-radio-outer{background:#fff;border:0.1em solid #D3CECB;border-radius:50%;height:1.5em;width:1.5em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, -webkit-box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, -webkit-box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s, -webkit-box-shadow 0.1s;cursor:pointer}pn-radio-button input[type=radio]+label .pn-radio-inner{-webkit-transform:scale(0);transform:scale(0);height:1em;width:1em;background-color:#005D92;border-radius:50%;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92), -webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}pn-radio-button input[type=radio]:checked+label .pn-radio-inner{-webkit-transform:scale(1);transform:scale(1)}pn-radio-button input[type=radio]:checked+label .pn-radio-outer{border:0.1rem solid #005D92}pn-radio-button input[type=radio]:focus+label .pn-radio-outer,pn-radio-button input[type=radio]:active+label .pn-radio-outer{-webkit-box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92;box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92}pn-radio-button input[type=radio]:hover+label .pn-radio-outer{border:0.1rem solid #005D92;background:#E0F8FF}pn-radio-button input[type=radio]:disabled+label{cursor:not-allowed}pn-radio-button input[type=radio]:disabled+label .pn-radio-outer{cursor:not-allowed;border:0.1rem solid #969087;background-color:#D3CECB}pn-radio-button input[type=radio]:disabled+label .pn-radio-inner{cursor:not-allowed;background-color:#969087}pn-radio-button input[type=radio]:active:disabled+label .pn-radio-outer{-webkit-box-shadow:none;box-shadow:none}";
+
+let PnradioButton = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.disabled = false;
+    this.checked = false;
+  }
+  render() {
+    return (h(Host, null, h("input", { type: "radio", id: this.radioid || this.value, value: this.value, name: this.name, disabled: this.disabled, checked: this.checked }), h("label", { htmlFor: this.radioid || this.value }, h("div", { class: "pn-radio-outer" }, h("div", { class: "pn-radio-inner" })))));
+  }
+  static get style() { return pnRadioButtonCss; }
+};
+PnradioButton = /*@__PURE__*/ proxyCustomElement(PnradioButton, [0, "pn-radio-button", {
+    "value": [520],
+    "name": [1],
+    "radioid": [1],
+    "disabled": [4],
+    "checked": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-radio-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-radio-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnradioButton);
+      }
+      break;
+  } });
+}
+
+const PnRadioButton = PnradioButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnRadioButton, defineCustomElement };

package/umd/modules/@postnord/web-components/components/pn-range-date-picker.d.ts

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