{"version":3,"sources":["common/progress-bar.ts"],"names":["html","render","ProgressBar","HTMLElement","constructor","super","this","template","_percent","percent","value","observedAttributes","connectedCallback","hasAttribute","parseFloat","getAttribute","attributeChangedCallback","name","_old","customElements","define"],"mappings":"OAASA,KAAMC,MAAwB,KAAV,iBAEhBC,oBAAoBC,YAE7BC,cACIC,MAAK,EAeDC,KAAAC,SAAW,IAAMP;;;;;;;wEAO2CM,KAAKE;;UAMjEF,KAAAE,SAAmB,CA3B3B,CAGAC,YAAmBC,GACfJ,KAAKE,SAAWE,EAChBJ,KAAKL,OAAM,CACf,CAGAU,gCACI,MAAO,CAAC,UACZ,CAiBQV,SACJA,OAAOK,KAAKC,SAAQ,EAAID,IAAI,CAChC,CAIOM,oBACCN,KAAKO,aAAa,SAAS,IAC3BP,KAAKG,QAAUK,WAAWR,KAAKS,aAAa,SAAS,CAAC,EAE9D,CAEOC,yBAAyBC,EAAWC,EAAWR,GACrC,YAATO,IACAX,KAAKG,QAAUK,WAAWJ,CAAK,EAEvC,C,CAOJS,eAAeC,OAAO,eAAgBlB,WAAW,SAvDpCA,WAuDqC","file":"progress-bar.js","sourcesContent":["import { html, render } from \"lit-html\";\r\n\r\nexport class ProgressBar extends HTMLElement {\r\n        \r\n    constructor() {\r\n        super();\r\n    }\r\n\r\n    /* #region Public */\r\n    public set percent(value: number){\r\n        this._percent = value;\r\n        this.render();\r\n    }\r\n    /* #endregion */\r\n    \r\n    static get observedAttributes() {\r\n        return ['percent'];\r\n    }\r\n\r\n    /* #region Markup */\r\n    private template = () => html`\r\n    <style>\r\n        .progress-bar{\r\n            transition: width 0.3s;\r\n        }\r\n        </style>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" role=\"progressbar\" style=\"width:${this._percent}%\"></div>\r\n        </div>\r\n        `;\r\n    /* #endregion */\r\n  \r\n    /* #region Private */\r\n    private _percent: number = 0;\r\n    private render() {\r\n        render(this.template(), this);\r\n    }\r\n    /* #endregion */\r\n \r\n    /* connectedCallback */\r\n    public connectedCallback() {\r\n        if (this.hasAttribute(\"percent\")) {\r\n            this.percent = parseFloat(this.getAttribute(\"percent\"));\r\n        }\r\n    }\r\n\r\n    public attributeChangedCallback(name: any, _old: any, value: any) {       \r\n        if (name === \"percent\") {\r\n            this.percent = parseFloat(value);\r\n        }\r\n    }\r\n}\r\n\r\n/* #region Local interfaces (if they can be shared then keep in separate files) */\r\n\r\n/* #endregion */\r\n\r\ncustomElements.define(\"progress-bar\", ProgressBar);"]}