UNPKG

@postnord/web-components

Version:
6 lines 4.64 kB
/*! * Built with Stencil * By PostNord. */ import{r as i,c as t,h as e,a as r}from"./p-C247oTEA.js";import{w as s}from"./p-C_nYl55V.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-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .circle{transition-duration:0s;transition-delay:0s}}.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;font-size:1em;font-weight:normal;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .info-container{transition-duration:0s;transition-delay:0s}}.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}.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;transform:translateX(-100%);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .progress-line:after{transition-duration:0s;transition-delay:0s}}.pn-progress-indicator-step .progress-line:after{transition-delay:0.2s}.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=class{constructor(e){i(this,e);this.setactivestep=t(this,"setactivestep")}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 i="pn-progress-indicator-step";if(this.done||this.checked)i+=" done";if(this.activated)i+=" activated";if(this.activeStep===this.index)i+=" active";return i}render(){return e(r,{key:"e5518f2d8c21c889738beb3a42e6865e7c64ac76",class:this.getClassNames(),onClick:()=>this.setActiveStepHandler()},e("div",{key:"b0f5f684ca12fda2b22b51945d3b0b41ab490fa3",class:"progress-line"}),e("div",{key:"8d05494d4cc77145e44270666b678cf48eb05a96",class:"info-container"},e("slot",{key:"864bea1ce3dd348be1abadcc3f8fb3757ac009b9"}),this.name),e("div",{key:"7d8394e5a4919404a137fd30ce125dfda5ed3034",class:"circle"},this.done||this.checked?e("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"},e("polyline",{class:"checkmark-path",fill:"none",points:"20,6 9,17 4,12",stroke:s,"stroke-miterlimit":"10","stroke-width":"3"})):""))}};n.style=o;export{n as pn_progress_indicator_step}; //# sourceMappingURL=p-5fd400e9.entry.js.map