@postnord/web-components/components/pn-progress-bar2.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as r,proxyCustomElement as e,HTMLElement as s,h as t,Host as a}from"@stencil/core/internal/client";import{a as o}from"./alert_exclamation_circle.js";import{c as i}from"./check_circle.js";import{u as n}from"./helpers.js";import{d as c}from"./pn-icon2.js";const p=e(class extends s{constructor(r){super(),!1!==r&&this.__registerHost()}uniqueId=n();idProgress=`pn-progress-bar-${this.uniqueId}`;idLabel=`${this.idProgress}-label`;idText=`${this.idProgress}-text`;get hostElement(){return 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 100===this.progress}hasIcon(){return this.isValid()||this.hasError()}getSubtext(){return this.hasError()?this.error:this.isValid()&&this.hasText()?this.successText:this.progressText?this.progressText:this.progressPercentage}getIconSvg(){return this.hasError()?o:i}getIconColor(){return this.hasError()?"warning":"green500"}render(){return t(a,{key:"09b5b426ac2b3b5ac6da052516f02a37e86a5ae6"},this.hasLabel()&&t("p",{key:"f63e4d6fcf21e46e809866fa9f25e92975665c60",id:this.idLabel,class:"pn-progress-bar-label"},t("span",{key:"731610df6161f9d7724f85e1fc849983dd2c9e30"},this.label),this.hasIcon()&&t("pn-icon",{key:"a9a823e21c9a6192ecd476fa7f993e2dc508f292",icon:this.getIconSvg(),color:this.getIconColor()})),t("div",{key:"b38c51cbc3bf30d73cc169053a97fd62acd95972",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},t("div",{key:"91f89839bf307d1b32f3735690ae6894b845fcc2",class:"pn-progress-bar-meter"},t("div",{key:"01dd3151497db0d7a4bfaa401fb132e015708ca6",class:"pn-progress-bar-value","data-error":this.hasError(),"data-valid":this.isValid()}))),t("p",{key:"fe4122adfd2d4e1ea043f161bc217b59f3164cf0",id:this.idText,class:"pn-progress-bar-subtext",role:this.hasError()?"alert":null},t("span",{key:"7094b7dd7cf15e29cec6f710927a3b62151d8709"},this.getSubtext())))}static get watchers(){return{progress:[{setProgress:0}]}}static get style(){return`${r("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}${r("pn-progress-bar")} .pn-progress-bar-subtext{margin-top:0.5em;color:#5e554a;font-weight:400}${r("pn-progress-bar")} .pn-progress-bar-container{overflow:hidden;padding:0.0625em;height:0.75em;border-radius:0.5em}${r("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}${r("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){${r("pn-progress-bar")} .pn-progress-bar-value{transition-duration:0s}}${r("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}${r("pn-progress-bar")} .pn-progress-bar-value[data-error]{background-color:#a70707}`}},[512,"pn-progress-bar",{label:[1],progress:[2],progressText:[1,"progress-text"],successText:[1,"success-text"],error:[1],progressId:[1,"progress-id"],progressPercentage:[32]},void 0,{progress:[{setProgress:0}]}]);function d(){"undefined"!=typeof customElements&&["pn-progress-bar","pn-icon"].forEach((e=>{switch(e){case"pn-progress-bar":customElements.get(r(r(e)))||customElements.define(r(r(e)),p);break;case"pn-icon":customElements.get(r(r(e)))||c()}}))}export{p as P,d}