{
  "version": 3,
  "sources": ["../src/progress-bar.js"],
  "sourcesContent": ["class ProgressBar extends HTMLElement {\n  static get observedAttributes() {\n    return [\"total\", \"current\"];\n  }\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: \"open\" });\n  }\n\n  attributeChangedCallback(name, oldValue, newValue) {\n    this[name] = newValue;\n    this.shadowRoot.innerHTML = this.render();\n  }\n\n  style() {\n    return `\n      :host {\n        display: grid;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        grid-template-columns: 1fr;\n        position: relative;\n        font-family: \"Arial\";\n      }\n\n      h3 {\n        text-align: center;\n      }\n\n      #bar {\n        display: flex;\n        flex-direction: row;\n        width: 100%;\n        gap: 0 15px;\n        align-content: center;\n        justify-items: center;\n        align-items: center;\n      }\n\n      .meter {\n        height: 20px;\n        position: relative;\n        background: #ecf0f1;\n        border-radius: 5px;\n        padding: 5px;\n        display:grid;\n        align-items:center;\n        width: 100%;\n      }\n\n      span {\n        font-size: clamp(10px, 4vw, 18px);\n      }\n\n      .current-fill {\n        display: block;\n        height: 100%;\n        background: #1abc9c;\n      }\n\n      .current-value {\n        position: absolute;\n        color: #fff;\n        left: 0;\n      }\n    `;\n  }\n\n  connectedCallback() {\n    this.title = this.getAttribute(\"title\") || \"\";\n    this.shadowRoot.innerHTML = this.render();\n  }\n\n  render() {\n    const percentage = (this.current / this.total) * 100;\n    const fillWidth = Math.max(10, percentage);\n    const valueLeft = Math.max(4, Math.abs(percentage / 2));\n    return `\n      <style>${this.style()}</style>\n      ${(this.title !== \"\" && `<h3>${this.title}</h3>`) || \"\"}\n      <section id=\"bar\">\n        <div class=\"meter\">\n          <span class=\"current-fill\" style=\"width:${fillWidth}%\"></span>\n          <span class=\"current-value\" style=\"left:${valueLeft}%\">\n            ${Math.floor(percentage)}%\n          </span>\n        </div>\n      </section>\n      `;\n  }\n}\n\ncustomElements.define(\"progress-bar\", ProgressBar);\n"],
  "mappings": "mBAAA,IAAMA,EAAN,cAA0B,WAAY,CACpC,WAAW,oBAAqB,CAC9B,MAAO,CAAC,QAAS,SAAS,CAC5B,CAEA,aAAc,CACZ,MAAM,EACN,KAAK,aAAa,CAAE,KAAM,MAAO,CAAC,CACpC,CAEA,yBAAyBC,EAAMC,EAAUC,EAAU,CACjD,KAAKF,CAAI,EAAIE,EACb,KAAK,WAAW,UAAY,KAAK,OAAO,CAC1C,CAEA,OAAQ,CACN,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAoDT,CAEA,mBAAoB,CAClB,KAAK,MAAQ,KAAK,aAAa,OAAO,GAAK,GAC3C,KAAK,WAAW,UAAY,KAAK,OAAO,CAC1C,CAEA,QAAS,CACP,IAAMC,EAAc,KAAK,QAAU,KAAK,MAAS,IAC3CC,EAAY,KAAK,IAAI,GAAID,CAAU,EACnCE,EAAY,KAAK,IAAI,EAAG,KAAK,IAAIF,EAAa,CAAC,CAAC,EACtD,MAAO;AAAA,eACI,KAAK,MAAM;AAAA,QACjB,KAAK,QAAU,IAAM,OAAO,KAAK,cAAiB;AAAA;AAAA;AAAA,oDAGPC;AAAA,oDACAC;AAAA,cACtC,KAAK,MAAMF,CAAU;AAAA;AAAA;AAAA;AAAA,OAKjC,CACF,EAEA,eAAe,OAAO,eAAgBJ,CAAW",
  "names": ["ProgressBar", "name", "oldValue", "newValue", "percentage", "fillWidth", "valueLeft"]
}