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

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

@@ -0,0 +1,471 @@
+import { Component, Prop, Element, Event, Watch, Listen, h } from "@stencil/core";
+import { debounce, createDateOrNull } from "../../../globals/helpers";
+export class PndatePicker {
+  componentWillLoad() {
+    this.isInit = true;
+    this._updateClassStates();
+    this.parseSelectedDateFromValue(this.value);
+    this._initMinAndMaxDates();
+    document.addEventListener("mousedown", this._onClickOutside.bind(this));
+    this.isInit = false;
+  }
+  componentDidLoad() {
+    this.calendarContainer = this.hostElement.querySelector(".datepicker-calendar");
+    this.monthElement = this.hostElement.querySelector(".month-field");
+  }
+  componentWillUpdate() {
+    this._updateClassStates();
+    this._initMinAndMaxDates();
+  }
+  _initMinAndMaxDates() {
+    this.minDate = createDateOrNull(this.min);
+    this.maxDate = createDateOrNull(this.max);
+  }
+  dateChanged(event) {
+    this.value = event.detail;
+    this.closeDatepicker();
+  }
+  parseSelectedDateFromValue(value) {
+    let selectedDate = createDateOrNull(value);
+    let hasValidDate = selectedDate ? true : false;
+    this.selectedDate = selectedDate || new Date();
+    if (this.dispatchChangeOnBlur && this.isInit) {
+      return;
+    }
+    this.hasValidDate = hasValidDate;
+    if (value && this.emitErrors) {
+      if (!hasValidDate) {
+        this.dateerror.emit({
+          code: "INVALID_DATE",
+          value: value
+        });
+      }
+      if (this.minDate && selectedDate < this.minDate) {
+        this.dateerror.emit({
+          code: "MIN_DATE",
+          value: value
+        });
+      }
+      if (this.maxDate && selectedDate > this.maxDate) {
+        this.dateerror.emit({
+          code: "MAX_DATE",
+          value: value
+        });
+      }
+    }
+    if (hasValidDate) {
+      if (value === "1970-01-01") {
+        value = "";
+      }
+      else if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+        const sDate = new Date(value);
+        const sYear = sDate.getFullYear();
+        const sMonth = this._addLeadingZero(sDate.getMonth() + 1);
+        const sDay = this._addLeadingZero(sDate.getDate());
+        value = `${sYear}-${sMonth}-${sDay}`;
+      }
+      this.datechange.emit(value);
+      this.dateerror.emit(null);
+    }
+    else {
+      if (this.emitErrors) {
+        if (value) {
+          this.dateerror.emit({
+            code: "INVALID_DATE",
+            value: value
+          });
+        }
+        else {
+          this.dateerror.emit(null);
+        }
+      }
+    }
+  }
+  _updateClassStates() {
+    if (this.invalid) {
+      this.hostElement.classList.add("invalid");
+    }
+    else {
+      this.hostElement.classList.remove("invalid");
+    }
+    if (this.disabled) {
+      this.hostElement.classList.add("disabled");
+    }
+    else {
+      this.hostElement.classList.remove("disabled");
+    }
+    if (this.disableInput) {
+      this.hostElement.classList.add("disabled-input");
+    }
+    else {
+      this.hostElement.classList.remove("disabled-input");
+    }
+    if (this.position) {
+      // remove previous positions
+      const positions = ["top", "left", "bttom", "right"];
+      Object.keys(positions).forEach(position => this.hostElement.classList.remove(`position-${position}`));
+      this.position
+        .toLowerCase()
+        .split(" ")
+        .slice(0, 2)
+        .forEach(position => this.hostElement.classList.add(`position-${position}`));
+    }
+    this._updateHasInputClass();
+  }
+  openDatepicker() {
+    if (!this.disabled) {
+      this.isOpen = true;
+      this.hostElement.classList.add("open-datepicker");
+      this._updateHasInputClass();
+      this.monthSelection = this.selectedDate.getMonth();
+      this.yearSelection = this.selectedDate.getFullYear();
+    }
+  }
+  closeDatepicker() {
+    this.isOpen = false;
+    this.hostElement.classList.remove("open-datepicker");
+    this._updateHasInputClass();
+  }
+  _onClickOutside(event) {
+    const clickedOutside = !this.hostElement.contains(event.target);
+    if (this.isOpen && clickedOutside) {
+      this.parseSelectedDateFromValue(this.value);
+      this.closeDatepicker();
+    }
+  }
+  _addLeadingZero(num) {
+    return ("0" + num).slice(-2);
+  }
+  _updateHasInputClass() {
+    if (this.value && this.value.length) {
+      this.hostElement.classList.add("has-input");
+    }
+    else {
+      this.hostElement.classList.remove("has-input");
+    }
+  }
+  onMonthChanged(event) {
+    this.monthchanged.emit(event.detail);
+  }
+  render() {
+    const context = this;
+    const trapKeyStrokes = debounce(function (event) {
+      context.value = event.target.value;
+    }, 400, false);
+    const noInput = function (event) {
+      event.preventDefault();
+    };
+    return (h("div", { class: "datepicker-container" },
+      h("div", { class: "datepicker-input-container" },
+        h("input", { type: "text", class: "date-input", value: this.value, onFocus: this.openDatepicker.bind(this), onKeyDown: this.disableInput ? noInput : trapKeyStrokes.bind(this), disabled: this.disabled }),
+        h("pn-icon", { symbol: "calendar", onClick: this.openDatepicker.bind(this), color: this.disabled ? "gray400" : "black" }),
+        h("label", null, this.label)),
+      h("div", { class: "datepicker-calendar-container" },
+        h("pn-calendar", { value: this.value, min: this.min, max: this.max, language: this.language, "disable-days": this.disableDays, "disable-weekends": this.disableWeekends, "start-of-week": this.startOfWeek, onMonthchanged: this.onMonthChanged.bind(this) }))));
+  }
+  static get is() { return "pn-date-picker"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-date-picker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-date-picker.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
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disable the date picker if set to true"
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "emitErrors": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Will fire error event if set to true"
+      },
+      "attribute": "emit-errors",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label of the date picker"
+      },
+      "attribute": "label",
+      "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
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Display red border if set to true"
+      },
+      "attribute": "invalid",
+      "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
+    },
+    "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
+    },
+    "disableInput": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set this to true to disable direct input in the field"
+      },
+      "attribute": "disable-input",
+      "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
+    },
+    "dispatchChangeOnBlur": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Will fire datechange event on blur if set to true"
+      },
+      "attribute": "dispatch-change-on-blur",
+      "reflect": false
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set date picker position Ex. \"top left\", \"bottom right\""
+      },
+      "attribute": "position",
+      "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
+    }
+  }; }
+  static get events() { return [{
+      "method": "datechange",
+      "name": "datechange",
+      "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": "dateerror",
+      "name": "dateerror",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when there is data error"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "parseSelectedDateFromValue"
+    }]; }
+  static get listeners() { return [{
+      "name": "daychange",
+      "method": "dateChanged",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,41 @@
+import { boolean, text, number } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "input/File Upload",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+export const regular = () => {
+  // Storybook Knobs ------------------------------------------//
+  const disabled = boolean("disabled", false);
+  const multiple = boolean("multiple", true);
+  const showSpinner = boolean("showSpinner", false);
+  const accept = text("accept", ".doc,.txt");
+  const maxSize = text("maxSize", "4MB");
+  const limit = number("limit", 2);
+  // --------------------------------------------------------- //
+
+  function isMultiple(limit) {
+    return limit > 1;
+  }
+
+  return `
+    <pn-file-upload accept="${accept}"
+      max-size="${maxSize}"
+      limit=${limit}
+      disabled=${disabled}
+      multiple=${multiple}
+      show-spinner=${showSpinner}>
+      <div class="message">
+        <p class="headline">Drag file here or <a href="#" class="pn-open-file-explorer">browse</a></p>
+        <p class="description">
+          You can add ${multiple || isMultiple(limit) ? accept + " files" : "a " + accept + " file"} (max ${maxSize}MB)
+        </p>
+      </div>
+    </pn-file-upload>
+  `;
+};

package/umd/modules/@postnord/web-components/collection/components/input/pn-file-upload/pn-file-upload-error.js

@@ -0,0 +1,9 @@
+export class PnFileUploadError extends Error {
+  constructor(message, element, code = "INVALID", data = null) {
+    super(message);
+    this.name = "PNFileUploadError";
+    this.element = element;
+    this.code = code;
+    this.data = data;
+  }
+}

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

@@ -0,0 +1,109 @@
+pn-file-upload.hover .pn-file-upload-container .pn-dropzone-container {
+  background-color: #E0F8FF;
+}
+pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container, pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container {
+  background-color: #D3CECB;
+}
+pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container, pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container:after, pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container, pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container:after {
+  background-image: linear-gradient(to right, #969087 50%, transparent 0%);
+}
+pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container .pn-dropzone-inner,
+pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container .pn-dropzone-inner:after, pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container .pn-dropzone-inner,
+pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container .pn-dropzone-inner:after {
+  background-image: linear-gradient(to bottom, #969087 50%, transparent 0%);
+}
+pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container a, pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container a {
+  cursor: default;
+}
+pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container:hover, pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container:hover {
+  background-color: #D3CECB;
+}
+pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container .headline a, pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container .headline a {
+  color: #5E554A;
+}
+pn-file-upload .pn-file-upload-input {
+  display: none;
+}
+pn-file-upload .pn-file-upload-container .pn-dropzone-container {
+  text-align: center;
+  position: relative;
+  background-image: linear-gradient(to right, #00A0D6 50%, transparent 0%);
+  background-position: top;
+  background-size: 16px 1px;
+  background-repeat: repeat-x;
+  background-color: #FFFFFF;
+}
+pn-file-upload .pn-file-upload-container .pn-dropzone-container:after {
+  content: " ";
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  background-image: linear-gradient(to right, #00A0D6 50%, transparent 0%);
+  background-position: bottom;
+  background-size: 16px 1px;
+  background-repeat: repeat-x;
+}
+pn-file-upload .pn-file-upload-container .pn-dropzone-container:hover {
+  background-color: #E0F8FF;
+}
+pn-file-upload .pn-file-upload-container .pn-dropzone-container .pn-dropzone-inner {
+  padding: 25px 60px;
+  position: relative;
+  background-image: linear-gradient(to bottom, #00A0D6 50%, transparent 0%);
+  background-position: left;
+  background-size: 1px 16px;
+  background-repeat: repeat-y;
+}
+pn-file-upload .pn-file-upload-container .pn-dropzone-container .pn-dropzone-inner:after {
+  content: " ";
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  top: 0;
+  right: 0;
+  background-image: linear-gradient(to bottom, #00A0D6 50%, transparent 0%);
+  background-position: right;
+  background-size: 1px 16px;
+  background-repeat: repeat-y;
+}
+pn-file-upload .pn-file-upload-container .pn-dropzone-container .headline {
+  color: #969087;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 20px;
+  text-align: center;
+  margin-bottom: 8px;
+}
+pn-file-upload .pn-file-upload-container .pn-dropzone-container .headline a {
+  color: #005D92;
+}
+pn-file-upload .pn-file-upload-container .pn-dropzone-container .description {
+  color: #969087;
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 16px;
+  margin-bottom: 0;
+}
+pn-file-upload .files-list .files-list-item {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+pn-file-upload .files-list .files-list-item > pn-progress-bar {
+  margin-right: 10px;
+  flex: 1;
+}
+pn-file-upload .files-list .files-list-item > pn-icon {
+  margin-top: 34px;
+  cursor: pointer;
+}
+pn-file-upload .files-list .files-list-item-error {
+  color: #5E554A;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 20px;
+}