import{r as s,h as t}from"./p-5308bbce.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex;width:100%}.progress-bar{height:16px;bottom:0;right:0;top:0;left:0;display:flex;height:16px;border-radius:1px;width:100%;overflow:hidden;background-color:#EEEDED;font-family:var(--ifx-font-family, sans-serif)}.progress-bar .label{height:17px;border-radius:1px 0px 0px 1px}.progress-bar.s{height:4px}.progress-bar .progress{height:100%;background-color:#0A8276;position:relative;transition:width 0.2s ease}.progress-bar .progress:after{content:"";background-color:#EEEDED;height:100%;position:absolute}.progress-bar .label{display:flex;align-items:center;justify-content:center;position:absolute;font-style:normal;font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#FFFFFF;top:0;bottom:0;left:0;right:0}';const e=class{constructor(t){s(this,t);this.value=0;this.label="";this.size=undefined;this.showLabel=false;this.internalValue=undefined}valueChanged(s,t){if(s!==t){this.internalValue=s}}componentWillLoad(){this.internalValue=this.value}render(){return t("div",{"aria-label":"a progress bar","aria-value":this.value,class:`progress-bar ${this.size}`},t("div",{class:"progress",style:{width:`${this.internalValue}%`}},this.showLabel&&this.size!=="s"&&t("span",{class:"label"},`${this.internalValue}%`)))}static get watchers(){return{value:["valueChanged"]}}};e.style=r;export{e as ifx_progress_bar}; //# sourceMappingURL=p-fa338e85.entry.js.map