@madhusha_99/notification-center/core/Dialog/index.cjs

Notification Center is a lightweight JavaScript library for displaying beautiful, customizable notifications powered by **Tailwind CSS**.

"use strict";var f=Object.defineProperty;var g=(r,t,e)=>t in r?f(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e;var i=(r,t,e)=>g(r,typeof t!="symbol"?t+"":t,e);class C{constructor(){i(this,"alertContainer");i(this,"icons");i(this,"colors");this.alertContainer=document.createElement("div"),this.alertContainer.className="fixed inset-0 flex justify-center bg-zinc-950/15 dark:bg-zinc-950/50 px-2 sm:px-6 lg:px-8 py-2 sm:py-8 lg:py-16 w-screen overflow-y-auto transition duration-100 hidden",document.body.appendChild(this.alertContainer),this.icons={success:`<svg class="size-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd"
                d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                clip-rule="evenodd" />
        </svg>`,warning:`<svg class="size-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd"
                d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                clip-rule="evenodd" />
        </svg>`,error:`<svg class="size-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd"
                d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
                clip-rule="evenodd" />
        </svg>`},this.colors={success:"green",warning:"yellow",error:"red"}}showPopup(t,e){var c,o,s;const n=(t.alertColor??this.colors[t.type])||"gray",d=(t.titleColor??n)||"gray",u=(t.textColor??n)||"gray",h=(t.confirmButtonColor??n)||"gray",a=(t.cancelButtonColor??n)||"gray",m=t.icon&&t.icon.length>7?t.icon:(this.icons[t.type]??this.icons[t.icon])||"",l=document.createElement("div");l.className="fixed inset-0 pt-6 sm:pt-0 w-screen overflow-y-auto flex justify-center items-center transition duration-100",l.innerHTML=`
      <div class="fixed flex flex-col justify-center items-center ${t.position} bg-${t.alertColor?t.alertColor+"-50":"white"} dark:bg-${t.alertColor??"zinc"}-900 !border-${t.alertColor??"zinc"}-400 shadow-lg p-8 sm:p-6 rounded-xl ring-1 ring-${t.alertColor??"zinc"}-950/10 dark:ring-${t.alertColor??"white"}/10 ${t.alertWidth??"w-full sm:max-w-md"} ${t.alertHeight??"h-fit"}">
        <div class="flex justify-center">${m}</div>
        <h2 class="px-4 py-2 font-semibold text-${d}-800 dark:text-white sm:text-sm text-base text-center">${t.title}</h2>
        <p class="mt-2 text-${u}-700 dark:text-white text-center">${t.text}</p>
        <div class="flex justify-center mt-5 ${t.showConfirmButton?"block":"hidden"}">
        ${t.showCancelButton?`
        <div class="flex justify-center items-center p-2 w-full gap-3">
          <button class="bg-${a==="gray"?"red":a}-600 px-4 py-2 rounded-md text-white cursor-pointer" id="btnCancel">${t.cancelButtonText??"Cancel"}</button>
          <button class="bg-${h}-600 px-4 py-2 rounded-md text-white cursor-pointer" id="btnOK">${t.confirmButtonText??"OK"}</button>
        </div>
        `:`<button class="bg-${n}-600 px-4 py-2 rounded-md text-white cursor-pointer" id="btnDefaultOK">${t.confirmButtonText??"OK"}</button>`}
        </div>
      </div>
    `,this.alertContainer.innerHTML="",this.alertContainer.appendChild(l),this.alertContainer.classList.remove("hidden"),(c=document.getElementById("btnCancel"))==null||c.addEventListener("click",()=>{this.closeNotification(this.alertContainer),e==null||e(!1)}),(o=document.getElementById("btnOK"))==null||o.addEventListener("click",()=>{this.closeNotification(this.alertContainer),e==null||e(!0)}),(s=document.getElementById("btnDefaultOK"))==null||s.addEventListener("click",()=>{this.closeNotification(this.alertContainer),e==null||e(!0)});const x=this.alertContainer;setTimeout(()=>{this.closeNotification(x)},t.duration)}closeNotification(t){t.classList.add("hidden")}success(t){return new Promise(e=>{t.type="success",this.showPopup(t,e)})}error(t){return new Promise(e=>{t.type="error",this.showPopup(t,e)})}warning(t){return new Promise(e=>{t.type="warning",this.showPopup(t,e)})}show(t){return new Promise(e=>{t.type=void 0,this.showPopup(t,e)})}}module.exports=C;