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(true));}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};