@postnord/web-components/postnord-web-components/p-0df19fd0.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,c as o,g as i,f as e,h as n,a as s}from"./p-c2c6299e.js";import{c as a}from"./p-92b0338a.js";const d="pn-modal .pn-modal{position:fixed;bottom:round(50%, 1px);left:round(50%, 1px);width:round(95%, 1px);max-width:45em;max-height:round(85vh, 1px);border:0.0625em solid #f3f2f2;border-radius:0.5em;transform:translate(-50%, 60%);box-shadow:0 0.25em 0.875em rgba(0, 0, 0, 0.18), 0 1.625em 3.5em rgba(0, 0, 0, 0.22);background-color:#ffffff;z-index:999;pointer-events:none;opacity:0;visibility:hidden;overflow-y:auto;transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1)}pn-modal[data-open] .pn-modal{visibility:visible;opacity:1;pointer-events:auto;transition:visibility 0s linear 0s, opacity 0.55s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transform:translate(round(-50%, 1px), round(50%, 1px))}.pn-modal>.pn-modal-content{width:100%;height:round(100%, 1px);padding:1.5em}.pn-modal>.pn-modal-close-button{position:absolute;right:1em;top:1em}pn-modal .pn-modal>[slot=buttons]{position:static;width:100%;background-color:#ffffff;border-top:0.0625em solid #d3cecb;padding:0.5em 1em;display:flex;justify-content:flex-end;flex-wrap:wrap-reverse}pn-modal .pn-modal>[slot=buttons]>*{margin:0.5em}pn-modal>.pn-modal-backdrop{position:fixed;width:round(120vw, 1px);height:round(120vh, 1px);top:round(-10vh, 1px);left:round(-10vw, 1px);background-color:#000000;opacity:0;z-index:9;visibility:hidden;transition:visibility 0s linear 0.3s, opacity 0.3s}pn-modal[data-open] .pn-modal-backdrop{opacity:0.55;visibility:visible;transition:visibility 0s linear 0s, opacity 0.3s}@media screen and (max-width: 30em){pn-modal .pn-modal{width:round(100%, 1px);max-height:round(95vh, 1px);bottom:0;transform:translate(round(-50%, 1px), round(10%, 1px));border-radius:0.5em 0.5em 0 0}pn-modal[data-open] .pn-modal{transform:translate(round(-50%, 1px), 0)}pn-modal .pn-modal>[slot=buttons]{justify-content:center}pn-modal .pn-modal>[slot=buttons]>*{flex:1 0 auto}}@supports (position: sticky){pn-modal .pn-modal>[slot=buttons]{position:sticky;bottom:0;left:0;z-index:2}pn-modal .pn-modal>.pn-modal-close-button{position:sticky;left:calc(100% - 3em);margin:1em 1em 0 0;z-index:10}pn-modal .pn-modal>.pn-modal-content{margin-top:-3em}}";const l=d;const r=class{constructor(i){t(this,i);this.close=o(this,"close",7)}mo;untabbable;elToFocus;handleFocus=this.focusHandler.bind(this);handleBlur=this.blurHandler.bind(this);handleEsc=this.escHandler.bind(this);handleGlobalClick=this.globalClickHandler.bind(this);get hostElement(){return i(this)}focusableEls;open=false;handleOpen(){if(this.open){this.addEventListeners()}else{this.removeEventListeners();this.elToFocus=null;this.close.emit(this.open)}}close;componentDidLoad(){if(this.mo)this.mo.disconnect();this.mo=new MutationObserver((()=>{e(this.hostElement);this.setFocusableElements()}));this.mo.observe(this.hostElement.querySelector(".pn-modal"),{childList:true,subtree:true});if(this.open)this.handleOpen();this.setFocusableElements()}toggleOpen(t){this.open=t??!this.open}setFocusableElements(){requestAnimationFrame((()=>{this.focusableEls=Array.from(this.hostElement.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]):not(.pn-modal-backdrop)'));this.untabbable=Array.from(this.hostElement.querySelectorAll('[tabindex="-1"]'))}))}addEventListeners(){const t=this.hostElement.getRootNode();t.addEventListener("focusin",this.handleFocus);t.addEventListener("focusout",this.handleBlur);t.addEventListener("keydown",this.handleEsc);requestAnimationFrame((()=>document.addEventListener("pointerdown",this.handleGlobalClick)))}removeEventListeners(){const t=this.hostElement.getRootNode();t.removeEventListener("focusin",this.handleFocus);t.removeEventListener("focusout",this.handleBlur);t.removeEventListener("keydown",this.handleEsc);document.removeEventListener("pointerdown",this.handleGlobalClick)}focusHandler(t){const o=t.composedPath()[0];if(!this.focusableEls.includes(o)&&!this.untabbable.includes(o)||o.classList.contains("pn-modal-backdrop")){if(this.elToFocus){this.elToFocus.focus();return}this.focusableEls[0].focus()}}blurHandler(t){const o=t.composedPath?.()[0];const i=this.focusableEls.indexOf(o);const e=this.focusableEls.length-1;if(i===0)this.elToFocus=this.focusableEls[e];if(i===e)this.elToFocus=this.focusableEls[0]}escHandler({code:t}){if(t==="Escape")this.toggleOpen(false)}globalClickHandler(t){const o=t.composedPath?.()[0];if(!this.hostElement.contains(o)||o.classList.contains("pn-modal-backdrop")){t.preventDefault();this.toggleOpen(false)}}render(){return n(s,{key:"e147efddf99cb12726295253e89ec8f83c16d6a1","data-open":this.open},n("div",{key:"9ad10f6e7fdb2445d6b1a99801bd416cc77df976",class:"pn-modal-backdrop",tabindex:"0"}),n("div",{key:"479ee53eac130748bc33d2b49da57fe183a26c34",class:"pn-modal"},n("pn-button",{key:"fe7d40eed5b260949e889ed172d77311748873e9",small:true,class:"pn-modal-close-button",icon:a,iconOnly:true,arialabel:"close",appearance:"light",type:"button",onPnClick:()=>this.toggleOpen()}),n("div",{key:"6f0a21860e2eaa16f01b87ac11cce3095768e0d9",class:"pn-modal-content"},n("slot",{key:"d15335e6f44b2a4b4d394bd3779e65ab2f3d7d4f"})),n("slot",{key:"24b457f92a61552a0cdd375c97d2a3cc1106013d",name:"buttons"})))}static get watchers(){return{open:["handleOpen"]}}};r.style=l;export{r as pn_modal};
//# sourceMappingURL=p-0df19fd0.entry.js.map