@duetds/components 5.1.3 → 5.1.6

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

@@ -6,6 +6,8 @@ import searchIcon from "@duetds/icons/lib/assets/form-search";
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
+import { isEscapeKey } from "../../utils/keyboard-utils";
+import { getLocaleString } from "../../utils/language-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 const icons = {
   search: searchIcon,
@@ -17,11 +19,17 @@ export class DuetInput {
      * Own Properties
      */
     this.inputId = createID("DuetInput");
+    this.clearId = createID("DuetInputClear");
     this.labelId = createID("DuetLabel");
     this.topCaptionId = createID("DuetCaptionTop");
     this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
     this.errorId = createID("DuetError");
     this.disallowPatternRegex = null;
+    this.clearLabel = getLocaleString({
+      en: "Clear",
+      fi: "Tyhjennä",
+      sv: "Rensa",
+    });
     /**
      * Indicates the id of a component that describes the input.
      */
@@ -35,6 +43,10 @@ export class DuetInput {
      * event after each keystroke.
      */
     this.debounce = 0;
+    /**
+     * If set, the input field will display a clear button that can be accessed with tabbing.
+     */
+    this.clear = false;
     /**
      * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
      * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
@@ -68,6 +80,10 @@ export class DuetInput {
      * Type of the input.
      */
     this.type = "text";
+    /**
+     * Variation of button.
+     */
+    this.variation = "default";
     /**
      * Label for the input.
      */
@@ -135,6 +151,13 @@ export class DuetInput {
         component: "duet-input",
       });
     };
+    this.onClear = (ev) => {
+      this.duetFocus.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-input",
+      });
+    };
     /** Private functions
      *
      */
@@ -154,6 +177,17 @@ export class DuetInput {
       }
       return describedBy;
     };
+    this.handleClearClick = event => {
+      const clearing = this.clearInput();
+      this.onClear(event);
+      return clearing;
+    };
+    this.keyHandler = event => {
+      if (isEscapeKey(event) && this.clear) {
+        this.handleClearClick(event);
+      }
+      return event;
+    };
   }
   disallowedPatternChange() {
     this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
@@ -208,6 +242,16 @@ export class DuetInput {
       restoreCursor();
     }
   }
+  /**
+   * Reset the cursor position on the native element
+   * `input.resetCursor()`.
+   */
+  async clearInput() {
+    if (this.nativeInput) {
+      this.nativeInput.value = "";
+      this.value = "";
+    }
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -225,14 +269,16 @@ export class DuetInput {
     else if (!this.pattern && this.type === "tel") {
       inputProps.pattern = "[0-9+ ]+";
     }
-    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } },
+    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) },
       h("div", { class: {
           "duet-input-container": true,
           "duet-theme-turva": this.theme === "turva",
+          [`duet-input-variation-${this.variation}`]: true,
           "duet-label-hidden": this.labelHidden,
           "duet-input-top-caption-shown": this.isCaptionVisible,
           "has-icon": !!this.icon || (this.type !== "text" && this.type !== "tel" && this.type !== "password"),
           "has-error": !!this.error,
+          "has-clear": this.clear,
         } },
         h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label),
         this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)),
@@ -245,10 +291,18 @@ export class DuetInput {
               "is-number": this.component === "number",
               "is-date": this.component === "date",
             }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)),
-          !this.icon && this.type !== "text" && this.type !== "tel" && this.type !== "password" && (h("div", { class: "duet-input-icon" },
+          !this.icon &&
+            this.type !== "text" &&
+            this.type !== "tel" &&
+            this.type !== "password" &&
+            this.variation !== "button" && (h("div", { class: "duet-input-icon" },
             h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))),
-          this.icon && (h("div", { class: "duet-input-icon" },
+          this.clear && this.value && (h("div", { class: "duet-input-clear-icon" },
+            h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel, "aria-keyshortcuts": "Escape" },
+              h("duet-icon", { margin: "none", size: "xx-small", name: "activity-close", color: "currentColor" })))),
+          this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" },
             h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
+          this.variation === "button" && h("slot", { name: "button" }),
           h("slot", null)),
         h("span", { class: "duet-input-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
   }
@@ -400,6 +454,24 @@ export class DuetInput {
       "reflect": false,
       "defaultValue": "0"
     },
+    "clear": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If set, the input field will display a clear button that can be accessed with tabbing."
+      },
+      "attribute": "clear",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "caption": {
       "type": "string",
       "mutable": false,
@@ -574,6 +646,28 @@ export class DuetInput {
       "reflect": false,
       "defaultValue": "\"text\""
     },
+    "variation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetVariationType",
+        "resolved": "\"button\" | \"default\"",
+        "references": {
+          "DuetVariationType": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variation of button."
+      },
+      "attribute": "variation",
+      "reflect": false,
+      "defaultValue": "\"default\""
+    },
     "label": {
       "type": "string",
       "mutable": false,
@@ -944,6 +1038,25 @@ export class DuetInput {
           }
         }
       }
+    }, {
+      "method": "duetClear",
+      "name": "duetClear",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the input is cleared."
+      },
+      "complexType": {
+        "original": "DuetInputEvent",
+        "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
+        "references": {
+          "DuetInputEvent": {
+            "location": "local"
+          }
+        }
+      }
     }, {
       "method": "duetFocus",
       "name": "duetFocus",
@@ -1002,6 +1115,22 @@ export class DuetInput {
         "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
         "tags": []
       }
+    },
+    "clearInput": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "element"; }

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

@@ -96,7 +96,7 @@ export class DuetStep {
           "rounded-bottom": this.roundedBottom,
           "duet-theme-turva": this.theme === "turva",
         } },
-        h("div", { class: "duet-step-heading", id: this.buttonId, role: "button", tabindex: this.state !== "incomplete" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) },
+        h("div", { class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) },
           h("div", { "aria-hidden": "true" },
             h("div", { class: "duet-step-counter" }, this.renderStepCounter())),
           h("duet-spacer", { direction: "horizontal", size: "large", breakpoint: "small" }),

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

@@ -203,7 +203,7 @@ export class DuetStepper {
     },
     "selected": {
       "type": "number",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "number",
         "resolved": "number",

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

@@ -97,7 +97,7 @@ export class DuetTable {
     // this clears all pending mutations,
     // that way we avoid dealing with any initial changes
     // and only get genuine mutations as rows are added/removed
-    this.observer.takeRecords();
+    this.observer ? this.observer.takeRecords() : null;
   }
   disconnectedCallback() {
     if (Build.isServer) {

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

@@ -9,6 +9,7 @@ import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getError, 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";
@@ -31,9 +32,13 @@ 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 defer-upload is true, duet-upload will not (as recommended) instantly upload files but await a call to uploadPending()
+     */
+    this.deferUpload = false;
     /**
      * If set the upload component will not display an upload button, you will have to create one yourself
-     * and call the exposed method startUpload
+     * and call the exposed method startUpload to open the upload dialog
      */
     this.hideButton = false;
     /**
@@ -46,7 +51,7 @@ export class DuetUpload {
         size: "x-small",
         background: "gray-lightest",
         name: "delete",
-        map: ["success", "failure"],
+        map: ["success", "failure", "pending"],
         label: {
           fi: "Poista tiedosto",
           en: "Poista tiedosto",
@@ -300,6 +305,7 @@ export class DuetUpload {
     this.DefaultGroups = {
       inprogress: "inprogress",
       success: "success",
+      pending: "pending",
       failure: "failure",
     };
     /**
@@ -316,6 +322,14 @@ export class DuetUpload {
           en: "Files inprogress",
         },
       },
+      {
+        id: this.DefaultGroups.pending,
+        label: {
+          en: "Files to upload",
+          sv: "Filer att ladda",
+          fi: "Tiedostot ladattavat",
+        },
+      },
       {
         id: this.DefaultGroups.success,
         label: {
@@ -343,7 +357,6 @@ export class DuetUpload {
       this.element.addEventListener("duetActionEvent", (e) => {
         const detail = e.detail;
         const { action, id, originalEvent } = detail;
-        console.log(e);
         switch (action) {
           case "delete":
             this.onDelete(id, originalEvent);
@@ -372,9 +385,6 @@ export class DuetUpload {
       if (item.valid && item.progress === 100) {
         // if the item has a group, move the file to that group instead
         // of into the standard success group
-        if (item.group) {
-          return item.group;
-        }
         return this.DefaultGroups.success;
       }
       else if (item.progress > 0 && item.progress !== 100) {
@@ -383,6 +393,9 @@ export class DuetUpload {
       else if (!item.valid) {
         return this.DefaultGroups.failure;
       }
+      else if (item.pending) {
+        return this.DefaultGroups.pending;
+      }
       else if (item.group) {
         return item.group;
       }
@@ -397,6 +410,9 @@ export class DuetUpload {
       else if (group === this.DefaultGroups.inprogress) {
         return h(ProgressItem, { progress: data.progress, name: data.item.name });
       }
+      else if (group === this.DefaultGroups.pending) {
+        return h(PendingItem, { name: data.item.name });
+      }
       else if (group === this.DefaultGroups.failure) {
         return h(ErrorItem, { data: data });
       }
@@ -409,9 +425,16 @@ export class DuetUpload {
     };
     this.genHashName = () => Date.now().toString(36) + Math.random();
     this.updateValueInMap = (item, key, value, kick = true) => {
-      const fileItem = this.files.get(item);
-      fileItem[key] = value;
-      this.files.set(item, fileItem);
+      try {
+        const fileItem = this.files.get(item);
+        fileItem[key] = value;
+        this.files.set(item, fileItem);
+      }
+      catch (e) {
+        // if a users tries to update entries on a file that doesn't exist,
+        // this will blow up - so we're swallowing the errors here on purpose
+        // console.warn("operation on missing items")
+      }
       if (kick) {
         this.kick();
       }
@@ -529,6 +552,46 @@ export class DuetUpload {
         fileMaxReached: isTotalFileAmountAboveMax,
       };
     };
+    this.uploadFile = async (fileListItem, force = false, key) => {
+      if (!force && this.deferUpload) {
+        this.updateValueInMap(fileListItem.item.name, "pending", true, false);
+        this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
+      }
+      else if (force) {
+        this.updateValueInMap(fileListItem.item.name, "pending", false, false);
+        this.updateValueInMap(fileListItem.item.name, "group", undefined, true);
+      }
+      try {
+        if (!this.deferUpload || force) {
+          // if all is well AND external file upload handling has not been set, start upload
+          const data = new FormData();
+          data.append("file", fileListItem.item);
+          if (key) {
+            data.append("key", key);
+          }
+          data.append("uid", fileListItem.uid);
+          data.append("name", fileListItem.item.name);
+          data.append("metadata", JSON.stringify({
+            uid: fileListItem.uid,
+            url: this.uri,
+            size: fileListItem.item.size,
+            meta: fileListItem.meta,
+          }));
+          fileListItem.xhr = await this.makeXHRPostRequest(data);
+        }
+      }
+      catch (e) {
+        // in case one of the global maxes have been reached, invalidate the file
+        this.updateValueInMap(fileListItem.item.name, "valid", false, false);
+      }
+    };
+    this.uploadPendingFiles = () => {
+      for (const [key, value] of this.files.entries()) {
+        if (value.group === "pending" && value.pending === true) {
+          this.uploadFile(value, true, key);
+        }
+      }
+    };
     this.getItemFromUID = (uid) => {
       for (const [key, value] of this.files.entries()) {
         if (value.uid === uid) {
@@ -538,7 +601,8 @@ export class DuetUpload {
       return null;
     };
     this.onDelete = (key, ev) => {
-      const retrievedKey = this.getItemFromUID(key).key;
+      const item = this.getItemFromUID(key);
+      const retrievedKey = item.key;
       const deletedItem = this.files.get(retrievedKey);
       this.files.delete(retrievedKey);
       this.validateTotals();
@@ -548,7 +612,8 @@ export class DuetUpload {
         data: { deletion: deletedItem },
         component: "duet-upload",
       });
-      if (!this.external) {
+      // don't send a xhr request if the item was pending, just remove it from the list
+      if (!this.external && !deletedItem.pending) {
         this.makeXHRDeleteRequest(deletedItem);
       }
       this.resetFormFields();
@@ -613,6 +678,7 @@ export class DuetUpload {
       const all = [...this.files.values()];
       const inprogress = [];
       const failure = [];
+      const pending = [];
       const success = [];
       all.forEach(data => {
         const group = this.getGroupFromItemData(data);
@@ -631,6 +697,13 @@ export class DuetUpload {
             group,
           });
         }
+        else if (group === this.DefaultGroups.pending) {
+          pending.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
         else if (group === this.DefaultGroups.failure) {
           failure.push({
             uid: data.uid,
@@ -648,6 +721,7 @@ export class DuetUpload {
       });
       return {
         inprogress,
+        pending,
         failure,
         success,
       };
@@ -729,6 +803,12 @@ export class DuetUpload {
     this.nativeInput.click();
     return;
   }
+  /**
+   * Method for uploading pending files
+   */
+  async uploadPending() {
+    this.uploadPendingFiles();
+  }
   /**
    * Method for forcing a render of the upload list, element.files can be changed externally
    * But it will only rerender on a new Map or a top Level change - this can be used to update
@@ -884,19 +964,14 @@ export class DuetUpload {
           this.updateValueInMap(item.name, "valid", false, false);
         }
         else if (valid && !this.external) {
-          // if all is well AND external file upload handling has not been set, start upload
-          const data = new FormData();
-          data.append("file", item);
-          data.append("uid", uid);
-          data.append("name", item.name);
-          data.append("metadata", JSON.stringify({ uid, url: this.uri, size: item.size, meta: fileListItem.meta }));
-          try {
-            fileListItem.xhr = await this.makeXHRPostRequest(data);
-          }
-          catch (e) {
-            // in case one of the global maxes have been reached, invalidate the file
-            this.updateValueInMap(item.name, "valid", false, false);
-          }
+          await this.uploadFile(fileListItem);
+        }
+        else if (valid && this.external) {
+          this.updateValueInMap(fileListItem.item.name, "pending", true, false);
+          this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
+        }
+        else if (!valid) {
+          this.updateValueInMap(item.name, "valid", false, true);
         }
         // kick the stat to force update
         this.kick();
@@ -1007,6 +1082,24 @@ export class DuetUpload {
       "reflect": false,
       "defaultValue": "false"
     },
+    "deferUpload": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If defer-upload is true, duet-upload will not (as recommended) instantly upload files but await a call to uploadPending()"
+      },
+      "attribute": "defer-upload",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "hideButton": {
       "type": "boolean",
       "mutable": false,
@@ -1019,7 +1112,7 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "If set the upload component will not display an upload button, you will have to create one yourself\nand call the exposed method startUpload"
+        "text": "If set the upload component will not display an upload button, you will have to create one yourself\nand call the exposed method startUpload to open the upload dialog"
       },
       "attribute": "hide-upload-button",
       "reflect": false,
@@ -1044,7 +1137,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\"],\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\", \"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  ]"
     },
     "uri": {
       "type": "string",
@@ -1734,7 +1827,7 @@ export class DuetUpload {
           }],
         "text": "Array of group names that you want the editable table to use to display files"
       },
-      "defaultValue": "[\n    {\n      id: this.DefaultGroups.inprogress,\n      label: {\n        fi: \"Kesken olevat tiedostot\",\n        sv: \"Filer inprogress\",\n        en: \"Files inprogress\",\n      },\n    },\n    {\n      id: this.DefaultGroups.success,\n      label: {\n        fi: \"Valmiit tiedostot\",\n        sv: \"Files success\",\n        en: \"Files success\",\n      },\n    },\n    {\n      id: this.DefaultGroups.failure,\n      label: {\n        fi: \"Tiedostot, joissa on virheit\u00E4\",\n        sv: \"Filer med fel\",\n        en: \"Files with errors\",\n      },\n    },\n  ]"
+      "defaultValue": "[\n    {\n      id: this.DefaultGroups.inprogress,\n      label: {\n        fi: \"Kesken olevat tiedostot\",\n        sv: \"Filer inprogress\",\n        en: \"Files inprogress\",\n      },\n    },\n    {\n      id: this.DefaultGroups.pending,\n      label: {\n        en: \"Files to upload\",\n        sv: \"Filer att ladda\",\n        fi: \"Tiedostot ladattavat\",\n      },\n    },\n    {\n      id: this.DefaultGroups.success,\n      label: {\n        fi: \"Valmiit tiedostot\",\n        sv: \"Files success\",\n        en: \"Files success\",\n      },\n    },\n    {\n      id: this.DefaultGroups.failure,\n      label: {\n        fi: \"Tiedostot, joissa on virheit\u00E4\",\n        sv: \"Filer med fel\",\n        en: \"Files with errors\",\n      },\n    },\n  ]"
     }
   }; }
   static get states() { return {
@@ -1954,6 +2047,22 @@ export class DuetUpload {
         "tags": []
       }
     },
+    "uploadPending": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Method for uploading pending files",
+        "tags": []
+      }
+    },
     "refresh": {
       "complexType": {
         "signature": "() => Promise<void>",

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

@@ -0,0 +1,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" })));

package/lib/collection/utils/token-utils.js

@@ -103,3 +103,17 @@ export function getFontSizeByName(name) {
 export function getFontWeightByName(name) {
   return getTokenByName("fontWeight", name);
 }
+export function shadeRGBColor(color, percent) {
+  const f = color.split(","), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent;
+  let R = parseInt(f[0].slice(4)), G = parseInt(f[1]), B = parseInt(f[2]);
+  R = Math.round((t - R) * p) + R;
+  G = Math.round((t - G) * p) + G;
+  B = Math.round((t - B) * p) + B;
+  R = R < 0 ? 0 : R;
+  R = R > 255 ? 255 : R;
+  G = G < 0 ? 0 : G;
+  G = G > 255 ? 255 : G;
+  B = B < 0 ? 0 : B;
+  B = B > 255 ? 255 : B;
+  return `rgb(${R},${G},${B})`;
+}