@mozaic-ds/web-components 0.11.0 → 0.12.0-beta.0

package/public/components/fileuploader/FileUploader.js

@@ -1,2 +1,604 @@
-import{S as e,i as l,a as t,b as i,f as s,s as a,e as r,d as o,t as n,n as d,g as c,j as p,l as m,k as b,C as f,D as u,E as h,o as x,x as g,A as $,G as w,M as v,v as _}from"../../index-c33b3772.js";import{E as y}from"../../EventHandler-02058705.js";import k from"./ResultFile.nested.js";function E(e){let l,t;return l=new k({props:{files:e[7],allowedExtensions:e[10],disabled:e[5],maxSize:e[11],removelabel:e[6],errorLabels:e[12]}}),l.$on("file-removed",e[14]),{c(){g(l.$$.fragment)},m(e,i){$(l,e,i),t=!0},p(e,t){const i={};128&t&&(i.files=e[7]),1024&t&&(i.allowedExtensions=e[10]),32&t&&(i.disabled=e[5]),2048&t&&(i.maxSize=e[11]),64&t&&(i.removelabel=e[6]),4096&t&&(i.errorLabels=e[12]),l.$set(i)},i(e){t||(f(l.$$.fragment,e),t=!0)},o(e){u(l.$$.fragment,e),t=!1},d(e){w(l,e)}}}function C(e){let l,t;return l=new k({props:{files:e[9],allowedExtensions:e[10],disabled:e[5],maxSize:e[11],removelabel:e[6],errorLabels:e[12]}}),l.$on("file-removed",e[15]),{c(){g(l.$$.fragment)},m(e,i){$(l,e,i),t=!0},p(e,t){const i={};512&t&&(i.files=e[9]),1024&t&&(i.allowedExtensions=e[10]),32&t&&(i.disabled=e[5]),2048&t&&(i.maxSize=e[11]),64&t&&(i.removelabel=e[6]),4096&t&&(i.errorLabels=e[12]),l.$set(i)},i(e){t||(f(l.$$.fragment,e),t=!0)},o(e){u(l.$$.fragment,e),t=!1},d(e){w(l,e)}}}function z(e){let l,t,s,a,g,$,w,_,y,k,z,S=e[0]&&e[7]&&e[7].length>0&&E(e),M=e[9].length>0&&C(e);return{c(){l=r("div"),t=r("input"),s=o(),a=r("label"),g=r("span"),$=n(e[2]),w=o(),S&&S.c(),_=o(),M&&M.c(),this.c=d,c(t,"id",e[1]),c(t,"type","file"),c(t,"class","mc-fileuploader__input"),c(t,"accept",e[3]),t.multiple=e[4],t.disabled=e[5],c(g,"class","mc-fileuploader__label--center"),c(a,"for",e[1]),c(a,"class","mc-fileuploader__label"),c(l,"class","mc-fileuploader")},m(r,o){i(r,l,o),p(l,t),p(l,s),p(l,a),p(a,g),p(g,$),p(l,w),S&&S.m(l,null),p(l,_),M&&M.m(l,null),e[21](l),y=!0,k||(z=m(t,"change",e[13]),k=!0)},p(e,[i]){(!y||2&i)&&c(t,"id",e[1]),(!y||8&i)&&c(t,"accept",e[3]),(!y||16&i)&&(t.multiple=e[4]),(!y||32&i)&&(t.disabled=e[5]),(!y||4&i)&&b($,e[2]),(!y||2&i)&&c(a,"for",e[1]),e[0]&&e[7]&&e[7].length>0?S?(S.p(e,i),129&i&&f(S,1)):(S=E(e),S.c(),f(S,1),S.m(l,_)):S&&(v(),u(S,1,1,(()=>{S=null})),h()),e[9].length>0?M?(M.p(e,i),512&i&&f(M,1)):(M=C(e),M.c(),f(M,1),M.m(l,null)):M&&(v(),u(M,1,1,(()=>{M=null})),h())},i(e){y||(f(S),f(M),y=!0)},o(e){u(S),u(M),y=!1},d(t){t&&x(l),S&&S.d(),M&&M.d(),e[21](null),k=!1,z()}}}function S(e,l){const t=Array.from(e),i=t.indexOf(l);return-1!==i&&t.splice(i,1),t}function M(e,l,t){let i,s,a,r,o,n,{id:d}=l,{label:c}=l,{accept:p}=l,{multiple:m=!0}=l,{allowedextensions:b}=l,{maxsize:f}=l,{displayfileslist:u=!1}=l,{disabled:h=!1}=l,{removelabel:x="Remove"}=l,{uploadedfiles:g}=l,{errorlabels:$}=l,{stateless:w}=l,v=new y;return e.$$set=e=>{"id"in e&&t(1,d=e.id),"label"in e&&t(2,c=e.label),"accept"in e&&t(3,p=e.accept),"multiple"in e&&t(4,m=e.multiple),"allowedextensions"in e&&t(16,b=e.allowedextensions),"maxsize"in e&&t(17,f=e.maxsize),"displayfileslist"in e&&t(0,u=e.displayfileslist),"disabled"in e&&t(5,h=e.disabled),"removelabel"in e&&t(6,x=e.removelabel),"uploadedfiles"in e&&t(18,g=e.uploadedfiles),"errorlabels"in e&&t(19,$=e.errorlabels),"stateless"in e&&t(20,w=e.stateless)},e.$$.update=()=>{65536&e.$$.dirty&&t(10,i=b?JSON.parse(b):[]),262144&e.$$.dirty&&t(9,s=g?JSON.parse(g):[]),e.$$.dirty,131072&e.$$.dirty&&t(11,a=f||void 0),524288&e.$$.dirty&&t(12,r=$?JSON.parse($):[])},[u,d,c,p,m,h,x,o,n,s,i,a,r,function(e){const l=e.target;t(7,o=l.files),t(0,u=!0);const s=[];if([...o].forEach(((e,l)=>{const t=e.name,r=e.size,o=function(e){if(i&&i.length>0){const l=e.slice(2+(e.lastIndexOf(".")-1>>>0));if(i&&!i.includes(String(l)))return!1}return!0}(t),n=function(e){return!(a&&e/1024/1024>a)}(r);let d="";o||(d="invalid-extension"),n||(d="invalid-size"),o&&n||s.push({index:l,fileName:t,fileSize:r,errorType:d})})),s.length>0&&v.dispatch("invalid-files",s),v.dispatch("change",o),w){n.querySelector(".mc-fileuploader__input").value=""}},function(e){t(7,o=S(o,e.detail)),n.querySelector(".mc-fileuploader__input").value="",v.dispatch("file-removed",e.detail)},function(e){const l=S(s,e.detail);t(9,s=l),v.dispatch("uploaded-file-removed",e.detail)},b,f,g,$,w,function(e){_[e?"unshift":"push"]((()=>{n=e,t(8,n)}))}]}class A extends e{constructor(e){super();const r=document.createElement("style");r.textContent=".mc-fileuploader{position:relative;display:block}.mc-fileuploader__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-fileuploader__label{font-family:\"LeroyMerlin\", sans-serif;font-weight:600;cursor:pointer;border-radius:4px;text-align:center;border:2px solid transparent;-webkit-transition:all ease 200ms;-o-transition:all ease 200ms;transition:all ease 200ms;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;vertical-align:middle;font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem;color:#188803;border-color:#188803;background-color:#ffffff;margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;-webkit-box-sizing:border-box;box-sizing:border-box}.mc-fileuploader__label:hover{background-color:#ebf5de;color:#006902}.mc-fileuploader__label:active{background-color:#c5e39e;color:#035010}.mc-fileuploader__label:active{background-color:#c5e39e;color:#035010}.mc-fileuploader__label:disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-fileuploader__label::before{content:\"\";width:1.5rem;height:1.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23188803' viewBox='0 0 24 24'%3E%3Ctitle%3EMedia_Upload_24px%3C/title%3E%3Cpath d='M8.71,7.71,11,5.41V16a1,1,0,0,0,2,0V5.41l2.29,2.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-4-4a1,1,0,0,0-1.42,0l-4,4A1,1,0,1,0,8.71,7.71Z'/%3E%3Cpath d='M16.22,12.44a1,1,0,0,0-1.2.77,1,1,0,0,0,.76,1.19C18.55,15,20,16.17,20,17c0,1.22-3.12,3-8,3s-8-1.78-8-3c0-.83,1.45-2,4.22-2.6A1,1,0,0,0,9,13.21a1,1,0,0,0-1.2-.77C4.16,13.25,2,15,2,17c0,2.85,4.3,5,10,5s10-2.15,10-5C22,15,19.84,13.25,16.22,12.44Z'/%3E%3C/svg%3E\") no-repeat;background-size:1.5rem;margin-right:0.5rem;margin-left:-0.5rem}:focus+.mc-fileuploader__label{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}:hover+.mc-fileuploader__label{color:#006902;background-color:#ebf5de}:disabled+.mc-fileuploader__label{color:#666666;background-color:#cccccc;border-color:transparent;cursor:not-allowed}:disabled+.mc-fileuploader__label::before{background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23666666' viewBox='0 0 24 24'%3E%3Ctitle%3EMedia_Upload_24px%3C/title%3E%3Cpath d='M8.71,7.71,11,5.41V16a1,1,0,0,0,2,0V5.41l2.29,2.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-4-4a1,1,0,0,0-1.42,0l-4,4A1,1,0,1,0,8.71,7.71Z'/%3E%3Cpath d='M16.22,12.44a1,1,0,0,0-1.2.77,1,1,0,0,0,.76,1.19C18.55,15,20,16.17,20,17c0,1.22-3.12,3-8,3s-8-1.78-8-3c0-.83,1.45-2,4.22-2.6A1,1,0,0,0,9,13.21a1,1,0,0,0-1.2-.77C4.16,13.25,2,15,2,17c0,2.85,4.3,5,10,5s10-2.15,10-5C22,15,19.84,13.25,16.22,12.44Z'/%3E%3C/svg%3E\") no-repeat}",this.shadowRoot.appendChild(r),l(this,{target:this.shadowRoot,props:t(this.attributes),customElement:!0},M,z,a,{id:1,label:2,accept:3,multiple:4,allowedextensions:16,maxsize:17,displayfileslist:0,disabled:5,removelabel:6,uploadedfiles:18,errorlabels:19,stateless:20},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["id","label","accept","multiple","allowedextensions","maxsize","displayfileslist","disabled","removelabel","uploadedfiles","errorlabels","stateless"]}get id(){return this.$$.ctx[1]}set id(e){this.$$set({id:e}),s()}get label(){return this.$$.ctx[2]}set label(e){this.$$set({label:e}),s()}get accept(){return this.$$.ctx[3]}set accept(e){this.$$set({accept:e}),s()}get multiple(){return this.$$.ctx[4]}set multiple(e){this.$$set({multiple:e}),s()}get allowedextensions(){return this.$$.ctx[16]}set allowedextensions(e){this.$$set({allowedextensions:e}),s()}get maxsize(){return this.$$.ctx[17]}set maxsize(e){this.$$set({maxsize:e}),s()}get displayfileslist(){return this.$$.ctx[0]}set displayfileslist(e){this.$$set({displayfileslist:e}),s()}get disabled(){return this.$$.ctx[5]}set disabled(e){this.$$set({disabled:e}),s()}get removelabel(){return this.$$.ctx[6]}set removelabel(e){this.$$set({removelabel:e}),s()}get uploadedfiles(){return this.$$.ctx[18]}set uploadedfiles(e){this.$$set({uploadedfiles:e}),s()}get errorlabels(){return this.$$.ctx[19]}set errorlabels(e){this.$$set({errorlabels:e}),s()}get stateless(){return this.$$.ctx[20]}set stateless(e){this.$$set({stateless:e}),s()}}export{A as default};
+import { S as SvelteElement, i as init, a as attribute_to_object, b as insert, f as flush, s as safe_not_equal, e as element, d as space, t as text, n as noop, g as attr, j as append, l as listen, k as set_data, C as transition_in, D as transition_out, E as check_outros, o as detach, x as create_component, A as mount_component, G as destroy_component, M as group_outros, v as binding_callbacks } from '../../index-c33b3772.js';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+import ResultFile_nested from './ResultFile.nested.js';
+
+/* src/components/fileuploader/FileUploader.svelte generated by Svelte v3.58.0 */
+
+function create_if_block_1(ctx) {
+	let resultfile;
+	let current;
+
+	resultfile = new ResultFile_nested({
+			props: {
+				files: /*files*/ ctx[7],
+				allowedExtensions: /*allowedExtensions*/ ctx[10],
+				disabled: /*disabled*/ ctx[5],
+				maxSize: /*maxSize*/ ctx[11],
+				removelabel: /*removelabel*/ ctx[6],
+				errorLabels: /*errorLabels*/ ctx[12]
+			}
+		});
+
+	resultfile.$on("file-removed", /*deleteFile*/ ctx[14]);
+
+	return {
+		c() {
+			create_component(resultfile.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(resultfile, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const resultfile_changes = {};
+			if (dirty & /*files*/ 128) resultfile_changes.files = /*files*/ ctx[7];
+			if (dirty & /*allowedExtensions*/ 1024) resultfile_changes.allowedExtensions = /*allowedExtensions*/ ctx[10];
+			if (dirty & /*disabled*/ 32) resultfile_changes.disabled = /*disabled*/ ctx[5];
+			if (dirty & /*maxSize*/ 2048) resultfile_changes.maxSize = /*maxSize*/ ctx[11];
+			if (dirty & /*removelabel*/ 64) resultfile_changes.removelabel = /*removelabel*/ ctx[6];
+			if (dirty & /*errorLabels*/ 4096) resultfile_changes.errorLabels = /*errorLabels*/ ctx[12];
+			resultfile.$set(resultfile_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(resultfile.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(resultfile.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(resultfile, detaching);
+		}
+	};
+}
+
+// (137:2) {#if uploadedFiles.length > 0}
+function create_if_block(ctx) {
+	let resultfile;
+	let current;
+
+	resultfile = new ResultFile_nested({
+			props: {
+				files: /*uploadedFiles*/ ctx[9],
+				allowedExtensions: /*allowedExtensions*/ ctx[10],
+				disabled: /*disabled*/ ctx[5],
+				maxSize: /*maxSize*/ ctx[11],
+				removelabel: /*removelabel*/ ctx[6],
+				errorLabels: /*errorLabels*/ ctx[12]
+			}
+		});
+
+	resultfile.$on("file-removed", /*deleteUploadedFile*/ ctx[15]);
+
+	return {
+		c() {
+			create_component(resultfile.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(resultfile, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const resultfile_changes = {};
+			if (dirty & /*uploadedFiles*/ 512) resultfile_changes.files = /*uploadedFiles*/ ctx[9];
+			if (dirty & /*allowedExtensions*/ 1024) resultfile_changes.allowedExtensions = /*allowedExtensions*/ ctx[10];
+			if (dirty & /*disabled*/ 32) resultfile_changes.disabled = /*disabled*/ ctx[5];
+			if (dirty & /*maxSize*/ 2048) resultfile_changes.maxSize = /*maxSize*/ ctx[11];
+			if (dirty & /*removelabel*/ 64) resultfile_changes.removelabel = /*removelabel*/ ctx[6];
+			if (dirty & /*errorLabels*/ 4096) resultfile_changes.errorLabels = /*errorLabels*/ ctx[12];
+			resultfile.$set(resultfile_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(resultfile.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(resultfile.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(resultfile, detaching);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let input;
+	let t0;
+	let label_1;
+	let span;
+	let t1;
+	let t2;
+	let t3;
+	let current;
+	let mounted;
+	let dispose;
+	let if_block0 = /*displayfileslist*/ ctx[0] && /*files*/ ctx[7] && /*files*/ ctx[7].length > 0 && create_if_block_1(ctx);
+	let if_block1 = /*uploadedFiles*/ ctx[9].length > 0 && create_if_block(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			input = element("input");
+			t0 = space();
+			label_1 = element("label");
+			span = element("span");
+			t1 = text(/*label*/ ctx[2]);
+			t2 = space();
+			if (if_block0) if_block0.c();
+			t3 = space();
+			if (if_block1) if_block1.c();
+			this.c = noop;
+			attr(input, "id", /*id*/ ctx[1]);
+			attr(input, "type", "file");
+			attr(input, "class", "mc-fileuploader__input");
+			attr(input, "accept", /*accept*/ ctx[3]);
+			input.multiple = /*multiple*/ ctx[4];
+			input.disabled = /*disabled*/ ctx[5];
+			attr(span, "class", "mc-fileuploader__label--center");
+			attr(label_1, "for", /*id*/ ctx[1]);
+			attr(label_1, "class", "mc-fileuploader__label");
+			attr(div, "class", "mc-fileuploader");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, input);
+			append(div, t0);
+			append(div, label_1);
+			append(label_1, span);
+			append(span, t1);
+			append(div, t2);
+			if (if_block0) if_block0.m(div, null);
+			append(div, t3);
+			if (if_block1) if_block1.m(div, null);
+			/*div_binding*/ ctx[21](div);
+			current = true;
+
+			if (!mounted) {
+				dispose = listen(input, "change", /*handleChange*/ ctx[13]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (!current || dirty & /*id*/ 2) {
+				attr(input, "id", /*id*/ ctx[1]);
+			}
+
+			if (!current || dirty & /*accept*/ 8) {
+				attr(input, "accept", /*accept*/ ctx[3]);
+			}
+
+			if (!current || dirty & /*multiple*/ 16) {
+				input.multiple = /*multiple*/ ctx[4];
+			}
+
+			if (!current || dirty & /*disabled*/ 32) {
+				input.disabled = /*disabled*/ ctx[5];
+			}
+
+			if (!current || dirty & /*label*/ 4) set_data(t1, /*label*/ ctx[2]);
+
+			if (!current || dirty & /*id*/ 2) {
+				attr(label_1, "for", /*id*/ ctx[1]);
+			}
+
+			if (/*displayfileslist*/ ctx[0] && /*files*/ ctx[7] && /*files*/ ctx[7].length > 0) {
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+
+					if (dirty & /*displayfileslist, files*/ 129) {
+						transition_in(if_block0, 1);
+					}
+				} else {
+					if_block0 = create_if_block_1(ctx);
+					if_block0.c();
+					transition_in(if_block0, 1);
+					if_block0.m(div, t3);
+				}
+			} else if (if_block0) {
+				group_outros();
+
+				transition_out(if_block0, 1, 1, () => {
+					if_block0 = null;
+				});
+
+				check_outros();
+			}
+
+			if (/*uploadedFiles*/ ctx[9].length > 0) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+
+					if (dirty & /*uploadedFiles*/ 512) {
+						transition_in(if_block1, 1);
+					}
+				} else {
+					if_block1 = create_if_block(ctx);
+					if_block1.c();
+					transition_in(if_block1, 1);
+					if_block1.m(div, null);
+				}
+			} else if (if_block1) {
+				group_outros();
+
+				transition_out(if_block1, 1, 1, () => {
+					if_block1 = null;
+				});
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block0);
+			transition_in(if_block1);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block0);
+			transition_out(if_block1);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
+			/*div_binding*/ ctx[21](null);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function removeFromArray(fileList, value) {
+	const array = Array.from(fileList);
+	const idx = array.indexOf(value);
+
+	if (idx !== -1) {
+		array.splice(idx, 1);
+	}
+
+	return array;
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let allowedExtensions;
+	let uploadedFiles;
+	let maxSize;
+	let errorLabels;
+	let { id } = $$props;
+	let { label } = $$props;
+	let { accept } = $$props;
+	let { multiple = true } = $$props;
+	let { allowedextensions } = $$props;
+	let { maxsize } = $$props;
+	let { displayfileslist = false } = $$props;
+	let { disabled = false } = $$props;
+	let { removelabel = 'Remove' } = $$props;
+	let { uploadedfiles } = $$props;
+	let { errorlabels } = $$props;
+	let { stateless } = $$props;
+	let files;
+	let root;
+	let eventHandler = new EventHandler();
+
+	function checkFileSize(fileSize) {
+		const fileSizeMB = fileSize / 1024 / 1024;
+
+		if (maxSize && fileSizeMB > maxSize) {
+			return false;
+		}
+
+		return true;
+	}
+
+	function checkFileExtension(fileName) {
+		if (allowedExtensions && allowedExtensions.length > 0) {
+			const extension = fileName.slice((fileName.lastIndexOf('.') - 1 >>> 0) + 2);
+
+			if (allowedExtensions && !allowedExtensions.includes(String(extension))) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	function handleChange(e) {
+		const target = e.target;
+		$$invalidate(7, files = target.files);
+		$$invalidate(0, displayfileslist = true);
+		const invalidFiles = [];
+		const fileList = [...files];
+
+		fileList.forEach((file, index) => {
+			const fileName = file.name;
+			const fileSize = file.size;
+			const validExtension = checkFileExtension(fileName);
+			const validSize = checkFileSize(fileSize);
+			let errorType = '';
+
+			if (!validExtension) {
+				errorType = 'invalid-extension';
+			}
+
+			if (!validSize) {
+				errorType = 'invalid-size';
+			}
+
+			if (!validExtension || !validSize) {
+				invalidFiles.push({ index, fileName, fileSize, errorType });
+			}
+		});
+
+		if (invalidFiles.length > 0) {
+			eventHandler.dispatch('invalid-files', invalidFiles);
+		}
+
+		eventHandler.dispatch('change', files);
+
+		if (stateless) {
+			const fileuploader = root.querySelector('.mc-fileuploader__input');
+			fileuploader.value = '';
+		}
+	}
+
+	function deleteFile(e) {
+		$$invalidate(7, files = removeFromArray(files, e.detail));
+		const fileuploader = root.querySelector('.mc-fileuploader__input');
+		fileuploader.value = '';
+		eventHandler.dispatch('file-removed', e.detail);
+	}
+
+	function deleteUploadedFile(e) {
+		const files = removeFromArray(uploadedFiles, e.detail);
+		$$invalidate(9, uploadedFiles = files);
+		eventHandler.dispatch('uploaded-file-removed', e.detail);
+	}
+
+	function div_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			root = $$value;
+			$$invalidate(8, root);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('id' in $$props) $$invalidate(1, id = $$props.id);
+		if ('label' in $$props) $$invalidate(2, label = $$props.label);
+		if ('accept' in $$props) $$invalidate(3, accept = $$props.accept);
+		if ('multiple' in $$props) $$invalidate(4, multiple = $$props.multiple);
+		if ('allowedextensions' in $$props) $$invalidate(16, allowedextensions = $$props.allowedextensions);
+		if ('maxsize' in $$props) $$invalidate(17, maxsize = $$props.maxsize);
+		if ('displayfileslist' in $$props) $$invalidate(0, displayfileslist = $$props.displayfileslist);
+		if ('disabled' in $$props) $$invalidate(5, disabled = $$props.disabled);
+		if ('removelabel' in $$props) $$invalidate(6, removelabel = $$props.removelabel);
+		if ('uploadedfiles' in $$props) $$invalidate(18, uploadedfiles = $$props.uploadedfiles);
+		if ('errorlabels' in $$props) $$invalidate(19, errorlabels = $$props.errorlabels);
+		if ('stateless' in $$props) $$invalidate(20, stateless = $$props.stateless);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*allowedextensions*/ 65536) {
+			$$invalidate(10, allowedExtensions = allowedextensions ? JSON.parse(allowedextensions) : []);
+		}
+
+		if ($$self.$$.dirty & /*uploadedfiles*/ 262144) {
+			$$invalidate(9, uploadedFiles = uploadedfiles ? JSON.parse(uploadedfiles) : []);
+		}
+
+		if ($$self.$$.dirty & /*files*/ 128) ;
+
+		if ($$self.$$.dirty & /*maxsize*/ 131072) {
+			$$invalidate(11, maxSize = maxsize ? maxsize : undefined);
+		}
+
+		if ($$self.$$.dirty & /*errorlabels*/ 524288) {
+			$$invalidate(12, errorLabels = errorlabels ? JSON.parse(errorlabels) : []);
+		}
+	};
+
+	return [
+		displayfileslist,
+		id,
+		label,
+		accept,
+		multiple,
+		disabled,
+		removelabel,
+		files,
+		root,
+		uploadedFiles,
+		allowedExtensions,
+		maxSize,
+		errorLabels,
+		handleChange,
+		deleteFile,
+		deleteUploadedFile,
+		allowedextensions,
+		maxsize,
+		uploadedfiles,
+		errorlabels,
+		stateless,
+		div_binding
+	];
+}
+
+class FileUploader extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-fileuploader{position:relative;display:block}.mc-fileuploader__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-fileuploader__label{font-family:"LeroyMerlin", sans-serif;font-weight:600;cursor:pointer;border-radius:4px;text-align:center;border:2px solid transparent;-webkit-transition:all ease 200ms;-o-transition:all ease 200ms;transition:all ease 200ms;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;vertical-align:middle;font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem;color:#188803;border-color:#188803;background-color:#ffffff;margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;-webkit-box-sizing:border-box;box-sizing:border-box}.mc-fileuploader__label:hover{background-color:#ebf5de;color:#006902}.mc-fileuploader__label:active{background-color:#c5e39e;color:#035010}.mc-fileuploader__label:active{background-color:#c5e39e;color:#035010}.mc-fileuploader__label:disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-fileuploader__label::before{content:"";width:1.5rem;height:1.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23188803' viewBox='0 0 24 24'%3E%3Ctitle%3EMedia_Upload_24px%3C/title%3E%3Cpath d='M8.71,7.71,11,5.41V16a1,1,0,0,0,2,0V5.41l2.29,2.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-4-4a1,1,0,0,0-1.42,0l-4,4A1,1,0,1,0,8.71,7.71Z'/%3E%3Cpath d='M16.22,12.44a1,1,0,0,0-1.2.77,1,1,0,0,0,.76,1.19C18.55,15,20,16.17,20,17c0,1.22-3.12,3-8,3s-8-1.78-8-3c0-.83,1.45-2,4.22-2.6A1,1,0,0,0,9,13.21a1,1,0,0,0-1.2-.77C4.16,13.25,2,15,2,17c0,2.85,4.3,5,10,5s10-2.15,10-5C22,15,19.84,13.25,16.22,12.44Z'/%3E%3C/svg%3E") no-repeat;background-size:1.5rem;margin-right:0.5rem;margin-left:-0.5rem}:focus+.mc-fileuploader__label{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}:hover+.mc-fileuploader__label{color:#006902;background-color:#ebf5de}:disabled+.mc-fileuploader__label{color:#666666;background-color:#cccccc;border-color:transparent;cursor:not-allowed}:disabled+.mc-fileuploader__label::before{background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23666666' viewBox='0 0 24 24'%3E%3Ctitle%3EMedia_Upload_24px%3C/title%3E%3Cpath d='M8.71,7.71,11,5.41V16a1,1,0,0,0,2,0V5.41l2.29,2.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-4-4a1,1,0,0,0-1.42,0l-4,4A1,1,0,1,0,8.71,7.71Z'/%3E%3Cpath d='M16.22,12.44a1,1,0,0,0-1.2.77,1,1,0,0,0,.76,1.19C18.55,15,20,16.17,20,17c0,1.22-3.12,3-8,3s-8-1.78-8-3c0-.83,1.45-2,4.22-2.6A1,1,0,0,0,9,13.21a1,1,0,0,0-1.2-.77C4.16,13.25,2,15,2,17c0,2.85,4.3,5,10,5s10-2.15,10-5C22,15,19.84,13.25,16.22,12.44Z'/%3E%3C/svg%3E") no-repeat}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				id: 1,
+				label: 2,
+				accept: 3,
+				multiple: 4,
+				allowedextensions: 16,
+				maxsize: 17,
+				displayfileslist: 0,
+				disabled: 5,
+				removelabel: 6,
+				uploadedfiles: 18,
+				errorlabels: 19,
+				stateless: 20
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return [
+			"id",
+			"label",
+			"accept",
+			"multiple",
+			"allowedextensions",
+			"maxsize",
+			"displayfileslist",
+			"disabled",
+			"removelabel",
+			"uploadedfiles",
+			"errorlabels",
+			"stateless"
+		];
+	}
+
+	get id() {
+		return this.$$.ctx[1];
+	}
+
+	set id(id) {
+		this.$$set({ id });
+		flush();
+	}
+
+	get label() {
+		return this.$$.ctx[2];
+	}
+
+	set label(label) {
+		this.$$set({ label });
+		flush();
+	}
+
+	get accept() {
+		return this.$$.ctx[3];
+	}
+
+	set accept(accept) {
+		this.$$set({ accept });
+		flush();
+	}
+
+	get multiple() {
+		return this.$$.ctx[4];
+	}
+
+	set multiple(multiple) {
+		this.$$set({ multiple });
+		flush();
+	}
+
+	get allowedextensions() {
+		return this.$$.ctx[16];
+	}
+
+	set allowedextensions(allowedextensions) {
+		this.$$set({ allowedextensions });
+		flush();
+	}
+
+	get maxsize() {
+		return this.$$.ctx[17];
+	}
+
+	set maxsize(maxsize) {
+		this.$$set({ maxsize });
+		flush();
+	}
+
+	get displayfileslist() {
+		return this.$$.ctx[0];
+	}
+
+	set displayfileslist(displayfileslist) {
+		this.$$set({ displayfileslist });
+		flush();
+	}
+
+	get disabled() {
+		return this.$$.ctx[5];
+	}
+
+	set disabled(disabled) {
+		this.$$set({ disabled });
+		flush();
+	}
+
+	get removelabel() {
+		return this.$$.ctx[6];
+	}
+
+	set removelabel(removelabel) {
+		this.$$set({ removelabel });
+		flush();
+	}
+
+	get uploadedfiles() {
+		return this.$$.ctx[18];
+	}
+
+	set uploadedfiles(uploadedfiles) {
+		this.$$set({ uploadedfiles });
+		flush();
+	}
+
+	get errorlabels() {
+		return this.$$.ctx[19];
+	}
+
+	set errorlabels(errorlabels) {
+		this.$$set({ errorlabels });
+		flush();
+	}
+
+	get stateless() {
+		return this.$$.ctx[20];
+	}
+
+	set stateless(stateless) {
+		this.$$set({ stateless });
+		flush();
+	}
+}
+
+export { FileUploader as default };
 //# sourceMappingURL=FileUploader.js.map

package/public/components/fileuploader/FileUploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.js","sources":["../../../src/components/fileuploader/FileUploader.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  // @ts-nocheck\n  import { EventHandler } from '../../utilities/EventHandler';\n  import ResultFile from './ResultFile.nested.svelte';\n\n  export let id: string;\n  export let label: string;\n  export let accept: string;\n  export let multiple = true;\n  export let allowedextensions: string;\n  export let maxsize: number;\n  export let displayfileslist = false;\n  export let disabled = false;\n  export let removelabel = 'Remove';\n  export let uploadedfiles: string;\n  export let errorlabels: string;\n  export let stateless: false;\n\n  let files: FileList;\n  let root: HTMLElement;\n  let eventHandler = new EventHandler();\n\n  $: allowedExtensions = allowedextensions ? JSON.parse(allowedextensions) : [];\n  $: uploadedFiles = uploadedfiles ? JSON.parse(uploadedfiles) : [];\n  $: files;\n  $: maxSize = maxsize ? maxsize : undefined;\n  $: errorLabels = errorlabels ? JSON.parse(errorlabels) : [];\n\n  function checkFileSize(fileSize: number): boolean {\n    const fileSizeMB = fileSize / 1024 / 1024; // in MB\n    if (maxSize && fileSizeMB > maxSize) {\n      return false; // invalid\n    }\n\n    return true; // valid\n  }\n  function checkFileExtension(fileName: string): boolean {\n    if (allowedExtensions && allowedExtensions.length > 0) {\n      const extension: string = fileName.slice(\n        ((fileName.lastIndexOf('.') - 1) >>> 0) + 2,\n      );\n      if (allowedExtensions && !allowedExtensions.includes(String(extension))) {\n        return false; // invalid\n      }\n    }\n\n    return true; // valid\n  }\n\n  function checkFileStatus(file: File): boolean {\n    const validExtension = allowedExtensions\n      ? checkFileExtension(file.name)\n      : true;\n    const validSize = checkFileSize(file.size);\n\n    if (!validExtension || !validSize) {\n      return false; // invalid\n    }\n\n    return true; // valid\n  }\n  function handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    files = target.files as FileList;\n    displayfileslist = true;\n    const invalidFiles: Array = [];\n    const fileList = [...files];\n    fileList.forEach((file, index) => {\n      const fileName = file.name;\n      const fileSize = file.size;\n      const validExtension = checkFileExtension(fileName);\n      const validSize = checkFileSize(fileSize);\n      let errorType = '';\n\n      if (!validExtension) {\n        errorType = 'invalid-extension';\n      }\n\n      if (!validSize) {\n        errorType = 'invalid-size';\n      }\n\n      if (!validExtension || !validSize) {\n        invalidFiles.push({\n          index: index,\n          fileName: fileName,\n          fileSize: fileSize,\n          errorType: errorType,\n        });\n      }\n    });\n\n    if (invalidFiles.length > 0) {\n      eventHandler.dispatch('invalid-files', invalidFiles);\n    }\n    eventHandler.dispatch('change', files);\n    if (stateless) {\n      const fileuploader = root.querySelector(\n        '.mc-fileuploader__input',\n      ) as HTMLInputElement;\n      fileuploader.value = '';\n    }\n  }\n\n  function removeFromArray(fileList: FileList, value: File): FileList {\n    const array = Array.from(fileList);\n    const idx = array.indexOf(value);\n    if (idx !== -1) {\n      array.splice(idx, 1);\n    }\n    return array as FileList;\n  }\n\n  function deleteFile(e: CustomEvent): void {\n    files = removeFromArray(files, e.detail);\n    const fileuploader = root.querySelector(\n      '.mc-fileuploader__input',\n    ) as HTMLInputElement;\n    fileuploader.value = '';\n    eventHandler.dispatch('file-removed', e.detail);\n  }\n\n  function deleteUploadedFile(e: CustomEvent): void {\n    const files = removeFromArray(uploadedFiles, e.detail);\n    uploadedFiles = files;\n    eventHandler.dispatch('uploaded-file-removed', e.detail);\n  }\n\n  function hasInvalidFiles(e: CustomEvent): void {\n    eventHandler.dispatch('invalid-files', e.detail);\n  }\n</script>\n\n<div class=\"mc-fileuploader\" bind:this={root}>\n  <input\n    {id}\n    type=\"file\"\n    class=\"mc-fileuploader__input\"\n    {accept}\n    {multiple}\n    {disabled}\n    on:change={handleChange}\n  />\n  <label for={id} class=\"mc-fileuploader__label\">\n    <span class=\"mc-fileuploader__label--center\">\n      {label}\n    </span>\n  </label>\n  {#if displayfileslist && files && files.length > 0}\n    <ResultFile\n      {files}\n      {allowedExtensions}\n      {disabled}\n      {maxSize}\n      {removelabel}\n      {errorLabels}\n      on:file-removed={deleteFile}\n    />\n  {/if}\n  {#if uploadedFiles.length > 0}\n    <ResultFile\n      files={uploadedFiles}\n      {allowedExtensions}\n      {disabled}\n      {maxSize}\n      {removelabel}\n      {errorLabels}\n      on:file-removed={deleteUploadedFile}\n    />\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.file-uploader';\n</style>\n"],"names":["ctx","if_block0","length","create_if_block_1","create_if_block","insert","target","div","anchor","append","input","label_1","span","removeFromArray","fileList","value","array","Array","from","idx","indexOf","splice","files","root","id","$$props","label","accept","multiple","allowedextensions","maxsize","displayfileslist","disabled","removelabel","uploadedfiles","errorlabels","stateless","eventHandler","EventHandler","$$invalidate","allowedExtensions","JSON","parse","uploadedFiles","maxSize","undefined","errorLabels","e","invalidFiles","forEach","file","index","fileName","name","fileSize","size","validExtension","extension","slice","lastIndexOf","includes","String","checkFileExtension","validSize","checkFileSize","errorType","push","dispatch","querySelector","detail","$$value"],"mappings":"scA8JuBA,EAAU,sXAKpBA,EAAa,kHAMHA,EAAkB,oFAN5BA,EAAa,qRAbnBC,EAAAD,MAAoBA,EAAK,IAAIA,EAAM,GAAAE,OAAS,GAACC,EAAAH,KAW7CA,EAAa,GAACE,OAAS,GAACE,EAAAJ,yEAdxBA,EAAK,8NAFEA,EAAE,iFAVhBK,EAqCKC,EAAAC,EAAAC,GApCHC,EAQCF,EAAAG,UACDD,EAIOF,EAAAI,GAHLF,EAEME,EAAAC,uFALKZ,EAAY,wJAIpBA,EAAK,yBAFEA,EAAE,IAKTA,MAAoBA,EAAK,IAAIA,EAAM,GAAAE,OAAS,iGAW5CF,EAAa,GAACE,OAAS,mNAvDnBW,EAAgBC,EAAoBC,GACrC,MAAAC,EAAQC,MAAMC,KAAKJ,GACnBK,EAAMH,EAAMI,QAAQL,UACb,IAATI,GACFH,EAAMK,OAAOF,EAAK,GAEbH,gCA5FLM,EACAC,MAdOC,GAAUC,SACVC,GAAaD,UACbE,GAAcF,GACdG,SAAAA,GAAW,GAAIH,qBACfI,GAAyBJ,WACzBK,GAAeL,GACfM,iBAAAA,GAAmB,GAAKN,GACxBO,SAAAA,GAAW,GAAKP,GAChBQ,YAAAA,EAAc,UAAQR,iBACtBS,GAAqBT,eACrBU,GAAmBV,aACnBW,GAAgBX,EAIvBY,MAAmBC,wfAEtBC,EAAA,GAAEC,EAAoBX,EAAoBY,KAAKC,MAAMb,GAAiB,uBACtEU,EAAA,EAAEI,EAAgBT,EAAgBO,KAAKC,MAAMR,GAAa,uCAExDU,EAAUd,QAAoBe,sBAChCN,EAAA,GAAEO,EAAcX,EAAcM,KAAKC,MAAMP,GAAW,gCAmC5C,SAAaY,SACdzC,EAASyC,EAAEzC,WACjBgB,EAAQhB,EAAOgB,OACfiB,EAAA,EAAAR,GAAmB,SACbiB,EAAY,UACG1B,GACZ2B,SAAS,CAAAC,EAAMC,WAChBC,EAAWF,EAAKG,KAChBC,EAAWJ,EAAKK,KAChBC,EAlCD,SAAmBJ,GACtB,GAAAZ,GAAqBA,EAAkBtC,OAAS,EAAC,CAC7C,MAAAuD,EAAoBL,EAASM,MACS,GAAxCN,EAASO,YAAY,KAAO,IAAO,IAEnC,GAAAnB,IAAsBA,EAAkBoB,SAASC,OAAOJ,WACnD,SAIJ,EAwBkBK,CAAmBV,GACpCW,EA3CD,SAAcT,WAEjBV,GADeU,EAAW,KAAO,KACTV,GAyCRoB,CAAcV,GAC5B,IAAAW,EAAY,GAEXT,IACHS,EAAY,qBAGTF,IACHE,EAAY,gBAGTT,GAAmBO,GACtBf,EAAakB,KACJ,CAAAf,QACGC,WACAE,WACCW,iBAKbjB,EAAa9C,OAAS,GACxBmC,EAAa8B,SAAS,gBAAiBnB,GAEzCX,EAAa8B,SAAS,SAAU7C,GAC5Bc,EAAS,CACUb,EAAK6C,cACxB,2BAEWrD,MAAQ,KAahB,SAAWgC,GAClBR,EAAA,EAAAjB,EAAQT,EAAgBS,EAAOyB,EAAEsB,SACZ9C,EAAK6C,cACxB,2BAEWrD,MAAQ,GACrBsB,EAAa8B,SAAS,eAAgBpB,EAAEsB,SAGjC,SAAmBtB,GACpB,MAAAzB,EAAQT,EAAgB8B,EAAeI,EAAEsB,QAC/C9B,EAAA,EAAAI,EAAgBrB,GAChBe,EAAa8B,SAAS,wBAAyBpB,EAAEsB,2DAQb9C,EAAI+C"}
+{"version":3,"file":"FileUploader.js","sources":["../../../src/components/fileuploader/FileUploader.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  // @ts-nocheck\n  import { EventHandler } from '../../utilities/EventHandler';\n  import ResultFile from './ResultFile.nested.svelte';\n\n  export let id: string;\n  export let label: string;\n  export let accept: string;\n  export let multiple = true;\n  export let allowedextensions: string;\n  export let maxsize: number;\n  export let displayfileslist = false;\n  export let disabled = false;\n  export let removelabel = 'Remove';\n  export let uploadedfiles: string;\n  export let errorlabels: string;\n  export let stateless: false;\n\n  let files: FileList;\n  let root: HTMLElement;\n  let eventHandler = new EventHandler();\n\n  $: allowedExtensions = allowedextensions ? JSON.parse(allowedextensions) : [];\n  $: uploadedFiles = uploadedfiles ? JSON.parse(uploadedfiles) : [];\n  $: files;\n  $: maxSize = maxsize ? maxsize : undefined;\n  $: errorLabels = errorlabels ? JSON.parse(errorlabels) : [];\n\n  function checkFileSize(fileSize: number): boolean {\n    const fileSizeMB = fileSize / 1024 / 1024; // in MB\n    if (maxSize && fileSizeMB > maxSize) {\n      return false; // invalid\n    }\n\n    return true; // valid\n  }\n  function checkFileExtension(fileName: string): boolean {\n    if (allowedExtensions && allowedExtensions.length > 0) {\n      const extension: string = fileName.slice(\n        ((fileName.lastIndexOf('.') - 1) >>> 0) + 2,\n      );\n      if (allowedExtensions && !allowedExtensions.includes(String(extension))) {\n        return false; // invalid\n      }\n    }\n\n    return true; // valid\n  }\n\n  function checkFileStatus(file: File): boolean {\n    const validExtension = allowedExtensions\n      ? checkFileExtension(file.name)\n      : true;\n    const validSize = checkFileSize(file.size);\n\n    if (!validExtension || !validSize) {\n      return false; // invalid\n    }\n\n    return true; // valid\n  }\n  function handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    files = target.files as FileList;\n    displayfileslist = true;\n    const invalidFiles: Array = [];\n    const fileList = [...files];\n    fileList.forEach((file, index) => {\n      const fileName = file.name;\n      const fileSize = file.size;\n      const validExtension = checkFileExtension(fileName);\n      const validSize = checkFileSize(fileSize);\n      let errorType = '';\n\n      if (!validExtension) {\n        errorType = 'invalid-extension';\n      }\n\n      if (!validSize) {\n        errorType = 'invalid-size';\n      }\n\n      if (!validExtension || !validSize) {\n        invalidFiles.push({\n          index: index,\n          fileName: fileName,\n          fileSize: fileSize,\n          errorType: errorType,\n        });\n      }\n    });\n\n    if (invalidFiles.length > 0) {\n      eventHandler.dispatch('invalid-files', invalidFiles);\n    }\n    eventHandler.dispatch('change', files);\n    if (stateless) {\n      const fileuploader = root.querySelector(\n        '.mc-fileuploader__input',\n      ) as HTMLInputElement;\n      fileuploader.value = '';\n    }\n  }\n\n  function removeFromArray(fileList: FileList, value: File): FileList {\n    const array = Array.from(fileList);\n    const idx = array.indexOf(value);\n    if (idx !== -1) {\n      array.splice(idx, 1);\n    }\n    return array as FileList;\n  }\n\n  function deleteFile(e: CustomEvent): void {\n    files = removeFromArray(files, e.detail);\n    const fileuploader = root.querySelector(\n      '.mc-fileuploader__input',\n    ) as HTMLInputElement;\n    fileuploader.value = '';\n    eventHandler.dispatch('file-removed', e.detail);\n  }\n\n  function deleteUploadedFile(e: CustomEvent): void {\n    const files = removeFromArray(uploadedFiles, e.detail);\n    uploadedFiles = files;\n    eventHandler.dispatch('uploaded-file-removed', e.detail);\n  }\n\n  function hasInvalidFiles(e: CustomEvent): void {\n    eventHandler.dispatch('invalid-files', e.detail);\n  }\n</script>\n\n<div class=\"mc-fileuploader\" bind:this={root}>\n  <input\n    {id}\n    type=\"file\"\n    class=\"mc-fileuploader__input\"\n    {accept}\n    {multiple}\n    {disabled}\n    on:change={handleChange}\n  />\n  <label for={id} class=\"mc-fileuploader__label\">\n    <span class=\"mc-fileuploader__label--center\">\n      {label}\n    </span>\n  </label>\n  {#if displayfileslist && files && files.length > 0}\n    <ResultFile\n      {files}\n      {allowedExtensions}\n      {disabled}\n      {maxSize}\n      {removelabel}\n      {errorLabels}\n      on:file-removed={deleteFile}\n    />\n  {/if}\n  {#if uploadedFiles.length > 0}\n    <ResultFile\n      files={uploadedFiles}\n      {allowedExtensions}\n      {disabled}\n      {maxSize}\n      {removelabel}\n      {errorLabels}\n      on:file-removed={deleteUploadedFile}\n    />\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.file-uploader';\n</style>\n"],"names":[],"mappings":"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"}