@madhusha_99/notification-center/core/Toast/index.js

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

var d = Object.defineProperty;
var n = (i, e, t) => e in i ? d(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
var s = (i, e, t) => n(i, typeof e != "symbol" ? e + "" : e, t);
class h {
  constructor() {
    s(this, "icons");
    s(this, "colors");
    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"
    };
  }
  showNotification(e) {
    var r;
    const t = (e.alertColor ?? this.colors[e.type]) || "gray", a = (e.titleColor ?? t) || "gray", o = (e.textColor ?? t) || "gray", c = e.icon && e.icon.length > 7 ? e.icon : (this.icons[e.type] ?? this.icons[e.icon]) || "", l = document.createElement("div");
    l.className = `fixed ${e.position} bg-${t}-50 !border-${t}-400 border-l-4 rounded-md shadow-md !p-4 flex items-center transition-all transform translate-x-full opacity-0 ${e.alertWidth ?? "w-80 lg:w-100"} ${e.alertHeight ?? "h-fit"}`, l.innerHTML = `
          <div class="shrink-0">${c}</div>
          <div class="ml-3">
              <h3 class="font-medium text-${a}-800 text-sm">${e.title}</h3>
              <div class="mt-2 text-${o}-700 text-sm">${e.text}</div>
          </div>
          <div class="ml-auto pl-3">
              <button class="text-${t}-800 hover:text-${t}-900 cursor-pointer">&times;</button>
          </div>
      `, document.body.appendChild(l), setTimeout(() => {
      l.classList.remove("translate-x-full", "opacity-0"), l.classList.add("translate-x-0", "opacity-100");
    }, 100), (r = l.querySelector("button")) == null || r.addEventListener("click", () => {
      this.closeNotification(l);
    }), setTimeout(() => {
      this.closeNotification(l);
    }, e.duration);
  }
  closeNotification(e) {
    e.classList.remove("translate-x-0", "opacity-100"), e.classList.add("translate-x-full", "opacity-0"), setTimeout(() => e.remove(), 500);
  }
  success(e) {
    e.type = "success", this.showNotification(e);
  }
  error(e) {
    e.type = "error", this.showNotification(e);
  }
  warning(e) {
    e.type = "warning", this.showNotification(e);
  }
  show(e) {
    e.type = void 0, this.showNotification(e);
  }
}
export {
  h as default
};