@postnord/web-components/components/pn-wizard.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as r,h as a,Host as n}from"@stencil/core/internal/client";import{u as s,r as o,k as d,e as h,i as p}from"./helpers.js";import{a as l}from"./arrow_right.js";import{c}from"./close.js";import{d as f}from"./pn-button2.js";import{d as w}from"./pn-icon2.js";import{d as m}from"./pn-progress-stepper2.js";import{d as u}from"./pn-spinner2.js";const b={NEXT:{sv:"Nästa",en:"Next",da:"Næste",fi:"Seuraava",no:"Neste"},PREV:{sv:"Föregående",en:"Previous",da:"Forrige",fi:"Edellinen",no:"Forrige"},FINISH:{sv:"Slutför",en:"Finish",da:"Afslut",fi:"Valmis",no:"Fullfør"},CANCEL:{sv:"Avbryt",en:"Cancel",da:"Annuller",fi:"Peruuta",no:"Avbryt"}},g=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.wizardStep=r(this,"wizardStep",7),this.wizardHighlightClick=r(this,"wizardHighlightClick",7),this.wizardClose=r(this,"wizardClose",7)}id="pn-wizard-"+s();wizardIdLabel;wizardIdHelpertext;wizardElement;wizardContent;wizardArrow;timeoutRerender;get hostElement(){return this}label="";helpertext="";language=null;pnId=this.id;step=-1;steps=[];progress="";scrollBlock="center";displayOverflow=!1;hideBack=!1;hideNext=!1;hideFinish=!1;labelBack="";labelNext="";labelFinish="";wizardStep;wizardHighlightClick;wizardClose;handleStepChange(t,i){if(-1===i&&(this.highlightElement(),this.positionModal()),-1===t){const t=i===this.steps.length;this.wizardClose.emit({step:t?i-1:i,finished:t})}if(!this.isActive())return this.wizardElement?.close(),void setTimeout((()=>this.handleDisplayOverflow()),o()?0:400);this.wizardElement.open||(this.handleDisplayOverflow(),this.wizardElement?.showModal()),this.wizardStep.emit({step:t,next:t>(i??-1),prev:t<(i??-1)})}handleIdChange(){this.wizardIdLabel=(this.pnId||this.id)+"-label",this.wizardIdHelpertext=(this.pnId||this.id)+"-helpertext"}handleOverflow(){this.isActive()&&(clearTimeout(this.timeoutRerender),this.timeoutRerender=setTimeout((()=>{this.highlightElement(),this.positionModal()}),250))}async componentWillLoad(){this.handleIdChange(),null===this.language&&await d(this.hostElement)}componentDidRender(){this.runStepLogic()}getRect(t){return t.getBoundingClientRect()}translate(t){return b?.[t]?.[this.language||h]||t}handleDisplayOverflow(){if(this.displayOverflow)return;const t=document.body,i=innerWidth-document.documentElement.clientWidth;this.isActive()?(t.style.setProperty("overflow","hidden"),t.style.marginRight=i+"px"):(t.style.removeProperty("overflow"),t.style.removeProperty("margin-right"))}isActive(t=this.step){return t>=0&&t<this.steps.length}isOpen(){return this.isActive()&&this.wizardElement?.open}isClosed(t=this.step){return-1===t}isFirstStep(){return 0===this.step}isLastStep(t=this.step){return 1===this.steps.length||t===this.steps.length-1}isProgressDots(){return"dots"===this.progress}isProgressText(){return"text"===this.progress}renderProgress(){return 7>=this.steps.length&&(this.isProgressDots()||this.isProgressText())}showBackButton(){return!(this.hideBack||this.isClosed()||this.isFirstStep())}showNextButton(){return!this.hideNext&&(!this.isLastStep()||this.showFinishButton())}showFinishButton(){return!this.hideFinish&&this.isLastStep()}runStepLogic(){this.isOpen()&&requestAnimationFrame((()=>{this.highlightElement(),this.positionModal(),this.scrollToElement()}))}nextStep(){this.step=this.step+1}prevStep(){this.step=this.step-1}endWizard(){this.step=-1}getNextLabel(){const t=this.labelFinish||"FINISH",i=this.labelNext||"NEXT",e=this.isLastStep()?t:i;return this.translate(e)}getHighlightTarget(){return document.querySelector(this.steps[this.step])}getHighlightRect(){const t=this.getHighlightTarget();if(!t)return;const i=this.getRect(t),e=parseFloat(getComputedStyle(t).margin)||0;return{top:i.top+window.scrollY-e,left:i.left+window.scrollX-e,width:i.width+2*e,height:i.height+2*e,radius:parseFloat(getComputedStyle(t).borderRadius)||4}}scrollToElement(){const t=this.getHighlightTarget();t&&t.scrollIntoView({behavior:"smooth",block:this.scrollBlock})}highlightElement(){this.getHighlightTarget()&&this.setHighlightVars(this.getHighlightRect())}positionModal(){if(!this.getHighlightTarget())return;const t=16,{top:i,left:e,width:r,height:a}=this.getHighlightRect(),{width:n,height:s}=this.getRect(this.wizardContent),o=e+r/2;let d=0,h=0;const{scrollY:l,scrollX:c,innerWidth:f,innerHeight:w}=window,m=f-document.documentElement.clientWidth,u=i+a+t+s<l+w,b=i-t-s>l,g=e-t-n>c,z=e+r+t+n<c+f,x=g||z;let y=8,v=8;y=u?i+a+t:i-s-t,v=c+f-n-m-8;let k=0,$="top";u||b?(d=o-n/2,h=u?i+a+t:i-s-t,$=u?"top":"bottom",k=o-d):x?(d=z?e+r+t:e-n-t,h=i+a/2-s/2,y=i+a/2,$=z?"left":"right",k=s/2):!(u||b||g||z)&&(d=o-n/2,h=i+a-s/2,y=w-s-8,$="top",k=o-d),d=Math.max(c+m||8,Math.min(d,v)),h=Math.max(8,Math.min(h,y)),this.setModalVars({top:h,left:d}),p()&&($="top"),k="top"===$||"bottom"===$?o-d:i+a/2-h,k=Math.max(32,Math.min(k-8,(x?s:n)-32)),this.setArrowVars($,k)}setHighlightVars({top:t,left:i,width:e,height:r,radius:a}){this.hostElement.style.setProperty("--pn-spotlight-x",Math.round(i)+"px"),this.hostElement.style.setProperty("--pn-spotlight-y",Math.round(t)+"px"),this.hostElement.style.setProperty("--pn-spotlight-width",Math.round(e)+"px"),this.hostElement.style.setProperty("--pn-spotlight-height",Math.round(r)+"px"),this.hostElement.style.setProperty("--pn-spotlight-radius",Math.round(a)+"px")}setModalVars({top:t,left:i}){this.hostElement.style.setProperty("--pn-wizard-content-x",Math.round(i)+"px"),this.hostElement.style.setProperty("--pn-wizard-content-y",Math.round(t)+"px")}setArrowVars(t,i){this.wizardArrow.setAttribute("data-arrow",t),this.hostElement.style.setProperty("--pn-arrow-offset",Math.round(i)+"px")}render(){return a(n,{key:"08f0d484f684188c7283535da328d6bd681b74d5"},a("dialog",{key:"56810278e58795390973a9ebbe0bd797b731b1f8",id:this.pnId,"aria-labelledby":this.label?this.wizardIdLabel:null,"aria-describedby":this.helpertext?this.wizardIdHelpertext:null,class:"pn-wizard",ref:t=>this.wizardElement=t,onCancel:()=>this.endWizard(),onClose:()=>this.endWizard()},a("div",{key:"824bbd673177648865e9328ee5aa51e157aa7347",class:"pn-wizard-overlay"},a("div",{key:"a2236247ba49e18de2a4aa2666fa1e07e6aaa1c4",class:"pn-wizard-highlight",onClick:t=>this.wizardHighlightClick.emit(t)})),a("div",{key:"77d5f6e74c49b2a92a8c9c8f9207594bec0545c7",class:"pn-wizard-content",ref:t=>this.wizardContent=t},a("pn-button",{key:"28fdec2fa470ff03b916325d0085a7bd4cd8f504",class:"pn-wizard-cancel",arialabel:this.translate("CANCEL"),icon:c,iconOnly:!0,small:!0,appearance:"light",variant:"borderless",onPnClick:()=>this.endWizard()}),a("div",{key:"ff7e6051e041c008c639e392896e885e4dcb0364",class:"pn-wizard-text"},this.label&&a("h2",{key:"9b8098099707558b66f1b422dc6ada70084d9829",class:"pn-wizard-label",id:this.wizardIdLabel},this.label),this.helpertext&&a("p",{key:"4db3b8ab391daf06f5731be43c9c116acd934b1f",class:"pn-wizard-helpertext",id:this.wizardIdHelpertext},this.helpertext),a("slot",{key:"5f72315df3102a605d2d4a220cfebfa216101f8c"}),this.renderProgress()&&a("pn-progress-stepper",{key:"becee14c8d2ad3fe3a9d902dd080f4df760e227e",class:!this.isProgressDots()&&"pn-wizard-sr-only",totalSteps:this.steps.length,currentStep:this.step>0?this.step+1:1,dots:!0})),a("div",{key:"264270d944373b1570a09a330bef6c6e8ad07e4d",class:"pn-wizard-arrow",ref:t=>this.wizardArrow=t}),a("div",{key:"1420663b8cc3996eb67f640d3a7f981f1fafff82",class:"pn-wizard-controls"},this.isProgressText()&&a("span",{key:"99cd61e352d16b15129239c8c1932a1e8ff3d675",class:"pn-wizard-indicator","aria-hidden":"true"},this.step+1,"/",this.steps.length),a("slot",{key:"f48e48097089a24ed48726046e5bb9b8a36ca1ec",name:"buttons"}),this.showBackButton()&&a("pn-button",{key:"9504536c3602f6280d30aa6f95043d2a66c2ac98",label:this.labelBack||this.translate("PREV"),small:!0,appearance:"light",variant:"outlined",onPnClick:()=>this.prevStep()}),this.showNextButton()&&a("pn-button",{key:"c5997f60733d2f220138fbf3caf24f44271d63f3",label:this.getNextLabel(),small:!0,icon:l,onPnClick:()=>this.nextStep()})))))}static get watchers(){return{step:[{handleStepChange:0}],pnId:[{handleIdChange:0}]}}static get style(){return`${t("pn-wizard")} .pn-wizard{z-index:10000;position:absolute;top:0;border:none;margin:0;padding:0;background-color:transparent;outline:none;overflow:unset;height:100%;width:100%;max-width:unset;max-height:unset;display:none;opacity:0;transition-property:display, opacity;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard{transition-duration:0s;transition-delay:0s}}${t("pn-wizard")} .pn-wizard{transition-behavior:allow-discrete}${t("pn-wizard")} .pn-wizard[open]{display:block;opacity:1}@starting-style{${t("pn-wizard")} .pn-wizard[open]{display:block;opacity:0}}${t("pn-wizard")} .pn-wizard::backdrop{background-color:transparent}${t("pn-wizard")} .pn-wizard-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${t("pn-wizard")} .pn-wizard-overlay{z-index:0}${t("pn-wizard")} .pn-wizard-highlight{position:absolute;left:0;top:0;width:var(--pn-spotlight-width, 0%);height:var(--pn-spotlight-height, 0%);border-radius:var(--pn-spotlight-radius, 0.25em);box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.55);z-index:0;transform:translate(var(--pn-spotlight-x, 0%), var(--pn-spotlight-y, 0%));transition-property:transform, width, height, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-highlight{transition-duration:0s;transition-delay:0s}}${t("pn-wizard")} .pn-wizard-content{position:absolute;z-index:1;background:#ffffff;border-radius:2em;max-width:20em;box-shadow:0 0 0.5em rgba(0, 0, 0, 0.3);left:0;top:0;transform:translate(var(--pn-wizard-content-x), var(--pn-wizard-content-y));transition-property:transform;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-content{transition-duration:0s;transition-delay:0s}}@media (max-width: 55em){${t("pn-wizard")} .pn-wizard-content{position:fixed;top:unset;bottom:0;left:0.5em;border-radius:2em 2em 0 0;width:calc(100vw - 1em);max-width:unset;transform:none}}${t("pn-wizard")} .pn-wizard-cancel{position:absolute;top:1em;right:1em;z-index:10}${t("pn-wizard")} .pn-wizard-text{padding:3em 1em 1em;text-align:center;display:flex;flex-direction:column;flex-wrap:nowrap;gap:clamp(0.5em, 5vw, 1em)}${t("pn-wizard")} .pn-wizard-label{margin:0;font-size:clamp(1.25em, 5vw, 1.5em);font-weight:700;color:#2d2013}${t("pn-wizard")} .pn-wizard-helpertext{margin:0;font-size:clamp(0.875em, 5vw, 1em);font-weight:400;color:#5e554a}${t("pn-wizard")} .pn-wizard-controls{border-top:0.0625em solid #d3cecb;padding:1em;display:flex;justify-content:end;gap:0.5em;flex-wrap:wrap}${t("pn-wizard")} .pn-wizard-indicator{margin-right:auto;align-self:center;font-size:1em;color:#5e554a;padding:0 0.625em}${t("pn-wizard")} .pn-wizard-arrow{position:absolute;width:0;height:0;border:0.5em solid transparent;top:0;right:0;bottom:0;left:0;transition-property:top, right, bottom, left, border-color;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-arrow{transition-duration:0s;transition-delay:0s}}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=bottom]{top:100%;bottom:-1em;left:var(--pn-arrow-offset);border-top-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=top]{top:-1em;left:var(--pn-arrow-offset);border-bottom-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=right]{right:-1em;left:100%;top:var(--pn-arrow-offset);border-left-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=left]{left:-1em;top:var(--pn-arrow-offset);border-right-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=none]{display:none}`}},[772,"pn-wizard",{label:[1],helpertext:[1],language:[1025],pnId:[1025,"pn-id"],step:[1538],steps:[16],progress:[1],scrollBlock:[1,"scroll-block"],displayOverflow:[4,"display-overflow"],hideBack:[4,"hide-back"],hideNext:[4,"hide-next"],hideFinish:[4,"hide-finish"],labelBack:[1,"label-back"],labelNext:[1,"label-next"],labelFinish:[1,"label-finish"]},[[9,"resize","handleOverflow"]],{step:[{handleStepChange:0}],pnId:[{handleIdChange:0}]}]),z=g,x=function(){"undefined"!=typeof customElements&&["pn-wizard","pn-button","pn-icon","pn-progress-stepper","pn-spinner"].forEach((i=>{switch(i){case"pn-wizard":customElements.get(t(t(i)))||customElements.define(t(t(i)),g);break;case"pn-button":customElements.get(t(t(i)))||f();break;case"pn-icon":customElements.get(t(t(i)))||w();break;case"pn-progress-stepper":customElements.get(t(t(i)))||m();break;case"pn-spinner":customElements.get(t(t(i)))||u()}}))};export{z as PnWizard,x as defineCustomElement}