@postnord/web-components
Version:
PostNord Web Components
6 lines • 14.2 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{r as e,c as i,g as t,h as l,a as s}from"./p-c2c6299e.js";import{u as n,g as a,j as o,r,e as d}from"./p-c511b4fb.js";import{a as p}from"./p-9a18b612.js";import{c as f}from"./p-aae10869.js";const c='<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>';const h=c;const u='<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>';const m=u;const g='<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>';const b=g;class v 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 y={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"}};const w="pn-file-upload.hover .pn-file-upload-container .pn-dropzone-container{background-color:#e0f8ff}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}pn-file-upload .pn-file-upload-input:hover{cursor:pointer}pn-file-upload .pn-file-upload-input:hover+.pn-dropzone-inner{border-color:#005d92;background-color:#e0f8ff}pn-file-upload .pn-file-upload-input:focus-visible+.pn-dropzone-inner{border-color:#005d92;outline-color:#005d92}pn-file-upload .pn-file-upload-input:disabled{pointer-events:none}pn-file-upload .pn-file-upload-input:disabled+.pn-dropzone-inner{pointer-events:none;background-color:#f3f2f2;border-color:#2d2013}pn-file-upload .pn-file-upload-input:disabled+.pn-dropzone-inner .headline a{color:#5e554a}pn-file-upload .pn-file-upload-input:disabled+.pn-dropzone-inner .pn-icon-svg path{fill:#5e554a}pn-file-upload .pn-file-upload-container{position:relative;display:flex;flex-direction:column;gap:1em}pn-file-upload .pn-file-upload-container .pn-dropzone-container{position:relative}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)}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}}pn-file-upload .pn-file-upload-container .pn-dropzone-inner[data-hover]{background-color:#e0f8ff;border-color:#005d92}pn-file-upload .pn-file-upload-container .pn-dropzone-inner[data-invalid]{border-color:#a70707}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}pn-file-upload .files-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1em}pn-file-upload .files-list .filename{font-weight:400;font-size:0.75em}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}pn-file-upload .files-list .files-list-item .file-list-item-title{display:flex;align-items:center;gap:0.5em;margin-right:0.5em}pn-file-upload .files-list .files-list-item>pn-progress-bar{margin-right:25em;flex:1}pn-file-upload .files-list .files-list-item.files-list-item-error{color:#a70707;background-color:#fdefee}pn-file-upload .files-list .files-list-item-text-error{color:#a70707;font-size:0.875em;font-weight:300;margin-top:0.25em}pn-file-upload .pn-file-upload-title{color:#2d2013}pn-file-upload .pn-file-upload-subtitle{color:#5e554a;font-size:0.75em}";const k=w;const x=class{constructor(t){e(this,t);this.filesAdded=i(this,"filesAdded",7);this.update=i(this,"update",7);this.fileuploaderror=i(this,"fileuploaderror",7);this.valid=i(this,"valid",7);this.uploadFile=i(this,"uploadFile",7);this.uploadCancelled=i(this,"uploadCancelled",7);this.uploadCompleted=i(this,"uploadCompleted",7)}id=`pn-file-upload-${n()}`;idFileUpload=`${this.id}-label`;idHelpertext=`${this.id}-helpertext`;idAccepttext=`${this.id}-accept`;fileInputElement;invalid=false;maxSizeInBytes=0;get hostElement(){return t(this)}files=[];isHovering=false;label;helpertext;language=null;hideProgress=false;name;accept;maxSize="";capture;limit=1;multiple;required=false;disabled=false;handleLimit(){this.multiple=this.limit>1}handleMaxBytes(){this.maxSizeInBytes=a(this.maxSize)}filesAdded;update;fileuploaderror;valid;uploadFile;uploadCancelled;uploadCompleted;async componentWillLoad(){this.handleLimit();this.handleMaxBytes();if(this.language===null)await o(this.hostElement)}async startUpload(){if(!this.files.length)return;this.files=this.files.map(((e,i)=>{if(e.status==="queue"){e.status="start";this.uploadFile.emit({file:e,index:i,uploader:this})}return 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=false;this.filesAdded.emit([])}async removeFile(e){let i=true;const t=[];for(const l in this.files){const s=this.files[l];if(!s.filename){continue}if(s.uuid!==e.uuid){try{this._validateFileSize(s);this._validateFileType(s);i=true}catch(e){i=false;s.error=e;s.progress=0;s.status="error"}t.push(s)}else if(s.status==="start"){s.xhr.abort();this.uploadCancelled.emit(s)}}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(i===null){for(const l in t){const s=t[l];if(s.uuid===e.uuid){i=l;break}}}if(t[i]){if(e.progress>=100){e.progress=100;e.status="completed"}else if(e.progress<0){e.status="start";e.progress=0}if(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);const t=[];if(this.multiple){i.forEach((e=>t.push(this._addFile(e))))}else{const e=i[0];if(this.limit===1){this.files=[];t.push(this._addFile(e))}else{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=true}_onDragLeaveFile(e){e.preventDefault();e.stopPropagation();this.isHovering=false}_onDropFile(e){e.preventDefault();e.stopPropagation();this.isHovering=false;r(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=false;for(const l of i){const i=l.trim().toLowerCase();const s=/^\w+\/[a-z\.\-]+$/i;const n=e.filename.match(/\.\w{3,4}($|\?)/)?.[0]?.toLowerCase();if(s.test(i)&&e.contentType===i||n===i){t=true;break}}if(!t){const i=new v(`Invalid file type.`,this.hostElement,"INVALID_FILE_TYPE",e);this.invalid=true;this.fileuploaderror.emit(i);throw i}}}_validateFileSize(e){if(this.maxSizeInBytes>0&&e.filesize>this.maxSizeInBytes){const i=new v(`You can only add up to ${this.maxSize}.`,this.hostElement,"MAX_FILE_SIZE",e);this.invalid=true;this.fileuploaderror.emit(i);throw i}}_validateLimit(){if(this.limit&&this.files.length>this.limit){const e=new v(`You can only add up to ${this.limit} files.`,this.hostElement,"MAX_LIMIT",this.files);this.invalid=true;this.fileuploaderror.emit(e);throw e}}_isNotGreaterThanLimit(){try{this._validateLimit();return true}catch(e){return false}}_checkValidity(){if(!this.invalid){this.valid.emit(this)}return!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(",");const l=t[1];const s=t[0].split(":")[1].split(";")[0];const a=new XMLHttpRequest;const o={uuid:n(),filename:e.name,filesize:e.size,progress:0,status:"queue",base64:l,contentType:s,error:null,errorMessage:"",file:e,xhr:a};try{this._validateFileSize(o);this._validateFileType(o)}catch(e){o.error=e;o.progress=0;o.status="error"}o.xhrPromise=()=>new Promise(((e,i)=>{a.responseType="json";a.addEventListener("progress",(e=>{if(e.lengthComputable){o.progress=e.loaded/e.total*100;this.updateFile(o)}else{o.progress=100;this.updateFile(o)}}));a.addEventListener("load",(i=>e(i.target.response)));a.addEventListener("error",(e=>{o.error=e;o.errorMessage="There was an error uploading your file, please try again";this.updateFile(o);const t=new v("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];return o}))}_emitUpdateEvent(){this.update.emit({files:this.files,element:this.hostElement})}translate(e){return y?.[e]?.[this.language||d]||e}isLoading(e){return e.status==="start"}getFileItemClass=e=>{let i="files-list-item";if(e.error){i+=" files-list-item-error"}return i};getFileIcon(e){if(e.error)return p;if(e.progress===100)return f;return h}getFileColor(e){if(e.error)return"warning";if(e.progress===100)return"green700";return"gray900"}describedBy(){const e=[this.accept&&this.idAccepttext,this.helpertext&&this.idHelpertext].filter(Boolean);if(!e.length)return null;return e.join(",")}render(){return l(s,{key:"45b4b2297684ce76ecf94568eeecc06ae978e22a"},l("div",{key:"fff6b988f77142534aa523cef56d74e5b5d980dd",class:"pn-file-upload-container"},l("div",{key:"c7b67fd0f807e57935db32e0b48b8a5ef5dc2417",class:"pn-dropzone-container"},l("input",{key:"d93379b84d60389014e6c1d7e86767cb16353ab9",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(),onClick:e=>r(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}),l("div",{key:"50c1d0cd6c72749868b2a338e380dc89cca6b924",class:"pn-dropzone-inner","data-hover":this.isHovering,"data-invalid":this.invalid},l("pn-icon",{key:"e79c9a3d153d4db2bced218da34aac598e71b153",class:"pn-file-upload-icon-element",icon:b,color:"blue700"}),l("label",{key:"a3d8268d1c202931dc86ed476f1373a3a6002613",htmlFor:this.idFileUpload,class:"pn-file-upload-title"},this.label||this.translate("CLICKORDRAG")),this.helpertext&&l("p",{key:"f4b8968c2289f417253428412b5bfbad4bc60e86",id:this.idHelpertext,class:"pn-file-upload-subtitle"},this.helpertext),this.accept&&l("p",{key:"f846a7671fdc9146c75adf3c2f59e6a08350771f",id:this.idAccepttext,class:"pn-file-upload-subtitle"},this.translate("ACCEPTEDFORMATS"),": ",this.accept,this.maxSize&&l("span",{key:"c83df98318dbd8836c5695d3a1e37890e804e372"}," ","(",this.translate("MAXFILESIZE"),": ",this.maxSize,")")))),!!this.files.length&&l("ul",{key:"eedb7ff0f6ec5ac02814d8251d61049c53989a8e",class:"files-list"},this.files.map((e=>l("li",{class:"files-list-item-container",key:e.uuid},l("div",{class:this.getFileItemClass(e)},l("div",{class:"file-list-item-title"},l("pn-icon",{icon:this.getFileIcon(e),color:this.getFileColor(e)}),this.hideProgress||e.progress===0?l("div",{class:"filename"},e.filename):l("pn-progress-bar",{label:e.filename,progress:e.progress,error:e.error&&e.errorMessage})),l("pn-button",{small:true,variant:"borderless",arialabel:`${this.translate("REMOVE_FILE")} ${e.filename}`,appearance:e.error?"warning":"light",icon:m,iconOnly:true,tooltip:this.translate("REMOVE_FILE"),loading:this.isLoading(e),onClick:()=>this.removeFile(e)})),e.error?l("div",{class:"files-list-item-text-error"},e.errorMessage||e.error.message):null)))),l("slot",{key:"71b0feee09a4a9d5a0f81f9e804cabf9166a9ee8"})))}static get watchers(){return{limit:["handleLimit"],maxSize:["handleMaxBytes"]}}};x.style=k;export{x as pn_file_upload};
//# sourceMappingURL=p-e9a774f0.entry.js.map