(()=>{"use strict";class n extends HTMLElement{constructor(){super(),this._modalVisible=!1,this._modal=null,this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML='\n            <style>\n                /* The Modal (background) */\n                .modal {\n                    display: none; \n                    position: fixed; \n                    z-index: 1000; \n                    left: 0;\n                    top: 0;\n                    width: 100%; \n                    height: 100%; \n                    overflow: auto; \n                    background-color: rgba(0,0,0,0.4);\n                    justify-content: center; \n                    align-items: center;\n                }\n\n                /* Modal Content */\n                .modal-content {\n                    position: relative;\n                    background-color: #fefefe;\n                    border-radius: var(--genral-border-radius);\n                    margin: auto;\n                    padding: 16px;\n                    width: fit-content;\n                    text-align: center;\n                    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\n                    -webkit-animation-name: animatetop;\n                    -webkit-animation-duration: 0.4s;\n                    animation-name: animatetop;\n                    animation-duration: 0.4s\n\n                }\n\n                /* Add Animation */\n                @-webkit-keyframes animatetop {\n                    from {top:-300px; opacity:0} \n                    to {top:0; opacity:1}\n                }\n\n                @keyframes animatetop {\n                    from {top:-300px; opacity:0}\n                    to {top:0; opacity:1}\n                }\n\n                /* Button */\n                .open, .close {\n                    font-size: 16px;\n                    line-height: 16px;\n                    color: #000;\n                    padding: 0px;\n                    border:none;\n                    background:none;\n                }\n\n                .open:hover,\n                .open:focus,\n                .close:hover,\n                .close:focus {\n                    color: #000;\n                    cursor: pointer;\n                }\n\n                .modal-header {\n                    color: black;\n                    display: flex;\n                    justify-content: space-between;\n                    align-items: center;\n                }\n\n                .modal-body {padding: 1rem 0; }\n\n                \n\n\n            </style>\n            <button class="open">\n               <slot name="open-button">open</slot>\n            </button>\n            <div class="modal">\n                <div class="modal-content">\n                    <div class="modal-header bg-red-100 flex justify-between items-center">\n                        <slot name="header"><h3>Default Heading</h3></slot>\n                        <button class="close">\n                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>\n                        </button>\n                    </div>\n                    <div class="modal-body">\n                        <slot name="message">Default Text</slot>\n                    </div>\n                </div>\n            </div>\n        '}connectedCallback(){this._modal=this.shadowRoot.querySelector(".modal"),this.shadowRoot.querySelector(".open").addEventListener("click",this._showModal.bind(this)),this.shadowRoot.querySelector(".close").addEventListener("click",this._hideModal.bind(this)),this._modal.addEventListener("click",(n=>{n.target===this._modal&&this._hideModal()}))}disconnectedCallback(){this.shadowRoot.querySelector(".open").removeEventListener("click",this._showModal),this.shadowRoot.querySelector(".close").removeEventListener("click",this._hideModal)}_showModal(){this._modalVisible=!0,this._modal&&(this._modal.style.display="flex")}_hideModal(){this._modalVisible=!1,this._modal&&(this._modal.style.display="none")}_submitModal(){this._modalVisible=!1,this._modal&&(this._modal.style.display="none")}}customElements.define("aui-modal",n)})();