@postnord/web-components/components/pn-file-upload.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as i,HTMLElement as t,createEvent as l,h as a,Host as s}from"@stencil/core/internal/client";import{u as o,g as n,k as r,o as d,e as p}from"./helpers.js";import{a as h}from"./alert_exclamation_circle.js";import{c as f}from"./check.js";import{d as c}from"./pn-button2.js";import{d as u}from"./pn-icon2.js";import{d as m}from"./pn-progress-bar2.js";import{d as b}from"./pn-spinner2.js";class g extends Error{element;code;data;constructor(e,i,t="INVALID",l=null){super(e),this.name="PNFileUploadError",this.element=i,this.code=t,this.data=l}}const v={CLICKORDRAG:{sv:"Klicka eller dra en fil hit",en:"Click or drag a file here",da:"Klik eller træk en fil hertil",fi:"Klikkaa tai vedä tiedosto tähän",no:"Klikk eller dra en fil hit"},ACCEPTEDFORMATS:{sv:"Filformat som stöds",en:"Supported formats",da:"Støttede filformater",fi:"Tuetut tiedostomuodot",no:"Understøttede filformater"},MAXFILESIZE:{sv:"Max filstorlek",en:"Max filesize",da:"Max filstørrelse",fi:"Maksimitiedostokoko",no:"Maks filstørrelse"},REMOVE_FILE:{sv:"Ta bort filen",en:"Remove file",da:"Fjern fil",fi:"Poista tiedosto",no:"Fjern fil"},LIMIT:{sv:"Max antal filer",en:"Max number of files",da:"Maks antal filer",fi:"Maksimimäärä tiedostoja",no:"Maks antall filer"}},y=i(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.filesAdded=l(this,"filesAdded",7),this.update=l(this,"update",7),this.fileuploaderror=l(this,"fileuploaderror",7),this.valid=l(this,"valid",7),this.uploadFile=l(this,"uploadFile",7),this.uploadCancelled=l(this,"uploadCancelled",7),this.uploadCompleted=l(this,"uploadCompleted",7)}id="pn-file-upload-"+o();idHelpertext=this.id+"-helpertext";idAccepttext=this.id+"-accept";fileInputElement;invalid=!1;maxSizeInBytes=0;rippleClass=".pn-file-upload-dropzone";get hostElement(){return this}files=[];isHovering=!1;label;helpertext;language=void 0;name;accept;capture;multiple;required=!1;disabled=!1;limit=1;maxSize="";hideProgress=!1;pnId=this.id;handleId(){this.idHelpertext=this.getId()+"-helpertext",this.idAccepttext=this.getId()+"-accept"}handleLimit(){this.multiple=this.limit>1}handleMaxBytes(){this.maxSizeInBytes=n(this.maxSize)}filesAdded;update;fileuploaderror;valid;uploadFile;uploadCancelled;uploadCompleted;async componentWillLoad(){void 0===this.language&&await r(this.hostElement)}getId(){return this.pnId||this.id}async startUpload(){if(!this.files.length)return;this.files=this.files.map(((e,i)=>("queue"===e.status&&(e.status="start",this.uploadFile.emit({file:e,index:i,uploader:this})),e)));const e=this.files.map((e=>e.xhrPromise().catch((()=>{}))));return Promise.all(e).then((e=>{const i=e.filter((e=>e));this.uploadCompleted.emit(i)}))}async clearUpload(){this.files=[],this.fileInputElement.value="",this.invalid=!1,this.filesAdded.emit([])}async removeFile(e){let i=!0;const t=[];for(const l in this.files){const a=this.files[l];if(a.filename)if(a.uuid!==e.uuid){try{this._validateFileSize(a),this._validateFileType(a),i=!0}catch(e){i=!1,a.error=e,a.progress=0,a.status="error"}t.push(a)}else"start"===a.status&&(a.xhr.abort(),this.uploadCancelled.emit(a))}this.filesAdded.emit(t),this.files=t,this.invalid=!i||!this._isNotGreaterThanLimit(),this._checkValidity(),this._emitUpdateEvent()}async updateFile(e,i=null){let t=this.files;if(null===i)for(const l in t)if(t[l].uuid===e.uuid){i=l;break}t[i]&&(e.progress>=100?(e.progress=100,e.status="completed"):e.progress<0&&(e.status="start",e.progress=0),e.error&&(e.progress=0,e.status="error",e.errorMessage=e.errorMessage||"There was an error uploading your file, please try again"),t[i]=e),this.files=[...t]}async _addFilesFromFileList(e){if(this.disabled||this.invalid)return;const i=Array.from(e),t=[];if(this.multiple)i.forEach((e=>t.push(this._addFile(e))));else{const e=i[0];1===this.limit?(this.files=[],t.push(this._addFile(e))):t.push(this._addFile(e))}return Promise.all(t).then((()=>{this.filesAdded.emit(this.files),this._isNotGreaterThanLimit(),this._checkValidity(),this._emitUpdateEvent()}))}async _onAddFile(){const e=this.fileInputElement.files;return await this._addFilesFromFileList(e)}_onDragOverFile(e){e.preventDefault(),e.stopPropagation(),this.isHovering=!0}_onDragLeaveFile(e){e.preventDefault(),e.stopPropagation(),this.isHovering=!1}_onDropFile(e){e.preventDefault(),e.stopPropagation(),this.isHovering=!1,d(e,this.hostElement,this.rippleClass),this._addFilesFromFileList(e.dataTransfer.files)}_validateFileType(e){const i=this.accept?this.accept.split(","):[];if(i.length){let t=!1;for(const l of i){const i=l.trim().toLowerCase(),a=/^\w+\/[a-z\.\-]+$/i,s=e.filename.match(/\.\w{3,4}($|\?)/)?.[0]?.toLowerCase();if(a.test(i)&&e.contentType===i||s===i){t=!0;break}}if(!t){const i=new g("Invalid file type.",this.hostElement,"INVALID_FILE_TYPE",e);throw this.invalid=!0,this.fileuploaderror.emit(i),i}}}_validateFileSize(e){if(this.maxSizeInBytes>0&&e.filesize>this.maxSizeInBytes){const i=new g(`You can only add up to ${this.maxSize}.`,this.hostElement,"MAX_FILE_SIZE",e);throw this.invalid=!0,this.fileuploaderror.emit(i),i}}_validateLimit(){if(this.limit&&this.files.length>this.limit){const e=new g(`You can only add up to ${this.limit} files.`,this.hostElement,"MAX_LIMIT",this.files);throw this.invalid=!0,this.fileuploaderror.emit(e),e}}_isNotGreaterThanLimit(){try{return this._validateLimit(),!0}catch(e){return!1}}_checkValidity(){return this.invalid||this.valid.emit(this),!this.invalid}_createBase64FromFile(e){return new Promise(((i,t)=>{const l=new FileReader;l.onload=()=>i(l.result),l.onerror=e=>t(e),l.onabort=()=>t("ABORTED"),l.readAsDataURL(e)}))}async _addFile(e){return this._createBase64FromFile(e).then((i=>{const t=i.split(","),l=t[1],a=t[0].split(":")[1].split(";")[0],s=new XMLHttpRequest,n={uuid:o(),filename:e.name,filesize:e.size,progress:0,status:"queue",base64:l,contentType:a,error:null,errorMessage:"",file:e,xhr:s};try{this._validateFileSize(n),this._validateFileType(n)}catch(e){n.error=e,n.progress=0,n.status="error"}return n.xhrPromise=()=>new Promise(((e,i)=>{s.responseType="json",s.addEventListener("progress",(e=>{e.lengthComputable?(n.progress=e.loaded/e.total*100,this.updateFile(n)):(n.progress=100,this.updateFile(n))})),s.addEventListener("load",(i=>e(i.target.response))),s.addEventListener("error",(e=>{n.error=e,n.errorMessage="There was an error uploading your file, please try again",this.updateFile(n);const t=new g("There was an error uploading your file, please try again",this.hostElement,"UPLOAD_SERVER_ERROR",n);this.fileuploaderror.emit(t),i(e)}))})),this.files=[...this.files,n],n}))}_emitUpdateEvent(){this.update.emit({files:this.files,element:this.hostElement})}translate(e){return v?.[e]?.[this.language||p]||e}isLoading(e){return"start"===e.status}getFileIcon(e){return e.error?h:100===e.progress?f:'<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9 7.5a4.5 4.5 0 1 1 9 0V16a6 6 0 0 1-12 0v-3a1 1 0 1 1 2 0v3a4 4 0 0 0 8 0V7.5a2.5 2.5 0 0 0-5 0V16a1 1 0 1 0 2 0v-6a1 1 0 1 1 2 0v6a3 3 0 1 1-6 0zM7 9a1 1 0 0 1 1 1v.1a1 1 0 1 1-2 0V10a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>'}getFileColor(e){return e.error?"warning":100===e.progress?"green700":"gray900"}describedBy(){const e=[this.showAcceptText()&&this.idAccepttext,this.helpertext&&this.idHelpertext].filter(Boolean);return e.length?e.join(" "):null}showAcceptText(){return!!this.accept||!!this.maxSize||this.limit>1}getAcceptText(){const e=[];if(this.accept&&e.push(`${this.translate("ACCEPTEDFORMATS")}: ${this.accept}`),this.maxSize){const i=this.translate("MAXFILESIZE");e.push(`${e.length?i.toLowerCase():i}: ${this.maxSize}`)}if(this.limit>1){const i=this.translate("LIMIT");e.push(`${e.length?i.toLowerCase():i}: ${this.limit}`)}return e.join(", ")}render(){return a(s,{key:"bda8680e48b7537469f7a348134552cc40201ff3"},a("div",{key:"6e661705703b2b2d50a794619f1ed4ad123a05e0",class:"pn-file-upload"},a("div",{key:"d2d17b3cd8cd15564a63a82d544af8c06b9e6fb5",class:"pn-file-upload-container"},a("input",{key:"0e8801c1478852c946e8f31d1dd6dde1ee5b4441",id:this.getId(),class:"pn-file-upload-input",type:"file",name:this.name,multiple:this.multiple,accept:this.accept,capture:this.capture,disabled:this.disabled,required:this.required,"aria-describedby":this.describedBy(),"aria-invalid":this.invalid?.toString(),onClick:e=>d(e,this.hostElement,this.rippleClass),onChange:()=>this._onAddFile(),onDragOver:e=>this._onDragOverFile(e),onDragLeave:e=>this._onDragLeaveFile(e),onDrop:e=>this._onDropFile(e),ref:e=>this.fileInputElement=e}),a("div",{key:"802d986996b9cdc9f577906631dfa1d3eed8f8e4",class:"pn-file-upload-dropzone","data-hover":this.isHovering,"data-invalid":this.invalid},a("pn-icon",{key:"1c4e0120ebdf2f06401f130549fb9e8c9e97c920",class:"pn-file-upload-icon-element",icon:'<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-2a1 1 0 1 1 0-2h2a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3zm9 0a1 1 0 0 1 .707.293l4 4a1 1 0 0 1-1.414 1.414L13 11.414V17a1 1 0 1 1-2 0v-5.586l-2.293 2.293a1 1 0 0 1-1.414-1.414l4-4A1 1 0 0 1 12 8m-1 12.1V20a1 1 0 1 1 2 0v.1a1 1 0 1 1-2 0" clip-rule="evenodd"/></svg>',color:"blue700"}),a("label",{key:"8f5275d7e7591aee9167cf3fc858b8ec22070d4f",class:"pn-file-upload-title",htmlFor:this.getId()},this.label||this.translate("CLICKORDRAG")),this.helpertext&&a("p",{key:"f0a1bc0aaece7c470a756c46aefee84f7059b548",class:"pn-file-upload-subtitle",id:this.idHelpertext},this.helpertext),this.showAcceptText()&&a("p",{key:"4d8d595fe7e10bdf5cb01c4b7b448b3b11458c15",class:"pn-file-upload-subtitle",id:this.idAccepttext},this.getAcceptText()))),!!this.files.length&&a("ul",{key:"55bb12c9e21aceae0bffd49b400f1902f7edb564",class:"pn-file-upload-files"},this.files.map((e=>a("li",{class:"pn-file-upload-files-item",key:e.uuid},a("div",{class:"pn-file-upload-file","data-error":!!e.error},a("div",{class:"pn-file-upload-file-title"},a("pn-icon",{icon:this.getFileIcon(e),color:this.getFileColor(e)}),this.hideProgress||0===e.progress?a("div",{class:"pn-file-upload-file-name"},e.filename):a("pn-progress-bar",{label:e.filename,progress:e.progress,error:e.error&&e.errorMessage})),a("pn-button",{small:!0,variant:"borderless",arialabel:`${this.translate("REMOVE_FILE")} ${e.filename}`,appearance:e.error?"warning":"light",icon:'<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M10.5 4a1 1 0 0 0-1 1h5a1 1 0 0 0-1-1zm6 1a3 3 0 0 0-3-3h-3a3 3 0 0 0-3 3h-2A2.5 2.5 0 0 0 5 9.95V19a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V9.95A2.5 2.5 0 0 0 18.5 5zm.5 5H7v9a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1zM5.5 7a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1zm4.5 5a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1m4 0a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>',iconOnly:!0,tooltip:this.translate("REMOVE_FILE"),loading:this.isLoading(e),onClick:()=>this.removeFile(e)})),e.error?a("div",{class:"pn-file-upload-file-error"},e.errorMessage||e.error.message):null)))),a("slot",{key:"d5e2793ee8d72550129b38825dde9d25768d8528"})))}static get watchers(){return{pnId:[{handleId:1}],limit:[{handleLimit:1}],maxSize:[{handleMaxBytes:1}]}}static get style(){return`${e("pn-file-upload")} .pn-file-upload{position:relative;display:flex;flex-direction:column;gap:1em}${e("pn-file-upload")} .pn-file-upload-container{position:relative}${e("pn-file-upload")} .pn-file-upload-input{position:absolute;z-index:1;left:0;top:0;opacity:0;height:100%;width:100%;-webkit-tap-highlight-color:transparent}${e("pn-file-upload")} .pn-file-upload-input:hover{cursor:pointer}${e("pn-file-upload")} .pn-file-upload-input:hover+.pn-file-upload-dropzone{border-color:#005d92;background-color:#e0f8ff}${e("pn-file-upload")} .pn-file-upload-input:focus-visible+.pn-file-upload-dropzone{border-color:#005d92;outline-color:#005d92}${e("pn-file-upload")} .pn-file-upload-input:disabled{pointer-events:none}${e("pn-file-upload")} .pn-file-upload-input:disabled+.pn-file-upload-dropzone{pointer-events:none;background-color:#f3f2f2;border-color:#2d2013}${e("pn-file-upload")} .pn-file-upload-input:disabled+.pn-file-upload-dropzone .pn-icon-svg path{fill:#5e554a}${e("pn-file-upload")} .pn-file-upload-dropzone{position:relative;text-align:center;overflow:hidden;padding:clamp(1em, 5vw, 2.5em);border:0.0625em #969087 dashed;border-radius:0.5em;display:flex;flex-direction:column;align-items:center;gap:0.5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-file-upload")} .pn-file-upload-dropzone{transition-duration:0s;transition-delay:0s}}${e("pn-file-upload")} .pn-file-upload-dropzone .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${e("pn-file-upload")} .pn-file-upload-dropzone[data-hover]{background-color:#e0f8ff;border-color:#005d92}${e("pn-file-upload")} .pn-file-upload-dropzone[data-invalid]{border-color:#a70707}${e("pn-file-upload")} .pn-file-upload-title{color:#2d2013}${e("pn-file-upload")} .pn-file-upload-subtitle{color:#5e554a;font-size:0.75em}${e("pn-file-upload")} .pn-file-upload-files{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1em}${e("pn-file-upload")} .pn-file-upload-file{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;background:#f9f8f8;padding:1em;border-radius:0.5em}${e("pn-file-upload")} .pn-file-upload-file-title{display:flex;align-items:center;gap:0.5em;flex:1;margin-right:0.5em}${e("pn-file-upload")} .pn-file-upload-file-name{font-weight:400;font-size:0.75em}${e("pn-file-upload")} .pn-file-upload-file-error{color:#a70707;font-size:0.875em;font-weight:300;margin-top:0.25em}${e("pn-file-upload")} .pn-file-upload-file[data-error]{color:#a70707;background-color:#fdefee}${e("pn-file-upload")} .pn-file-upload-file ${e("pn-progress-bar")}{flex:1}`}},[772,"pn-file-upload",{label:[1],helpertext:[1],language:[1],name:[1],accept:[1],capture:[1],multiple:[1028],required:[4],disabled:[4],limit:[2],maxSize:[1,"max-size"],hideProgress:[4,"hide-progress"],pnId:[1,"pn-id"],files:[32],isHovering:[32],startUpload:[64],clearUpload:[64],removeFile:[64],updateFile:[64]},void 0,{pnId:[{handleId:1}],limit:[{handleLimit:1}],maxSize:[{handleMaxBytes:1}]}]),x=y,k=function(){"undefined"!=typeof customElements&&["pn-file-upload","pn-button","pn-icon","pn-progress-bar","pn-spinner"].forEach((i=>{switch(i){case"pn-file-upload":customElements.get(e(e(i)))||customElements.define(e(e(i)),y);break;case"pn-button":customElements.get(e(e(i)))||c();break;case"pn-icon":customElements.get(e(e(i)))||u();break;case"pn-progress-bar":customElements.get(e(e(i)))||m();break;case"pn-spinner":customElements.get(e(e(i)))||b()}}))};export{x as PnFileUpload,k as defineCustomElement}