@postnord/web-components
Version:
PostNord Web Components
5 lines • 10.3 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{transformTag as a,proxyCustomElement as e,HTMLElement as o,createEvent as t,forceUpdate as n,h as i,Host as d}from"@stencil/core/internal/client";import{r as l,k as s,e as r,i as m}from"./helpers.js";import{c as p}from"./close.js";import{d as c}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d as f}from"./pn-spinner2.js";const b={CLOSE_MODAL:{en:"Close dialog",sv:"Stäng dialogrutan",da:"Luk dialogboks",fi:"Sulje valintaikkuna",no:"Lukk dialogboksen"}},u=e(class extends o{constructor(a){super(),!1!==a&&this.__registerHost(),this.modalToggle=t(this,"modalToggle",7),this.modalVisiblity=t(this,"modalVisiblity",7),this.close=t(this,"close",7)}mo;standardAnimationDuration=400;animationDuration=this.standardAnimationDuration;modalTimeout;modalElement;modalContainer;modalPicture;get hostElement(){return this}isClosing=!1;isOpening=!1;removeOverflow=!1;label;helpertext;language=null;open=!1;persistent=!1;hideClose=!1;allowOverflow=!1;sheet=!1;maxWidth=null;handleOpen(){this.open?this.openModal():(this.closeModal(),this.close.emit(!0)),this.handleOverflow(),clearTimeout(this.modalTimeout),this.isClosing=!this.open&&!0,this.animationDuration=l()?0:this.standardAnimationDuration,this.modalTimeout=setTimeout((()=>{this.isClosing=!1,this.modalVisiblity.emit({visible:this.open})}),this.animationDuration)}handleMaxWidth(){this.modalElement.style.setProperty("--pn-modal-max-width",this.maxWidth||"45em")}handleOverflow(){this.allowOverflow&&this.setOverflow()}modalToggle;modalVisiblity;close;connectedCallback(){this.mo=new MutationObserver((()=>n(this.hostElement))),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}async componentWillLoad(){null===this.language&&await s(this.hostElement)}componentDidLoad(){this.handleMaxWidth(),this.open&&this.openModal()}translate(a){return b?.[a]?.[this.language||r]||a}showImage(){return!!this.modalPicture?.innerHTML}showHeader(){return!!(this.label||this.helpertext||this.hostElement.querySelector('[slot="header"]')?.textContent)}setOverflow(){this.removeOverflow=!this.hasOverflow()}hasOverflow(){const a=m()?.95:.85;return this.modalContainer?.scrollHeight>innerHeight*a}isSameModal(a){return this.modalElement.isSameNode(a)}handleKeyboard(a){"Escape"===a.key&&(a.preventDefault(),a.stopImmediatePropagation(),this.persistent||this.setModalClose())}clickModalBackground(a){const{clientY:e,clientX:o}=a,t=a.target.localName!==this.modalElement.localName,n=!this.isSameModal(a.target);if(t||n)return;const{top:i,left:d,height:l,width:s}=this.modalElement.getBoundingClientRect();i<=e&&e<=i+l&&d<=o&&o<=d+s||this.persistent||this.toggleOpen(!1)}setModalClose(){this.toggleOpen(!1)}closeModal(){this.modalElement.close()}openModal(){this.modalElement.showModal()}toggleOpen(a){this.open=a??!this.open}render(){return i(d,{key:"d965a05833b311fed1f1f7ba245c9401ab77b765"},i("dialog",{key:"d60d253a75dd3f82b684fce659a9a917d6181c62",class:"pn-modal","data-closing":this.isClosing,"data-sheet":this.sheet,"data-image":this.showImage(),"data-allow-overflow":this.removeOverflow,onClose:()=>this.setModalClose(),onCancel:()=>this.setModalClose(),onToggle:()=>this.modalToggle.emit({open:this.open}),onKeyDown:a=>this.handleKeyboard(a),onClick:a=>this.clickModalBackground(a),ref:a=>this.modalElement=a},!this.hideClose&&i("pn-button",{key:"4d25a2e559a8aca6286a9fc7a94f82285bd8ad4e",small:!0,class:"pn-modal-close-button",icon:p,iconOnly:!0,arialabel:this.translate("CLOSE_MODAL"),appearance:"light",variant:"borderless",type:"button",onPnClick:()=>this.setModalClose()}),i("div",{key:"3953eef2505ccda4786177c01ae9af92874d65a1",class:"pn-modal-container",ref:a=>this.modalContainer=a},i("div",{key:"de0730ef36d305f2ff2652510838df85bdbdee5e",class:"pn-modal-image",hidden:!this.showImage()},i("picture",{key:"c26ae160c243b630d7a1ba71a8d4cac523096cfd",class:"pn-modal-picture",ref:a=>this.modalPicture=a},i("slot",{key:"4d2425b17367b4ccd2215e54cfedbee6731a9daf",name:"image"}))),i("header",{key:"815bef72c5b9a2982b7dd62059314ef120221ee0",class:"pn-modal-header",hidden:!this.showHeader()},this.label&&i("h2",{key:"41ae0e9a7d8adca27764bf6be026d0bc59df9b90",class:"pn-modal-label"},this.label),this.helpertext&&i("p",{key:"4fac7c6daf49eaff4a56b7c217f49e7f0507299f",class:"pn-modal-text"},this.helpertext),i("slot",{key:"8ce017defaa66a4bfec5ef38398b3104ed0ff7f9",name:"header"})),i("section",{key:"3ad1dc180db0ad42a4fa99dc6c9a17fc153af362",class:"pn-modal-content"},i("slot",{key:"bddef9aa3cd8b78be3facd5ebd3e88d72b9eb219"})),i("nav",{key:"edc771b8ca813ed6c9b20f688847c9c22072f0a1",class:"pn-modal-buttons"},i("slot",{key:"75dcf50e07c985f95836251881b8c214bc1b58c6",name:"buttons"})))))}static get watchers(){return{open:[{handleOpen:0}],maxWidth:[{handleMaxWidth:0}]}}static get style(){return`${a("pn-modal")} .pn-modal{--pn-modal-max-width:45em;z-index:10000;position:fixed;top:0;inset-block-start:0;inset-block-end:0;margin:auto;padding:0;max-width:var(--pn-modal-max-width);overflow:hidden;border:0;border-radius:1.5em;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;display:none;opacity:0;transform:translate(0%, 20%);outline:0.2rem solid transparent;outline-offset:0.2rem}${a("pn-modal")} .pn-modal:focus-visible{outline-color:#ffffff}${a("pn-modal")} .pn-modal{transition-property:opacity, overlay, display, transform, outline-color, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${a("pn-modal")} .pn-modal{transition-duration:0s;transition-delay:0s}}${a("pn-modal")} .pn-modal{transition-behavior:allow-discrete}${a("pn-modal")} .pn-modal[data-allow-overflow]{overflow:unset}${a("pn-modal")} .pn-modal[data-allow-overflow] .pn-modal-container{overflow:unset}${a("pn-modal")} .pn-modal[data-allow-overflow] .pn-modal-picture{border-top-right-radius:1.5em}${a("pn-modal")} .pn-modal[data-image]{padding-top:0}${a("pn-modal")} .pn-modal[data-sheet]{margin:0 0 0 auto;height:100%;max-height:unset;border-radius:1.5em 0 0 1.5em;transform:translate(20%, 0%)}${a("pn-modal")} .pn-modal[data-sheet] .pn-modal-container{max-height:unset}${a("pn-modal")} .pn-modal[open]{display:flex;opacity:1;transform:translate(0%, 0%)}-style{${a("pn-modal")} .pn-modal[open]{display:flex;opacity:0;transform:translate(0%, 20%)}}${a("pn-modal")} .pn-modal[open][data-sheet]{transform:translate(0%, 0%)}-style{${a("pn-modal")} .pn-modal[open][data-sheet]{transform:translate(20%, 0%)}}${a("pn-modal")} .pn-modal::backdrop{background-color:rgba(0, 0, 0, 0);transition-property:opacity, background-color, overlay, display;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${a("pn-modal")} .pn-modal::backdrop{transition-duration:0s;transition-delay:0s}}${a("pn-modal")} .pn-modal::backdrop{transition-behavior:allow-discrete}${a("pn-modal")} .pn-modal[open]::backdrop{background-color:rgba(0, 0, 0, 0.55)}-style{${a("pn-modal")} .pn-modal[open]::backdrop{background-color:rgba(0, 0, 0, 0)}}${a("pn-modal")} .pn-modal-container{max-height:85vh;display:flex;flex-direction:column;align-items:stretch;overflow:hidden auto}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-corner,${a("pn-modal")} .pn-modal-container::-webkit-scrollbar-button{display:none}${a("pn-modal")} .pn-modal-close-button{position:absolute;z-index:10;right:0.75em;top:0.75em}${a("pn-modal")} .pn-modal-header{display:flex;flex-direction:column;gap:0.5em;padding:clamp(1em, 5vw, 1.5em)}${a("pn-modal")} .pn-modal-header[hidden]{display:none}${a("pn-modal")} .pn-modal-header:not([hidden])+.pn-modal-content:not([hidden]){padding-top:0}${a("pn-modal")} .pn-modal-label{line-height:1.5;padding-right:1.5em;margin:0}${a("pn-modal")} .pn-modal-text{margin:0}${a("pn-modal")} .pn-modal-content{padding:clamp(1em, 5vw, 1.5em)}${a("pn-modal")} .pn-modal-image{position:relative;display:flex;flex-direction:column}${a("pn-modal")} .pn-modal-image[hidden]{display:none}${a("pn-modal")} .pn-modal-picture{margin:0;padding:0;display:block;overflow:hidden;border-radius:1.5em 0 0 0}${a("pn-modal")} .pn-modal-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}${a("pn-modal")} .pn-modal-buttons{background-color:#ffffff;border-top:0.0625em solid #d3cecb;padding:clamp(1em, 5vw, 1.5em);display:flex;justify-content:flex-end;gap:0.5em;border-radius:0 0 1.5em 1.5em}${a("pn-modal")} .pn-modal-buttons>[slot=buttons]:not(${a("pn-button")}){display:flex;justify-content:flex-end;gap:0.5em}${a("pn-modal")} .pn-modal-buttons>[slot=buttons]:not(${a("pn-button")})>[data-left]{margin-right:auto}${a("pn-modal")} .pn-modal-buttons>[data-left]{margin-right:auto}${a("pn-modal")} .pn-modal-buttons:empty{display:none} (max-width: 55em){${a("pn-modal")} .pn-modal{max-height:95vh;margin-bottom:0;bottom:0;transform:translate(0%, 20%);border-bottom-left-radius:0;border-bottom-right-radius:0}}`}},[772,"pn-modal",{label:[1],helpertext:[1],language:[1],open:[1540],persistent:[4],hideClose:[4,"hide-close"],allowOverflow:[4,"allow-overflow"],sheet:[4],maxWidth:[1,"max-width"],isClosing:[32],isOpening:[32],removeOverflow:[32]},[[9,"resize","handleOverflow"]],{open:[{handleOpen:0}],maxWidth:[{handleMaxWidth:0}]}]),g=u,k=function(){"undefined"!=typeof customElements&&["pn-modal","pn-button","pn-icon","pn-spinner"].forEach((e=>{switch(e){case"pn-modal":customElements.get(a(a(e)))||customElements.define(a(a(e)),u);break;case"pn-button":customElements.get(a(a(e)))||c();break;case"pn-icon":customElements.get(a(a(e)))||h();break;case"pn-spinner":customElements.get(a(a(e)))||f()}}))};export{g as PnModal,k as defineCustomElement}