@duetds/components 4.30.1 → 4.31.0

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

@@ -1,49 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { h } from "@stencil/core";
-import { formatBytes } from "./upload.helpers";
-export const DuetUploadFileList = ({ data, onDelete, onCancel, getError }) => {
-  if (data.invalid.length === 0 && data.valid.length === 0) {
-    return;
-  }
-  return (h("ol", { class: "duet-upload-filelist" },
-    data.valid.length !== 0 && (h("li", null,
-      h("duet-visually-hidden", null, "Files"),
-      h("ul", null, data.valid.length !== 0 &&
-        data.valid.map(e => (h("li", { class: "duet-upload-file" },
-          h("div", { class: "duet-upload-file-container" },
-            h("div", { class: "duet-upload-file-link" }, e.url ? (h("duet-button", { variation: "plain", icon: "messaging-attachment", url: e.url },
-              e.item.name,
-              " (",
-              formatBytes(e.item.size),
-              ")")) : (`${e.item.name} (${formatBytes(e.item.size)})`)),
-            h("ul", { class: "duet-upload-file-actions", role: "menubar", "aria-label": "file actions" },
-              e.progress < 100 && (h("li", { role: "none" },
-                h("duet-button", { role: "menuitem", variation: "plain", icon: "messaging-declined", "icon-only": true, "icon-size": "large", margin: "none", onClick: ev => onCancel(e.item.name, ev) }))),
-              e.progress === 100 && (h("li", { role: "none" },
-                h("duet-button", { role: "menuitem", variation: "destructive", icon: "action-delete", "icon-only": true, "icon-size": "large", margin: "none", onClick: ev => onDelete(e.item.name, ev) }))))),
-          e.progress < 100 && (h("div", { class: "duet-upload-file-progress" },
-            h("progress", { value: e.progress, max: "100" },
-              h("div", { class: "progress-bar" },
-                h("span", { style: { width: `${e.progress}%;` } },
-                  "Progress: ",
-                  e.progress,
-                  "%"))))))))))),
-    data.invalid.length !== 0 && (h("li", null,
-      h("duet-visually-hidden", null, "Files with Errors"),
-      h("ul", null, data.invalid.map(e => {
-        return (h("li", { class: "duet-upload-file duet-upload-file-errors" },
-          h("div", { class: "duet-upload-file-container" },
-            h("div", { class: "duet-upload-file-link duet-upload-file-link-error" },
-              h("div", null,
-                e.item.name,
-                " (",
-                formatBytes(e.item.size),
-                ")"),
-              h("div", { "data-error-type": e.error.type, "data-error-message": e.error.system_message }, getError(e.error.type))),
-            h("ul", { class: "duet-upload-file-actions", role: "menubar", "aria-label": "file actions" },
-              h("li", { role: "none" },
-                h("duet-button", { role: "menuitem", variation: "destructive", icon: "action-delete", "icon-only": true, "icon-size": "large", margin: "none", onClick: ev => onDelete(e.item.name, ev) }))))));
-      }))))));
-};

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

@@ -1,93 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { getLocaleString } from "../../utils/language-utils";
-import { getError } from "./errorcodes.utils";
-export const validateFileExtension = (name, allowedExtensions) => {
-  if (!allowedExtensions) {
-    return true;
-  }
-  const ext = name.split(".");
-  const validExtension = allowedExtensions.split(",");
-  const extension = ext[ext.length - 1];
-  return validExtension.includes(extension);
-};
-export const validateFileMime = (type, allowedMimetypes) => {
-  if (!allowedMimetypes || !type) {
-    return true;
-  }
-  const validMimeTypes = allowedMimetypes.split(",");
-  let valid = false;
-  validMimeTypes.forEach(mimeType => {
-    const allowedTypes = mimeType.split("/");
-    const fileType = type.split("/");
-    if (allowedTypes[0] === fileType[0] && (allowedTypes[1] === fileType[1] || allowedTypes[1] === "*")) {
-      valid = true;
-    }
-  });
-  return valid;
-};
-export const validateFileSize = (size, maxBytes) => {
-  if (!maxBytes || !size) {
-    return true;
-  }
-  return maxBytes >= size;
-};
-export const validateFile = (item, validators) => {
-  const { allowedMimetypes, allowedExtensions, maxBytes } = validators;
-  let valid = false;
-  let errorMessage = getError("default");
-  if (item) {
-    const { name, type, size } = item;
-    const mime = validateFileMime(type, allowedMimetypes);
-    const ext = validateFileExtension(name, allowedExtensions);
-    const bytes = validateFileSize(size, maxBytes);
-    if (!mime) {
-      errorMessage = getError("duet-upload-101");
-    }
-    if (!ext) {
-      errorMessage = getError("duet-upload-100");
-    }
-    if (!bytes) {
-      errorMessage = getError("duet-upload-201");
-    }
-    valid = mime && ext && bytes;
-  }
-  else {
-    valid = false;
-  }
-  return {
-    valid,
-    errorMessage: valid ? undefined : getLocaleString(errorMessage.message),
-    errorSystem: valid ? undefined : errorMessage.system_message,
-    errorType: valid ? undefined : errorMessage.type,
-  };
-};
-export const validateTotalSizeIsAboveMax = (filelist, maxTotalBytes) => {
-  let total = 0;
-  if (maxTotalBytes) {
-    filelist.forEach(item => {
-      if (item.valid && item.size) {
-        total += item.size;
-      }
-    });
-    if (total < maxTotalBytes) {
-      return true;
-    }
-  }
-  return false;
-};
-export const validateTotalAmountIsAboveMax = (filelist, maxFiles) => {
-  let total = 0;
-  if (maxFiles) {
-    filelist.forEach(item => {
-      if (item.valid) {
-        total++;
-      }
-    });
-    if (total > maxFiles) {
-      return true;
-    }
-  }
-  return false;
-};

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

@@ -1,133 +0,0 @@
-*,
-*::after,
-*::before {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-:host {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-:host li {
-  list-style: none;
-}
-
-.duet-upload {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-.duet-upload li {
-  list-style: none;
-}
-.duet-upload-file-errors {
-  padding: 20px 0;
-  color: #de2362;
-}
-.duet-upload-filelist {
-  margin-bottom: 25px;
-}
-.duet-upload-filelist-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 75px;
-  margin: 0 auto;
-  background-color: #f3f9fc;
-}
-.duet-upload-file {
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  min-height: 50px;
-  border-bottom: 1px solid #e1e3e6;
-}
-.duet-upload-file:first-of-type:not(.duet-upload-file-errors) {
-  border-top: 1px solid #e1e3e6;
-}
-.duet-upload-file-container {
-  display: flex;
-  place-items: center;
-  width: 100%;
-}
-.duet-upload-file-link {
-  display: flex;
-  flex-grow: 2;
-  place-items: center;
-}
-.duet-upload-file-link-error {
-  flex-direction: column;
-  place-items: flex-start;
-}
-.duet-upload-file-link duet-button {
-  position: relative;
-  top: 6px;
-}
-.duet-upload-file-actions {
-  display: flex;
-  transform: scale(0.8);
-}
-.duet-upload-file-progress {
-  /* fallback design of the default appearance */
-}
-.duet-upload-file-progress .progress-bar {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 15px;
-  background-color: #f3f9fc;
-  border-radius: 0;
-  box-shadow: none;
-}
-.duet-upload-file-progress .progress-bar > span {
-  display: block;
-  text-indent: -9999px;
-  background-color: #0077b3;
-  border-radius: 0;
-}
-.duet-upload-file-progress progress[value] {
-  display: flex;
-  width: 100%;
-  height: 15px;
-  /* For IE10 */
-  color: #0077b3;
-  /* Get rid of default border in Firefox. */
-  border: 0 none;
-  /* Reset the default appearance */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-.duet-upload-file-progress progress[value]::-webkit-progress-bar {
-  background-color: #f3f9fc;
-  border-radius: 0;
-}
-.duet-upload-file-progress progress[value]::-webkit-progress-value {
-  background-color: #0077b3;
-  background-size: 35px 20px, 100% 100%, 100% 100%;
-  border-radius: 0;
-  -webkit-animation: animate-stripes 5s linear infinite;
-  animation: animate-stripes 5s linear infinite;
-}
-.duet-upload-file-progress progress[value] ::-moz-progress-bar {
-  background-color: #f3f9fc;
-}