@postnord/web-components/postnord-web-components/p-4b9fb0fc.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{t as s,r as e,g as t,h as r,a}from"./p-XKg-ydzH.js";import{uuidv4 as o,en as i,awaitTopbar as n}from"./index.esm.js";const p={STEP:{da:"Trin",en:"Step",fi:"Vaihe",no:"Trinn",sv:"Steg"}},l=class{constructor(s){e(this,s)}id=`pn-progress-stepper-${o()}`;minStep=1;maxStep=7;get hostElement(){return t(this)}builtInLabel;progressValue=0;label="";progressStepperId="";language=null;totalSteps=this.maxStep;currentStep=this.minStep;stepName;dots=!1;stepWatchers(s,e,t){"currentStep"===t&&this.validate(s,"currentStep"),"totalSteps"===t&&this.validate(e,"totalSteps"),this.calculateProgress()}watchLanguage(){this.builtInLabel=p.STEP[this.language||i]}async componentWillLoad(){this.watchLanguage(),this.validate(this.currentStep,"currentStep"),this.validate(this.totalSteps,"totalSteps"),this.calculateProgress(),null===this.language&&await n(this.hostElement)}validate(s,e){const t=this.hostElement.localName;s<this.minStep&&(console.warn(`${t}: The ${e} ${s} is below the minimum allowed steps of ${this.minStep}. ${e} will default to ${this.minStep}.`),this[e]=this.minStep),"currentStep"===e&&s>this.totalSteps&&(console.warn(`${t}: The ${e} ${s} is above totalSteps ${this.totalSteps}, ${e} will default to ${this.totalSteps}.`),this[e]=this.totalSteps),s>this.maxStep&&(console.warn(`${t}: The ${e} ${s} 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("--pn-progress-value",`${this.progressValue}%`)}catch(s){console.error(`${this.hostElement.localName}:`,s.message)}}getLabel(){return this.label||this.builtInLabel}getId(){return this.progressStepperId||this.id}render(){return r(a,{key:"eae49d6f5d3085e714bff2e668694523185c6fb6"},r("label",{key:"d5ec64934b8e8eab33b771d20aa34cdfb595f600",htmlFor:this.getId(),class:"pn-progress-label"+(this.dots?" pn-progress-sr-only":"")},r("span",{key:"a30465882d45cdc3ee6513c79a9b9a0cacb68a88"},this.getLabel()," ",this.currentStep,"/",this.totalSteps),this.stepName&&r("span",{key:"fb4f2eb25ccd60c648c7a2d077dfce35b6888f52"}," - ",this.stepName)),r("progress",{key:"6822b750b6d86644f5a77115d449c050b7be418d",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(((s,e)=>r("div",{class:"pn-progress-dot","data-active":e+1<=this.currentStep,key:e})))):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}]}}};l.style=`${s("pn-progress-stepper")}{display:block}${s("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}${s("pn-progress-stepper")} .pn-progress-label{display:block;color:#2d2013;font-size:1em;margin-bottom:0.5em}${s("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){${s("pn-progress-stepper")} .pn-progress-value{transition-duration:0s;transition-delay:0s}}${s("pn-progress-stepper")} .pn-progress-value[data-full]{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}${s("pn-progress-stepper")} .pn-progress-dots{display:flex;align-items:center;justify-content:center;gap:1em}${s("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){${s("pn-progress-stepper")} .pn-progress-dot{transition-duration:0s;transition-delay:0s}}${s("pn-progress-stepper")} .pn-progress-dot{animation:pnBackwards 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}${s("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}${s("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%)}}`;export{l as pn_progress_stepper}