@postnord/web-components
Version:
PostNord Web Components
6 lines • 3.92 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{r as t,g as e,h as s,a as i}from"./p-43660913.js";import{u as r,e as a,k as p}from"./p-f64d17a6.js";const o={STEP:{da:"Trin",en:"Step",fi:"Vaihe",no:"Trinn",sv:"Steg"}};const h="pn-progress-stepper .pn-progress-stepper{position:relative;width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}pn-progress-stepper .pn-progress-stepper[data-full] .pn-progress-stepper-value{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}pn-progress-stepper .pn-progress-stepper-label{margin-bottom:0.5em}pn-progress-stepper .pn-progress-stepper-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.625em;background-color:#005d92;width:calc(var(--progress-value) + 0.125em);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-stepper-value{transition-duration:0s;transition-delay:0s}}";const n=h;const d=class{constructor(e){t(this,e);this.progressValue=0;this.label=undefined;this.totalSteps=this.maxStep;this.currentStep=this.minStep;this.stepName=undefined;this.progressStepperId="";this.language=null}id=`pn-progress-stepper-${r()}`;idLabel=`${this.id}-label`;idBar=`${this.id}-bar`;minStep=1;maxStep=7;get hostElement(){return e(this)}validateCurrentStep(t){this.validate(t,"currentStep")}validateTotalSteps(t){this.validate(t,"totalSteps")}watchLanguage(){if(this.hasCustomLabel())return;this.label=o.STEP[this.language||a]}watchId(){if(this.progressStepperId){this.idLabel=`${this.progressStepperId}-label`;this.idBar=`${this.progressStepperId}-bar`}else{this.idLabel=`${this.id}-label`;this.idBar=`${this.id}-bar`}}async componentWillLoad(){this.watchLanguage();this.watchId();this.validate(this.currentStep,"currentStep");this.validate(this.totalSteps,"totalSteps");if(this.language)return;await p(this.hostElement)}componentWillRender(){this.calculateProgress()}hasCustomLabel(){if(this.label===undefined)return false;return!Object.keys(o.STEP).find((t=>o.STEP[t]===this.label))}validate(t,e){const s=this.hostElement.localName;if(t<this.minStep){console.warn(`${s}: The ${e} ${t} is below the minimum allowed steps of ${this.minStep}. ${e} will default to ${this.minStep}.`);this[e]=this.minStep}if(e==="currentStep"&&t>this.totalSteps){console.warn(`${s}: The ${e} ${t} is above totalSteps ${this.totalSteps}, ${e} will default to ${this.totalSteps}.`);this[e]=this.totalSteps}if(t>this.maxStep){console.warn(`${s}: The ${e} ${t} is above the maximum allowed steps of ${this.maxStep}. ${e} will default to ${this.maxStep}.`);this[e]=this.maxStep}}calculateProgress(){try{this.progressValue=Math.floor(this.currentStep/this.totalSteps*100);this.hostElement.style.setProperty("--progress-value",`${this.progressValue}%`)}catch(t){console.error(`${this.hostElement.localName}:`,t.message)}}render(){return s(i,{key:"4ba09046dab423fa79ebfdab9fbf312d9d8929cf"},s("p",{key:"fa2f78ce5509e1dd7af40657a083356e61d393db",id:this.idLabel,class:"pn-progress-stepper-label"},s("span",{key:"963374a110ad8fc87d6d6d2b00cd1694992fffab"},this.label," ",this.currentStep,"/",this.totalSteps),this.stepName&&s("span",{key:"f5cef98692b9baf2dc2826d1a0ebaebb64e75cf5"}," - ",this.stepName)),s("div",{key:"2259ad7c3a8d77ff6a59d32124695e9259b22ba5",class:"pn-progress-stepper",role:"progressbar","aria-labelledby":this.idLabel,"aria-valuenow":this.progressValue,id:this.idBar,"data-full":this.currentStep===this.totalSteps},s("div",{key:"f469df98da0b06db3a80fdcdc96555151789b014",class:"pn-progress-stepper-value"})))}static get watchers(){return{currentStep:["validateCurrentStep"],totalSteps:["validateTotalSteps"],language:["watchLanguage"],progressStepperId:["watchId"]}}};d.style=n;export{d as pn_progress_stepper};
//# sourceMappingURL=p-fc5f9092.entry.js.map