@scandit/web-datacapture-barcode
Version:
Scandit Data Capture SDK for the Web
41 lines (35 loc) • 1.92 kB
JavaScript
import {e}from'./chunk-YBD5JYCX.js';import {ScanditHTMLElement,defineCustomElements,Timeout,html}from'@scandit/web-datacapture-core/build/js/private/utils/index.js';var i=class i extends ScanditHTMLElement{get type(){var e;return (e=this.getAttribute("type"))!=null?e:"info"}set type(e){this.setAttribute("type",e);}get message(){var e;return (e=this.getAttribute("message"))!=null?e:""}set message(e){this.setAttribute("message",e);}get visible(){return this.hasAttribute("visible")}set visible(e){this.toggleAttribute("visible",e);}static create(){return defineCustomElements({[e]:i}),document.createElement(e)}show(e,s,a){this.hide(),this.type=e,this.message=s,this.visible=true,this.timeout=new Timeout(a,this.hide.bind(this)),this.timeout.start();}hide(){var e;(e=this.timeout)==null||e.stop(),this.visible=false;}render(){this.innerHTML=html`
<div class="${e} ${e}--${this.type}">${this.message}</div>
<style>
${e} {
width: fit-content;
min-width: calc(100% - 32px);
opacity: 0;
transition: 0.3s ease;
user-select: none;
pointer-events: none;
}
${e}[visible] {
opacity: 1;
}
.${e} {
width: fit-content;
padding: 8px 12px;
margin: 0 auto;
border-radius: 4px;
font-family: sans-serif;
font-size: 14px;
font-weight: 500;
}
.${e}--${"info"} {
background: rgba(255, 255, 255, 1);
}
.${e}--${"warning"} {
background: rgba(251, 192, 44, 1);
}
.${e}--${"error"} {
background: rgba(250, 68, 70, 1);
color: white;
}
</style>
`;}connectedCallback(){this.render();}disconnectedCallback(){this.hide();}attributeChangedCallback(e,s,a){a!==s&&this.render();}};i.observedAttributes=["type","message"];var r=i;export{r as a};