@scandit/web-datacapture-barcode
Version:
Scandit Data Capture SDK for the Web
12 lines (9 loc) • 1.77 kB
JavaScript
import { ProgressBar } from '@scandit/web-datacapture-core/build/js/private/ui/atoms/ProgressBar.js';
import { html, ScanditHTMLElement, defineCustomElements, css } from '@scandit/web-datacapture-core/build/js/private/utils/index.js';
var o=html`
<div class="progress-container">
<${ProgressBar.tag} id="scandit-progress" variant="gradient" min="0" max="1" value="0"></${ProgressBar.tag}>
<label for="scandit-progress" class="message">0 / 0</label>
</div>
`,t=class t extends ScanditHTMLElement{constructor(){super();let e=this.attachShadow({mode:"open"});e.innerHTML=o,e.append(t.createStyleElement().cloneNode(!0));}get value(){return Number(this.getAttribute("value"))}set value(e){this.setAttribute("value",e.toString());}get max(){return Number(this.getAttribute("max"))}set max(e){this.setAttribute("max",e.toString());}get progressBar(){var e;return (e=this.shadowRoot)==null?void 0:e.querySelector(ProgressBar.tag)}get label(){var e;return (e=this.shadowRoot)==null?void 0:e.querySelector("label")}static create(){return document.createElement(t.tag)}static register(){defineCustomElements({[t.tag]:t});}static createStyleElement(){return css`.progress-container{align-items:center;display:flex;flex-direction:row;gap:.5rem;justify-content:center}.progress-container label{color:#fff;font-family:SF Pro Display,sans-serif;font-weight:500;white-space:nowrap}`}connectedCallback(){this.render();}attributeChangedCallback(){this.render();}render(){this.progressBar==null||this.label==null||(this.progressBar.value=this.value,this.progressBar.max=this.max,this.label.textContent=`${this.progressBar.value} / ${this.progressBar.max}`);}};t.tag="scandit-find-progress-bar-with-label",t.observedAttributes=["value","max"];var a=t;a.register();
export { a };