dialog-lite/dist/index.umd.js

DialogLite is designed to control a dialog box (modal window) on a web page, providing the functionality to open, close and apply custom styles through a simple interface.

(function(t,i){typeof exports=="object"&&typeof module<"u"?module.exports=i():typeof define=="function"&&define.amd?define(i):(t=typeof globalThis<"u"?globalThis:t||self).DialogLite=i()})(this,function(){"use strict";var d=Object.defineProperty;var r=(t,i,l)=>i in t?d(t,i,{enumerable:!0,configurable:!0,writable:!0,value:l}):t[i]=l;var e=(t,i,l)=>r(t,typeof i!="symbol"?i+"":i,l);var t=document.createElement("style");return t.textContent=`.dialog-lite{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-index-dialog-lite, 992);width:100vw;overflow:clip auto}.dialog-lite--in{-webkit-overflow-scrolling:touch}.dialog-lite--out{pointer-events:none}.dialog-lite__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;z-index:var(--z-index-dialog-lite-backdrop, 993)}.dialog-lite--in .dialog-lite__backdrop{background-color:var(--c-dialog-lite-backdrop-in, hsla(240, 22%, 6%, .82));transition:background-color .4s cubic-bezier(.61,1,.88,1)}.dialog-lite--out .dialog-lite__backdrop{pointer-events:none;background-color:var(--c-dialog-lite-backdrop-out, hsla(200, 2%, 6%, 0));transition:background-color .5s cubic-bezier(0,0,.5,1)}.dialog-lite__container{pointer-events:none;position:relative;z-index:var(--z-index-dialog-lite-container, 994);display:grid;place-content:center;width:100vw}@supports (min-height: 100dvh){.dialog-lite__container{min-height:100dvh}}@supports not (min-height: 100dvh){.dialog-lite__container{min-height:100vh}}.dialog-lite__container-inner{position:relative;margin:20px}.dialog-lite--in .dialog-lite__container-inner{pointer-events:auto;opacity:1;transform:translateY(0);transition:opacity .4s cubic-bezier(.61,1,.88,1),transform .4s cubic-bezier(.61,1,.88,1)}.dialog-lite--out .dialog-lite__container-inner{pointer-events:none;opacity:0;transform:translateY(40px);transition:opacity .5s cubic-bezier(0,0,.5,1),transform .55s cubic-bezier(.22,1,.5,.95)}.dialog-lite-close-button{cursor:pointer;position:absolute;inset:0 0 auto auto;display:grid;place-content:center;width:50px;height:50px}.dialog-lite-close-button .svg-icon{width:24px;height:24px;fill:#000}
/*$vite$:1*/`,document.head.appendChild(t),class{constructor({closingButton:i=!1,closingBackdrop:l=!1}={}){e(this,"dialogEl",null);e(this,"dialogCloseEl",null);e(this,"dialogBackdropEl",null);e(this,"mainContentEl",null);e(this,"currentClass","");e(this,"previouslyFocusedElement",null);e(this,"lastActionTime",0);e(this,"isOpen",!1);e(this,"isCloseButtonEnabled");e(this,"isCloseOnBackdropClickEnabled");this.isCloseButtonEnabled=i,this.isCloseOnBackdropClickEnabled=l,this.getElements()}getElements(){if(this.dialogEl=document.querySelector(".dialog-lite"),this.mainContentEl=document.getElementById("main-content"),!this.dialogEl)throw new Error("Dialog element not found");this.dialogCloseEl=this.dialogEl.querySelector(".dialog-lite-close-button"),this.dialogBackdropEl=this.dialogEl.querySelector(".dialog-lite__backdrop")}init(){this.isCloseButtonEnabled&&this.dialogCloseEl&&this.dialogCloseEl.addEventListener("click",()=>this.close()),this.isCloseOnBackdropClickEnabled&&this.dialogBackdropEl&&this.dialogBackdropEl.addEventListener("click",()=>this.close()),document.addEventListener("keydown",i=>{i.key==="Escape"&&this.isOpen&&this.close()})}open({stylingClass:i=""}={}){this.isDebounced()||this.dialogEl&&(this.dialogEl.style.display==="none"&&(this.dialogEl.style.display="",this.dialogEl.offsetWidth),this.isOpen=!0,this.mainContentEl&&this.mainContentEl.setAttribute("aria-hidden","true"),this.dialogEl.setAttribute("aria-hidden","false"),this.previouslyFocusedElement=document.activeElement,this.updateClassList({addClass:"dialog-lite--in",removeClass:"dialog-lite--out",newClass:i}))}close(){this.isDebounced()||this.dialogEl&&(this.isOpen=!1,this.mainContentEl&&this.mainContentEl.setAttribute("aria-hidden","false"),this.dialogEl.setAttribute("aria-hidden","true"),this.previouslyFocusedElement&&this.previouslyFocusedElement.focus(),this.updateClassList({addClass:"dialog-lite--out",removeClass:"dialog-lite--in",newClass:"",delayRemove:!0}),setTimeout(()=>{this.dialogEl&&(this.dialogEl.style.display="none")},500))}updateClassList({addClass:i,removeClass:l,newClass:o,delayRemove:n=!1}){if(this.dialogEl){if(this.currentClass)if(n){const a=this.currentClass;setTimeout(()=>{var s;(s=this.dialogEl)==null||s.classList.remove(a),this.currentClass=""},500)}else this.dialogEl.classList.remove(this.currentClass);this.dialogEl.classList.remove(l),this.dialogEl.classList.add(i),o&&(this.dialogEl.classList.add(o),this.currentClass=o)}}isDebounced(){const i=Date.now();return i-this.lastActionTime<500||(this.lastActionTime=i,!1)}}});