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

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

@@ -0,0 +1,364 @@
+import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { c as createDateOrNull, a as computeMonths, g as getMonthNamesByLanguage, b as getDayNamesByLanguage } from './helpers.js';
+import { d as defineCustomElement$1 } from './pn-icon2.js';
+
+const pnCalendarCss = "pn-calendar .pn-calendar-wrapper{position:relative}pn-calendar .pn-calendar-container{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;background-color:white;z-index:9999}pn-calendar .pn-calendar-container .pn-calendar-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin-bottom:1.6rem}pn-calendar .pn-calendar-container .pn-calendar-nav>div{cursor:pointer}pn-calendar .pn-calendar-container .pn-calendar-nav .nav-previous,pn-calendar .pn-calendar-container .pn-calendar-nav .nav-next{width:3rem;display:-ms-flexbox;display:flex}pn-calendar .pn-calendar-container .pn-calendar-nav .nav-previous{text-align:left;-ms-flex-pack:start;justify-content:flex-start}pn-calendar .pn-calendar-container .pn-calendar-nav .nav-next{text-align:right;-ms-flex-pack:end;justify-content:flex-end}pn-calendar .pn-calendar-container .pn-calendar-nav .pn-calendar-month{padding:1em;border:0.1rem solid #5E554A;border-radius:0.8rem;font-size:1.2rem;color:#5E554A;font-weight:500;text-align:center}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-row{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;font-size:1.2rem;color:#969087;line-height:2.4rem;text-align:center;font-weight:300}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-row>div{width:2.4rem}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-row .pn-calendar-month{width:6rem}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-day-names{padding:0.4rem 0}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months{color:#5E554A;padding:0.8rem 0}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days:last-child,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months:last-child{padding-bottom:0}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month{border-bottom:0.4rem inset transparent;cursor:pointer}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.disable-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.disable-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.disable-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.disable-day{cursor:default;color:#D3CECB}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.disable-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.disable-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.disable-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.disable-day:hover{border-bottom-color:transparent}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.today,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.today,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.today,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.today{outline:0.1rem solid #D3CECB}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month:hover{border-bottom-color:#00A0D6}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day:active,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.selected,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month:active,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.selected,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day:active,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.selected,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month:active,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.selected{border-bottom-color:#005D92}";
+
+let PnCalendar = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.daychange = createEvent(this, "daychange", 7);
+    this.monthchanged = createEvent(this, "monthchanged", 7);
+    this.sameday = createEvent(this, "sameday", 7);
+    this.viewchange = createEvent(this, "viewchange", 7);
+    /** Set this to true to disable weekends */
+    this.disableWeekends = false;
+    this.allDisabledDays = [];
+  }
+  componentWillLoad() {
+    if (this.value)
+      this.parseSelectedDateFromValue(this.value);
+    this._initMinAndMaxDates();
+  }
+  componentDidLoad() {
+    this.calendarContainer = this.hostElement.querySelector(".pn-calendar");
+    this.monthElement = this.hostElement.querySelector(".month-field");
+    this._drawCalendar();
+    this.changeView("date");
+  }
+  componentWillUpdate() {
+    this._initMinAndMaxDates();
+  }
+  componentDidUpdate() {
+    this._drawCalendar();
+  }
+  _initMinAndMaxDates() {
+    this.minDate = createDateOrNull(this.min);
+    this.maxDate = createDateOrNull(this.max);
+    this.parseDisabledDays(this.disableDays);
+  }
+  parseSelectedDateFromValue(value) {
+    this.daychange.emit(value);
+    let selectedDate = createDateOrNull(value);
+    if (selectedDate)
+      this.selectedDate = selectedDate;
+  }
+  parseDisabledDays(value) {
+    this.allDisabledDays = value
+      ? value
+        .split(",")
+        .map(s => {
+        const d = new Date(s.trim());
+        return +new Date(d.getFullYear(), d.getMonth(), d.getDate());
+      })
+        .filter(d => +d)
+      : [];
+  }
+  toggleView() {
+    if (this.disableMonthsView) {
+      return "date";
+    }
+    const views = ["date", "month"];
+    const index = views.indexOf(this.view);
+    if (index < 0 || index >= views.length) {
+      this.changeView("date");
+    }
+    else {
+      this.changeView(views[index + 1]);
+    }
+  }
+  changeView(view) {
+    this.view = view || "date";
+    this.viewchange.emit(this.view);
+    switch (this.view) {
+      case "month":
+        this._drawCalendarMonths();
+        break;
+      default:
+        this._drawCalendarDays(this.monthSelection, this.yearSelection);
+        break;
+    }
+  }
+  _drawCalendar() {
+    const currentDate = new Date();
+    const defaultDate = createDateOrNull(this.defaultDate);
+    const baseDate = defaultDate || this.selectedDate;
+    const month = baseDate
+      ? baseDate.getMonth()
+      : currentDate.getMonth();
+    const year = baseDate
+      ? baseDate.getFullYear()
+      : currentDate.getFullYear();
+    this._drawCalendarDays(month, year);
+  }
+  _drawCalendarMonths() {
+    if (this.defaultDate) {
+      const defaultDate = new Date(this.defaultDate);
+      this.monthSelection = defaultDate.getMonth();
+      this.yearSelection = defaultDate.getFullYear();
+    }
+    this.currentCalendarDate = new Date(this.yearSelection, this.monthSelection);
+    const calendar = this.calendarContainer;
+    this.monthElement.innerHTML = this.yearSelection.toString();
+    const contents = document.createElement("div");
+    let maxMonth = 0;
+    if (this.maxDate) {
+      maxMonth = computeMonths(this.maxDate);
+    }
+    let row;
+    const months = getMonthNamesByLanguage(this.language);
+    for (let i = 0; i < months.length; i++) {
+      const month = months[i];
+      if (i % 3 === 0) {
+        row = document.createElement("div");
+        row.classList.add("pn-calendar-row", "pn-calendar-months");
+        contents.appendChild(row);
+      }
+      const div = document.createElement("div");
+      const text = document.createTextNode(month);
+      if (maxMonth > 0) {
+        const monthVal = computeMonths(new Date(this.yearSelection, i));
+        if (monthVal > maxMonth) {
+          div.classList.add('disable-day');
+        }
+      }
+      div.classList.add("pn-calendar-month");
+      div.addEventListener("click", this._selectMonth(i));
+      div.appendChild(text);
+      row.appendChild(div);
+    }
+    calendar.innerHTML = "";
+    calendar.appendChild(contents);
+  }
+  _dateWithNoHms(date) {
+    const d = new Date(date);
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  }
+  _drawCalendarDays(month, year) {
+    const selectedDate = this.selectedDate;
+    const months = getMonthNamesByLanguage(this.language);
+    const disabledDays = this.allDisabledDays;
+    let minActiveDate = 0;
+    let maxActiveDate = 0;
+    if (this.minActiveDate && this.maxActiveDate) {
+      minActiveDate = +this._dateWithNoHms(this.minActiveDate);
+      maxActiveDate = +this._dateWithNoHms(this.maxActiveDate);
+    }
+    this.currentCalendarDate = new Date(year, month);
+    let currentMonth = this.currentCalendarDate.getMonth();
+    let currentYear = this.currentCalendarDate.getFullYear();
+    this.monthSelection = currentMonth;
+    this.yearSelection = currentYear;
+    if (this.monthView) {
+      this.view = "month";
+      return this._drawCalendarMonths();
+    }
+    else {
+      this.view = "date";
+    }
+    let startOfWeek = this.startOfWeek || 0;
+    if (startOfWeek < 0 || startOfWeek > 6) {
+      startOfWeek = 0;
+    }
+    const container = this.calendarContainer;
+    const sunday = startOfWeek > 0 ? 7 - startOfWeek : 0;
+    const saturday = 7 - (startOfWeek + 1);
+    const header = document.createElement("div");
+    header.classList.add("pn-calendar-row", "pn-calendar-day-names");
+    const dayNames = getDayNamesByLanguage(this.language);
+    const days = dayNames.splice(startOfWeek).concat(dayNames);
+    days.forEach(function (day) {
+      const div = document.createElement("div");
+      const text = document.createTextNode(day);
+      div.appendChild(text);
+      header.appendChild(div);
+    });
+    const contents = document.createElement("div");
+    // filing data about month and in the page via DOM.
+    this.monthElement.innerHTML = months[month] + " " + year.toString();
+    const daysInMonth = this._daysInMonth(month, year);
+    // number of squares to fill before actual dates. getDay() returns the first day (0-6) of the week
+    const beforePadding = (7 + this.currentCalendarDate.getDay() - startOfWeek) % 7;
+    let row = document.createElement("div");
+    row.classList.add("pn-calendar-row", "pn-calendar-days");
+    for (let i = 0; i < beforePadding; i++) {
+      const cell = document.createElement("div");
+      row.appendChild(cell);
+    }
+    let leftPad = beforePadding;
+    for (let date = 0; date < daysInMonth;) { // iterate until we have reached at least number of days per month
+      for (let day = leftPad; day < 7; day++) { // handle week
+        date++;
+        if (date > daysInMonth) { // pad last week
+          const cell = document.createElement("div");
+          row.appendChild(cell);
+          continue;
+        }
+        const cell = document.createElement("div");
+        const cellText = document.createTextNode(date.toString());
+        const cDate = new Date(year, month, date);
+        const ts = +new Date(year, month, date);
+        if (minActiveDate &&
+          minActiveDate &&
+          ts >= minActiveDate &&
+          ts <= maxActiveDate) {
+          cell.classList.add("active");
+          if (ts === minActiveDate) {
+            cell.classList.add('min-active');
+          }
+          if (ts === maxActiveDate) {
+            cell.classList.add('max-active');
+          }
+        }
+        if (selectedDate &&
+          date === selectedDate.getDate() &&
+          year === selectedDate.getFullYear() &&
+          month === selectedDate.getMonth()) {
+          cell.classList.add("selected");
+        }
+        const currentDate = new Date();
+        if (date === currentDate.getDate() &&
+          year === currentDate.getFullYear() &&
+          month === currentDate.getMonth()) {
+          cell.classList.add("today");
+        }
+        cell.classList.add("pn-calendar-day");
+        cell.appendChild(cellText);
+        if (this.minDate && cDate < this.minDate) {
+          cell.classList.add("disable-day");
+        }
+        if (this.maxDate && cDate > this.maxDate) {
+          cell.classList.add("disable-day");
+        }
+        if (this.disableWeekends && (day === sunday || day === saturday)) {
+          cell.classList.add("disable-day");
+        }
+        if (disabledDays.includes(+cDate)) {
+          cell.classList.add("disable-day");
+        }
+        if (!cell.classList.contains("disable-day")) {
+          cell.addEventListener("click", this._selectDate({
+            month: month,
+            year: year,
+            date: date,
+            context: this
+          }));
+        }
+        row.appendChild(cell);
+      }
+      contents.appendChild(row);
+      row = document.createElement("div");
+      row.classList.add("pn-calendar-row", "pn-calendar-days");
+      leftPad = 0;
+    }
+    if (container) {
+      container.innerHTML = "";
+      container.appendChild(header);
+      container.appendChild(contents);
+    }
+  }
+  _selectMonth(month) {
+    const context = this;
+    return function () {
+      context.monthSelection = month;
+      context.monthchanged.emit(new Date(context.yearSelection, month));
+      context.changeView("date");
+    };
+  }
+  _selectDate(data) {
+    const year = data.year;
+    const month = this._addLeadingZero(data.month + 1);
+    const date = this._addLeadingZero(data.date);
+    const context = data.context;
+    return function () {
+      const value = `${year}-${month}-${date}`;
+      if (value && context.value === value) {
+        context.sameday.emit(value);
+      }
+      context.value = value;
+    };
+  }
+  _addLeadingZero(num) {
+    return ("0" + num).slice(-2);
+  }
+  _daysInMonth(iMonth, iYear) {
+    return 32 - new Date(iYear, iMonth, 32).getDate();
+  }
+  _addOrSubMonthYear(add) {
+    let currentMonth = this.currentCalendarDate.getMonth();
+    let currentYear = this.currentCalendarDate.getFullYear();
+    const multiple = add ? 1 : -1;
+    switch (this.view) {
+      case "month":
+        currentYear = currentYear + 1 * multiple;
+        this.yearSelection = currentYear;
+        this.monthchanged.emit(new Date(currentYear, currentMonth));
+        this._drawCalendarMonths();
+        break;
+      default:
+        if (add) {
+          currentYear = currentMonth === 11 ? currentYear + 1 : currentYear;
+          currentMonth = (currentMonth + 1) % 12;
+        }
+        else {
+          currentYear = currentMonth === 0 ? currentYear - 1 : currentYear;
+          currentMonth = currentMonth === 0 ? 11 : currentMonth - 1;
+        }
+        this.monthSelection = currentMonth;
+        this.yearSelection = currentYear;
+        this.monthchanged.emit(new Date(currentYear, currentMonth));
+        this._drawCalendarDays(currentMonth, currentYear);
+        break;
+    }
+  }
+  _previousMonth() {
+    this._addOrSubMonthYear(false);
+  }
+  _nextMonth() {
+    this._addOrSubMonthYear(true);
+  }
+  render() {
+    return (h("div", { class: "pn-calendar-wrapper" }, h("div", { class: "pn-calendar-container" }, h("div", { class: "pn-calendar-nav" }, h("div", { class: "nav-previous", onClick: this._previousMonth.bind(this) }, h("pn-icon", { symbol: "angle-small-left", color: "blue700", small: true })), h("div", { class: "pn-calendar-month", onClick: this.toggleView.bind(this) }, h("span", { class: "month-field" })), h("div", { class: "nav-next", onClick: this._nextMonth.bind(this) }, h("pn-icon", { symbol: "angle-small-right", color: "blue700", small: true }))), h("div", { class: "pn-calendar" }))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "value": ["parseSelectedDateFromValue"],
+    "disableDays": ["parseDisabledDays"]
+  }; }
+  static get style() { return pnCalendarCss; }
+};
+PnCalendar = /*@__PURE__*/ proxyCustomElement(PnCalendar, [0, "pn-calendar", {
+    "language": [1],
+    "min": [1],
+    "max": [1],
+    "startOfWeek": [2, "start-of-week"],
+    "value": [1025],
+    "disableWeekends": [4, "disable-weekends"],
+    "disableDays": [1, "disable-days"],
+    "minActiveDate": [1, "min-active-date"],
+    "maxActiveDate": [1, "max-active-date"],
+    "defaultDate": [1, "default-date"],
+    "disableMonthsView": [4, "disable-months-view"],
+    "monthView": [4, "month-view"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-calendar", "pn-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-calendar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnCalendar);
+      }
+      break;
+    case "pn-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PnCalendar as P, defineCustomElement as d };

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

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

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

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

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

@@ -0,0 +1,56 @@
+import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const pnCheckboxCss = "pn-checkbox{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}pn-checkbox input{opacity:0;position:absolute}pn-checkbox input[type=checkbox]+label.pn-checkbox{width:1.5em;min-width:1.5em;height:1.5em;min-height:1.5em;background:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;border:0.1rem solid #969087;cursor:pointer;border-radius:0.4rem;cursor:pointer;-webkit-transition-duration:220ms;transition-duration:220ms;-webkit-transition-timing-function:cubic-bezier(0.79, 0.14, 0.15, 0.86);transition-timing-function:cubic-bezier(0.79, 0.14, 0.15, 0.86);-webkit-transition-property:border, background, -webkit-box-shadow;transition-property:border, background, -webkit-box-shadow;transition-property:border, background, box-shadow;transition-property:border, background, box-shadow, -webkit-box-shadow}pn-checkbox input[type=checkbox]+label.pn-checkbox svg{width:80%;fill:none}pn-checkbox input[type=checkbox]+label.pn-checkbox svg polyline{stroke:#FFF;-webkit-transform-origin:0 0;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;-webkit-transition-delay:none;transition-delay:none;-webkit-transition:stroke-dashoffset 180ms cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:stroke-dashoffset 180ms cubic-bezier(0.79, 0.14, 0.15, 0.86)}pn-checkbox input[type=checkbox]:hover+label.pn-checkbox{border:0.1rem solid #005D92;background:#E0F8FF}pn-checkbox input[type=checkbox]:checked+label.pn-checkbox,pn-checkbox input[type=checkbox]:indeterminate+label.pn-checkbox{background:#005D92;border:0.1rem solid #005D92}pn-checkbox input[type=checkbox]:checked+label.pn-checkbox svg polyline,pn-checkbox input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline{-webkit-transition-delay:220ms;transition-delay:220ms}pn-checkbox input[type=checkbox]:checked+label.pn-checkbox svg polyline.checkmark-path{stroke-dashoffset:0}pn-checkbox input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline.checkmark-path{stroke-dashoffset:23}pn-checkbox input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline.indeterminate-path{stroke-dashoffset:0}pn-checkbox input[type=checkbox]:focus+label.pn-checkbox,pn-checkbox input[type=checkbox]:active+label.pn-checkbox{-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-checkbox input[type=checkbox]:disabled+label.pn-checkbox{background-color:#D3CECB;border:0.1rem solid #969087;cursor:not-allowed}pn-checkbox input[type=checkbox]:disabled+label.pn-checkbox svg polyline{stroke:#969087}pn-checkbox input[type=checkbox]:disabled:checked+label.pn-checkbox{border:0.1rem solid transparent}pn-checkbox input[type=checkbox]:disabled:active+label.pn-checkbox{-webkit-box-shadow:none;box-shadow:none}";
+
+let Pncheckbox = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.disabled = false;
+    this.checked = false;
+    this.indeterminate = false;
+  }
+  handlechange() {
+    this.indeterminate = false;
+  }
+  componentDidLoad() {
+    this.checkAndSetIndeterminateState();
+  }
+  componentDidUpdate() {
+    this.checkAndSetIndeterminateState();
+  }
+  checkAndSetIndeterminateState() {
+    let checkbox = this.hostElement.querySelector(`#${this.checkboxid}`);
+    if (checkbox) {
+      checkbox.indeterminate = this.indeterminate;
+    }
+  }
+  render() {
+    return (h(Host, null, h("input", { type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked }), h("label", { htmlFor: this.checkboxid, class: "pn-checkbox" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { class: "indeterminate-path", points: "4,12 20,12", "stroke-width": "3" })))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnCheckboxCss; }
+};
+Pncheckbox = /*@__PURE__*/ proxyCustomElement(Pncheckbox, [0, "pn-checkbox", {
+    "value": [520],
+    "name": [1],
+    "checkboxid": [1],
+    "disabled": [4],
+    "checked": [4],
+    "indeterminate": [1028]
+  }, [[0, "change", "handlechange"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Pncheckbox);
+      }
+      break;
+  } });
+}
+
+export { Pncheckbox as P, defineCustomElement as d };

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

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

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

@@ -0,0 +1,59 @@
+import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const pnChoiceChipCss = "pn-choice-chip{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;display:inline-block;background:#fff;position:relative}pn-choice-chip input{opacity:0;position:absolute;top:0;left:0;pointer-events:none;margin:0;width:100%;height:100%}pn-choice-chip label{display:block;padding:0.4rem 0.8rem;border:0.1rem solid #005D92;color:#005D92;border-radius:0.8rem;text-align:center;cursor:pointer;-webkit-transition:background 0.2s, -webkit-box-shadow 0.1s;transition:background 0.2s, -webkit-box-shadow 0.1s;transition:box-shadow 0.1s, background 0.2s;transition:box-shadow 0.1s, background 0.2s, -webkit-box-shadow 0.1s}pn-choice-chip input[type=checkbox]:checked+label.pn-choice-chip,pn-choice-chip input[type=checkbox]:indeterminate+label.pn-choice-chip{background:#005D92;color:#fff}pn-choice-chip input[type=checkbox]:hover+label.pn-choice-chip{background:#E0F8FF}pn-choice-chip input[type=checkbox]:focus+label.pn-choice-chip,pn-choice-chip input[type=checkbox]:active+label.pn-choice-chip{-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-choice-chip input[type=checkbox]:active+label.pn-choice-chip{background:#8EDDF9}pn-choice-chip input[type=checkbox]:disabled+label.pn-choice-chip{background-color:#D3CECB}pn-choice-chip input[type=checkbox]:checked+label.pn-choice-chip:hover{background:#0D234B;color:#fff}pn-choice-chip input[type=checkbox]:checked+label.pn-choice-chip:active{background:#00A0D6;border:0.1rem solid #00A0D6;color:#fff}";
+
+let Pnchoicechip = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.disabled = false;
+    this.checked = false;
+    this.indeterminate = false;
+  }
+  handlechange() {
+    this.indeterminate = false;
+  }
+  componentDidLoad() {
+    this.checkAndSetIndeterminateState();
+  }
+  componentDidUpdate() {
+    this.checkAndSetIndeterminateState();
+  }
+  checkAndSetIndeterminateState() {
+    let checkbox = this.hostElement.querySelector(`#${this.choiceid}`);
+    if (checkbox) {
+      checkbox.indeterminate = this.indeterminate;
+    }
+  }
+  render() {
+    return (h(Host, null, h("input", { type: "checkbox", id: this.choiceid, value: this.value, name: this.name || this.choiceid, disabled: this.disabled, checked: this.checked }), h("label", { htmlFor: this.choiceid, class: "pn-choice-chip" }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnChoiceChipCss; }
+};
+Pnchoicechip = /*@__PURE__*/ proxyCustomElement(Pnchoicechip, [4, "pn-choice-chip", {
+    "value": [520],
+    "name": [1],
+    "choiceid": [1],
+    "disabled": [4],
+    "checked": [4],
+    "indeterminate": [1028]
+  }, [[0, "change", "handlechange"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-choice-chip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-choice-chip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Pnchoicechip);
+      }
+      break;
+  } });
+}
+
+const PnChoiceChip = Pnchoicechip;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnChoiceChip, defineCustomElement };

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

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

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

@@ -0,0 +1,37 @@
+import { HTMLElement, proxyCustomElement } from '@stencil/core/internal/client';
+
+const pnColorCss = ".color{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%;border-radius:2em;-webkit-box-shadow:0 0.3rem 0.3rem rgba(0, 0, 0, 0.11), 0 0.2rem 0.2rem rgba(0, 0, 0, 0.11), 0 0.4rem 0.4rem rgba(0, 0, 0, 0.11), 0 0.8rem 0.8rem rgba(0, 0, 0, 0.11);box-shadow:0 0.3rem 0.3rem rgba(0, 0, 0, 0.11), 0 0.2rem 0.2rem rgba(0, 0, 0, 0.11), 0 0.4rem 0.4rem rgba(0, 0, 0, 0.11), 0 0.8rem 0.8rem rgba(0, 0, 0, 0.11);min-height:12em;overflow:hidden;-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease}.color button{background:transparent;border:0.2rem solid white;border-radius:1em;outline:none;cursor:pointer;background:white;padding:0.5em;-webkit-box-shadow:0 0.1rem 0.1rem rgba(0, 0, 0, 0.11);box-shadow:0 0.1rem 0.1rem rgba(0, 0, 0, 0.11)}.color-info{padding:2em 0;text-align:center;position:relative;width:100%;margin:auto;-ms-flex-positive:1;flex-grow:1}.color-info h1{color:white;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}.choice-container{position:absolute;bottom:1em;display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:center;justify-content:center}.choice-container button:first-child{margin-right:1em}.palette{list-style-type:none;margin:0;padding:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%;-webkit-box-shadow:0 1.5rem 1rem 1rem #333;box-shadow:0 1.5rem 1rem 1rem #333;-ms-flex-positive:0;flex-grow:0;z-index:1}.palette li{height:3em;width:100%;cursor:pointer}.fade-enter-active,.fade-leave-active{-webkit-transition:opacity 0.3s, -webkit-transform 0.4s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:opacity 0.3s, -webkit-transform 0.4s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.4s cubic-bezier(0.64, 0.01, 0.67, 0.92), opacity 0.3s;transition:transform 0.4s cubic-bezier(0.64, 0.01, 0.67, 0.92), opacity 0.3s, -webkit-transform 0.4s cubic-bezier(0.64, 0.01, 0.67, 0.92)}.fade-enter,.fade-leave-to{-webkit-transform:translateY(-10%);transform:translateY(-10%);opacity:0}.slide-enter-active{-webkit-transition:opacity 0.3s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0.5, 0.1, 1);transition:opacity 0.3s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0.5, 0.1, 1);transition:opacity 0.3s linear, transform 0.5s cubic-bezier(0.2, 0.5, 0.1, 1);transition:opacity 0.3s linear, transform 0.5s cubic-bezier(0.2, 0.5, 0.1, 1), -webkit-transform 0.5s cubic-bezier(0.2, 0.5, 0.1, 1);-webkit-transition-delay:calc(0.2s + 0.2s * var(--i));transition-delay:calc(0.2s + 0.2s * var(--i))}.slide-leave-active{-webkit-transition:opacity 0.4s linear, -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.7, 0.4);transition:opacity 0.4s linear, -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.7, 0.4);transition:opacity 0.4s linear, transform 0.5s cubic-bezier(0.5, 0, 0.7, 0.4);transition:opacity 0.4s linear, transform 0.5s cubic-bezier(0.5, 0, 0.7, 0.4), -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.7, 0.4);-webkit-transition-delay:calc(0.1s * var(--i));transition-delay:calc(0.1s * var(--i))}.slide-leave-to,.slide-enter{-webkit-transform:translateY(1rem);transform:translateY(1rem);opacity:0}";
+
+let PnColor$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return `<h1>Color</h1>`;
+  }
+  static get style() { return pnColorCss; }
+};
+PnColor$1 = /*@__PURE__*/ proxyCustomElement(PnColor$1, [0, "pn-color", {
+    "name": [1],
+    "defaultColor": [1, "default-color"],
+    "palette": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-color"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-color":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnColor$1);
+      }
+      break;
+  } });
+}
+
+const PnColor = PnColor$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnColor, defineCustomElement };

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

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

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

@@ -0,0 +1,34 @@
+import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { c as colors } from './colors.js';
+
+const pnColorsCss = ".colors{padding:3em 2em;max-width:100rem;margin:auto}.palette-container{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.palette-container .color-palette{-ms-flex:1;flex:1;margin:1em}.palette-container .color-palette .color-swatch{width:100px;height:100px;-webkit-box-shadow:1px 2px 4px #F3F2F2;box-shadow:1px 2px 4px #F3F2F2}.palette-container .color-palette .color-name{-ms-flex-line-pack:center;align-content:center;margin-top:8px}";
+
+let PnColors$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h("div", { class: "colors" }, h("h1", null, "Colors"), h("div", { class: "palette-container" }, Object.entries(colors).map(([name, rgb]) => (h("div", { class: "color-palette" }, h("div", { class: "color-swatch", style: { backgroundColor: rgb } }), h("h4", { class: "color-name" }, name), h("p", { class: "color-rg" }, rgb)))))));
+  }
+  static get style() { return pnColorsCss; }
+};
+PnColors$1 = /*@__PURE__*/ proxyCustomElement(PnColors$1, [0, "pn-colors"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-colors"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-colors":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnColors$1);
+      }
+      break;
+  } });
+}
+
+const PnColors = PnColors$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnColors, defineCustomElement };

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

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