@postnord/web-components/postnord-web-components/p-684a146d.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as e,c as t,h as i,a as s}from"./p-c2c6299e.js";import{w as r}from"./p-99b62e2f.js";const o='pn-progress-indicator-step{display:flex;flex:1 0 4em}pn-progress-indicator-step:first-child{flex:0 0 auto}pn-progress-indicator-step:first-child .progress-line{display:none}pn-progress-indicator-step:first-child .info-container{transform:translateX(-50%);left:50%}.pn-progress-indicator-step{position:relative;display:flex;flex:1 0 4em;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent}.pn-progress-indicator-step .circle{width:1.5em;height:1.5em;padding:0.3rem;border-radius:50%;background-color:#f3f2f2;transition:background-color 0.2s ease-in-out}.pn-progress-indicator-step .info-container{position:absolute;bottom:-2.5em;right:0;transform:translateX(50%) translateX(-1.2rem);white-space:nowrap;color:#f3f2f2;display:flex;align-items:center;flex-direction:column;transition:color 0.2s ease-in-out;font-size:1em;font-weight:normal}.pn-progress-indicator-step .info-container .pn-icon-svg{height:1.7em;width:1.7em;margin-bottom:0.1em}.pn-progress-indicator-step .info-container .pn-icon-svg path,.pn-progress-indicator-step .info-container .pn-icon-svg polygon{fill:#f3f2f2;transition:fill 0.2s ease-in-out}.pn-progress-indicator-step .progress-line{flex:1 1 auto;margin:auto 4px;height:0.8rem;background-color:#f3f2f2;position:relative;overflow:hidden;pointer-events:none;border-radius:10rem}.pn-progress-indicator-step .progress-line:after{content:"";position:absolute;top:0;left:0;height:0.8rem;width:100%;background-color:#005d92;transition:transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.2s;transform:translateX(-100%)}.pn-progress-indicator-step.active .info-container{color:#000000}.pn-progress-indicator-step.active .info-container .pn-icon-svg path{fill:#000000}.pn-progress-indicator-step.active .info-container .pn-icon-svg polygon{fill:#000000}.pn-progress-indicator-step.activated{cursor:pointer}.pn-progress-indicator-step.done .progress-line:after,.pn-progress-indicator-step.active .progress-line:after{transform:translateX(0)}.pn-progress-indicator-step.done .circle,.pn-progress-indicator-step.active .circle{background-color:#005d92}.pn-progress-indicator-step.done .checkmark-path{stroke-linecap:round;stroke-dasharray:27;stroke-dashoffset:-23;animation:dash 0.2s cubic-bezier(0.55, 0, 0.1, 1) both}@keyframes dash{to{stroke-dashoffset:0}}';const n=o;const a=class{constructor(i){e(this,i);this.setactivestep=t(this,"setactivestep",7)}activated;done;activeStep;index;name;checked=false;active;setactivestep;setActiveStepHandler(){if(this.done||this.activated){this.setactivestep.emit(this.index)}}componentWillLoad(){this.checkStatus()}componentDidUpdate(){this.checkStatus()}checkStatus(){if(!this.done){this.done=this.checked||this.activeStep>this.index}if(this.active==="yes"){this.activated=true}else if(this.active==="no"){this.activated=false;this.done=false}else if(!this.activated){this.activated=this.activeStep>=this.index}}getClassNames(){let e="pn-progress-indicator-step";if(this.done||this.checked)e+=" done";if(this.activated)e+=" activated";if(this.activeStep===this.index)e+=" active";return e}render(){return i(s,{key:"595a518ecfd98d14a13d195314b71b63441419fb",class:this.getClassNames(),onClick:()=>this.setActiveStepHandler()},i("div",{key:"24e37496e8982209d3b380b8d63c300a0dc16496",class:"progress-line"}),i("div",{key:"4cbbbf6899c666658b4bd407fa0bc6a42c1e1ae2",class:"info-container"},i("slot",{key:"d4e48f113e6bd97c563cb7f4ba6b9e883be6879c"}),this.name),i("div",{key:"7151daa3d3ef8b27817337551e8b63b5f9b5c2d8",class:"circle"},this.done||this.checked?i("svg",{xmlns:"http://www.w3.org/2000/svg","enable-background":"new 0 0 24 24",id:"checkmark",version:"1.0",viewBox:"0 0 24 24"},i("polyline",{class:"checkmark-path",fill:"none",points:"20,6 9,17 4,12",stroke:r,"stroke-miterlimit":"10","stroke-width":"3"})):""))}};a.style=n;export{a as pn_progress_indicator_step};
//# sourceMappingURL=p-684a146d.entry.js.map