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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as s,HTMLElement as t,h as r,Host as a}from"@stencil/core/internal/client";import{u as o,e as i,k as p}from"./helpers.js";const n={STEP:{da:"Trin",en:"Step",fi:"Vaihe",no:"Trinn",sv:"Steg"}},l=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}id=`pn-progress-stepper-${o()}`;minStep=1;maxStep=7;get hostElement(){return this}builtInLabel;progressValue=0;label="";progressStepperId="";language=null;totalSteps=this.maxStep;currentStep=this.minStep;stepName;dots=!1;stepWatchers(e,s,t){"currentStep"===t&&this.validate(e,"currentStep"),"totalSteps"===t&&this.validate(s,"totalSteps"),this.calculateProgress()}watchLanguage(){this.builtInLabel=n.STEP[this.language||i]}async componentWillLoad(){this.watchLanguage(),this.validate(this.currentStep,"currentStep"),this.validate(this.totalSteps,"totalSteps"),this.calculateProgress(),null===this.language&&await p(this.hostElement)}validate(e,s){const t=this.hostElement.localName;e<this.minStep&&(console.warn(`${t}: The ${s} ${e} is below the minimum allowed steps of ${this.minStep}. ${s} will default to ${this.minStep}.`),this[s]=this.minStep),"currentStep"===s&&e>this.totalSteps&&(console.warn(`${t}: The ${s} ${e} is above totalSteps ${this.totalSteps}, ${s} will default to ${this.totalSteps}.`),this[s]=this.totalSteps),e>this.maxStep&&(console.warn(`${t}: The ${s} ${e} is above the maximum allowed steps of ${this.maxStep}. ${s} will default to ${this.maxStep}.`),this[s]=this.maxStep)}calculateProgress(){try{this.progressValue=Math.floor(this.currentStep/this.totalSteps*100),this.hostElement.style.setProperty("--pn-progress-value",`${this.progressValue}%`)}catch(e){console.error(`${this.hostElement.localName}:`,e.message)}}getLabel(){return this.label||this.builtInLabel}getId(){return this.progressStepperId||this.id}render(){return r(a,{key:"a93457e5c8ec35858e7f15e45578feb67ec37f4e"},r("label",{key:"86a36ba455f7433f072a9b38b8af09c9fda45fc4",htmlFor:this.getId(),class:"pn-progress-label"+(this.dots?" pn-progress-sr-only":"")},r("span",{key:"eeb9163062bd19b03c394fe6c936440f040dd246"},this.getLabel()," ",this.currentStep,"/",this.totalSteps),this.stepName&&r("span",{key:"f43fd84597ee5adcee54f8d16c3cba9c4fe3f2cf"}," - ",this.stepName)),r("progress",{key:"81658eb2942d0b1712bbbb4e22904d0b4c3a5229",id:this.getId(),class:"pn-progress-sr-only",max:"100",value:this.progressValue}),this.dots?r("div",{class:"pn-progress-dots","aria-hidden":"true"},[...Array(this.totalSteps)].map(((e,s)=>r("div",{class:"pn-progress-dot","data-active":s+1<=this.currentStep,key:s})))):r("div",{"aria-hidden":"true",class:"pn-progress"},r("div",{class:"pn-progress-value","data-full":this.currentStep===this.totalSteps})))}static get watchers(){return{currentStep:[{stepWatchers:0}],totalSteps:[{stepWatchers:0}],language:[{watchLanguage:0}]}}static get style(){return`${e("pn-progress-stepper")}{display:block}${e("pn-progress-stepper")} .pn-progress{position:relative;width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}${e("pn-progress-stepper")} .pn-progress-label{display:block;color:#2d2013;font-size:1em;margin-bottom:0.5em}${e("pn-progress-stepper")} .pn-progress-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.625em;background-color:#005d92;width:calc(var(--pn-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){${e("pn-progress-stepper")} .pn-progress-value{transition-duration:0s;transition-delay:0s}}${e("pn-progress-stepper")} .pn-progress-value[data-full]{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}${e("pn-progress-stepper")} .pn-progress-dots{display:flex;align-items:center;justify-content:center;gap:1em}${e("pn-progress-stepper")} .pn-progress-dot{width:0.875em;height:0.875em;background-color:#f3f2f2;border:0.0625em solid #d3cecb;border-radius:50%;transform:scale(1) translateY(0%);transition-property:background-color, border-color;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-progress-stepper")} .pn-progress-dot{transition-duration:0s;transition-delay:0s}}${e("pn-progress-stepper")} .pn-progress-dot{animation:pnBackwards 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}${e("pn-progress-stepper")} .pn-progress-dot[data-active]{background-color:#005d92;border-color:#005d92;animation:pnForward 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}${e("pn-progress-stepper")} .pn-progress-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}@keyframes pnForward{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(20%)}75%{transform:scale(1.1) translateY(10%)}100%{transform:scale(1) translateY(0%)}}@keyframes pnBackwards{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(-20%)}75%{transform:scale(0.9) translateY(-10%)}100%{transform:scale(1) translateY(0%)}}`}},[512,"pn-progress-stepper",{label:[1],progressStepperId:[1,"progress-stepper-id"],language:[1],totalSteps:[1026,"total-steps"],currentStep:[1026,"current-step"],stepName:[1,"step-name"],dots:[4],builtInLabel:[32],progressValue:[32]},void 0,{currentStep:[{stepWatchers:0}],totalSteps:[{stepWatchers:0}],language:[{watchLanguage:0}]}]);function c(){"undefined"!=typeof customElements&&["pn-progress-stepper"].forEach((s=>{"pn-progress-stepper"===s&&(customElements.get(e(e(s)))||customElements.define(e(e(s)),l))}))}export{l as P,c as d}