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

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

@@ -0,0 +1,221 @@
+import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { c as createDateOrNull, d as debounce } from './helpers.js';
+import { d as defineCustomElement$3 } from './pn-calendar2.js';
+import { d as defineCustomElement$2 } from './pn-icon2.js';
+
+const pnDatePickerCss = "pn-date-picker{display:inline-block}pn-date-picker.open-datepicker .datepicker-container .datepicker-input-container input,pn-date-picker.open-datepicker .datepicker-container .datepicker-input-container input:focus,pn-date-picker.open-datepicker .datepicker-container .datepicker-input-container input:hover{outline:none;border:0.1rem solid #005D92;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-date-picker.open-datepicker .datepicker-calendar-container{display:block}pn-date-picker.open-datepicker .datepicker-container .datepicker-input-container label,pn-date-picker.has-input .datepicker-container .datepicker-input-container label{top:0.1rem;-webkit-transform:translateY(0);transform:translateY(0);font-size:1.2rem}pn-date-picker.invalid .datepicker-container .datepicker-input-container input,pn-date-picker.invalid .datepicker-container .datepicker-input-container input:focus,pn-date-picker.invalid .datepicker-container .datepicker-input-container input:hover{border:0.1rem solid #A70707}pn-date-picker.invalid .datepicker-container .datepicker-input-container input:focus{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707}pn-date-picker .datepicker-container{position:relative}pn-date-picker .datepicker-container .datepicker-input-container{border:none;position:relative;width:100%;height:100%}pn-date-picker .datepicker-container .datepicker-input-container input,pn-date-picker .datepicker-container .datepicker-input-container div,pn-date-picker .datepicker-container .datepicker-input-container label,pn-date-picker .datepicker-container .datepicker-input-container span{font-family:inherit}pn-date-picker .datepicker-container .datepicker-input-container input{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;border:0.1rem solid #5E554A;background-color:#fff;padding:0.75em;color:#000000;font-size:1.6rem;font-weight:300;line-height:2rem;border-radius:0.8rem;-webkit-transition:border 0.15s, -webkit-box-shadow 0.15s;transition:border 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, border 0.15s;transition:box-shadow 0.15s, border 0.15s, -webkit-box-shadow 0.15s}pn-date-picker .datepicker-container .datepicker-input-container input::-webkit-input-placeholder{color:#969087}pn-date-picker .datepicker-container .datepicker-input-container input::-moz-placeholder{color:#969087}pn-date-picker .datepicker-container .datepicker-input-container input:-ms-input-placeholder{color:#969087}pn-date-picker .datepicker-container .datepicker-input-container input::-ms-input-placeholder{color:#969087}pn-date-picker .datepicker-container .datepicker-input-container input::placeholder{color:#969087}pn-date-picker .datepicker-container .datepicker-input-container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-shadow:none;box-shadow:none;outline:none}pn-date-picker .datepicker-container .datepicker-input-container input:hover{border-color:#00A0D6}pn-date-picker .datepicker-container .datepicker-input-container input:disabled{background-color:#F3F2F2;border-color:#D3CECB;color:#969087}pn-date-picker .datepicker-container .datepicker-input-container>pn-icon,pn-date-picker .datepicker-container .datepicker-input-container>pn-spinner{position:absolute;right:1rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}pn-date-picker .datepicker-container .datepicker-input-container>pn-icon{cursor:pointer}pn-date-picker .datepicker-container .datepicker-input-container label{-webkit-transition:0.2s ease-in-out;transition:0.2s ease-in-out;font-size:1em;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;-ms-flex-order:1;order:1;pointer-events:none;-webkit-font-smoothing:antialiased;z-index:1;position:absolute;color:#969087;font-weight:normal}pn-date-picker .datepicker-calendar-container{display:none;position:absolute;border-radius:0.8rem;top:120%;left:0;width:29.6rem;padding:1.6rem 1.6rem 0.735rem 1.6rem;border:0.1rem solid #D3CECB;-webkit-box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);background-color:white;z-index:9999}pn-date-picker.position-top .datepicker-calendar-container{top:auto;bottom:calc(100% + 1.2rem)}pn-date-picker.position-left .datepicker-calendar-container{right:auto;left:0}pn-date-picker.position-right .datepicker-calendar-container{right:0;left:auto}";
+
+let PndatePicker = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.datechange = createEvent(this, "datechange", 7);
+    this.monthchanged = createEvent(this, "monthchanged", 7);
+    this.dateerror = createEvent(this, "dateerror", 7);
+  }
+  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) }))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "value": ["parseSelectedDateFromValue"]
+  }; }
+  static get style() { return pnDatePickerCss; }
+};
+PndatePicker = /*@__PURE__*/ proxyCustomElement(PndatePicker, [0, "pn-date-picker", {
+    "language": [1],
+    "disabled": [4],
+    "emitErrors": [4, "emit-errors"],
+    "label": [1],
+    "min": [1],
+    "max": [1],
+    "invalid": [4],
+    "disableWeekends": [4, "disable-weekends"],
+    "disableDays": [1, "disable-days"],
+    "disableInput": [4, "disable-input"],
+    "startOfWeek": [2, "start-of-week"],
+    "dispatchChangeOnBlur": [4, "dispatch-change-on-blur"],
+    "position": [1],
+    "value": [1025]
+  }, [[0, "daychange", "dateChanged"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-date-picker", "pn-calendar", "pn-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-date-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PndatePicker);
+      }
+      break;
+    case "pn-calendar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pn-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PnDatePicker = PndatePicker;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnDatePicker, defineCustomElement };

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

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

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

@@ -0,0 +1,447 @@
+import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { e as getBytesFromHumanReadableFileSize, u as uuidv4 } from './helpers.js';
+import { d as defineCustomElement$4 } from './pn-icon2.js';
+import { d as defineCustomElement$3 } from './pn-progress-bar2.js';
+import { d as defineCustomElement$2 } from './pn-spinner2.js';
+
+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;
+  }
+}
+
+const pnFileUploadCss = "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:-webkit-gradient(linear, left top, right top, color-stop(50%, #969087), color-stop(0%, transparent));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:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #969087), color-stop(0%, transparent));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:-webkit-gradient(linear, left top, right top, color-stop(50%, #00A0D6), color-stop(0%, transparent));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:-webkit-gradient(linear, left top, right top, color-stop(50%, #00A0D6), color-stop(0%, transparent));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:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #00A0D6), color-stop(0%, transparent));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:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #00A0D6), color-stop(0%, transparent));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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}pn-file-upload .files-list .files-list-item>pn-progress-bar{margin-right:10px;-ms-flex:1;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}";
+
+let PnFileUpload$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.filesAdded = createEvent(this, "filesAdded", 7);
+    this.update = createEvent(this, "update", 7);
+    this.fileuploaderror = createEvent(this, "fileuploaderror", 7);
+    this.valid = createEvent(this, "valid", 7);
+    this.uploadFile = createEvent(this, "uploadFile", 7);
+    this.uploadCancelled = createEvent(this, "uploadCancelled", 7);
+    this.uploadCompleted = createEvent(this, "uploadCompleted", 7);
+    this.triggerElements = [];
+    this.renders = 0;
+    this.maxSize = "";
+    this.limit = 1;
+    this.invalid = false;
+    this.files = [];
+    this.maxSizeInBytes = 0;
+  }
+  componentWillLoad() {
+    this._initTriggerElements();
+    this._setDefaultValues();
+    this.initMaxBytes();
+    if (this.disabled) {
+      this.hostElement.classList.add("disabled");
+    }
+    else {
+      this.hostElement.classList.remove("disabled");
+    }
+  }
+  componentWillUpdate() {
+    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");
+    }
+  }
+  initMaxBytes() {
+    this.maxSizeInBytes = getBytesFromHumanReadableFileSize(this.maxSize);
+  }
+  componentDidLoad() {
+    this.fileInputElement = this.hostElement.querySelector(".pn-file-upload-input");
+    this.fileInputElement.addEventListener("change", this._onAddFile.bind(this));
+  }
+  _setDefaultValues() {
+    if (this.limit > 1) {
+      this.multiple = true;
+    }
+  }
+  _initTriggerElements() {
+    const context = this;
+    this.triggerElements = Array.from(this.hostElement.querySelectorAll(".pn-open-file-explorer"));
+    this.triggerElements.forEach(function (element) {
+      if (element.dataset.canOpen !== "1") {
+        element.addEventListener("click", context.openFileExplorer.bind(context));
+        element.dataset.canOpen = "1";
+      }
+    });
+  }
+  _addFilesFromFileList(fileList) {
+    if (this.disabled || this.invalid) {
+      return;
+    }
+    const context = this;
+    const files = Array.from(fileList);
+    const promises = [];
+    if (this.multiple) {
+      files.forEach(function (file) {
+        promises.push(context._addFile(file));
+      });
+    }
+    else {
+      const file = files[0];
+      if (this.limit === 1) {
+        this.files = [];
+        promises.push(this._addFile(file));
+      }
+      else {
+        promises.push(this._addFile(file));
+      }
+    }
+    Promise.all(promises).then(function () {
+      context.filesAdded.emit(context.files);
+      context._isNotGreaterThanLimit();
+      context._checkValidity();
+      context._emitUpdateEvent();
+      context.fileInputElement.value = "";
+    });
+  }
+  _onAddFile() {
+    const files = this.fileInputElement.files;
+    return this._addFilesFromFileList(files);
+  }
+  _onDragOverFile(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.hostElement.classList.add("hover");
+  }
+  _onDragLeaveFile(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.hostElement.classList.remove("hover");
+  }
+  _onDropFile(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.hostElement.classList.remove("hover");
+    this._addFilesFromFileList(event.dataTransfer.files);
+  }
+  _validateFileType(file) {
+    const accepts = this.accept ? this.accept.split(",") : [];
+    if (accepts.length) {
+      let valid = false;
+      for (const accept of accepts) {
+        const type = accept.trim().toLowerCase();
+        const isMimeType = /^\w+\/[a-z\.\-]+$/i;
+        const extension = file.filename.substr(file.filename.lastIndexOf(".")).toLowerCase();
+        if (isMimeType.test(type) && file.contentType === type) {
+          valid = true;
+          break;
+        }
+        else if (extension === type) {
+          valid = true;
+          break;
+        }
+      }
+      if (!valid) {
+        const error = new PnFileUploadError(`Invalid file type.`, this.hostElement, "INVALID_FILE_TYPE", file);
+        this.invalid = true;
+        this.fileuploaderror.emit(error);
+        throw error;
+      }
+    }
+  }
+  _validateFileSize(file) {
+    if (this.maxSizeInBytes > 0 && file.filesize > this.maxSizeInBytes) {
+      const error = new PnFileUploadError(`You can only add up to ${this.maxSize}.`, this.hostElement, "MAX_FILE_SIZE", file);
+      this.invalid = true;
+      this.fileuploaderror.emit(error);
+      throw error;
+    }
+  }
+  _validateLimit() {
+    if (this.limit && this.files.length > this.limit) {
+      const error = new PnFileUploadError(`You can only add up to ${this.limit} files.`, this.hostElement, "MAX_LIMIT", this.files);
+      this.invalid = true;
+      this.fileuploaderror.emit(error);
+      throw error;
+    }
+  }
+  _isNotGreaterThanLimit() {
+    try {
+      this._validateLimit();
+      return true;
+    }
+    catch (error) {
+      return false;
+    }
+  }
+  _checkValidity() {
+    if (!this.invalid) {
+      this.valid.emit(this);
+    }
+    this._initTriggerElements();
+    return !this.invalid;
+  }
+  _createBase64FromFile(file) {
+    return new Promise(function (resolve, reject) {
+      const reader = new FileReader();
+      reader.onload = function () {
+        resolve(reader.result);
+      };
+      reader.onerror = function (error) {
+        reject(error);
+      };
+      reader.onabort = function () {
+        reject("ABORTED");
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+  _addFile(file) {
+    const context = this;
+    return this._createBase64FromFile(file).then(function (data) {
+      const split = data.split(",");
+      const base64 = split[1];
+      const contentType = split[0].split(":")[1].split(";")[0];
+      const request = new XMLHttpRequest();
+      const uploadFile = {
+        uuid: uuidv4(),
+        filename: file.name,
+        filesize: file.size,
+        progress: 0,
+        status: "queue",
+        base64: base64,
+        contentType: contentType,
+        error: null,
+        errorMessage: "",
+        file: file,
+        xhr: request
+      };
+      try {
+        context._validateFileSize(uploadFile);
+        context._validateFileType(uploadFile);
+      }
+      catch (error) {
+        uploadFile.error = error;
+        uploadFile.progress = 100;
+        uploadFile.status = "error";
+      }
+      uploadFile.xhrPromise = function () {
+        return new Promise(function (resolve, reject) {
+          request.responseType = "json";
+          request.addEventListener("progress", function (event) {
+            if (event.lengthComputable) {
+              uploadFile.progress = (event.loaded / event.total) * 100;
+              context.updateFile(uploadFile);
+            }
+            else {
+              uploadFile.progress = 100;
+              context.updateFile(uploadFile);
+            }
+          });
+          request.addEventListener("load", function (response) {
+            resolve(response.target.response);
+          });
+          request.addEventListener("error", function (error) {
+            uploadFile.error = error;
+            uploadFile.errorMessage =
+              "There was an error uploading your file, please try again";
+            context.updateFile(uploadFile);
+            const errorEvent = new PnFileUploadError("There was an error uploading your file, please try again", context.hostElement, "UPLOAD_SERVER_ERROR", uploadFile);
+            context.fileuploaderror.emit(errorEvent);
+            reject(error);
+          });
+        });
+      };
+      context.files = [...context.files, uploadFile];
+      return uploadFile;
+    });
+  }
+  _removeFile(targetFile, context) {
+    return function (event) {
+      event.preventDefault();
+      context.removeFile(targetFile);
+    };
+  }
+  _emitUpdateEvent() {
+    this.update.emit({
+      files: this.files,
+      element: this
+    });
+  }
+  openFileExplorer(event) {
+    event.preventDefault();
+    if (!this.invalid && !this.disabled) {
+      this.fileInputElement.click();
+    }
+  }
+  async startUpload() {
+    const context = this;
+    if (!context.files.length) {
+      return;
+    }
+    context.files = context.files.map(function (file, index) {
+      if (file.status === "queue") {
+        file.status = "start";
+        context.uploadFile.emit({
+          file: file,
+          index: index,
+          uploader: context
+        });
+      }
+      return file;
+    });
+    const promises = context.files.map(function (file) {
+      return file.xhrPromise().catch(function () {
+        return;
+      });
+    });
+    Promise.all(promises).then(function (data) {
+      const added = data.filter(function (item) {
+        return item;
+      });
+      context.uploadCompleted.emit(added);
+    });
+  }
+  async clearUpload() {
+    this.files = [];
+    this.fileInputElement.value = "";
+    this.invalid = false;
+    this.filesAdded.emit([]);
+  }
+  async removeFile(targetFile) {
+    let valid = true;
+    const files = [];
+    for (const fileIndex in this.files) {
+      const file = this.files[fileIndex];
+      if (!file.filename) {
+        continue;
+      }
+      // add to files if the uuid doesn't match
+      if (file.uuid !== targetFile.uuid) {
+        try {
+          this._validateFileSize(file);
+          this._validateFileType(file);
+          valid = true;
+        }
+        catch (error) {
+          valid = false;
+          file.error = error;
+          file.progress = 100;
+          file.status = "error";
+        }
+        files.push(file);
+      }
+      else if (file.status === "start") {
+        file.xhr.abort();
+        this.uploadCancelled.emit(file);
+      }
+    }
+    this.filesAdded.emit(files);
+    this.files = files;
+    this.invalid = !valid || !this._isNotGreaterThanLimit();
+    this._checkValidity();
+    this._emitUpdateEvent();
+  }
+  async updateFile(file, index = null) {
+    let files = this.files;
+    // find the index if not defined
+    if (index === null) {
+      for (const fIndex in files) {
+        const fFile = files[fIndex];
+        if (fFile.uuid === file.uuid) {
+          index = fIndex;
+          break;
+        }
+      }
+    }
+    if (files[index]) {
+      if (file.progress >= 100) {
+        file.progress = 100;
+        file.status = "completed";
+      }
+      else if (file.progress < 0) {
+        file.status = "start";
+        file.progress = 0;
+      }
+      if (file.error) {
+        file.progress = 100;
+        file.status = "error";
+        file.errorMessage =
+          file.errorMessage ||
+            "There was an error uploading your file, please try again";
+      }
+      files[index] = file;
+    }
+    this.files = files;
+    this._forceRender();
+  }
+  // @bug: stenciljs fails to re-render the array (e.g. files) if the array length is not updated
+  _forceRender() {
+    this.renders = this.renders + 1;
+  }
+  render() {
+    return (h("div", { class: "pn-file-upload-container" }, h("div", { class: "pn-dropzone-container" }, h("div", { class: "pn-dropzone-inner" }, h("div", { class: "pn-file-upload-dropzone", onDragOver: this._onDragOverFile.bind(this), onDragLeave: this._onDragLeaveFile.bind(this), onDrop: this._onDropFile.bind(this) }, h("div", { class: "default-message-container" }, this.disabled || this.invalid ? (h("pn-icon", { class: "pn-file-upload-dropzone-icon", symbol: "disabled", color: "grey-06-rock" })) : (h("pn-icon", { class: "pn-file-upload-dropzone-icon", symbol: "upload", color: "grey-06-rock" })), h("slot", null))))), h("section", { class: "files-list" }, this.files.map((file) => (h("div", { class: "files-list-item-container" }, h("div", { class: "files-list-item" }, h("pn-progress-bar", { label: file.filename, "show-spinner": this.showSpinner &&
+        file.progress < 100 &&
+        file.status === "start", progress: file.progress, color: file.status === "error" ? "error" : "default", size: "small", width: "100%" }), h("div", { class: "icon-button" }), h("pn-icon", { symbol: "minus-circle", color: "grey-05-battleship", onClick: this._removeFile(file, this) })), file.error ? (h("div", { class: "files-list-item-error" }, file.errorMessage || file.error.message)) : null)))), h("input", { type: "file", name: "pnFileUpload[]", class: "pn-file-upload-input", multiple: this.multiple, accept: this.accept })));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "maxSize": ["initMaxBytes"]
+  }; }
+  static get style() { return pnFileUploadCss; }
+};
+PnFileUpload$1 = /*@__PURE__*/ proxyCustomElement(PnFileUpload$1, [4, "pn-file-upload", {
+    "disabled": [4],
+    "showSpinner": [4, "show-spinner"],
+    "accept": [1],
+    "maxSize": [1, "max-size"],
+    "limit": [2],
+    "multiple": [1028],
+    "triggerElements": [32],
+    "renders": [32],
+    "startUpload": [64],
+    "clearUpload": [64],
+    "removeFile": [64],
+    "updateFile": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-file-upload", "pn-icon", "pn-progress-bar", "pn-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-file-upload":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnFileUpload$1);
+      }
+      break;
+    case "pn-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pn-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pn-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PnFileUpload = PnFileUpload$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnFileUpload, defineCustomElement };