jb-image-input/dist/jb-image-input.js

image input web component

import{ValidationHelper as e}from"jb-validation";import{registerDefaultVariables as t}from"jb-core/theme";import{JBDictionary as i,i18n as a}from"jb-core/i18n";import"jb-button";function r(e,t,i,a){if("a"===i&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?a:"a"===i?a.call(e):a?a.value:t.get(e)}function o(e,t,i,a,r){if("m"===a)throw new TypeError("Private method is not writable");if("a"===a&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===a?r.call(e,i):r?r.value=i:t.set(e,i),i}const n=new i({fa:{requiredMessage:"شما حتما باید یک تصویر را انتخاب کنید",maxSizeExceed:(e,t)=>`حجم فایل شما (${t}) بیشتر از حجم مجاز (${e}) است`,chooseImage:"انتخاب تصویر",reselectImage:"انتخاب مجدد تصویر",preparing:"در حال آماده سازی",uploading:"در حال آپلود"},en:{requiredMessage:"You must select a image",maxSizeExceed:(e,t)=>`Your file Size (${t}), Exceed maximum limit (${e})`,chooseImage:"Choose Image",reselectImage:"Reselect Image",preparing:"Preparing Image For Display",uploading:"Uploading"}});function l(){return`\n  <div class="jb-image-input-web-component">\n  <div class="placeholder-wrapper">\n    <slot name="placeholder">\n      <div class="default-placeholder">\n        <div class="icon-wrapper">\n          <svg viewBox="0 0 59.19 47.06">\n            <g id="Layer_2" data-name="Layer 2">\n              <g id="Layer_1-2" data-name="Layer 1">\n                <g>\n                  <path class="cls-1"\n                    d="M27.45,14.85A5.65,5.65,0,1,0,21.8,20.5,5.66,5.66,0,0,0,27.45,14.85ZM21.8,17.5a2.65,2.65,0,1,1,2.65-2.65A2.65,2.65,0,0,1,21.8,17.5Z" />\n                  <path class="cls-2"\n                    d="M58.7,31.38c.46-5.51.87-11.91-.15-18.18-.75-4.61-2.74-7.85-5.92-9.62C48.77,1.43,44.45,1,40.26.6L39.43.52a97.08,97.08,0,0,0-25.09.65A30.45,30.45,0,0,0,8.68,2.51,12.08,12.08,0,0,0,3.27,6.08C1.16,8.63.7,11.94.45,14.83A88.28,88.28,0,0,0,0,25.12c0,1.38.09,3,.23,4.59.26,3.1.84,7.08,3,10.38,2.87,4.4,7.65,5.44,11,5.83a130.41,130.41,0,0,0,14.84,1.14h.32a101.76,101.76,0,0,0,14.85-1.22C48.06,45.28,52,44.43,54.74,42a10.24,10.24,0,0,0,2.86-4.45,1.43,1.43,0,0,0,.08-.24A26.47,26.47,0,0,0,58.7,31.38ZM43.8,42.87a102.62,102.62,0,0,1-14.72,1.19,128.34,128.34,0,0,1-14.5-1.12c-3.91-.46-6.49-1.6-8.2-3.65l8.08-8.08a2.62,2.62,0,0,1,3.57,0c.68.72,6.72,7.06,7.72,8a1.5,1.5,0,1,0,2-2.23C27,36.22,22,31,20.18,29.09a5.54,5.54,0,0,0-7.83,0L4.8,36.63a23.31,23.31,0,0,1-1.56-7.18C3.11,27.93,3.06,26.37,3,25a85.56,85.56,0,0,1,.41-9.94C3.66,12.54,4,9.88,5.58,8A9.2,9.2,0,0,1,9.7,5.33h0A27.68,27.68,0,0,1,14.8,4.14,95.81,95.81,0,0,1,29.42,3a93.76,93.76,0,0,1,9.7.51l.85.08c3.88.38,7.88.77,11.2,2.62C53.51,7.51,55,10,55.59,13.68c1,5.93.57,12.11.12,17.44-.08.95-.18,1.88-.32,2.78L40.93,19.42A5.5,5.5,0,0,0,37,17.79h0a5.5,5.5,0,0,0-3.92,1.62l-8.88,8.88a1.5,1.5,0,0,0,2.12,2.12l8.88-8.88a2.53,2.53,0,0,1,1.8-.74h0a2.52,2.52,0,0,1,1.8.75L54.49,37.25a7,7,0,0,1-1.74,2.49C50.48,41.76,46.94,42.41,43.8,42.87Z" />\n                </g>\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div class="placeholder-title">${n.get(a,"chooseImage")}</div>\n        <div class="message-box" part="message"></div>\n      </div>\n      \n    </slot>\n\n  </div>\n  <div class="upload-loading-wrapper">\n    <span>${n.get(a,"uploading")}</span>\n  </div>\n  <div class="download-loading-wrapper">\n    <span>${n.get(a,"preparing")}</span>\n  </div>\n  <div class="image-wrapper">\n    <img src="">\n    \n    <slot name= "overlay">\n      <div class="image-overlay">\n        <slot name="overlay-content">\n          <div class="reselect-button">${n.get(a,"reselectImage")}</div>\n          <jb-button class="download-button" color="light" variant="ghost">\n            <svg id="DownloadIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n              <path id="S1" d="M15.0382 12.5084L12.1222 15.4364L9.20621 12.5084"  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n              <path id="S3" d="M12.1222 15.4361L12.1222 3.39508" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n              <path id="S2" d="M16.7549 8.12799H17.6879C19.7229 8.12799 21.3719 9.77699 21.3719 11.813V16.697C21.3719 18.727 19.7269 20.372 17.6969 20.372L6.55695 20.372C4.52195 20.372 2.87195 18.722 2.87195 16.687V11.802C2.87195 9.77299 4.51795 8.12799 6.54695 8.12799L7.48895 8.12799" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n            </svg>\n          </jb-button>\n          <jb-button class="delete-button" color="danger" variant="ghost" size="md">\n            <svg id="DeleteIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n                <path id="BinBody" d="M19.325 9.4682C19.325 9.4682 18.782 16.2032 18.467 19.0402C18.317 20.3952 17.48 21.1892 16.109 21.2142C13.5 21.2612 10.888 21.2642 8.28003 21.2092C6.96103 21.1822 6.13803 20.3782 5.99103 19.0472C5.67403 16.1852 5.13403 9.4682 5.13403 9.4682" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n                <path id="BinLine" d="M20.7082 6.23969H3.75024" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n                <path id="BinHead" d="M17.4406 6.23967C16.6556 6.23967 15.9796 5.68467 15.8256 4.91567L15.5826 3.69967C15.4326 3.13867 14.9246 2.75067 14.3456 2.75067H10.1126C9.53358 2.75067 9.02558 3.13867 8.87558 3.69967L8.63258 4.91567C8.47858 5.68467 7.80258 6.23967 7.01758 6.23967" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n            </svg>\n          </jb-button>\n        </slot>\n      </div>\n    </slot>\n    \n  </div>\n  <div class="error-overlay">\n    \x3c!-- this container used to show flashed error and disappear after --\x3e\n     <div class="error-content">\n          <svg class="error-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n            <path d="M12 14.75C11.59 14.75 11.25 14.41 11.25 14V9C11.25 8.59 11.59 8.25 12 8.25C12.41 8.25 12.75 8.59 12.75 9V14C12.75 14.41 12.41 14.75 12 14.75Z" />\n            <path d="M12 18C11.94 18 11.87 17.99 11.8 17.98C11.74 17.97 11.68 17.95 11.62 17.92C11.56 17.9 11.5 17.87 11.44 17.83C11.39 17.79 11.34 17.75 11.29 17.71C11.11 17.52 11 17.26 11 17C11 16.74 11.11 16.48 11.29 16.29C11.34 16.25 11.39 16.21 11.44 16.17C11.5 16.13 11.56 16.1 11.62 16.08C11.68 16.05 11.74 16.03 11.8 16.02C11.93 15.99 12.07 15.99 12.19 16.02C12.26 16.03 12.32 16.05 12.38 16.08C12.44 16.1 12.5 16.13 12.56 16.17C12.61 16.21 12.66 16.25 12.71 16.29C12.89 16.48 13 16.74 13 17C13 17.26 12.89 17.52 12.71 17.71C12.66 17.75 12.61 17.79 12.56 17.83C12.5 17.87 12.44 17.9 12.38 17.92C12.32 17.95 12.26 17.97 12.19 17.98C12.13 17.99 12.06 18 12 18Z" />\n            <path d="M18.06 22.16H5.94001C3.99001 22.16 2.50001 21.45 1.74001 20.17C0.990006 18.89 1.09001 17.24 2.04001 15.53L8.10001 4.63C9.10001 2.83 10.48 1.84 12 1.84C13.52 1.84 14.9 2.83 15.9 4.63L21.96 15.54C22.91 17.25 23.02 18.89 22.26 20.18C21.5 21.45 20.01 22.16 18.06 22.16ZM12 3.34C11.06 3.34 10.14 4.06 9.41001 5.36L3.36001 16.27C2.68001 17.49 2.57001 18.61 3.04001 19.42C3.51001 20.23 4.55001 20.67 5.95001 20.67H18.07C19.47 20.67 20.5 20.23 20.98 19.42C21.46 18.61 21.34 17.5 20.66 16.27L14.59 5.36C13.86 4.06 12.94 3.34 12 3.34Z" />\n            </svg>\n            <span class="error-message"></span>            \n     </div>\n  </div>\n</div>\n`}var s,c,d,h,p,u,m,g,b,f,v,w,y,j,C,k,x,M,E,L,V,S,A,I,T,B,H,q,z,F,W,P,D,$,Z,U,N,O=class extends HTMLElement{static get formAssociated(){return!0}get value(){return r(this,b,"f")}set value(e){r(this,s,"m",N).call(this,e)}get isAutoValidationDisabled(){return r(this,d,"f")}set isAutoValidationDisabled(e){o(this,d,e,"f")}get selectedImageType(){return r(this,f,"f").type}get status(){return r(this,h,"f")}get multiple(){return r(this,x,"f")}set multiple(e){o(this,x,e,"f"),r(this,x,"f")?r(this,p,"f").setAttribute("multiple","multiple"):r(this,p,"f").removeAttribute("multiple")}get acceptTypes(){return r(this,m,"f")}set acceptTypes(e){o(this,m,e,"f"),r(this,p,"f")&&(r(this,p,"f").accept=e)}get file(){return r(this,f,"f")}get maxFileSize(){return r(this,g,"f")}set maxFileSize(e){null==e?o(this,g,null,"f"):isNaN(e)||"number"!=typeof e||o(this,g,e,"f")}get disabled(){return r(this,w,"f")}set disabled(e){o(this,w,e,"f"),e?r(this,j,"f").states?.add("disabled"):r(this,j,"f").states?.delete("disabled")}set required(e){o(this,y,e,"f"),r(this,C,"f").checkValidity({showError:!1})}get required(){return r(this,y,"f")}get validation(){return r(this,C,"f")}get name(){return this.getAttribute("name")||""}get isDirty(){return r(this,b,"f")!==this.initialValue}constructor(){super(),s.add(this),d.set(this,!1),h.set(this,null),p.set(this,void 0),u.set(this,void 0),m.set(this,"image/jpeg,image/jpg,image/png,image/svg+xml"),g.set(this,null),b.set(this,null),f.set(this,null),v.set(this,null),this.imageBase64Value=null,w.set(this,!1),y.set(this,!1),j.set(this,void 0),C.set(this,new e({showValidationError:this.showValidationError.bind(this),clearValidationError:this.clearValidationError.bind(this),getValue:()=>({file:r(this,f,"f"),value:r(this,b,"f")}),getValidations:r(this,s,"m",D).bind(this),setValidationResult:r(this,s,"m",$).bind(this),getValueString:()=>this.fileName})),this.initialValue=null,x.set(this,!1),this.config={uploadUrl:"",downloadUrl:""},this.bridge={uploader:function(e){return new Promise((t=>{t(e)}))},downloader:function(e){return new Promise(((t,i)=>{"string"==typeof e&&fetch(e).then((e=>e.blob())).then((e=>{const i=new window.FileReader;i.readAsDataURL(e),i.onload=function(){const e=i.result;t(e)}})).catch(i),e instanceof File&&c.ExtractBase64ImageFromFile(e).then((e=>{t(e)}))}))}},"function"==typeof this.attachInternals&&o(this,j,this.attachInternals(),"f"),r(this,s,"m",k).call(this),r(this,s,"m",M).call(this),r(this,s,"m",E).call(this)}get fileName(){return r(this,f,"f").name}openImageSelector(){r(this,p,"f").click()}static get observedAttributes(){return["required","label","multiple","message"]}attributeChangedCallback(e,t,i){r(this,s,"m",V).call(this,e,i)}async selectImageByFile(e){const t=await this.validation.checkValidity({showError:!0,value:{file:e,value:null}});!!this.maxFileSize&&e.size>this.maxFileSize&&r(this,s,"m",T).call(this,e),t.isAllValid&&(r(this,s,"m",I).call(this,e),r(this,s,"m",B).call(this,e))}static ExtractBase64ImageFromFile(e){return new Promise(((t,i)=>{const a=new FileReader;a.onload=e=>{const a=e.target?.result;a?t(a):i(e)},a.readAsDataURL(e)}))}onProgressImageUpload(e){o(this,v,e,"f")}showValidationError(e){const t="string"==typeof e?e:e.message;r(this,u,"f").webComponent.classList.add("--has-error"),r(this,b,"f")?r(this,s,"m",P).call(this,t):(r(this,u,"f").placeHolderMessageBox.innerHTML=t,r(this,u,"f").placeHolderMessageBox.classList.add("error"))}clearValidationError(){r(this,u,"f").webComponent.classList.remove("--has-error"),r(this,u,"f").placeHolderMessageBox.innerHTML=this.getAttribute("message")||"",r(this,u,"f").placeHolderMessageBox.classList.remove("error")}checkValidity(){const e=r(this,C,"f").checkValiditySync({showError:!1});if(!e.isAllValid){const e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}reportValidity(){const e=r(this,C,"f").checkValiditySync({showError:!0});if(!e.isAllValid){const e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}get validationMessage(){return r(this,j,"f").validationMessage}};c=O,d=new WeakMap,h=new WeakMap,p=new WeakMap,u=new WeakMap,m=new WeakMap,g=new WeakMap,b=new WeakMap,f=new WeakMap,v=new WeakMap,w=new WeakMap,y=new WeakMap,j=new WeakMap,C=new WeakMap,x=new WeakMap,s=new WeakSet,k=function(){const e=this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0});t();const i=`<style>:host{width:var(--jb-image-input-width,100%);height:var(--jb-image-input-height,100%)}.jb-image-input-web-component{background-color:var(--bg-color);border-radius:var(--border-radius);box-sizing:border-box;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.jb-image-input-web-component[status=empty] .placeholder-wrapper{display:flex}.jb-image-input-web-component .placeholder-wrapper{cursor:pointer;background-color:var(--jb-image-input-placeholder-bg-color,transparent);width:100%;height:100%;display:none}.jb-image-input-web-component .placeholder-wrapper .default-placeholder{flex-direction:column;justify-content:center;align-items:center;gap:.25rem;width:100%;height:100%;padding:.5rem;display:flex}.jb-image-input-web-component .placeholder-wrapper .default-placeholder .icon-wrapper svg{width:64px;height:64px;fill:var(--placeholder-neutral-color)}.jb-image-input-web-component .placeholder-wrapper .default-placeholder .icon-wrapper svg .cls-1{fill:var(--placeholder-primary-color)}.jb-image-input-web-component .placeholder-wrapper .default-placeholder .placeholder-title{color:var(--placeholder-title-color);font-variation-settings:"wght" 600}.jb-image-input-web-component .placeholder-wrapper .default-placeholder .message-box{font-size:var(--jb-image-input-message-font-size,.7rem);color:var(--message-color);display:var(--jb-image-input-message-box-display,block);padding:2px 8px}.jb-image-input-web-component .placeholder-wrapper .default-placeholder .message-box:empty{padding:0}.jb-image-input-web-component .placeholder-wrapper .default-placeholder .message-box.error{color:var(--message-error-color)}.jb-image-input-web-component[status=uploading] .upload-loading-wrapper{display:flex}.jb-image-input-web-component .upload-loading-wrapper{display:none}.jb-image-input-web-component[status=uploaded] .download-loading-wrapper{display:flex}.jb-image-input-web-component .download-loading-wrapper{display:none}.jb-image-input-web-component[status=downloaded] .image-wrapper{display:block}.jb-image-input-web-component[status=downloaded] .image-wrapper img{object-fit:contain;width:100%;height:100%}.jb-image-input-web-component .image-wrapper{object-fit:contain;width:100%;height:100%;display:none;position:relative}.jb-image-input-web-component .image-wrapper:hover .image-overlay{opacity:1}.jb-image-input-web-component .image-wrapper .image-overlay{cursor:pointer;opacity:0;background-color:var(--overlay-bg-color);backdrop-filter:blur(8px);z-index:1;border-radius:var(--border-radius);flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;width:100%;height:100%;transition:all .3s;display:flex;position:absolute;top:0;left:0;overflow:hidden}.jb-image-input-web-component .image-wrapper .image-overlay .reselect-button{color:var(--reselect-button-color);background-color:#0000;border-radius:1rem;padding:.25rem .5rem}.jb-image-input-web-component .error-overlay{background-color:var(--error-overlay-bg-color);backdrop-filter:blur(8px);z-index:1;border-radius:var(--border-radius);justify-content:center;align-items:center;width:100%;height:100%;transition:all .3s;display:none;position:absolute;top:0;left:0;overflow:hidden}.jb-image-input-web-component .error-overlay .error-content{justify-content:center;align-items:center;gap:1rem;display:flex}.jb-image-input-web-component .error-overlay .error-content .error-icon{fill:var(--error-overlay-icon-color);width:4rem;height:4rem}.jb-image-input-web-component .error-overlay .error-content .error-message{color:var(--error-overlay-color);outline:var(--error-overlay-outline);font-size:1.3rem} :host{--border-radius:var(--jb-image-input-border-radius,var(--jb-radius-xl));--button-border-radius:var(--jb-image-input-button-border-radius,var(--jb-radius));--bg-color:var(--jb-image-input-bg-color,var(--jb-neutral-10));--placeholder-neutral-color:var(--jb-image-input-placeholder-p-color,var(--jb-neutral));--placeholder-primary-color:var(--jb-image-input-placeholder-sec-color,var(--jb-primary));--placeholder-title-color:var(--jb-image-input-placeholder-title-color,var(--jb-neutral));--message-color:var(--jb-image-input-message-color,var(--jb-text-secondary));--message-error-color:var(--jb-image-input-message-error-color,var(--jb-red));--overlay-bg-color:oklch(from var(--jb-neutral)l c h/calc(alpha - .5));--delete-button-color:var(--jb-red);--delete-button-bg-color:var(--jb-white);--delete-icon-color:var(--jb-red);--download-button-color:var(--jb-white);--download-button--bg-color-hover:var(--jb-white);--download-button-color-hover:var(--jb-neutral);--reselect-button-color:var(--jb-white);--error-overlay-bg-color:oklch(from var(--jb-red)l c h/calc(alpha - .5));--error-overlay-color:var(--jb-white);--error-overlay-icon-color:var(--jb-white);--error-overlay-outline:var(--jb-black)}</style>\n${l()}`,a=document.createElement("template");a.innerHTML=i,e.appendChild(a.content.cloneNode(!0)),o(this,u,{webComponent:e.querySelector(".jb-image-input-web-component"),placeHolderWrapper:e.querySelector(".placeholder-wrapper"),placeHolderTitle:e.querySelector(".placeholder-title"),placeHolderMessageBox:e.querySelector(".message-box"),image:e.querySelector(".image-wrapper img"),overlay:{container:e.querySelector(".image-overlay"),deleteButton:e.querySelector(".image-overlay .delete-button"),downloadButton:e.querySelector(".image-overlay .download-button")},errorOverlay:{container:e.querySelector(".error-overlay"),message:e.querySelector(".error-overlay .error-message")}},"f")},M=function(){this.acceptTypes="image/jpeg,image/jpg,image/png,image/svg+xml",r(this,s,"m",W).call(this,"empty"),r(this,s,"m",L).call(this)},E=function(){r(this,u,"f").placeHolderWrapper.addEventListener("click",this.openImageSelector.bind(this)),r(this,u,"f").image.addEventListener("click",this.openImageSelector.bind(this)),r(this,u,"f").overlay.container.addEventListener("click",this.openImageSelector.bind(this)),r(this,u,"f").overlay.deleteButton.addEventListener("click",r(this,s,"m",Z).bind(this)),r(this,u,"f").overlay.downloadButton.addEventListener("click",r(this,s,"m",U).bind(this))},L=function(){o(this,p,document.createElement("input"),"f"),r(this,p,"f").type="file",r(this,p,"f").accept=this.acceptTypes,r(this,p,"f").addEventListener("change",(e=>r(this,s,"m",A).call(this,e)))},V=function(e,t){switch(e){case"required":this.required=(t||""===t)&&"false"!==t;break;case"label":r(this,j,"f").ariaLabel=t,r(this,u,"f").placeHolderTitle&&(r(this,u,"f").placeHolderTitle.innerHTML=t);break;case"multiple":this.multiple="true"===t;break;case"message":r(this,u,"f").placeHolderMessageBox.innerHTML=t,r(this,j,"f").ariaDescription=t}},S=function(e){const t=new CustomEvent("imageSelected",{detail:{files:e}});this.dispatchEvent(t)},A=function(e){const t=e.target.files;if(t&&t?.length>0){r(this,s,"m",S).call(this,t);const e=t[0];r(this,p,"f").value=null,this.selectImageByFile(e)}},I=function(e){o(this,f,e,"f"),r(this,s,"m",q).call(this)},T=function(e){const t=new CustomEvent("maxSizeExceed",{detail:{file:e},cancelable:!1});this.dispatchEvent(t)},B=function(e){r(this,s,"m",W).call(this,"uploading");this.bridge.uploader(e,this.config,this.onProgressImageUpload.bind(this)).then((e=>r(this,s,"m",H).call(this,e))).catch((()=>r(this,s,"m",z).call(this)))},H=function(e){const t=this.value;r(this,s,"m",W).call(this,"uploaded"),this.value=e;r(this,s,"m",q).call(this).defaultPrevented&&(this.value=t)},q=function(){const e=new Event("change",{bubbles:!0,composed:!0,cancelable:!1});return this.dispatchEvent(e),e},z=function(){this.value?r(this,s,"m",W).call(this,"downloaded"):r(this,s,"m",W).call(this,"empty"),r(this,p,"f").value=""},F=function(e){r(this,s,"m",W).call(this,"downloaded"),this.imageBase64Value=e,r(this,u,"f").image.setAttribute("src",e)},W=function(e){r(this,u,"f").webComponent.setAttribute("status",e),o(this,h,e,"f")},P=function(e){r(this,u,"f").errorOverlay.message.innerHTML=e,r(this,u,"f").errorOverlay.container.style.display="flex",setTimeout((()=>{r(this,u,"f").errorOverlay.message.innerHTML="",r(this,u,"f").errorOverlay.container.style.display="none"}),2e3)},D=function(){const e=[];if(this.required){const t=this.getAttribute("required").length>0?this.getAttribute("required"):n.get(a,"requiredMessage");e.push({validator:({file:e,value:t})=>null!==e||null!=t,message:t,stateType:"valueMissing"})}return r(this,g,"f")&&e.push({validator:({file:e})=>{if(null==e)return!0;if(e.size>=r(this,g,"f")){const t=new Intl.NumberFormat(a.locale,{style:"unit",unit:"byte",notation:"compact",unitDisplay:"narrow"});return n.get(a,"maxSizeExceed")(t.format(r(this,g,"f")),t.format(e.size))}return!0},message:"",stateType:"rangeOverflow"}),e},$=function(e){if(e.isAllValid)r(this,j,"f").setValidity({},"");else{const t={};let i="";e.validationList.forEach((e=>{e.isValid||(e.validation.stateType&&(t[e.validation.stateType]=!0),""==i&&(i=e.message))})),r(this,j,"f").setValidity(t,i)}},Z=function(e){e.stopPropagation(),r(this,s,"m",N).call(this,null),this.validation.checkValiditySync({showError:!0}),r(this,s,"m",q).call(this)},U=function(e){e.stopPropagation();const t=r(this,u,"f").image.getAttribute("src"),i=t.match(/[^:/]\w+(?=;|,)/)[0],a=document.createElement("a");a.href=t,a.download="Image."+i,a.click()},N=function(e){o(this,b,e,"f"),null!=e?e instanceof File?(o(this,f,e,"f"),c.ExtractBase64ImageFromFile(e).then(r(this,s,"m",F).bind(this))):this.bridge.downloader(e,this.config).then(r(this,s,"m",F).bind(this)):(o(this,f,null,"f"),r(this,s,"m",W).call(this,"empty"))};!customElements.get("jb-image-input")&&window.customElements.define("jb-image-input",O);export{O as JBImageInputWebComponent};
//# sourceMappingURL=jb-image-input.js.map