@duetds/components 5.3.2 → 5.3.3

package/lib/collection/components/duet-upload/duet-upload.js

@@ -6,13 +6,14 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { getLocaleString, sanitizeString } from "../../utils/language-utils";
-import { getError, getI18nError } from "./errorcodes.utils";
+import errorCodes from "./errorcodes.json";
+import { getI18nError } from "./errorcodes.utils";
 import { ErrorItem } from "./upload-editable-item-error";
 import { ProgressItem } from "./upload-editable-item-inprogres";
 import { PendingItem } from "./upload-editable-item-pending";
 import { SuccessItem } from "./upload-editable-item-success";
 import { validateFile, validateTotalAmountIsAboveMax, validateTotalSizeIsAboveMax } from "./upload-validators";
-import { makeXhrRequest } from "./xhr.helpers";
+import { makeXhrRequest, } from "./xhr.helpers";
 /**
  * @slot header  - named slot - to place content after description / caption
  * @slot fileheader - named slot - to place content above "filelist" (only displayed when "filelist" contains items)
@@ -32,6 +33,10 @@ export class DuetUpload {
      * it will be up to you to handle the upload and return progress information to the upload-component
      */
     this.external = false;
+    /**
+     * If internal upload method is used, and this has been set to a function - it will be called with the XHR options before the reqeust is sent, return an updated XHR options object in order to manipulate the request
+     */
+    this.middleware = null;
     /**
      * If defer-upload is true, duet-upload will not (as recommended) instantly upload files but await a call to uploadPending()
      */
@@ -51,7 +56,7 @@ export class DuetUpload {
         size: "x-small",
         background: "gray-lightest",
         name: "delete",
-        map: ["success", "failure", "pending"],
+        map: ["success", "failure"],
         label: {
           fi: "Poista tiedosto",
           en: "Poista tiedosto",
@@ -64,7 +69,7 @@ export class DuetUpload {
         size: "x-small",
         background: "gray-lightest",
         name: "cancel",
-        map: ["inprogress"],
+        map: ["inprogress", "pending"],
         label: {
           fi: "Keskeytä lähetys",
           en: "Cancel the upload",
@@ -258,6 +263,10 @@ export class DuetUpload {
      * Display the input in error state along with an error message.
      */
     this.error = "";
+    /**
+     * Default errorcodes used by the component, modifiable via javascript
+     */
+    this.errorCodes = errorCodes;
     /**
      * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded.
      */
@@ -414,7 +423,7 @@ export class DuetUpload {
         return h(PendingItem, { name: data.item.name });
       }
       else if (group === this.DefaultGroups.failure) {
-        return h(ErrorItem, { data: data });
+        return h(ErrorItem, { data: data, errorCodes: this.errorCodes });
       }
       else if (data.group) {
         return data.html;
@@ -529,7 +538,7 @@ export class DuetUpload {
       this.updateValueInMap(name, "valid", false, true);
     };
     this.transferFailed = name => {
-      this.updateValueInMap(name, "error", getError("duet-upload-001"));
+      this.updateValueInMap(name, "error", getI18nError("duet-upload-001", this.errorCodes));
     };
     this.transferCanceled = name => {
       this.files.delete(name);
@@ -540,10 +549,10 @@ export class DuetUpload {
       const isTotalSizeOverMaxSize = validateTotalSizeIsAboveMax(this.files, this.maxBytesTotal);
       const isTotalFileAmountAboveMax = validateTotalAmountIsAboveMax(this.files, this.maxFiles);
       if (isTotalSizeOverMaxSize && name) {
-        this.updateValueInMap(name, "error", getError("duet-upload-202"), false);
+        this.updateValueInMap(name, "error", getI18nError("duet-upload-202", this.errorCodes), false);
       }
       if (isTotalFileAmountAboveMax && name) {
-        this.updateValueInMap(name, "error", getError("duet-upload-301"), false);
+        this.updateValueInMap(name, "error", getI18nError("duet-upload-301", this.errorCodes), false);
       }
       this.bytesMaxReached = isTotalSizeOverMaxSize;
       this.fileMaxReached = isTotalFileAmountAboveMax;
@@ -624,7 +633,9 @@ export class DuetUpload {
       this.files.delete(retrievedKey);
       if (!this.external) {
         const { xhr } = cancelledItem;
-        xhr.abort();
+        if (xhr) {
+          xhr.abort();
+        }
       }
       else {
         this.kick();
@@ -665,6 +676,11 @@ export class DuetUpload {
         component: "duet-upload",
       });
     };
+    this.onReady = () => {
+      this.duetReady.emit({
+        component: "duet-upload",
+      });
+    };
     this.onDone = () => {
       this.duetDone.emit({
         component: "duet-upload",
@@ -779,6 +795,7 @@ export class DuetUpload {
     }
     inheritGlobalTheme(this);
     this.listenForActionEvents();
+    this.onReady();
   }
   componentWillRender() {
     // listen to the events from the component
@@ -861,8 +878,8 @@ export class DuetUpload {
         !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)),
         h("duet-spacer", { size: "medium" }),
         (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" },
-          this.fileMaxReached && getI18nError("duet-upload-301"),
-          this.bytesMaxReached && getI18nError("duet-upload-202"))),
+          this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes),
+          this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes))),
         h("duet-spacer", { size: "medium" }),
         h("duet-visually-hidden", null,
           h("input", { ref: input => {
@@ -889,34 +906,43 @@ export class DuetUpload {
     xhr.upload.addEventListener("abort", () => {
       this.transferCanceled(name);
     });
-    return makeXhrRequest({
+    let options = {
       payload: { data, name },
-      options: { type: "POST", uri: this.uri, xhr, argument: null, headers: null },
+      options: { type: "POST", uri: this.uri, xhr, argument: null, headers: undefined },
       onFailure: this.transferDoneWithFailure,
       onSuccess: this.transferDone,
       onProgress: this.trackProgress,
-    });
+    };
+    if (this.middleware) {
+      options = this.middleware(options);
+    }
+    return makeXhrRequest(options);
   }
   makeXHRDeleteRequest(data) {
     const { uid, item } = data;
     const xhr = new XMLHttpRequest();
-    // don't present server issues to user on deletes, just remove them from the visible list
-    return makeXhrRequest({
+    const headers = {
+      "x-fileuid": uid,
+      "x-filename": item.name,
+    };
+    let options = {
       payload: { data: null, name },
       options: {
         type: "DELETE",
         xhr,
         uri: this.uri,
-        arguments: `?key=${uid}&name=${item.name}`,
-        headers: {
-          "x-fileuid": uid,
-          "x-filename": item.name,
-        },
+        argument: `?key=${uid}&name=${item.name}`,
+        headers,
       },
       onFailure: this.transferDoneWithFailure,
       onSuccess: this.transferDone,
       onProgress: this.trackProgress,
-    });
+    };
+    if (this.middleware) {
+      options = this.middleware(options);
+    }
+    // don't present server issues to user on deletes, just remove them from the visible list
+    return makeXhrRequest(options);
   }
   /**
    * Component event handling.
@@ -933,7 +959,7 @@ export class DuetUpload {
           maxBytes: this.maxBytes,
           allowedExtensions: this.allowedExtensions,
           allowedMimetypes: this.allowedMimetypes,
-        });
+        }, this.errorCodes);
         const uid = this.genHashName();
         const fileListItem = {
           uid,
@@ -1082,6 +1108,26 @@ export class DuetUpload {
       "reflect": false,
       "defaultValue": "false"
     },
+    "middleware": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "XHRInternalMiddleWare",
+        "resolved": "(XHRMiddlewareOptions: any) => XHRMiddlewareOptions",
+        "references": {
+          "XHRInternalMiddleWare": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If internal upload method is used, and this has been set to a function - it will be called with the XHR options before the reqeust is sent, return an updated XHR options object in order to manipulate the request"
+      },
+      "defaultValue": "null"
+    },
     "deferUpload": {
       "type": "boolean",
       "mutable": false,
@@ -1137,7 +1183,7 @@ export class DuetUpload {
         "tags": [],
         "text": "Default actions added to the internally used duet-editable-table"
       },
-      "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"delete\",\n      map: [\"success\", \"failure\", \"pending\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Poista tiedosto\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"cancel\",\n      map: [\"inprogress\"],\n      label: {\n        fi: \"Keskeyt\u00E4 l\u00E4hetys\",\n        en: \"Cancel the upload\",\n        sv: \"Stop \u00F6verf\u00F6ringen\",\n      },\n    },\n  ]"
+      "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"delete\",\n      map: [\"success\", \"failure\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Poista tiedosto\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"cancel\",\n      map: [\"inprogress\", \"pending\"],\n      label: {\n        fi: \"Keskeyt\u00E4 l\u00E4hetys\",\n        en: \"Cancel the upload\",\n        sv: \"Stop \u00F6verf\u00F6ringen\",\n      },\n    },\n  ]"
     },
     "uri": {
       "type": "string",
@@ -1637,6 +1683,27 @@ export class DuetUpload {
       "reflect": false,
       "defaultValue": "\"\""
     },
+    "errorCodes": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetUploadErrorCode[]",
+        "resolved": "DuetUploadErrorCode[]",
+        "references": {
+          "DuetUploadErrorCode": {
+            "location": "import",
+            "path": "./errorcodes.utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default errorcodes used by the component, modifiable via javascript"
+      },
+      "defaultValue": "errorCodes"
+    },
     "name": {
       "type": "string",
       "mutable": false,
@@ -1890,6 +1957,25 @@ export class DuetUpload {
           }
         }
       }
+    }, {
+      "method": "duetReady",
+      "name": "duetReady",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the component is finished initializing"
+      },
+      "complexType": {
+        "original": "DuetUploadEvent",
+        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
+        "references": {
+          "DuetUploadEvent": {
+            "location": "local"
+          }
+        }
+      }
     }, {
       "method": "duetDone",
       "name": "duetDone",

package/lib/collection/components/duet-upload/errorcodes.utils.js

@@ -2,13 +2,14 @@
  * Built with Duet Design System
  */
 import { getLocaleString } from "../../utils/language-utils";
-import errorCodes from "./errorcodes.json";
-export const getError = (code) => {
+import { parsePossibleJSON } from "../../utils/string-utils";
+export const getError = (code, errorCodes) => {
   let error = {
     type: undefined,
     system_message: undefined,
     message: undefined,
   };
+  errorCodes = parsePossibleJSON(errorCodes);
   error = errorCodes.filter(errorItem => {
     // the == is intentional we may be comparing numbers to strings - and that is ok here
     return errorItem.type == code;
@@ -20,8 +21,8 @@ export const getError = (code) => {
   }
   return error;
 };
-export const getI18nError = (errorCode) => {
-  const errorFromJson = getError(errorCode);
+export const getI18nError = (errorCode, errorCodes) => {
+  const errorFromJson = getError(errorCode, errorCodes);
   const i18String = getLocaleString(errorFromJson.message);
   if (i18String === "" || !i18String) {
     return errorFromJson.system_message;

package/lib/collection/components/duet-upload/mock.helpers.js

@@ -1,10 +1,19 @@
 /*!
  * Built with Duet Design System
  */
+import errorCodes from "./errorcodes.json";
 /** list of mock File elements to pass the duet-upload component */
+import { getI18nError } from "./errorcodes.utils";
 //mock functions to show uploaded file state
 export function getBrowsedFiles() {
   return fileListFromArray([
+    mockFileCreator({
+      name: "action-buy-insurance-default-error.svg",
+      type: "image/svg",
+      size: 11 * 10000,
+      lastModified: new Date(),
+      error: "default",
+    }),
     mockFileCreator({
       name: "action-add-circle.svg",
       type: "image/svg",
@@ -75,11 +84,13 @@ function fileListFromArray(files) {
       item: obj.file,
       size: obj.file.size,
       valid: isValid,
-      error: {
-        type: isValid ? undefined : obj.error,
-        message: isValid ? undefined : "Random error message",
-        system_message: isValid ? undefined : "Random system error message",
-      },
+      error: isValid
+        ? undefined
+        : {
+          type: obj.error,
+          message: isValid ? undefined : getI18nError(obj.error, errorCodes),
+          system_message: isValid ? undefined : getI18nError(obj.error, errorCodes),
+        },
       progress: 100,
       deleted: false,
       xhr: false,

package/lib/collection/components/duet-upload/upload-editable-item-error.js

@@ -3,14 +3,14 @@
  */
 import { h } from "@stencil/core";
 import { getI18nError } from "./errorcodes.utils";
-export const ErrorItem = ({ data }) => {
+export const ErrorItem = ({ data, errorCodes }) => {
   const { item, error } = data;
   const { name } = item;
   const { type } = error;
   return (h("span", { class: "duet-upload-item-error", role: "status" },
     h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" },
-      h("duet-icon", { margin: "none", size: "xx-small", name: "messaging-attachment" }),
-      " ",
+      h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+      h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
       name),
-    h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(type))));
+    h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(type, errorCodes))));
 };

package/lib/collection/components/duet-upload/upload-editable-item-inprogres.js

@@ -2,6 +2,9 @@
  * Built with Duet Design System
  */
 import { h } from "@stencil/core";
-export const ProgressItem = ({ progress, name }) => (h("span", null,
-  h("duet-paragraph", { color: "secondary", margin: "none", size: "small" }, name),
+export const ProgressItem = ({ progress, name }) => (h("span", { class: "duet-upload-item-name" },
+  h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+  h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+  name,
+  h("br", null),
   h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));

package/lib/collection/components/duet-upload/upload-editable-item-pending.js

@@ -2,6 +2,7 @@
  * Built with Duet Design System
  */
 import { h } from "@stencil/core";
-export const PendingItem = ({ name }) => (h("span", null,
-  h("duet-paragraph", { color: "secondary", margin: "none", size: "small" }, name),
-  h("duet-spacer", { size: "xx-small" })));
+export const PendingItem = ({ name }) => (h("span", { class: "duet-upload-item-name" },
+  h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+  h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+  name));

package/lib/collection/components/duet-upload/upload-validators.js

@@ -33,23 +33,23 @@ export const validateFileSize = (size, maxBytes) => {
   }
   return maxBytes >= size;
 };
-export const validateFile = (item, validators) => {
+export const validateFile = (item, validators, errorCodes) => {
   const { allowedMimetypes, allowedExtensions, maxBytes } = validators;
   let valid = false;
-  let errorMessage = getError("default");
+  let errorMessage = getError("default", errorCodes);
   if (item) {
     const { name, type, size } = item;
     const mime = validateFileMime(type, allowedMimetypes);
     const ext = validateFileExtension(name.toLowerCase(), allowedExtensions);
     const bytes = validateFileSize(size, maxBytes);
     if (!mime) {
-      errorMessage = getError("duet-upload-101");
+      errorMessage = getError("duet-upload-101", errorCodes);
     }
     if (!ext) {
-      errorMessage = getError("duet-upload-100");
+      errorMessage = getError("duet-upload-100", errorCodes);
     }
     if (!bytes) {
-      errorMessage = getError("duet-upload-201");
+      errorMessage = getError("duet-upload-201", errorCodes);
     }
     valid = mime && ext && bytes;
   }

package/lib/collection/components/duet-upload/xhr.helpers.js

@@ -2,6 +2,7 @@
  * Built with Duet Design System
  */
 export const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress }) => {
+  // @ts-ignore
   const { type = "POST", xhr, uri, argument = null, headers = null } = options;
   xhr.open(type, `${uri}${argument || ""}`, true);
   const { data, name } = payload;