@microblink/blinkinput-in-browser-sdk
Version:
A simple barcode scanning library for WebAssembly-enabled browsers.
1 lines • 4.29 kB
JavaScript
import{r as i,c as e,h as t,H as o,g as a}from"./p-7fd1a99e.js";import{b as l,e as n}from"./p-21600f60.js";let s=class{constructor(t){i(this,t),this.imageChange=e(this,"imageChange",7),this.hasImage=!1}connectedCallback(){l(this.hostEl)}componentDidRender(){this.ctaLabel.innerText=this.anchorText}async clear(){this.onClearImage()}onFromImageClicked(i){i.preventDefault(),i.stopPropagation(),this.hasImage?this.onClearImage():this.scanFromImageInput.click()}onImageChange(i){const e=i.target;e.files&&e.files.length?(this.ctaLabel.innerText=n(e.value),this.ctaLabel.classList.add("filename"),this.addIcon.classList.remove("visible"),this.removeIcon.classList.add("visible"),this.hasImage=!0,this.imageChange.emit(e.files)):this.onClearImage()}onClearImage(){this.ctaLabel.innerText=this.anchorText,this.ctaLabel.classList.remove("filename"),this.addIcon.classList.add("visible"),this.removeIcon.classList.remove("visible"),this.hasImage=!1,this.scanFromImageInput.value="",this.imageChange.emit()}render(){return t(o,null,t("p",{class:"label"},this.boxTitle),t("input",{id:"scan-from-image-input",ref:i=>this.scanFromImageInput=i,type:"file",accept:"image/*",onChange:i=>this.onImageChange(i)}),t("a",{class:"cta",href:"javascript:void(0)",onClick:i=>this.onFromImageClicked(i)},t("p",{class:"cta-label",ref:i=>this.ctaLabel=i}),t("svg",{ref:i=>this.addIcon=i,class:"visible",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M10.8333 4.16666C10.8333 3.70642 10.4602 3.33333 9.99992 3.33333C9.53968 3.33333 9.16659 3.70642 9.16659 4.16666V9.16666H4.16659C3.70635 9.16666 3.33325 9.53976 3.33325 10C3.33325 10.4602 3.70635 10.8333 4.16659 10.8333H9.16659V15.8333C9.16659 16.2936 9.53968 16.6667 9.99992 16.6667C10.4602 16.6667 10.8333 16.2936 10.8333 15.8333V10.8333H15.8333C16.2935 10.8333 16.6666 10.4602 16.6666 10C16.6666 9.53976 16.2935 9.16666 15.8333 9.16666H10.8333V4.16666Z",fill:"#48B2E8"})),t("svg",{ref:i=>this.removeIcon=i,width:"21",height:"20",viewBox:"0 0 21 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M16.0893 5.58928C16.4147 5.26384 16.4147 4.7362 16.0893 4.41076C15.7638 4.08533 15.2362 4.08533 14.9108 4.41076L10.5 8.82151L6.08928 4.41076C5.76384 4.08533 5.2362 4.08533 4.91076 4.41076C4.58533 4.7362 4.58533 5.26384 4.91076 5.58928L9.32151 10L4.91076 14.4108C4.58533 14.7362 4.58533 15.2638 4.91076 15.5893C5.2362 15.9147 5.76384 15.9147 6.08928 15.5893L10.5 11.1785L14.9108 15.5893C15.2362 15.9147 15.7638 15.9147 16.0893 15.5893C16.4147 15.2638 16.4147 14.7362 16.0893 14.4108L11.6785 10L16.0893 5.58928Z",fill:"#48B2E8"}))))}get hostEl(){return a(this)}};s.style=":host{display:block;padding:8px;border:var(--mb-component-image-box-border-width) solid var(--mb-component-image-box-border-color);border-radius:var(--mb-component-image-box-border-radius)}:host .label{margin:0;padding:0 0 4px 0;height:var(--mb-component-image-box-label-height);line-height:var(--mb-component-image-box-label-height);color:var(--mb-component-image-box-label-color);font-family:var(--mb-font-family);font-size:var(--mb-component-image-box-label-font-size);font-weight:var(--mb-component-image-box-label-font-weight)}:host .cta{display:block;height:var(--mb-component-image-box-cta-height);color:var(--mb-component-image-box-cta-color);text-decoration:none;font-family:var(--mb-font-family);font-size:var(--mb-component-image-box-cta-font-size);font-weight:var(--mb-component-image-box-cta-font-weight)}:host .cta .cta-label,:host .cta svg{vertical-align:middle}:host .cta .cta-label{display:inline-block;max-width:calc(100% - 28px);height:var(--mb-component-image-box-cta-label-height);line-height:var(--mb-component-image-box-cta-label-height);margin:0;padding:0 8px 0 0}:host .cta .cta-label.filename{max-width:unset;width:calc(100% - 20px);padding:0;color:var(--mb-component-image-box-file-color);font-weight:var(--mb-component-image-box-file-font-weight);text-overflow:ellipsis;overflow:hidden}:host .cta svg{display:none;width:20px;height:20px;margin:0}:host .cta svg.visible{display:inline-block}:host input[type=file]{position:absolute;width:0;height:0;opacity:0;clip:rect(1px, 1px, 1px, 1px)}";export{s as mb_image_box}