@postnord/web-components
Version:
PostNord Web Components
6 lines • 3.63 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{r,g as e,h as s,a as t}from"./p-c2c6299e.js";import{a}from"./p-9a18b612.js";import{c as i}from"./p-ffa37a87.js";import{u as o}from"./p-c511b4fb.js";const n="pn-progress-bar .pn-progress-bar-label{margin-bottom:0.5em;color:#2d2013;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:0.5em}pn-progress-bar .pn-progress-bar-subtext{margin-top:0.5em;color:#5e554a;font-weight:400}pn-progress-bar .pn-progress-bar-container{overflow:hidden;padding:0.0625em;height:0.75em;border-radius:0.5em}pn-progress-bar .pn-progress-bar-meter{position:relative;width:100%;background:#f3f2f2;height:0.625em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}pn-progress-bar .pn-progress-bar-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.75em;background-color:#005d92;width:var(--progress-value);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius, background-color;transition-duration:0.2s, 0.2s, 0.5s;transition-timing-function:linear}pn-progress-bar .pn-progress-bar-value[data-valid]{width:calc(var(--progress-value) + 0.125em);background-color:#0aa85c;border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}pn-progress-bar .pn-progress-bar-value[data-error]{background-color:#a70707}";const p=n;const d=class{constructor(e){r(this,e)}uniqueId=o();idProgress=`pn-progress-bar-${this.uniqueId}`;idLabel=`${this.idProgress}-label`;idText=`${this.idProgress}-text`;get hostElement(){return e(this)}progressPercentage;label;progress=0;progressText;successText;error;progressId=this.idProgress;setProgress(){if(!Number.isInteger(this.progress))return;const r=this.progress<100?Math.ceil(this.progress):100;this.progressPercentage=`${r.toString()}%`;this.hostElement.style.setProperty("--progress-value",this.progressPercentage)}componentWillLoad(){this.setProgress()}hasLabel(){return!!this.label?.length}hasText(){return!!this.successText?.length}hasError(){return!!this.error?.length}isValid(){return this.progress===100}hasIcon(){return this.isValid()||this.hasError()}getSubtext(){if(this.hasError())return this.error;if(this.isValid()&&this.hasText())return this.successText;return this.progressText?this.progressText:this.progressPercentage}getIconSvg(){if(this.hasError())return a;return i}getIconColor(){if(this.hasError())return"warning";return"green500"}render(){return s(t,{key:"d8a726c9680df3c3315abe95feaf7562e84f802f"},this.hasLabel()&&s("p",{key:"6c85a026e3c48e0cfdebee338c7cf4fc4cf33c5a",id:this.idLabel,class:"pn-progress-bar-label"},s("span",{key:"ec4c533ad9db08831e6e90eed91daf6da2eb9adf"},this.label),this.hasIcon()&&s("pn-icon",{key:"1298e782d736a96cc268f566352b42f5054a6015",icon:this.getIconSvg(),color:this.getIconColor()})),s("div",{key:"376225d73a33e05864b185d839d975b464e1f601",id:this.progressId,class:"pn-progress-bar-container",role:"progressbar","aria-labelledby":this.idLabel,"aria-describedby":this.hasIcon()?this.idText:null,"aria-valuenow":this.progress,"aria-valuetext":this.progressPercentage},s("div",{key:"754036d0a841bd6ff8dd37012e7d7789ec2c2ea0",class:"pn-progress-bar-meter"},s("div",{key:"fe668388868144576dae29a867ffaf27bbb61f5c",class:"pn-progress-bar-value","data-error":this.hasError(),"data-valid":this.isValid()}))),s("p",{key:"9186f1e8977436f0911979d7dd6555216bc37825",id:this.idText,class:"pn-progress-bar-subtext",role:this.hasError()?"alert":null},s("span",{key:"68e201a073494eef08e1a25b2c9a1e61edb6c492"},this.getSubtext())))}static get watchers(){return{progress:["setProgress"]}}};d.style=p;export{d as pn_progress_bar};
//# sourceMappingURL=p-25a830dc.entry.js.map