@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

package/dist/collection/components/wm-uploader/wm-uploader.js

@@ -0,0 +1,673 @@
+import { Component, Element, Event, h, Host, Prop, State, Listen, Watch } from "@stencil/core";
+import { forceUpdate } from "@stencil/core";
+import { intl, generateId, hasValidType } from "../../global/functions";
+export class Uploader {
+  constructor() {
+    this.type = "1";
+    this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
+    this.maxSize = 100; // in Mb
+    this.sortBy = "date"; // name is descending (a -> z), date is ascending (earlier -> later)
+    this.fileList = []; // the string above transformed into the actual array
+    this.filesToUpload = []; // input.files that passed validation
+    this.isTabbing = false;
+    this.errorList = []; // for errors on a particular file
+    this.inputId = generateId();
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleUploadProgress(ev) {
+    this.fileList.map((i) => {
+      if (i.id === ev.detail.id) {
+        i.progress = ev.detail.progress;
+        forceUpdate(this.el);
+      }
+    });
+    if (ev.detail.progress === 100) {
+      // inProgressList is not a perfect reflection of how many files are uploading
+      // because even after progress reached 100% the item should remain in the array
+      // (should only be removed once it appears in fileList)
+      this.numFilesInProgress -= 1;
+    }
+    // aggregate the percentages for SR to announce progress
+    if (!this.srProgress && this.numFilesInProgress) {
+      const total = this.numFilesInProgress; // if we don't reassign this number changes when a file is done and the percentage becomes wrong
+      this.srProgress = setInterval(() => {
+        const aggregate = this.fileList.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
+        if (this.liveRegion) {
+          this.liveRegion.innerHTML = intl.formatMessage({
+            id: "uploader.uploadProgress",
+            defaultMessage: "Upload progress: {percentage}%",
+          }, { percentage: Math.floor(aggregate / total) });
+        }
+      }, 5000);
+    }
+  }
+  parseFiles() {
+    if (!!this.files) {
+      if (typeof this.files === "string") {
+        const list = JSON.parse(this.files);
+        if (typeof list === "object") {
+          this.fileList = list;
+        }
+        else {
+          throw new Error("could not parse string passed to files attribute");
+        }
+      }
+      else {
+        throw new Error("Attribute 'files' should be a string");
+      }
+    }
+  }
+  parseRejectedFiles() {
+    if (!!this.rejectedFiles) {
+      if (typeof this.files === "string") {
+        const list = JSON.parse(this.rejectedFiles);
+        if (typeof list === "object") {
+          this.errorList = list;
+        }
+        else {
+          throw new Error("could not parse string passed to errors attribute");
+        }
+      }
+      else {
+        throw new Error("Attribute 'rejected-files' should be a string");
+      }
+    }
+  }
+  setMaxSize() {
+    // Max size can't be set above 100Mb
+    this.maxSize = this.maxSize > 100 ? 100 : this.maxSize;
+  }
+  uploadNotifications(newNum, oldNum) {
+    if (oldNum > 0 && newNum === 0) {
+      setTimeout(() => {
+        this.notif = null;
+      }, 20 * 1000);
+      const message = intl.formatMessage({
+        id: "uploader.finishedUploading",
+        defaultMessage: "Finished uploading",
+      });
+      this.notif = { id: 5, message };
+      if (this.liveRegion) {
+        this.liveRegion.innerHTML = message;
+      }
+      this.numFilesInProgress = null;
+      clearInterval(this.srProgress);
+      forceUpdate(this.el);
+    }
+    else if (newNum > 0 && newNum != oldNum) {
+      const message = intl.formatMessage({
+        id: "uploader.filesUploading",
+        defaultMessage: "{num, plural, one {1 file uploading} other {# files uploading}}",
+      }, { num: newNum });
+      this.notif = { id: 6, message };
+      if (this.liveRegion) {
+        this.liveRegion.innerHTML = message;
+      }
+      forceUpdate(this.el);
+    }
+  }
+  isValidSize(size) {
+    // https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes
+    return size / 1024 / 1024 <= this.maxSize;
+  }
+  isDuplicate(name) {
+    return this.fileList.find((f) => {
+      const filename = f.type ? f.name + "." + f.type : f.name;
+      return filename === name;
+    });
+  }
+  isEmpty() {
+    return !this.fileList.length && !this.errorList.length;
+  }
+  isDisabled() {
+    const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;
+    if (!this.notif) {
+      if (isMax) {
+        const errMessage = intl.formatMessage({
+          id: "uploader.fileUploadLimit",
+          defaultMessage: "You have reached the file upload limit.",
+        });
+        this.notif = { id: 1, message: errMessage };
+        if (this.liveRegion) {
+          this.liveRegion.innerHTML = errMessage;
+        }
+      }
+      else {
+        this.notif = null;
+      }
+    }
+    else if (this.notif.id === 1) {
+      // to make sure SR don't repeat the error, don't reset it if it already is showing
+      // just dismiss it if isMax is not true anymore
+      if (!isMax) {
+        this.notif = null;
+      }
+      // finally do nothing if error 2 is showing (special case when user selects too many files)
+    }
+    // disable if is the uploader is maxed out or if something is uploading
+    return isMax || this.numFilesInProgress > 0;
+  }
+  isItemUploading(item) {
+    return item.hasOwnProperty("progress") && item.progress < 100;
+  }
+  clearErrors() {
+    this.errorList = [];
+    this.notif = null;
+  }
+  handleFiles(ev) {
+    this.filesToUpload = [];
+    const validTypes = this.fileTypes.split(" ").join(", ");
+    const files = Array.from(ev.target.files);
+    if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
+      const errMessage = intl.formatMessage({
+        id: "uploader.fileUploadExceeded",
+        defaultMessage: "The number of selected files exceeds the limit.",
+      });
+      this.notif = { id: 2, message: errMessage };
+      if (this.liveRegion) {
+        this.liveRegion.innerHTML = errMessage;
+      }
+    }
+    else {
+      files &&
+        files.map((file) => {
+          if (!hasValidType(file, this.fileTypes)) {
+            const error = {
+              name: file.name,
+              message: intl.formatMessage({
+                id: "uploader.invalidFileType",
+                defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
+              }, { validTypes }),
+            };
+            this.errorList.push(error);
+          }
+          else if (!this.isValidSize(file.size)) {
+            const error = {
+              name: file.name,
+              message: intl.formatMessage({
+                id: "uploader.fileTooLarge",
+                defaultMessage: "The selected file is too large. Maximum file size is {size}Mb",
+              }, { size: this.maxSize }),
+            };
+            this.errorList.push(error);
+          }
+          else if (this.isDuplicate(file.name)) {
+            const error = {
+              name: file.name,
+              message: intl.formatMessage({
+                id: "uploader.duplicateName",
+                defaultMessage: "A file with this name already exists.",
+              }),
+            };
+            this.errorList.push(error);
+          }
+          else {
+            this.filesToUpload.push(file);
+          }
+        });
+      if (this.filesToUpload.length > 0) {
+        this.numFilesInProgress = this.filesToUpload.length;
+        this.wmFilesSelected.emit(this.filesToUpload);
+      }
+    }
+    ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
+  }
+  downloadFile(file) {
+    this.clearErrors();
+    this.wmDownloadFile.emit(file.id);
+  }
+  deleteFile(file) {
+    this.clearErrors();
+    forceUpdate(this.el); // for the button to stop being disabled if num files become < max-files
+    this.wmDeleteFile.emit(file.id);
+  }
+  componentWillLoad() {
+    if (!this.buttonText) {
+      throw new Error("wm-uploader: button-text is a required prop");
+    }
+    if (this.type === "1" && !this.emptyStateText) {
+      throw new Error("wm-uploader: empty-state-text is a required prop");
+    }
+    this.setMaxSize();
+    this.parseFiles();
+    this.clearErrors();
+    this.parseRejectedFiles();
+  }
+  componentDidLoad() {
+    // awkward way to handle Edge bug where file input dialog doesn't open on Enter key
+    // first, detect polyfill by checking the class name that it adds to the component
+    // (it's important NOT to execute the code below in normal browsers as it would open the dialog twice)
+    this.el.classList.contains("sc-wm-uploader-h") &&
+      // then add an even listener to force a click event when Enter key is pressed
+      this.inputEl &&
+      this.inputEl.addEventListener("keydown", (ev) => {
+        if (this.inputEl && ev.keyCode === 13) {
+          this.inputEl.click();
+        }
+      });
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+  }
+  renderUploadSvg() {
+    return (h("svg", { class: "upload-file", width: "91", height: "84", viewBox: "0 0 91 84" },
+      h("path", { transform: "rotate(-180.000000) translate(-452, -255.5)", fill: "#eae8ec", d: "M361,249.681818 L361,197.318182 C361,194.118182 365.555061,191.5 371.122358,191.5 L391.316463,191.5 L391.286495,200.562515 L369.871211,200.600292 L369.885404,200.622146 L369.886423,246.655947 L443.657038,246.840767 L443.657038,200.622146 L421.683537,200.622146 L421.683537,191.5 L441.978865,191.5 C447.546162,191.5 452,194.118182 452,197.318182 L452,249.681818 C452,252.881818 447.546162,255.5 441.978865,255.5 L371.122358,255.5 C365.504449,255.5 361,252.881818 361,249.681818 Z M391.5,207 L406,221 L420.5,207 L409.625,207 L409.625,172 L402.375,172 L402.375,207 L391.5,207 Z" })));
+  }
+  renderIcon() {
+    // mdi attachment icon (paper clip) is horizontal but we want it vertical
+    const rotate = this.icon && this.icon === "f066";
+    return (this.icon && (h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)))));
+  }
+  renderInfo() {
+    return this.info && this.type === "2" ? h("span", { class: "info" }, this.info) : "";
+  }
+  renderNotif() {
+    return this.notif ? h("div", { class: "notif" }, this.notif.message) : "";
+  }
+  renderUploadButton(classes) {
+    return (h("div", { class: "info-wrapper" },
+      h("input", { ref: (el) => (this.inputEl = el), name: this.inputId, id: this.inputId, class: "sr-only", type: "file", multiple: true, onClick: () => this.clearErrors(), onChange: (e) => this.handleFiles(e), disabled: this.isDisabled() }),
+      h("label", { htmlFor: this.inputId, class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` },
+        this.renderIcon(),
+        this.buttonText),
+      this.renderInfo()));
+  }
+  renderEmptyState() {
+    return (h("div", { class: "empty-block" },
+      this.renderUploadSvg(),
+      h("div", { class: `empty-message` }, this.emptyStateText),
+      this.renderUploadButton("-primary empty-button"),
+      this.renderNotif()));
+  }
+  renderErrorList() {
+    if (!!this.errorList.length) {
+      if (this.liveRegion) {
+        let srMessage = this.errorList.reduce(function (acc, err) {
+          return acc + `${err.name}: ${err.message} `;
+        }, "");
+        this.liveRegion.innerHTML = srMessage;
+      }
+      return (h("ul", { class: "error-list" }, this.errorList.map((err) => (h("li", null,
+        h("div", { class: "file --error" },
+          h("div", { class: "file-info" },
+            h("span", { class: "filename" }, err.name))),
+        h("div", { class: "error-message" }, err.message))))));
+    }
+  }
+  renderFileInProgress(item) {
+    const filename = item.type ? item.name + "." + item.type : item.name;
+    return (h("li", null,
+      h("div", { class: "file --progress" },
+        h("div", { class: "progress", style: {
+            background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
+          } }),
+        h("div", { class: "file-info" },
+          h("span", { class: "filename" },
+            filename,
+            " ",
+            h("span", { class: "sr-only" }, "uploading"))))));
+  }
+  renderFile(item) {
+    return (h("li", null,
+      h("div", { class: "file --saved" },
+        h("div", { class: "file-info" },
+          h("span", { class: "filename" }, item.name + "." + item.type)),
+        h("div", { class: "file-controls" },
+          h("wm-button", { class: "download-button", "button-style": "icononly", tooltip: "download", "tooltip-position": "bottom", "label-for-identical-buttons": `download ${item.name}`, icon: "f1da", onClick: () => this.downloadFile(item) }),
+          h("wm-button", { class: "delete-button", "button-style": "icononly", tooltip: "remove", "tooltip-position": "bottom", "label-for-identical-buttons": `remove ${item.name}`, icon: "f1c0", onClick: () => this.deleteFile(item) })))));
+  }
+  renderFileList() {
+    if (this.fileList) {
+      this.sortBy === "name"
+        ? this.fileList.sort((a, b) => a.name.localeCompare(b.name))
+        : this.fileList.sort((a, b) => Date.parse(a.lastUpdated) - Date.parse(b.lastUpdated));
+      return (h("div", null,
+        h("ul", { class: "inprogress-list" }, this.fileList.filter((item) => this.isItemUploading(item)).map((item) => this.renderFileInProgress(item))),
+        h("ul", { class: "file-list" }, this.fileList.filter((item) => !this.isItemUploading(item)).map((item) => this.renderFile(item)))));
+    }
+  }
+  renderHeader() {
+    return (this.type === "2" && (h("div", { class: "header" },
+      h("div", { class: "slot-wrapper" },
+        h("slot", null),
+        h("div", { class: "notif-wrapper" },
+          this.renderUploadButton(`-secondary ${this.isDisabled() ? "disabled" : ""}`),
+          this.renderNotif())))));
+  }
+  renderFooter() {
+    return (this.type === "1" && (h("div", { class: "footer" },
+      h("div", { class: "notif-wrapper" },
+        h("div", { class: "filecount-wrapper" },
+          h("div", { class: "filecount" }, intl.formatMessage({
+            id: "uploader.filesAdded",
+            defaultMessage: "{numFiles, plural, one {1 file added} other {# files added}}",
+          }, { numFiles: this.fileList.length })),
+          this.renderUploadButton(`-primary ${this.isDisabled() ? "disabled" : ""}`)),
+        this.renderNotif()))));
+  }
+  renderWithItems() {
+    return (h("div", null,
+      this.renderHeader(),
+      h("div", { class: `list-container type${this.type}` },
+        this.renderErrorList(),
+        this.renderFileList()),
+      this.renderFooter()));
+  }
+  render() {
+    return (h(Host, null,
+      this.isEmpty() && this.type === "1" ? this.renderEmptyState() : this.renderWithItems(),
+      h("div", { ref: (el) => (this.liveRegion = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        , "aria-atomic": "true" })));
+  }
+  static get is() { return "wm-uploader"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-uploader.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-uploader.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"1\" | \"2\"",
+        "resolved": "\"1\" | \"2\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "\"1\""
+    },
+    "buttonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "button-text",
+      "reflect": false
+    },
+    "info": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "info",
+      "reflect": false
+    },
+    "emptyStateText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "empty-state-text",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "fileTypes": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "file-types",
+      "reflect": false,
+      "defaultValue": "\"pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv\""
+    },
+    "maxSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-size",
+      "reflect": false,
+      "defaultValue": "100"
+    },
+    "maxFiles": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-files",
+      "reflect": false
+    },
+    "sortBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"name\" | \"date\"",
+        "resolved": "\"date\" | \"name\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sort-by",
+      "reflect": false,
+      "defaultValue": "\"date\""
+    },
+    "files": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "files",
+      "reflect": false
+    },
+    "filesToUpload": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "File[]",
+        "resolved": "File[]",
+        "references": {
+          "File": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    },
+    "rejectedFiles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "rejected-files",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {},
+    "errorList": {},
+    "notif": {},
+    "numFilesInProgress": {}
+  }; }
+  static get events() { return [{
+      "method": "wmFilesSelected",
+      "name": "wmFilesSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "wmDeleteFile",
+      "name": "wmDeleteFile",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "wmDownloadFile",
+      "name": "wmDownloadFile",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "files",
+      "methodName": "parseFiles"
+    }, {
+      "propName": "rejectedFiles",
+      "methodName": "parseRejectedFiles"
+    }, {
+      "propName": "maxSize",
+      "methodName": "setMaxSize"
+    }, {
+      "propName": "numFilesInProgress",
+      "methodName": "uploadNotifications"
+    }]; }
+  static get listeners() { return [{
+      "name": "wmUserIsTabbing",
+      "method": "toggleTabbingOn",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmUserIsNotTabbing",
+      "method": "toggleTabbingOff",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmUploadProgress",
+      "method": "handleUploadProgress",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/wm-wrapper/wm-wrapper.js

@@ -0,0 +1,27 @@
+import { Component, Element, Event } from "@stencil/core";
+export class Wrapper {
+  componentDidLoad() {
+    this.wmWrapperLoaded.emit();
+  }
+  render() {
+    return;
+  }
+  static get is() { return "wm-wrapper"; }
+  static get events() { return [{
+      "method": "wmWrapperLoaded",
+      "name": "wmWrapperLoaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}