@scandit/web-datacapture-barcode/build/js/find/ui/molecules/ProgressBarWithLabel.js

Scandit Data Capture SDK for the Web

import{ScanditHTMLElement as e,css as t,defineCustomElements as n,html as r}from"@scandit/web-datacapture-core/build/js/private/utils/index.js";import{ProgressBar as i}from"@scandit/web-datacapture-core/build/js/private/ui/atoms/ProgressBar.js";const a=r`<div class="progress-container"><${i.tag} id="scandit-progress" variant="gradient" min="0" max="1" value="0"></${i.tag}><label for="scandit-progress" class="message">0 / 0</label></div>`;var o=class r extends e{constructor(){super();let e=this.attachShadow({mode:`open`});e.innerHTML=a,e.append(r.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(i.tag)}get label(){var e;return(e=this.shadowRoot)==null?void 0:e.querySelector(`label`)}static create(){return document.createElement(r.tag)}static register(){n({[r.tag]:r})}static createStyleElement(){return t`.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}`)}};o.tag=`scandit-find-progress-bar-with-label`,o.observedAttributes=[`value`,`max`],o.register();export{o as ProgressBarWithLabel};