@leaflink/stash 44.3.1 → 44.5.0

package/dist/FileUpload.js

@@ -1,317 +1,237 @@
-import { I as D } from "./index-79ce320f.js";
+import { defineComponent as H, useCssModule as q, ref as k, inject as K, useAttrs as Q, computed as g, openBlock as n, createElementBlock as i, normalizeClass as d, unref as l, createVNode as w, withModifiers as c, withCtx as I, renderSlot as S, createTextVNode as N, toDisplayString as p, createElementVNode as v, Fragment as U, createBlock as W, createCommentVNode as R, renderList as Z, withDirectives as ee, mergeProps as te, vShow as le } from "vue";
+import se from "@leaflink/snitch";
+import { I as ne } from "./index-79ce320f.js";
 import { t as u } from "./locale.js";
-import I from "./Button.js";
-import F from "./Icon.js";
-import { resolveComponent as g, openBlock as r, createElementBlock as o, normalizeClass as d, createVNode as h, withModifiers as c, withCtx as y, createTextVNode as T, toDisplayString as p, createElementVNode as f, Fragment as v, createBlock as O, createCommentVNode as w, renderSlot as S, renderList as C, withDirectives as U, mergeProps as M, vShow as N } from "vue";
-import { _ as P } from "./_plugin-vue_export-helper-dad06003.js";
+import D from "./Button.js";
+import oe from "./Icon.js";
+import { _ as ae } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const A = "_button_19hp2_29", L = {
-  "file-dropbox": "_file-dropbox_19hp2_2",
-  "is-dragging": "_is-dragging_19hp2_10",
-  "is-disabled": "_is-disabled_19hp2_19",
-  "upload-icon": "_upload-icon_19hp2_24",
-  "remove-button": "_remove-button_19hp2_29",
-  button: A
-}, E = Object.freeze({
+const F = {
   CSV: {
-    ACCEPTS: ["text/csv"],
     EXTENSION: ["csv"],
     MIME_TYPES: ["text/csv", "application/octet-stream", "application/vnd.ms-excel"],
     ILLUSTRATION: "csv"
   },
   PDF: {
-    ACCEPTS: ["application/pdf"],
     EXTENSION: ["pdf"],
     MIME_TYPES: ["application/pdf"],
     ILLUSTRATION: "pdf"
   },
   PNG: {
-    ACCEPTS: ["image/png"],
     EXTENSION: ["png"],
     MIME_TYPES: ["image/png"],
     ILLUSTRATION: "image"
   },
   JPEG: {
-    ACCEPTS: ["image/jpeg"],
     EXTENSION: ["jpg", "jpeg"],
     MIME_TYPES: ["image/jpeg"],
     ILLUSTRATION: "image"
   },
   DOC: {
-    ACCEPTS: ["application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
     EXTENSION: ["doc", "docx"],
     MIME_TYPES: ["application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
     ILLUSTRATION: "document"
   },
   XLS: {
-    ACCEPTS: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
     EXTENSION: ["xls", "xlsx"],
     MIME_TYPES: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
     ILLUSTRATION: "csv"
   }
-}), _ = Object.freeze({
-  Dense: "dense",
-  Standard: "standard"
-}), k = {
-  name: "ll-file-upload",
-  components: {
-    "ll-icon": F,
-    "ll-button": I,
-    InlineSvg: D
-  },
-  inject: ["stashOptions"],
-  inheritAttrs: !1,
+};
+var h = /* @__PURE__ */ ((f) => (f.Dense = "dense", f.Standard = "standard", f))(h || {});
+const ie = { key: 0 }, re = ["onDragover", "onDrop", "onDragleave"], de = { class: "tw-text-ice-900" }, ce = {
+  key: 0,
+  class: "tw-mt-6 tw-text-center tw-text-xs tw-text-ice-700"
+}, pe = ["disabled", "accept", "multiple"], ue = /* @__PURE__ */ H({
+  __name: "FileUpload",
   props: {
-    files: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * The file types accepted by the input
-     */
-    fileTypes: {
-      type: Array,
-      default: () => Object.keys(E)
-    },
-    /**
-     * Shows only an upload button
-     */
-    buttonOnly: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Disables the upload button
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * When using the drag and drop feature, hide the icon
-     * and display everything on one line.
-     */
-    size: {
-      type: String,
-      default: "standard",
-      validator: (e) => Object.values(_).includes(e)
-    }
+    files: { default: () => [] },
+    fileTypes: { default: () => ["CSV", "PDF", "PNG", "JPEG", "DOC", "XLS"] },
+    buttonOnly: { type: Boolean, default: !1 },
+    multiple: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    size: { default: "standard" }
   },
   emits: ["file-select", "file-delete", "file-error"],
-  setup() {
-    return {
-      Sizes: _
-    };
-  },
-  data() {
-    return {
-      isDraggingOver: !1,
-      removeText: u("ll.fileUpload.remove"),
-      fileUploadUploadFileText: u("ll.fileUpload.uploadFile"),
-      fileUploadDragDropFileHereText: u("ll.fileUpload.dragDropFileHere"),
-      fileUploadOrText: u("ll.fileUpload.or")
-    };
-  },
-  computed: {
-    inputAttrs() {
-      const e = { ...this.$attrs };
+  setup(f, { emit: E }) {
+    const m = f, r = q(), y = k(!1), T = k(), _ = K("stashOptions"), M = Q(), A = g(() => {
+      const e = { ...M };
       return delete e["data-test"], delete e.class, delete e.type, delete e.accept, e;
-    },
-    /**
-     * @returns {Array} A list of accepted file types
-     */
-    acceptedMimeTypes() {
-      return this.fileTypes.map((e) => this.fileMeta[e].MIME_TYPES).reduce(this.flattenArray);
-    },
-    /**
-     * @returns {Array} A list of accepted file types
-     */
-    acceptedFileExtensions() {
-      return this.fileTypes.map((e) => this.fileMeta[e].EXTENSION).reduce(this.flattenArray);
-    },
-    fileMeta() {
-      return E;
-    },
-    illustrationPath() {
-      var e;
-      return `${(e = this.stashOptions) == null ? void 0 : e.staticPath}/illustrations/FileUpload/${E[this.fileTypes[0]].ILLUSTRATION}.svg`;
+    });
+    function O(e, t) {
+      return e.concat(t);
     }
-  },
-  methods: {
-    openFileDialog() {
-      this.$refs.fileUpload && (this.$refs.fileUpload.value = "", this.$refs.fileUpload.click());
-    },
-    /**
-     * Sets file(s) to selected file(s) from dialogue
-     * @param {Object} event - file select event that contains file(s)
-     * @returns {Array} An array of files
-     */
-    handleFileInput(e) {
-      const t = [...e.target.files];
-      this.$emit("file-select", { event: e, files: t });
-    },
-    handleDragEnter() {
-      this.isDraggingOver = !0;
-    },
-    handleDragLeave() {
-      this.isDraggingOver = !1;
-    },
-    /**
-     * Sets file to dropped file if it is proper file type
-     * @param {Object} event - file select event that contains file
-     */
-    async handleDropFile(e) {
-      if (this.disabled)
-        return;
-      const t = [...e.dataTransfer.files];
-      if (this.isDraggingOver = !1, this.acceptedMimeTypes.length)
-        try {
-          if (!(await Promise.all(t.map((l) => this.readMimeType(l)))).every((l) => this.acceptedMimeTypes.includes(l)))
-            throw new Error("One or more files contains an unacceptable mime type.");
-          if (!t.every((l) => {
-            const m = l.name.split(".").pop();
-            return this.acceptedFileExtensions.includes(m);
-          }))
-            throw new Error("One or more files contains an unacceptable extension.");
-          this.$emit("file-select", { event: e, files: t });
-        } catch (i) {
-          this.handleFileError(i);
-        }
-      else
-        this.$emit("file-select", { event: e, files: t });
-    },
-    handleFileError(e) {
-      const t = this.t("ll.fileUpload.errors.incorrectFileType", {
-        fileTypes: this.acceptedFileExtensions.join(", ")
+    const b = g(() => m.fileTypes.map((e) => F[e].MIME_TYPES).reduce(O)), C = g(() => m.fileTypes.map((e) => F[e].EXTENSION).reduce(O)), X = g(() => `${_ == null ? void 0 : _.staticPath}/illustrations/FileUpload/${F[m.fileTypes[0]].ILLUSTRATION}.svg`);
+    function L() {
+      T.value && (T.value.value = "", T.value.click());
+    }
+    function Y() {
+      y.value = !0;
+    }
+    function $() {
+      y.value = !1;
+    }
+    function j(e) {
+      const t = u("ll.fileUpload.errors.incorrectFileType", {
+        fileTypes: C.value.join(", ")
       });
-      throw this.$attrs["file-error"] ? this.$emit("file-error", t) : this.$notify.warning(t), e;
-    },
-    handleFileDelete(e) {
-      this.$emit("file-delete", e);
-    },
-    /**
-     * Check for the mime type on the uploaded File object
-     * Otherwise load the file and attempt to read it
-     * @param file The Uploaded File object
-     */
-    readMimeType(e) {
-      return new Promise((t, i) => {
+      E("file-error", t), se.log(e);
+    }
+    async function B(e) {
+      if (!b.value.length)
+        return !0;
+      const t = await Promise.all(e.map((a) => J(a)));
+      if (!(!!t.length && t.every((a) => b.value.includes(a))))
+        throw new Error("One or more files contains an unacceptable mime type.");
+      if (!e.every((a) => {
+        const P = a.name.split(".").pop();
+        return P && C.value.includes(P);
+      }))
+        throw new Error("One or more files contains an unacceptable extension.");
+      return !0;
+    }
+    async function x(e) {
+      try {
+        await B(e), E("file-select", { files: e });
+      } catch (t) {
+        j(t);
+      }
+    }
+    function V(e) {
+      var s;
+      const t = [...((s = e.target) == null ? void 0 : s.files) || []];
+      x(t);
+    }
+    function z(e) {
+      var s;
+      if (m.disabled)
+        return;
+      const t = [...((s = e.dataTransfer) == null ? void 0 : s.files) || []];
+      return y.value = !1, x(t);
+    }
+    function G(e) {
+      E("file-delete", e);
+    }
+    function J(e) {
+      return new Promise((t, s) => {
         if (e.type)
           return t(e.type);
         if (window.FileReader) {
-          const n = new FileReader();
-          n.onload = () => {
-            const a = n.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/) ? n.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0] : "";
+          const o = new FileReader();
+          o.onload = () => {
+            const a = o.result && o.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/) ? o.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0] : "";
             t(a);
-          }, n.readAsDataURL(e);
+          }, o.readAsDataURL(e);
         } else
-          i(new Error("Failed to read file."));
+          s(new Error("Failed to read file."));
       });
-    },
-    flattenArray(e, t) {
-      return e.concat(t);
     }
-  }
-}, j = ["data-test"], z = { key: 0 }, R = { class: "tw-text-ice-900" }, X = {
-  key: 0,
-  class: "tw-mt-6 tw-text-center tw-text-xs tw-text-ice-700"
-}, Y = ["accept", "multiple"];
-function B(e, t, i, n, a, l) {
-  const m = g("ll-button"), b = g("InlineSvg"), x = g("ll-icon");
-  return r(), o("div", {
-    class: d(e.$attrs.class),
-    "data-test": e.$attrs["data-test"]
-  }, [
-    i.buttonOnly ? (r(), o("div", z, [
-      h(m, {
-        secondary: "",
-        type: "button",
-        disabled: i.disabled || null,
-        onClick: c(l.openFileDialog, ["stop", "prevent"])
-      }, {
-        default: y(() => [
-          T(p(a.fileUploadUploadFileText), 1)
-        ]),
-        _: 1
-      }, 8, ["disabled", "onClick"])
-    ])) : (r(), o("div", {
-      key: 1,
-      class: d(["tw-rounded tw-p-6", [e.$style["file-dropbox"], a.isDraggingOver && e.$style["is-dragging"], i.disabled && e.$style["is-disabled"]]]),
-      onDragover: t[0] || (t[0] = c((...s) => l.handleDragEnter && l.handleDragEnter(...s), ["prevent"])),
-      onDrop: t[1] || (t[1] = c((...s) => l.handleDropFile && l.handleDropFile(...s), ["prevent"])),
-      onDragleave: t[2] || (t[2] = c((...s) => l.handleDragLeave && l.handleDragLeave(...s), ["prevent"]))
+    return (e, t) => (n(), i("div", {
+      class: d(["stash-file-upload", l(M).class]),
+      "data-test": "stash-file-upload"
     }, [
-      f("div", {
-        class: d(["tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center", [{ "md:flex-row tw-items-center": i.size === n.Sizes.Dense }]])
+      e.buttonOnly ? (n(), i("div", ie, [
+        w(D, {
+          secondary: "",
+          type: "button",
+          disabled: e.disabled || null,
+          onClick: c(L, ["stop", "prevent"])
+        }, {
+          default: I(() => [
+            S(e.$slots, "submitText", {}, () => [
+              N(p(l(u)("ll.fileUpload.uploadFile")), 1)
+            ])
+          ]),
+          _: 3
+        }, 8, ["disabled", "onClick"])
+      ])) : (n(), i("div", {
+        key: 1,
+        class: d(["tw-rounded tw-p-6", [l(r)["file-dropbox"], y.value && l(r)["is-dragging"], e.disabled && l(r)["is-disabled"]]]),
+        onDragover: c(Y, ["prevent"]),
+        onDrop: c(z, ["prevent"]),
+        onDragleave: c($, ["prevent"])
       }, [
-        i.files.length ? (r(!0), o(v, { key: 1 }, C(i.files, (s) => (r(), o("div", {
-          key: s.name
+        v("div", {
+          class: d(["tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center", [{ "tw-items-center md:tw-flex-row": e.size === l(h).Dense }]])
         }, [
-          h(x, { name: "file" }),
-          f("span", null, p(s.name), 1),
-          h(m, {
-            class: d([e.$style["remove-button"], e.$style.button]),
-            onClick: c((H) => l.handleFileDelete(s), ["stop", "prevent"])
-          }, {
-            default: y(() => [
-              T(p(a.removeText), 1)
-            ]),
-            _: 2
-          }, 1032, ["class", "onClick"])
-        ]))), 128)) : (r(), o(v, { key: 0 }, [
-          i.size !== n.Sizes.Dense ? (r(), O(b, {
-            key: 0,
-            src: l.illustrationPath,
-            name: "file",
-            width: "84",
-            height: "96"
-          }, null, 8, ["src"])) : w("", !0),
-          f("span", R, p(a.fileUploadDragDropFileHereText), 1),
-          f("span", {
-            class: d(
-              i.size === n.Sizes.Dense ? "md:tw-ml-1.5 md:tw-mr-3 md:tw-my-0 tw-my-1.5 tw-text-ice-900" : "tw-mt-1.5 tw-my-1.5"
-            )
-          }, p(a.fileUploadOrText), 3),
-          h(m, {
-            class: d(["tw-mt-1.5", e.$style["file-select-button"]]),
-            secondary: "",
-            type: "button",
-            disabled: i.disabled,
-            onClick: c(l.openFileDialog, ["stop", "prevent"])
-          }, {
-            default: y(() => [
-              S(e.$slots, "submitText", {}, () => [
-                T(p(a.fileUploadUploadFileText), 1)
-              ])
-            ]),
-            _: 3
-          }, 8, ["class", "disabled", "onClick"])
-        ], 64))
-      ], 2),
-      e.$slots.hint && !i.files.length ? (r(), o("div", X, [
-        S(e.$slots, "hint")
-      ])) : w("", !0)
-    ], 34)),
-    U(f("input", M(l.inputAttrs, {
-      ref: "fileUpload",
-      type: "file",
-      accept: i.fileTypes.map((s) => l.fileMeta[s].ACCEPTS).reduce(l.flattenArray),
-      multiple: e.$attrs.multiple,
-      onChange: t[3] || (t[3] = (s) => l.handleFileInput(s))
-    }), null, 16, Y), [
-      [N, !1]
-    ])
-  ], 10, j);
-}
-const V = {
-  $style: L
-}, le = /* @__PURE__ */ P(k, [["render", B], ["__cssModules", V]]);
+          e.files.length ? (n(!0), i(U, { key: 1 }, Z(e.files, (s) => (n(), i("div", {
+            key: s.name
+          }, [
+            w(oe, { name: "file" }),
+            v("span", null, p(s.name), 1),
+            w(D, {
+              class: d([l(r)["remove-button"], l(r).button]),
+              onClick: c((o) => G(s), ["stop", "prevent"])
+            }, {
+              default: I(() => [
+                N(p(l(u)("ll.fileUpload.remove")), 1)
+              ]),
+              _: 2
+            }, 1032, ["class", "onClick"])
+          ]))), 128)) : (n(), i(U, { key: 0 }, [
+            e.size !== l(h).Dense ? (n(), W(l(ne), {
+              key: 0,
+              src: X.value,
+              name: "file",
+              width: "84",
+              height: "96"
+            }, null, 8, ["src"])) : R("", !0),
+            v("span", de, p(l(u)("ll.fileUpload.dragDropFileHere")), 1),
+            v("span", {
+              class: d(
+                e.size === l(h).Dense ? "md:tw-ml-1.5 md:tw-mr-3 md:tw-my-0 tw-my-1.5 tw-text-ice-900" : "tw-mt-1.5 tw-my-1.5"
+              )
+            }, p(l(u)("ll.fileUpload.or")), 3),
+            w(D, {
+              class: d(["tw-mt-1.5", l(r)["file-select-button"]]),
+              secondary: "",
+              type: "button",
+              disabled: e.disabled,
+              onClick: c(L, ["stop", "prevent"])
+            }, {
+              default: I(() => [
+                S(e.$slots, "submitText", {}, () => [
+                  N(p(l(u)("ll.fileUpload.uploadFile")), 1)
+                ])
+              ]),
+              _: 3
+            }, 8, ["class", "disabled", "onClick"])
+          ], 64))
+        ], 2),
+        e.$slots.hint && !e.files.length ? (n(), i("div", ce, [
+          S(e.$slots, "hint")
+        ])) : R("", !0)
+      ], 42, re)),
+      ee(v("input", te(A.value, {
+        ref_key: "fileUploadRef",
+        ref: T,
+        "data-test": "stash-file-upload|input",
+        type: "file",
+        disabled: e.disabled,
+        accept: b.value.join(","),
+        multiple: m.multiple,
+        onChange: V
+      }), null, 16, pe), [
+        [le, !1]
+      ])
+    ], 2));
+  }
+}), fe = "_button_19hp2_29", me = {
+  "file-dropbox": "_file-dropbox_19hp2_2",
+  "is-dragging": "_is-dragging_19hp2_10",
+  "is-disabled": "_is-disabled_19hp2_19",
+  "upload-icon": "_upload-icon_19hp2_24",
+  "remove-button": "_remove-button_19hp2_29",
+  button: fe
+}, ve = {
+  $style: me
+}, De = /* @__PURE__ */ ae(ue, [["__cssModules", ve]]);
 export {
-  E as FILE_TYPES,
-  _ as Sizes,
-  le as default
+  F as FILE_TYPES,
+  h as FileUploadSizes,
+  De as default
 };
 //# sourceMappingURL=FileUpload.js.map

package/dist/FileUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.js","sources":["../src/components/FileUpload/FileUpload.vue"],"sourcesContent":["<script>\n  import InlineSvg from 'vue-inline-svg';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export const FILE_TYPES = Object.freeze({\n    CSV: {\n      ACCEPTS: ['text/csv'],\n      EXTENSION: ['csv'],\n      MIME_TYPES: ['text/csv', 'application/octet-stream', 'application/vnd.ms-excel'],\n      ILLUSTRATION: 'csv',\n    },\n    PDF: {\n      ACCEPTS: ['application/pdf'],\n      EXTENSION: ['pdf'],\n      MIME_TYPES: ['application/pdf'],\n      ILLUSTRATION: 'pdf',\n    },\n    PNG: {\n      ACCEPTS: ['image/png'],\n      EXTENSION: ['png'],\n      MIME_TYPES: ['image/png'],\n      ILLUSTRATION: 'image',\n    },\n    JPEG: {\n      ACCEPTS: ['image/jpeg'],\n      EXTENSION: ['jpg', 'jpeg'],\n      MIME_TYPES: ['image/jpeg'],\n      ILLUSTRATION: 'image',\n    },\n    DOC: {\n      ACCEPTS: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n      EXTENSION: ['doc', 'docx'],\n      MIME_TYPES: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n      ILLUSTRATION: 'document',\n    },\n    XLS: {\n      ACCEPTS: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n      EXTENSION: ['xls', 'xlsx'],\n      MIME_TYPES: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n      ILLUSTRATION: 'csv',\n    },\n  });\n\n  // TODO: convert to enum (typescript)\n  export const Sizes = Object.freeze({\n    Dense: 'dense',\n    Standard: 'standard',\n  });\n\n  export default {\n    name: 'll-file-upload',\n\n    components: {\n      'll-icon': Icon,\n      'll-button': Button,\n      InlineSvg,\n    },\n\n    inject: ['stashOptions'],\n\n    inheritAttrs: false,\n\n    props: {\n      files: {\n        type: Array,\n        default: () => [],\n      },\n\n      /**\n       * The file types accepted by the input\n       */\n      fileTypes: {\n        type: Array,\n        default: () => Object.keys(FILE_TYPES),\n      },\n\n      /**\n       * Shows only an upload button\n       */\n      buttonOnly: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Disables the upload button\n       */\n      disabled: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * When using the drag and drop feature, hide the icon\n       * and display everything on one line.\n       */\n      size: {\n        type: String,\n        default: 'standard',\n        validator: (value) => Object.values(Sizes).includes(value),\n      },\n    },\n\n    emits: ['file-select', 'file-delete', 'file-error'],\n\n    setup() {\n      return {\n        Sizes,\n      };\n    },\n\n    data() {\n      return {\n        isDraggingOver: false,\n        removeText: t('ll.fileUpload.remove'),\n        fileUploadUploadFileText: t('ll.fileUpload.uploadFile'),\n        fileUploadDragDropFileHereText: t('ll.fileUpload.dragDropFileHere'),\n        fileUploadOrText: t('ll.fileUpload.or'),\n      };\n    },\n\n    computed: {\n      inputAttrs() {\n        const attrs = { ...this.$attrs };\n\n        delete attrs['data-test'];\n        delete attrs.class;\n        delete attrs.type;\n        delete attrs.accept;\n\n        return attrs;\n      },\n\n      /**\n       * @returns {Array} A list of accepted file types\n       */\n      acceptedMimeTypes() {\n        return this.fileTypes.map((fileType) => this.fileMeta[fileType].MIME_TYPES).reduce(this.flattenArray);\n      },\n\n      /**\n       * @returns {Array} A list of accepted file types\n       */\n      acceptedFileExtensions() {\n        return this.fileTypes.map((fileType) => this.fileMeta[fileType].EXTENSION).reduce(this.flattenArray);\n      },\n\n      fileMeta() {\n        return FILE_TYPES;\n      },\n\n      illustrationPath() {\n        return `${this.stashOptions?.staticPath}/illustrations/FileUpload/${\n          FILE_TYPES[this.fileTypes[0]].ILLUSTRATION\n        }.svg`;\n      },\n    },\n\n    methods: {\n      openFileDialog() {\n        if (this.$refs.fileUpload) {\n          this.$refs.fileUpload.value = '';\n          this.$refs.fileUpload.click();\n        }\n      },\n\n      /**\n       * Sets file(s) to selected file(s) from dialogue\n       * @param {Object} event - file select event that contains file(s)\n       * @returns {Array} An array of files\n       */\n      handleFileInput(event) {\n        const files = [...event.target.files];\n\n        this.$emit('file-select', { event, files });\n      },\n\n      handleDragEnter() {\n        this.isDraggingOver = true;\n      },\n\n      handleDragLeave() {\n        this.isDraggingOver = false;\n      },\n\n      /**\n       * Sets file to dropped file if it is proper file type\n       * @param {Object} event - file select event that contains file\n       */\n      async handleDropFile(event) {\n        if (this.disabled) {\n          return;\n        }\n\n        const files = [...event.dataTransfer.files];\n\n        this.isDraggingOver = false;\n\n        if (this.acceptedMimeTypes.length) {\n          try {\n            const mimeTypePromises = await Promise.all(files.map((file) => this.readMimeType(file)));\n            const allCorrectMimeTypes = mimeTypePromises.every((mimeType) => this.acceptedMimeTypes.includes(mimeType));\n\n            if (!allCorrectMimeTypes) {\n              throw new Error('One or more files contains an unacceptable mime type.');\n            }\n\n            const allCorrectFileExtensions = files.every((file) => {\n              const extension = file.name.split('.').pop();\n\n              return this.acceptedFileExtensions.includes(extension);\n            });\n\n            if (!allCorrectFileExtensions) {\n              throw new Error('One or more files contains an unacceptable extension.');\n            }\n\n            this.$emit('file-select', { event, files });\n          } catch (error) {\n            this.handleFileError(error);\n          }\n        } else {\n          this.$emit('file-select', { event, files });\n        }\n      },\n\n      handleFileError(error) {\n        const message = this.t('ll.fileUpload.errors.incorrectFileType', {\n          fileTypes: this.acceptedFileExtensions.join(', '),\n        });\n\n        if (this.$attrs['file-error']) {\n          this.$emit('file-error', message);\n        } else {\n          this.$notify.warning(message);\n        }\n\n        throw error;\n      },\n\n      handleFileDelete(file) {\n        this.$emit('file-delete', file);\n      },\n\n      /**\n       * Check for the mime type on the uploaded File object\n       * Otherwise load the file and attempt to read it\n       * @param file The Uploaded File object\n       */\n      readMimeType(file) {\n        return new Promise((resolve, reject) => {\n          if (file.type) {\n            return resolve(file.type);\n          } else if (window.FileReader) {\n            const fileReader = new FileReader();\n\n            fileReader.onload = () => {\n              const mimeType = fileReader.result.match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)\n                ? fileReader.result.match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)[0]\n                : '';\n\n              resolve(mimeType);\n            };\n\n            fileReader.readAsDataURL(file);\n          } else {\n            reject(new Error('Failed to read file.'));\n          }\n        });\n      },\n\n      flattenArray(a, b) {\n        return a.concat(b);\n      },\n    },\n  };\n</script>\n\n<template>\n  <div :class=\"$attrs.class\" :data-test=\"$attrs['data-test']\">\n    <div v-if=\"buttonOnly\">\n      <ll-button secondary type=\"button\" :disabled=\"disabled || null\" @click.stop.prevent=\"openFileDialog\">\n        {{ fileUploadUploadFileText }}\n      </ll-button>\n    </div>\n    <div\n      v-else\n      class=\"tw-rounded tw-p-6\"\n      :class=\"[$style['file-dropbox'], isDraggingOver && $style['is-dragging'], disabled && $style['is-disabled']]\"\n      @dragover.prevent=\"handleDragEnter\"\n      @drop.prevent=\"handleDropFile\"\n      @dragleave.prevent=\"handleDragLeave\"\n    >\n      <div\n        class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center\"\n        :class=\"[{ 'md:flex-row tw-items-center': size === Sizes.Dense }]\"\n      >\n        <template v-if=\"!files.length\">\n          <InlineSvg v-if=\"size !== Sizes.Dense\" :src=\"illustrationPath\" name=\"file\" width=\"84\" height=\"96\" />\n          <span class=\"tw-text-ice-900\">\n            {{ fileUploadDragDropFileHereText }}\n          </span>\n          <span\n            :class=\"\n              size === Sizes.Dense\n                ? 'md:tw-ml-1.5 md:tw-mr-3 md:tw-my-0 tw-my-1.5 tw-text-ice-900'\n                : 'tw-mt-1.5 tw-my-1.5'\n            \"\n          >\n            {{ fileUploadOrText }}\n          </span>\n          <ll-button\n            class=\"tw-mt-1.5\"\n            secondary\n            type=\"button\"\n            :class=\"$style['file-select-button']\"\n            :disabled=\"disabled\"\n            @click.stop.prevent=\"openFileDialog\"\n          >\n            <!-- @slot for custom submit text -->\n            <slot name=\"submitText\">{{ fileUploadUploadFileText }}</slot>\n          </ll-button>\n        </template>\n        <template v-else>\n          <div v-for=\"file in files\" :key=\"file.name\">\n            <ll-icon name=\"file\" />\n            <span>{{ file.name }}</span>\n            <ll-button\n              :class=\"[$style['remove-button'], $style['button']]\"\n              @click.stop.prevent=\"handleFileDelete(file)\"\n            >\n              {{ removeText }}\n            </ll-button>\n          </div>\n        </template>\n      </div>\n      <div v-if=\"$slots.hint && !files.length\" class=\"tw-mt-6 tw-text-center tw-text-xs tw-text-ice-700\">\n        <!-- @slot for displaying helpful text and/or links -->\n        <slot name=\"hint\"></slot>\n      </div>\n    </div>\n    <input\n      v-show=\"false\"\n      v-bind=\"inputAttrs\"\n      ref=\"fileUpload\"\n      type=\"file\"\n      :accept=\"fileTypes.map((fileType) => fileMeta[fileType].ACCEPTS).reduce(flattenArray)\"\n      :multiple=\"$attrs['multiple']\"\n      @change=\"handleFileInput($event)\"\n    />\n  </div>\n</template>\n\n<style module>\n  .file-dropbox {\n    background: var(--color-ice-200);\n    background-image: url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23C5C9D4FF' stroke-width='1' stroke-dasharray='5 %2c 5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\");\n    background-repeat: no-repeat;\n    border: theme('borderWidth.DEFAULT') solid var(--color-ice-500);\n    border-color: transparent;\n  }\n\n  .is-dragging {\n    background-image: none;\n    border-color: var(--color-ice-500);\n\n    & > * {\n      pointer-events: none;\n    }\n  }\n\n  .is-disabled {\n    cursor: no-drop;\n  }\n\n  /* Constrain the upload icon for drag/drop to the required size */\n  .upload-icon {\n    height: 98px;\n    width: 84px;\n  }\n\n  .remove-button.button {\n    background: transparent;\n    border: none;\n    color: var(--color-red-500);\n\n    &:hover {\n      background: transparent;\n      border: none;\n    }\n  }\n</style>\n"],"names":["FILE_TYPES","Sizes","_sfc_main","Icon","Button","InlineSvg","value","t","attrs","fileType","_a","event","files","file","mimeType","extension","error","message","resolve","reject","fileReader","a","b","_hoisted_3","_createElementBlock","_normalizeClass","_ctx","$props","_hoisted_2","_createVNode","_component_ll_button","$options","$data","args","_createElementVNode","$setup","_Fragment","_renderList","_component_ll_icon","_toDisplayString","_withModifiers","$event","_createBlock","_component_InlineSvg","_renderSlot","_openBlock","_hoisted_4","_mergeProps","_cache"],"mappings":"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"}
+{"version":3,"file":"FileUpload.js","sources":["../src/components/FileUpload/FileUpload.constants.ts","../src/components/FileUpload/FileUpload.vue"],"sourcesContent":["export const FILE_TYPES = {\n  CSV: {\n    EXTENSION: ['csv'],\n    MIME_TYPES: ['text/csv', 'application/octet-stream', 'application/vnd.ms-excel'],\n    ILLUSTRATION: 'csv',\n  },\n  PDF: {\n    EXTENSION: ['pdf'],\n    MIME_TYPES: ['application/pdf'],\n    ILLUSTRATION: 'pdf',\n  },\n  PNG: {\n    EXTENSION: ['png'],\n    MIME_TYPES: ['image/png'],\n    ILLUSTRATION: 'image',\n  },\n  JPEG: {\n    EXTENSION: ['jpg', 'jpeg'],\n    MIME_TYPES: ['image/jpeg'],\n    ILLUSTRATION: 'image',\n  },\n  DOC: {\n    EXTENSION: ['doc', 'docx'],\n    MIME_TYPES: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n    ILLUSTRATION: 'document',\n  },\n  XLS: {\n    EXTENSION: ['xls', 'xlsx'],\n    MIME_TYPES: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n    ILLUSTRATION: 'csv',\n  },\n};\n\nexport enum FileUploadSizes {\n  Dense = 'dense',\n  Standard = 'standard',\n}\n\nexport type FileUploadSize = `${FileUploadSizes}`;\n","<script lang=\"ts\">\n  export * from './FileUpload.constants';\n</script>\n\n<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, ref, useAttrs, useCssModule } from 'vue';\n  import InlineSvg from 'vue-inline-svg';\n\n  import { StashProvideState } from '../../../types/misc';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { FILE_TYPES, FileUploadSize, FileUploadSizes } from './FileUpload.constants';\n\n  export type FileType = 'CSV' | 'PDF' | 'PNG' | 'JPEG' | 'DOC' | 'XLS';\n\n  export interface FileUploadProps {\n    /**\n     * Files to display in the component\n     */\n    files?: File[];\n\n    /**\n     * Accepted file types\n     */\n    fileTypes?: FileType[];\n\n    /**\n     * Should display only the button\n     */\n    buttonOnly?: boolean;\n\n    /**\n     * Allows upload of multiple files\n     */\n    multiple?: boolean;\n\n    /**\n     * Is the input disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Component size\n     */\n    size?: FileUploadSize;\n  }\n\n  const props = withDefaults(defineProps<FileUploadProps>(), {\n    files: () => [],\n    fileTypes: () => ['CSV', 'PDF', 'PNG', 'JPEG', 'DOC', 'XLS'],\n    buttonOnly: false,\n    disabled: false,\n    multiple: false,\n    size: 'standard',\n  });\n\n  const classes = useCssModule();\n\n  const emit =\n    defineEmits<{\n      (e: 'file-select', { files }: { files: FileUploadProps['files'] }): void;\n      (e: 'file-delete', file: File): void;\n      (e: 'file-error', message: string): void;\n    }>();\n\n  const isDraggingOver = ref(false);\n  const fileUploadRef = ref<HTMLInputElement>();\n\n  const stashOptions = inject<StashProvideState>('stashOptions');\n  const attributes = useAttrs();\n\n  const inputAttrs = computed(() => {\n    const attrs = { ...attributes };\n\n    delete attrs['data-test'];\n    delete attrs.class;\n    delete attrs.type;\n    delete attrs.accept;\n\n    return attrs;\n  });\n\n  function concatArraysToFirst(a: any[], b: any[]) {\n    return a.concat(b);\n  }\n\n  const acceptedMimeTypes = computed(() => {\n    return props.fileTypes.map((fileType) => FILE_TYPES[fileType].MIME_TYPES).reduce(concatArraysToFirst);\n  });\n\n  const acceptedFileExtensions = computed(() => {\n    return props.fileTypes.map((fileType) => FILE_TYPES[fileType].EXTENSION).reduce(concatArraysToFirst);\n  });\n\n  const illustrationPath = computed(() => {\n    return `${stashOptions?.staticPath}/illustrations/FileUpload/${FILE_TYPES[props.fileTypes[0]].ILLUSTRATION}.svg`;\n  });\n\n  function openFileDialog() {\n    if (fileUploadRef.value) {\n      fileUploadRef.value.value = '';\n      fileUploadRef.value.click();\n    }\n  }\n\n  function handleDragEnter() {\n    isDraggingOver.value = true;\n  }\n\n  function handleDragLeave() {\n    isDraggingOver.value = false;\n  }\n\n  function handleFileError(error: Error) {\n    const message = t('ll.fileUpload.errors.incorrectFileType', {\n      fileTypes: acceptedFileExtensions.value.join(', '),\n    });\n\n    emit('file-error', message);\n\n    logger.log(error);\n  }\n\n  async function areFileTypesAccepted(files: File[]) {\n    if (!acceptedMimeTypes.value.length) return true;\n\n    const mimeTypes = await Promise.all(files.map((file) => readMimeType(file)));\n\n    const allCorrectMimeTypes =\n      !!mimeTypes.length && mimeTypes.every((mimeType) => acceptedMimeTypes.value.includes(mimeType));\n\n    if (!allCorrectMimeTypes) {\n      throw new Error('One or more files contains an unacceptable mime type.');\n    }\n\n    const allCorrectFileExtensions = files.every((file) => {\n      const extension = file.name.split('.').pop();\n\n      return extension && acceptedFileExtensions.value.includes(extension);\n    });\n\n    if (!allCorrectFileExtensions) {\n      throw new Error('One or more files contains an unacceptable extension.');\n    }\n\n    return true;\n  }\n\n  async function processFiles(files: File[]) {\n    try {\n      await areFileTypesAccepted(files);\n\n      emit('file-select', { files });\n    } catch (error) {\n      handleFileError(error as Error);\n    }\n  }\n\n  /**\n   * Sets file(s) to selected file(s) from dialogue\n   * @param {Object} event - file select event that contains file(s)\n   * @returns {Array} An array of files\n   */\n  function handleFileInput(event: Event) {\n    const files = [...((event.target as HTMLInputElement)?.files || [])];\n\n    processFiles(files);\n  }\n\n  /**\n   * Sets file to dropped file if it is proper file type\n   * @param {Object} event - file select event that contains file\n   */\n  function handleDropFile(event: DragEvent) {\n    if (props.disabled) {\n      return;\n    }\n\n    const files = [...(event.dataTransfer?.files || [])];\n\n    isDraggingOver.value = false;\n\n    return processFiles(files);\n  }\n\n  function handleFileDelete(file: File) {\n    emit('file-delete', file);\n  }\n\n  function readMimeType(file: File): Promise<string> {\n    return new Promise((resolve, reject) => {\n      if (file.type) {\n        return resolve(file.type);\n      } else if (window.FileReader) {\n        const fileReader = new FileReader();\n\n        fileReader.onload = () => {\n          const mimeType =\n            fileReader.result && (fileReader.result as string).match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)\n              ? ((fileReader.result as string).match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/) as string[])[0]\n              : '';\n\n          resolve(mimeType);\n        };\n\n        fileReader.readAsDataURL(file);\n      } else {\n        reject(new Error('Failed to read file.'));\n      }\n    });\n  }\n</script>\n\n<template>\n  <div class=\"stash-file-upload\" :class=\"attributes.class\" data-test=\"stash-file-upload\">\n    <div v-if=\"buttonOnly\">\n      <Button secondary type=\"button\" :disabled=\"disabled || null\" @click.stop.prevent=\"openFileDialog\">\n        <slot name=\"submitText\">\n          {{ t('ll.fileUpload.uploadFile') }}\n        </slot>\n      </Button>\n    </div>\n    <div\n      v-else\n      class=\"tw-rounded tw-p-6\"\n      :class=\"[classes['file-dropbox'], isDraggingOver && classes['is-dragging'], disabled && classes['is-disabled']]\"\n      @dragover.prevent=\"handleDragEnter\"\n      @drop.prevent=\"handleDropFile\"\n      @dragleave.prevent=\"handleDragLeave\"\n    >\n      <div\n        class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center\"\n        :class=\"[{ 'tw-items-center md:tw-flex-row': size === FileUploadSizes.Dense }]\"\n      >\n        <template v-if=\"!files.length\">\n          <InlineSvg v-if=\"size !== FileUploadSizes.Dense\" :src=\"illustrationPath\" name=\"file\" width=\"84\" height=\"96\" />\n          <span class=\"tw-text-ice-900\">\n            {{ t('ll.fileUpload.dragDropFileHere') }}\n          </span>\n          <span\n            :class=\"\n              size === FileUploadSizes.Dense\n                ? 'md:tw-ml-1.5 md:tw-mr-3 md:tw-my-0 tw-my-1.5 tw-text-ice-900'\n                : 'tw-mt-1.5 tw-my-1.5'\n            \"\n          >\n            {{ t('ll.fileUpload.or') }}\n          </span>\n          <Button\n            class=\"tw-mt-1.5\"\n            secondary\n            type=\"button\"\n            :class=\"classes['file-select-button']\"\n            :disabled=\"disabled\"\n            @click.stop.prevent=\"openFileDialog\"\n          >\n            <!-- @slot for custom submit text -->\n            <slot name=\"submitText\">{{ t('ll.fileUpload.uploadFile') }}</slot>\n          </Button>\n        </template>\n        <template v-else>\n          <div v-for=\"file in files\" :key=\"file.name\">\n            <Icon name=\"file\" />\n            <span>{{ file.name }}</span>\n            <Button :class=\"[classes['remove-button'], classes['button']]\" @click.stop.prevent=\"handleFileDelete(file)\">\n              {{ t('ll.fileUpload.remove') }}\n            </Button>\n          </div>\n        </template>\n      </div>\n      <div v-if=\"$slots.hint && !files.length\" class=\"tw-mt-6 tw-text-center tw-text-xs tw-text-ice-700\">\n        <!-- @slot for displaying helpful text and/or links -->\n        <slot name=\"hint\"></slot>\n      </div>\n    </div>\n    <input\n      v-show=\"false\"\n      v-bind=\"inputAttrs\"\n      ref=\"fileUploadRef\"\n      data-test=\"stash-file-upload|input\"\n      type=\"file\"\n      :disabled=\"disabled\"\n      :accept=\"acceptedMimeTypes.join(',')\"\n      :multiple=\"props.multiple\"\n      @change=\"handleFileInput\"\n    />\n  </div>\n</template>\n\n<style module>\n  .file-dropbox {\n    background: var(--color-ice-200);\n    background-image: url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23C5C9D4FF' stroke-width='1' stroke-dasharray='5 %2c 5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\");\n    background-repeat: no-repeat;\n    border: theme('borderWidth.DEFAULT') solid var(--color-ice-500);\n    border-color: transparent;\n  }\n\n  .is-dragging {\n    background-image: none;\n    border-color: var(--color-ice-500);\n\n    & > * {\n      pointer-events: none;\n    }\n  }\n\n  .is-disabled {\n    cursor: no-drop;\n  }\n\n  /* Constrain the upload icon for drag/drop to the required size */\n  .upload-icon {\n    height: 98px;\n    width: 84px;\n  }\n\n  .remove-button.button {\n    background: transparent;\n    border: none;\n    color: var(--color-red-500);\n\n    &:hover {\n      background: transparent;\n      border: none;\n    }\n  }\n</style>\n"],"names":["FILE_TYPES","FileUploadSizes","classes","useCssModule","isDraggingOver","ref","fileUploadRef","stashOptions","inject","attributes","useAttrs","inputAttrs","computed","attrs","concatArraysToFirst","a","b","acceptedMimeTypes","props","fileType","acceptedFileExtensions","illustrationPath","openFileDialog","handleDragEnter","handleDragLeave","handleFileError","error","message","t","emit","logger","areFileTypesAccepted","files","mimeTypes","file","readMimeType","mimeType","extension","processFiles","handleFileInput","event","_a","handleDropFile","handleFileDelete","resolve","reject","fileReader"],"mappings":"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"}