@postnord/web-components
Version:
PostNord Web Components
5 lines • 12.6 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{t,r as i,c as e,g as r,h as a,a as n}from"./p-XKg-ydzH.js";import{uuidv4 as s,reduceMotion as o,awaitTopbar as d,en as h,isSmallScreen as p}from"./index.esm.js";import{a as l}from"./p-D_UyW-KH.js";import{c}from"./p-BvuWkoyY.js";const w={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"}},f=class{constructor(t){i(this,t),this.wizardStep=e(this,"wizardStep",7),this.wizardHighlightClick=e(this,"wizardHighlightClick",7),this.wizardClose=e(this,"wizardClose",7)}id=`pn-wizard-${s()}`;wizardIdLabel;wizardIdHelpertext;wizardElement;wizardContent;wizardArrow;timeoutRerender;get hostElement(){return r(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===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.runStepLogic(),requestAnimationFrame((()=>{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.runStepLogic()),250))}async componentWillLoad(){null===this.language&&await d(this.hostElement)}componentDidRender(){requestAnimationFrame((()=>this.isActive()&&this.runStepLogic()))}getRect(t){return t.getBoundingClientRect()}translate(t){return w?.[t]?.[this.language||h]||t}runStepLogic(){this.isOpen()&&this.scrollToElement(),this.highlightElement(),this.positionModal()}handleDisplayOverflow(){if(this.displayOverflow)return;const t=document.body,i=innerWidth-document.documentElement.clientWidth;this.isActive()?(t.style.setProperty("overflow","hidden"),t.style.setProperty("margin-right",`${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()}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(){const t=this.steps[this.step];return t?document.querySelector(t):null}getHighlightRect(){const t=this.getHighlightTarget();if(!t)return void this.resetToCenter();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}}isInViewport(t){const{top:i,left:e,bottom:r,right:a}=t.getBoundingClientRect();return i>=0&&e>=0&&r<=(window.innerHeight||document.documentElement.clientHeight)&&a<=(window.innerWidth||document.documentElement.clientWidth)}scrollToElement(){const t=this.getHighlightTarget();t&&!this.isInViewport(t)&&t.scrollIntoView({behavior:"instant",block:this.scrollBlock})}highlightElement(){if(!this.getHighlightTarget())return this.resetToCenter();this.setHighlightVars(this.getHighlightRect())}resetToCenter(){const{width:t,height:i}=this.getWizardContentRect(),e=window.scrollY+window.innerHeight/2-i/2,r=window.scrollX+window.innerWidth/2-t/2;this.setHighlightVars({top:e,left:r,width:0,height:0,radius:0}),this.setModalVars({top:e,left:r}),this.setArrowVars("none",0)}getWizardContentRect(){return this.wizardContent?this.getRect(this.wizardContent):{width:0,height:0}}positionModal(){if(!this.getHighlightTarget())return;const t=16,{top:i,left:e,width:r,height:a}=this.getHighlightRect(),n=e+r/2,{width:s,height:o}=this.getWizardContentRect();let d=0,h=0;const{scrollY:l,scrollX:c,innerWidth:w,innerHeight:f}=window,b=w-document.documentElement.clientWidth,u=i+a+t+o<l+f,g=i-l>o+t,m=e-t-s>c,z=e+r+t+s<c+w;let x=8,y=8;x=u?i+a+t:i-o-t,y=c+w-s-b-8;let v=0,$="top";u||g?(d=n-s/2,h=u?i+a+t:i-o-t,$=u?"top":"bottom",v=n-d):m||z?(d=z?e+r+t:e-s-t,h=i+a/2-o/2,x=l+f-o-8,$=z?"left":"right",v=o/2):!(u||g||m||z)&&(d=n-s/2,h=i+a-o/2,x=l-o-8,$="top",v=n-d),d=Math.max(c+b||8,Math.min(d,y)),h=Math.max(8,Math.min(h,x)),this.setModalVars({top:h,left:d}),p()&&($="top"),v="top"===$||"bottom"===$?n-d:i+a/2-h,v=Math.max(32,Math.min(v-8,("top"===$||"bottom"===$?s:o)-32)),this.setArrowVars($,v)}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:"3fbeaf58c3adc8ea380a81b93dc66fb8a6bece5c"},a("dialog",{key:"f0f94968cba2e2dc8baba4752d80a7bea862c929",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:"737f8207c19876c82c6a3d2418305fc7268ee251",class:"pn-wizard-overlay"},a("div",{key:"d420a48ad3b30828b4dd496f56073eea375bbe34",class:"pn-wizard-highlight",onClick:t=>this.wizardHighlightClick.emit(t)})),a("div",{key:"03d6e169d95b7fe7bdb65a31e839b5744db190d0",class:"pn-wizard-content",ref:t=>this.wizardContent=t},a("pn-button",{key:"3534ecbbd28f9171b0ba1adfa07a91a4a20a1dd1",class:"pn-wizard-cancel",arialabel:this.translate("CANCEL"),icon:c,iconOnly:!0,small:!0,appearance:"light",variant:"borderless",onPnClick:()=>this.endWizard()}),a("div",{key:"b1f3f3ddb93efe5201091d19df4ff22acde76391",class:"pn-wizard-text"},this.label&&a("h2",{key:"b689ff85832dd65814d30ca85c00b59281aef1d1",class:"pn-wizard-label",id:this.wizardIdLabel},this.label),this.helpertext&&a("p",{key:"6a978db802f3faa402435c84c233e84c3456f657",class:"pn-wizard-helpertext",id:this.wizardIdHelpertext},this.helpertext),a("slot",{key:"52d0440d5b470fd06eb3a0c21921d540c79c0ac9"}),this.renderProgress()&&a("pn-progress-stepper",{key:"63f08858ddef511b92d622a559fe3888b5a6508a",class:!this.isProgressDots()&&"pn-wizard-sr-only",totalSteps:this.steps.length,currentStep:this.step>0?this.step+1:1,dots:!0})),a("div",{key:"c5b266d5421f09bbc2ab199d6d71f5938dc8ae72",class:"pn-wizard-arrow",ref:t=>this.wizardArrow=t}),a("div",{key:"00aef3606f751ca56142fe2b0a6a08a36e4f92f3",class:"pn-wizard-controls"},this.isProgressText()&&a("span",{key:"d6c0c85554253580d65aa42742cdabf55158bfe5",class:"pn-wizard-indicator","aria-hidden":"true"},this.step+1,"/",this.steps.length),a("slot",{key:"76a1b7c69280ffbbc81f210acdfb8812b241329d",name:"buttons"}),this.showBackButton()&&a("pn-button",{key:"560aa03d06aec0b32ae94ee2264b6bd059b5f305",label:this.labelBack||this.translate("PREV"),small:!0,appearance:"light",variant:"outlined",onPnClick:()=>this.prevStep()}),this.showNextButton()&&a("pn-button",{key:"00d8a13c7ee3413aa2e3d751d101de41e228f866",label:this.getNextLabel(),small:!0,icon:l,onPnClick:()=>this.nextStep()})))))}static get watchers(){return{step:[{handleStepChange:0}],pnId:[{handleIdChange:1}]}}};f.style=`${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)} (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}-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)} (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)} (prefers-reduced-motion: reduce){${t("pn-wizard")} .pn-wizard-content{transition-duration:0s;transition-delay:0s}} (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)} (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:-0.9375em;left:var(--pn-arrow-offset);border-top-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=top]{top:-0.9375em;left:var(--pn-arrow-offset);border-bottom-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=right]{right:-0.9375em;left:100%;top:var(--pn-arrow-offset);border-left-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=left]{left:-0.9375em;top:var(--pn-arrow-offset);border-right-color:#ffffff}${t("pn-wizard")} .pn-wizard-arrow[data-arrow=none]{border-color:transparent}`;export{f as pn_wizard}