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

package/umd/modules/@postnord/web-components/collection/components/input/pn-calendar/pn-calendar.js

@@ -0,0 +1,606 @@
+import { Component, Prop, Element, Event, Watch, h } from "@stencil/core";
+import { createDateOrNull, getDayNamesByLanguage, getMonthNamesByLanguage, computeMonths } from "../../../globals/helpers";
+export class PnCalendar {
+  constructor() {
+    /** 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" }))));
+  }
+  static get is() { return "pn-calendar"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-calendar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-calendar.css"]
+  }; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Supported languages: \"en\", \"sv\", \"da\", \"fi\", \"no\""
+      },
+      "attribute": "language",
+      "reflect": false
+    },
+    "min": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Minimum date in 'yyyy-mm-dd' format"
+      },
+      "attribute": "min",
+      "reflect": false
+    },
+    "max": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Maximum date in 'yyyy-mm-dd' format"
+      },
+      "attribute": "max",
+      "reflect": false
+    },
+    "startOfWeek": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Value could be 0-6 where 0 is sunday"
+      },
+      "attribute": "start-of-week",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default date value in 'yyyy-mm-dd' format"
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "disableWeekends": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set this to true to disable weekends"
+      },
+      "attribute": "disable-weekends",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disableDays": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set specific days to be disabled 'yyyy-mm-dd' format separated by comma"
+      },
+      "attribute": "disable-days",
+      "reflect": false
+    },
+    "minActiveDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the minimum active date. Note: Requires maxActiveDate to be set."
+      },
+      "attribute": "min-active-date",
+      "reflect": false
+    },
+    "maxActiveDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the maximum active date. Note: Requires minActiveDate to be set."
+      },
+      "attribute": "max-active-date",
+      "reflect": false
+    },
+    "defaultDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default date to draw on load."
+      },
+      "attribute": "default-date",
+      "reflect": false
+    },
+    "disableMonthsView": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disable months view."
+      },
+      "attribute": "disable-months-view",
+      "reflect": false
+    },
+    "monthView": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Force display the months view."
+      },
+      "attribute": "month-view",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "daychange",
+      "name": "daychange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when date is changed"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "monthchanged",
+      "name": "monthchanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the month/year is changed"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "sameday",
+      "name": "sameday",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the user selects the same day"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "viewchange",
+      "name": "viewchange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the view is changed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "parseSelectedDateFromValue"
+    }, {
+      "propName": "disableDays",
+      "methodName": "parseDisabledDays"
+    }]; }
+}

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

@@ -0,0 +1,28 @@
+import { boolean, text } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "input/Checkbox",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+export const regular = () => {
+  // Storybook Knobs ------------------------------------------//
+  const disabledBool = boolean("disabled", false);
+  const checkedBool = boolean("checked", false);
+  const indeterminateBool = boolean("indeterminate", false);
+  const idString = text("checkboxid", "test-id");
+  const value = text("value", "test value");
+  const nameString = text("name", "test-name");
+  // --------------------------------------------------------- //
+
+  return `
+    <div style="display: flex; align-items: center;">
+      <pn-checkbox checkboxid=${idString} value=${value} name=${nameString} checked=${checkedBool} indeterminate=${indeterminateBool} disabled=${disabledBool}></pn-checkbox>
+      <label style="margin-left: .5em;" for=${idString}>${value}</label>
+    </div>
+  `;
+};

package/umd/modules/@postnord/web-components/collection/components/input/pn-checkbox/pn-checkbox.css

@@ -0,0 +1,76 @@
+pn-checkbox {
+  display: inline-block;
+  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: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  border: 0.1rem solid #969087;
+  cursor: pointer;
+  border-radius: 0.4rem;
+  cursor: pointer;
+  transition-duration: 220ms;
+  transition-timing-function: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+  transition-property: border, background, 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;
+  transform-origin: 0 0;
+  stroke-linecap: round;
+  stroke-dasharray: 23;
+  stroke-dashoffset: 23;
+  transition-delay: none;
+  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 {
+  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 {
+  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 {
+  box-shadow: none;
+}