"use strict";(self.webpackChunkdotcms_ui=self.webpackChunkdotcms_ui||[]).push([[7419],{46261:(p,a,s)=>{s.r(a),s.d(a,{dot_binary_file_preview:()=>r,dot_binary_text_field:()=>h,dot_binary_upload_button:()=>o});var i=s(55956),n=s(53058),l=s(26184);const r=class{constructor(e){(0,i.r)(this,e),this.delete=(0,i.c)(this,"delete",7),this.fileName="",this.previewUrl="",this.deleteLabel="Delete"}render(){return this.fileName?(0,i.h)(i.H,null,this.getPreviewElement(),(0,i.h)("div",{class:"dot-file-preview__info"},(0,i.h)("span",{class:"dot-file-preview__name"},this.fileName),(0,i.h)("button",{type:"button",onClick:()=>this.clearFile()},this.deleteLabel))):null}clearFile(){this.delete.emit(),this.fileName=null,this.previewUrl=null}getPreviewElement(){return this.previewUrl?(0,i.h)("img",{alt:this.fileName,src:this.previewUrl}):(0,i.h)("div",{class:"dot-file-preview__extension"},(0,i.h)("span",null,this.getExtention()))}getExtention(){return this.fileName.substr(this.fileName.lastIndexOf("."))}get el(){return(0,i.g)(this)}};r.style="dot-binary-file-preview{display:flex}dot-binary-file-preview img,dot-binary-file-preview .dot-file-preview__extension{width:100px;height:100px}dot-binary-file-preview .dot-file-preview__info{display:flex;flex-direction:column;align-self:flex-end;padding-left:0.5rem}dot-binary-file-preview .dot-file-preview__info span{margin-bottom:1rem;word-break:break-all}dot-binary-file-preview .dot-file-preview__info button{align-self:flex-start;background-color:lightgray;border:0;padding:0.3rem 1.5rem;cursor:pointer}dot-binary-file-preview .dot-file-preview__extension{display:flex;align-items:center;justify-content:center;background-color:lightgray}dot-binary-file-preview .dot-file-preview__extension span{overflow:hidden;padding:0.5rem;text-overflow:ellipsis;font-size:2rem}";const h=class{constructor(e){(0,i.r)(this,e),this.fileChange=(0,i.c)(this,"fileChange",7),this.lostFocus=(0,i.c)(this,"lostFocus",7),this.value=null,this.hint="",this.placeholder="",this.required=!1,this.accept=void 0,this.disabled=!1,this.status=void 0}render(){return(0,i.h)(i.H,null,(0,i.h)("input",{type:"text","aria-describedby":(0,l.h)(this.hint),class:(0,l.j)(this.isValid()),disabled:this.disabled,placeholder:this.placeholder,value:this.value,onBlur:()=>this.lostFocus.emit(),onKeyDown:e=>this.keyDownHandler(e),onPaste:e=>this.pasteHandler(e)}))}keyDownHandler(e){"Backspace"===e.key?this.handleBackspace():this.shouldPreventEvent(e)&&e.preventDefault()}shouldPreventEvent(e){return!(e.ctrlKey||e.metaKey)}handleBackspace(){this.value="",this.emitFile(null,this.required?n.D.REQUIRED:null)}pasteHandler(e){e.preventDefault(),this.value="";const t=e.clipboardData;t.items.length&&(this.isPastingFile(t)?this.handleFilePaste(t.items):this.handleURLPaste(t.items[0]))}handleFilePaste(e){const t=e[1].getAsFile();(0,l.i)(t.name,t.type,this.accept)?(this.value=t,this.emitFile(t)):this.emitFile(null,n.D.INVALID)}handleURLPaste(e){e.getAsString(t=>{(0,l.l)(t)?(this.value=t,this.emitFile(t)):this.emitFile(null,n.D.URLINVALID)})}isPastingFile(e){return!!e.files.length}isValid(){return!(this.required&&this.value)}emitFile(e,t){this.fileChange.emit({file:e,errorType:t})}get el(){return(0,i.g)(this)}};h.style="";const o=class{constructor(e){(0,i.r)(this,e),this.fileChange=(0,i.c)(this,"fileChange",7),this.name="",this.required=!1,this.accept=void 0,this.disabled=!1,this.maxFileLength="",this.buttonLabel=""}componentDidLoad(){this.fileInput=this.el.querySelector("dot-label input")}render(){return(0,i.h)(i.H,null,(0,i.h)("input",{accept:this.accept,disabled:this.disabled,id:(0,l.k)(this.name),onChange:e=>this.fileChangeHandler(e),required:this.required||null,type:"file"}),(0,i.h)("button",{type:"button",disabled:this.disabled,onClick:()=>{this.fileInput.click()}},this.buttonLabel))}fileChangeHandler(e){const t=this.fileInput.files[0];(0,l.i)(t.name,t.type,this.accept)?this.maxFileLength&&parseInt(this.maxFileLength,10)<=t.size?(e.preventDefault(),this.emitFile(null,n.D.SIZEINVALID)):this.emitFile(t):(e.preventDefault(),this.emitFile(null,n.D.INVALID))}emitFile(e,t){this.fileChange.emit({file:e,errorType:t})}get el(){return(0,i.g)(this)}};o.style=""}}]);