@postnord/web-components
Version:
PostNord Web Components
5 lines • 13.7 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as r,h as n,Host as a}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 w}from"./pn-button2.js";import{d as f}from"./pn-icon2.js";import{d as b}from"./pn-progress-stepper2.js";import{d as u}from"./pn-spinner2.js";const m={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===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 m?.[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:n}=t.getBoundingClientRect();return i>=0&&e>=0&&r<=(window.innerHeight||document.documentElement.clientHeight)&&n<=(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:n}=this.getHighlightRect(),a=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+n+t+o<l+f,m=i-l>o+t,g=e-t-s>c,z=e+r+t+s<c+w;let x=8,y=8;x=u?i+n+t:i-o-t,y=c+w-s-b-8;let v=0,k="top";u||m?(d=a-s/2,h=u?i+n+t:i-o-t,k=u?"top":"bottom",v=a-d):g||z?(d=z?e+r+t:e-s-t,h=i+n/2-o/2,x=l+f-o-8,k=z?"left":"right",v=o/2):!(u||m||g||z)&&(d=a-s/2,h=i+n-o/2,x=l-o-8,k="top",v=a-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()&&(k="top"),v="top"===k||"bottom"===k?a-d:i+n/2-h,v=Math.max(32,Math.min(v-8,("top"===k||"bottom"===k?s:o)-32)),this.setArrowVars(k,v)}setHighlightVars({top:t,left:i,width:e,height:r,radius:n}){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(n)+"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 n(a,{key:"3fbeaf58c3adc8ea380a81b93dc66fb8a6bece5c"},n("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()},n("div",{key:"737f8207c19876c82c6a3d2418305fc7268ee251",class:"pn-wizard-overlay"},n("div",{key:"d420a48ad3b30828b4dd496f56073eea375bbe34",class:"pn-wizard-highlight",onClick:t=>this.wizardHighlightClick.emit(t)})),n("div",{key:"03d6e169d95b7fe7bdb65a31e839b5744db190d0",class:"pn-wizard-content",ref:t=>this.wizardContent=t},n("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()}),n("div",{key:"b1f3f3ddb93efe5201091d19df4ff22acde76391",class:"pn-wizard-text"},this.label&&n("h2",{key:"b689ff85832dd65814d30ca85c00b59281aef1d1",class:"pn-wizard-label",id:this.wizardIdLabel},this.label),this.helpertext&&n("p",{key:"6a978db802f3faa402435c84c233e84c3456f657",class:"pn-wizard-helpertext",id:this.wizardIdHelpertext},this.helpertext),n("slot",{key:"52d0440d5b470fd06eb3a0c21921d540c79c0ac9"}),this.renderProgress()&&n("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})),n("div",{key:"c5b266d5421f09bbc2ab199d6d71f5938dc8ae72",class:"pn-wizard-arrow",ref:t=>this.wizardArrow=t}),n("div",{key:"00aef3606f751ca56142fe2b0a6a08a36e4f92f3",class:"pn-wizard-controls"},this.isProgressText()&&n("span",{key:"d6c0c85554253580d65aa42742cdabf55158bfe5",class:"pn-wizard-indicator","aria-hidden":"true"},this.step+1,"/",this.steps.length),n("slot",{key:"76a1b7c69280ffbbc81f210acdfb8812b241329d",name:"buttons"}),this.showBackButton()&&n("pn-button",{key:"560aa03d06aec0b32ae94ee2264b6bd059b5f305",label:this.labelBack||this.translate("PREV"),small:!0,appearance:"light",variant:"outlined",onPnClick:()=>this.prevStep()}),this.showNextButton()&&n("pn-button",{key:"00d8a13c7ee3413aa2e3d751d101de41e228f866",label:this.getNextLabel(),small:!0,icon:l,onPnClick:()=>this.nextStep()})))))}static get watchers(){return{step:[{handleStepChange:0}],pnId:[{handleIdChange:1}]}}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)} (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}`}},[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:1}]}]),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)))||w();break;case"pn-icon":customElements.get(t(t(i)))||f();break;case"pn-progress-stepper":customElements.get(t(t(i)))||b();break;case"pn-spinner":customElements.get(t(t(i)))||u()}}))};export{z as PnWizard,x as defineCustomElement}