@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 n,Host as s}from"@stencil/core/internal/client";import{u as a,g as o,k as r,o as d,e as p}from"./helpers.js";import{a as c}from"./alert_exclamation_circle.js";import{c as h}from"./check.js";import{d as f}from"./pn-button2.js";import{d as u}from"./pn-icon2.js";import{d as m}from"./pn-progress-bar2.js";import{d as g}from"./pn-spinner2.js";class b 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"}},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-"+a();idFileUpload=this.id+"-label";idHelpertext=this.id+"-helpertext";idAccepttext=this.id+"-accept";fileInputElement;invalid=!1;maxSizeInBytes=0;get hostElement(){return this}files=[];isHovering=!1;label;helpertext;language=null;hideProgress=!1;name;accept;maxSize="";capture;limit=1;multiple;required=!1;disabled=!1;handleLimit(){this.multiple=this.limit>1}handleMaxBytes(){this.maxSizeInBytes=o(this.maxSize)}filesAdded;update;fileuploaderror;valid;uploadFile;uploadCancelled;uploadCompleted;async componentWillLoad(){this.handleLimit(),this.handleMaxBytes(),null===this.language&&await r(this.hostElement)}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 n=this.files[l];if(n.filename)if(n.uuid!==e.uuid){try{this._validateFileSize(n),this._validateFileType(n),i=!0}catch(e){i=!1,n.error=e,n.progress=0,n.status="error"}t.push(n)}else"start"===n.status&&(n.xhr.abort(),this.uploadCancelled.emit(n))}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,".pn-dropzone-inner"),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(),n=/^\w+\/[a-z\.\-]+$/i,s=e.filename.match(/\.\w{3,4}($|\?)/)?.[0]?.toLowerCase();if(n.test(i)&&e.contentType===i||s===i){t=!0;break}}if(!t){const i=new b("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 b(`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 b(`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],n=t[0].split(":")[1].split(";")[0],s=new XMLHttpRequest,o={uuid:a(),filename:e.name,filesize:e.size,progress:0,status:"queue",base64:l,contentType:n,error:null,errorMessage:"",file:e,xhr:s};try{this._validateFileSize(o),this._validateFileType(o)}catch(e){o.error=e,o.progress=0,o.status="error"}return o.xhrPromise=()=>new Promise(((e,i)=>{s.responseType="json",s.addEventListener("progress",(e=>{e.lengthComputable?(o.progress=e.loaded/e.total*100,this.updateFile(o)):(o.progress=100,this.updateFile(o))})),s.addEventListener("load",(i=>e(i.target.response))),s.addEventListener("error",(e=>{o.error=e,o.errorMessage="There was an error uploading your file, please try again",this.updateFile(o);const t=new b("There was an error uploading your file, please try again",this.hostElement,"UPLOAD_SERVER_ERROR",o);this.fileuploaderror.emit(t),i(e)}))})),this.files=[...this.files,o],o}))}_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}getFileItemClass=e=>{let i="files-list-item";return e.error&&(i+=" files-list-item-error"),i};getFileIcon(e){return e.error?c:100===e.progress?h:'<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.accept&&this.idAccepttext,this.helpertext&&this.idHelpertext].filter(Boolean);return e.length?e.join(","):null}render(){return n(s,{key:"bce5d5c3684f31a2841ecf631155ab384f318879"},n("div",{key:"07abc549d0ad86fb818f446e4fa223e3b4ea6c84",class:"pn-file-upload-container"},n("div",{key:"1a9d09dd8cf39db11dc741732a7c04276e10a6a9",class:"pn-dropzone-container"},n("input",{key:"387071f47d9aa658929448b041285c01d5187da4",id:this.idFileUpload,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,".pn-dropzone-inner"),onChange:()=>this._onAddFile(),onDragOver:e=>this._onDragOverFile(e),onDragLeave:e=>this._onDragLeaveFile(e),onDrop:e=>this._onDropFile(e),ref:e=>this.fileInputElement=e}),n("div",{key:"71c627aa6044908835b0f6e2227d7744da76680e",class:"pn-dropzone-inner","data-hover":this.isHovering,"data-invalid":this.invalid},n("pn-icon",{key:"a621fd0abb16c8c7b2efcb67932a0e50e12942dd",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"}),n("label",{key:"cc90d1af83fe3814b8ea9991bcdf85c40f48f874",htmlFor:this.idFileUpload,class:"pn-file-upload-title"},this.label||this.translate("CLICKORDRAG")),this.helpertext&&n("p",{key:"8d4032bcd909516779d07f042be878105f3479a1",id:this.idHelpertext,class:"pn-file-upload-subtitle"},this.helpertext),this.accept&&n("p",{key:"715cc9ed4c8878068182a30affa8649c904f041d",id:this.idAccepttext,class:"pn-file-upload-subtitle"},this.translate("ACCEPTEDFORMATS"),": ",this.accept,this.maxSize&&n("span",{key:"a217dcfd8528d86deb9aee37b7750eb574936a56"}," ","(",this.translate("MAXFILESIZE"),": ",this.maxSize,")")))),!!this.files.length&&n("ul",{key:"c1a1cd0c816992c6f524eaf82296ad4fd3300a6b",class:"files-list"},this.files.map((e=>n("li",{class:"files-list-item-container",key:e.uuid},n("div",{class:this.getFileItemClass(e)},n("div",{class:"file-list-item-title"},n("pn-icon",{icon:this.getFileIcon(e),color:this.getFileColor(e)}),this.hideProgress||0===e.progress?n("div",{class:"filename"},e.filename):n("pn-progress-bar",{label:e.filename,progress:e.progress,error:e.error&&e.errorMessage})),n("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?n("div",{class:"files-list-item-text-error"},e.errorMessage||e.error.message):null)))),n("slot",{key:"2690ccdc2c5e97a41c99a3b385e68739bb69cecb"})))}static get watchers(){return{limit:[{handleLimit:0}],maxSize:[{handleMaxBytes:0}]}}static get style(){return`${e("pn-file-upload")}.hover .pn-file-upload-container .pn-dropzone-container{background-color:#e0f8ff}${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-dropzone-inner{border-color:#005d92;background-color:#e0f8ff}${e("pn-file-upload")} .pn-file-upload-input:focus-visible+.pn-dropzone-inner{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-dropzone-inner{pointer-events:none;background-color:#f3f2f2;border-color:#2d2013}${e("pn-file-upload")} .pn-file-upload-input:disabled+.pn-dropzone-inner .headline a{color:#5e554a}${e("pn-file-upload")} .pn-file-upload-input:disabled+.pn-dropzone-inner .pn-icon-svg path{fill:#5e554a}${e("pn-file-upload")} .pn-file-upload-container{position:relative;display:flex;flex-direction:column;gap:1em}${e("pn-file-upload")} .pn-file-upload-container .pn-dropzone-container{position:relative}${e("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner{position:relative;text-align:center;overflow:hidden;padding: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-container .pn-dropzone-inner{transition-duration:0s;transition-delay:0s}}${e("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner .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-container .pn-dropzone-inner[data-hover]{background-color:#e0f8ff;border-color:#005d92}${e("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner[data-invalid]{border-color:#a70707}${e("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner .pn-file-upload-dropzone{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0.5em}${e("pn-file-upload")} .files-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1em}${e("pn-file-upload")} .files-list .filename{font-weight:400;font-size:0.75em}${e("pn-file-upload")} .files-list .files-list-item{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")} .files-list .files-list-item .file-list-item-title{display:flex;align-items:center;gap:0.5em;margin-right:0.5em}${e("pn-file-upload")} .files-list .files-list-item>${e("pn-progress-bar")}{margin-right:25em;flex:1}${e("pn-file-upload")} .files-list .files-list-item.files-list-item-error{color:#a70707;background-color:#fdefee}${e("pn-file-upload")} .files-list .files-list-item-text-error{color:#a70707;font-size:0.875em;font-weight:300;margin-top:0.25em}${e("pn-file-upload")} .pn-file-upload-title{color:#2d2013}${e("pn-file-upload")} .pn-file-upload-subtitle{color:#5e554a;font-size:0.75em}`}},[772,"pn-file-upload",{label:[1],helpertext:[1],language:[1],hideProgress:[4,"hide-progress"],name:[1],accept:[1],maxSize:[1,"max-size"],capture:[1],limit:[2],multiple:[1028],required:[4],disabled:[4],files:[32],isHovering:[32],startUpload:[64],clearUpload:[64],removeFile:[64],updateFile:[64]},void 0,{limit:[{handleLimit:0}],maxSize:[{handleMaxBytes:0}]}]),k=y,w=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)))||f();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)))||g()}}))};export{k as PnFileUpload,w as defineCustomElement}