@postnord/web-components/components/pn-progress-indicator-step.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as t,proxyCustomElement as e,HTMLElement as i,createEvent as r,h as s,Host as n}from"@stencil/core/internal/client";import{w as o}from"./colors.js";const a=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.setactivestep=r(this,"setactivestep",7)}activated;done;activeStep;index;name;checked=!1;active;setactivestep;setActiveStepHandler(){(this.done||this.activated)&&this.setactivestep.emit(this.index)}componentWillLoad(){this.checkStatus()}componentDidUpdate(){this.checkStatus()}checkStatus(){this.done||(this.done=this.checked||this.activeStep>this.index),"yes"===this.active?this.activated=!0:"no"===this.active?(this.activated=!1,this.done=!1):this.activated||(this.activated=this.activeStep>=this.index)}getClassNames(){let t="pn-progress-indicator-step";return(this.done||this.checked)&&(t+=" done"),this.activated&&(t+=" activated"),this.activeStep===this.index&&(t+=" active"),t}render(){return s(n,{key:"e5518f2d8c21c889738beb3a42e6865e7c64ac76",class:this.getClassNames(),onClick:()=>this.setActiveStepHandler()},s("div",{key:"b0f5f684ca12fda2b22b51945d3b0b41ab490fa3",class:"progress-line"}),s("div",{key:"8d05494d4cc77145e44270666b678cf48eb05a96",class:"info-container"},s("slot",{key:"864bea1ce3dd348be1abadcc3f8fb3757ac009b9"}),this.name),s("div",{key:"7d8394e5a4919404a137fd30ce125dfda5ed3034",class:"circle"},this.done||this.checked?s("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"},s("polyline",{class:"checkmark-path",fill:"none",points:"20,6 9,17 4,12",stroke:o,"stroke-miterlimit":"10","stroke-width":"3"})):""))}static get style(){return`${t("pn-progress-indicator-step")}{display:flex;flex:1 0 4em}${t("pn-progress-indicator-step")}:first-child{flex:0 0 auto}${t("pn-progress-indicator-step")}:first-child .progress-line{display:none}${t("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}}`}},[772,"pn-progress-indicator-step",{activeStep:[2,"active-step"],index:[2],name:[1],checked:[4],active:[1],activated:[32],done:[32]}]),c=a,p=function(){"undefined"!=typeof customElements&&["pn-progress-indicator-step"].forEach((e=>{"pn-progress-indicator-step"===e&&(customElements.get(t(t(e)))||customElements.define(t(t(e)),a))}))};export{c as PnProgressIndicatorStep,p as defineCustomElement}