UNPKG

@postnord/web-components

Version:

PostNord Web Components

6 lines 3.82 kB
/*! * Built with Stencil * By PostNord. */ import{r,g as e,h as s,a as t}from"./p-43660913.js";import{a}from"./p-9a18b612.js";import{c as i}from"./p-ffa37a87.js";import{u as o}from"./p-f64d17a6.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}@media (prefers-reduced-motion: reduce){pn-progress-bar .pn-progress-bar-value{transition-duration:0s}}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 d=n;const b=class{constructor(e){r(this,e);this.progressPercentage=undefined;this.label=undefined;this.progress=0;this.progressText=undefined;this.successText=undefined;this.error=undefined;this.progressId=this.idProgress}uniqueId=o();idProgress=`pn-progress-bar-${this.uniqueId}`;idLabel=`${this.idProgress}-label`;idText=`${this.idProgress}-text`;get hostElement(){return e(this)}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:"e5e7d6c7ac2b3e2cc8838a616d697281c299ef21"},this.hasLabel()&&s("p",{key:"23155051cf0606bee3bf96c4be40cf1549b6ab44",id:this.idLabel,class:"pn-progress-bar-label"},s("span",{key:"98723d9fcc0e8a43ceaf4969a70046418d9d08bf"},this.label),this.hasIcon()&&s("pn-icon",{key:"402eea95c3733057d94df1b7abe92d02e7ef1dc8",icon:this.getIconSvg(),color:this.getIconColor()})),s("div",{key:"5d82dfaf2b4ca4ac5ec6aefc83b6422dc8c632fe",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:"7340eb78ac7cbcd5798e804dc173a1d7c0696f49",class:"pn-progress-bar-meter"},s("div",{key:"a9d2ab1009731727f98d349b9bf04bf39433c478",class:"pn-progress-bar-value","data-error":this.hasError(),"data-valid":this.isValid()}))),s("p",{key:"6f10b1183b320c1e1e4b03bf893a62135779a870",id:this.idText,class:"pn-progress-bar-subtext",role:this.hasError()?"alert":null},s("span",{key:"d6b8b56cf9853fa1f88aea6c6a43bf9999fa09cd"},this.getSubtext())))}static get watchers(){return{progress:["setProgress"]}}};b.style=d;export{b as pn_progress_bar}; //# sourceMappingURL=p-da713fc1.entry.js.map