@tsirosgeorge/toastnotification 5.1.0 → 5.2.0

package/Readme.md

@@ -6,7 +6,7 @@ A lightweight, customizable, and dependency-free toast notification system writt
 
 ## 📦 Include package via cdn
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/toast.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/toast.min.js"></script>
 ```
 
 ## 📦 Include package via npm

package/assets/css/toast.css

@@ -108,14 +108,14 @@
 }
 
 /* Show toast with animation */
-.ts-toast-container .ts-toast.show {
+.ts-toast-container .ts-toast.ts-toast-show {
     opacity: 1;
     transform: translateY(0);
     /* Move to final position */
 }
 
 /* Animations for different effects */
-@keyframes slide-left {
+@keyframes ts-toast-slide-left {
     from {
         transform: translateX(-100%);
     }
@@ -125,7 +125,7 @@
     }
 }
 
-@keyframes slide-right {
+@keyframes ts-toast-slide-right {
     from {
         transform: translateX(100%);
     }
@@ -135,7 +135,7 @@
     }
 }
 
-@keyframes slide-top {
+@keyframes ts-toast-slide-top {
     from {
         transform: translateY(-100%);
     }
@@ -145,7 +145,7 @@
     }
 }
 
-@keyframes slide-bottom {
+@keyframes ts-toast-slide-bottom {
     from {
         transform: translateY(100%);
     }
@@ -155,7 +155,7 @@
     }
 }
 
-@keyframes zoom-in {
+@keyframes ts-toast-zoom-in {
     from {
         transform: scale(0);
     }
@@ -165,7 +165,12 @@
     }
 }
 
-@keyframes flip {
+@keyframes ts-toast-zoom-out {
+    from { transform: scale(1); }
+    to { transform: scale(0); }
+}
+
+@keyframes ts-toast-flip {
     from {
         transform: rotateY(90deg);
     }
@@ -200,12 +205,12 @@
     border: 3px solid #f3f3f3;
     border-top: 3px solid var(--toast-loader-color, #66ee78);
     border-radius: 50%;
-    animation: spin 1s linear infinite;
+    animation: ts-toast-spin 1s linear infinite;
     /* Continuous spinning */
 }
 
 /* Keyframe for spinning effect */
-@keyframes spin {
+@keyframes ts-toast-spin {
     0% {
         transform: rotate(0deg);
     }
@@ -230,7 +235,7 @@
 }
 
 /* Show the icon after the loader has completed */
-.ts-toast-container .ts-toast.show .ts-toast-icon {
+.ts-toast-container .ts-toast.ts-toast-show .ts-toast-icon {
     opacity: 1;
     /* Fade in the icon */
 }
@@ -246,7 +251,7 @@
 }
 
 /* Reverse Slide-out Animations */
-@keyframes slide-top-reverse {
+@keyframes ts-toast-slide-top-reverse {
     from {
         transform: translateY(0);
     }
@@ -256,7 +261,7 @@
     }
 }
 
-@keyframes slide-bottom-reverse {
+@keyframes ts-toast-slide-bottom-reverse {
     from {
         transform: translateY(0);
     }
@@ -266,7 +271,7 @@
     }
 }
 
-@keyframes slide-left-reverse {
+@keyframes ts-toast-slide-left-reverse {
     from {
         transform: translateX(0);
     }
@@ -276,7 +281,7 @@
     }
 }
 
-@keyframes slide-right-reverse {
+@keyframes ts-toast-slide-right-reverse {
     from {
         transform: translateX(0);
     }
@@ -287,7 +292,7 @@
 }
 
 /* Slide-out when removed */
-.ts-toast-container .ts-toast.slide-out {
+.ts-toast-container .ts-toast.ts-toast-slide-out {
     animation-duration: 0.5s;
     animation-timing-function: ease-in-out;
     animation-fill-mode: forwards;
@@ -305,10 +310,8 @@
 }
 
 /* Tiny utility: flex icon container */
-.d-flex {
-    display: inline-flex;
-    align-items: center;
-}
+/* Scoped utility to avoid conflicts */
+.ts-toast-d-flex { display: inline-flex; align-items: center; }
 
 /* Prevent scroll behind confirm overlay */
 body.ts-toast-no-scroll {

package/assets/css/toast.min.css

@@ -1 +1 @@
-.ts-toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;width:fit-content;max-width:calc(100% - 2rem)}.ts-toast-container>:not(:last-child){margin-bottom:0!important}.ts-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end}.ts-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start}.ts-toast-container.top-center{top:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end}.ts-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start}.ts-toast-container.bottom-center{bottom:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container .ts-toast{display:flex;align-items:center;gap:.75rem;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);padding:.75rem 1rem;border-radius:8px;border:1px solid var(--toast-border,#e5e7eb);box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1));font-family:sans-serif;font-size:.95rem;pointer-events:all;position:relative;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;width:auto!important}.ts-toast.ts-toast-confirm{display:flex;align-items:center;justify-content:center;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);border:1px solid var(--toast-border,#e5e7eb);border-radius:12px;padding:16px 20px;box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1))}.ts-toast.ts-toast-confirm .ts-toast-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.ts-toast.ts-toast-confirm .ts-toast-body{text-align:center}.ts-toast-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}.ts-toast-container .ts-toast.show{opacity:1;transform:translateY(0)}@keyframes slide-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes zoom-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes flip{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}.ts-toast-container .ts-toast-icon{font-size:1.2rem}.ts-toast-container .ts-toast-success .ts-toast-icon{color:var(--toast-success-color,#66ee78)}.ts-toast-container .ts-toast-error .ts-toast-icon{color:var(--toast-error-color,#ef4444)}.ts-toast-container .ts-toast-loader{width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid var(--toast-loader-color,#66ee78);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.ts-toast-container .ts-toast-loader.done{animation:none;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast-icon{font-size:1.2rem;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast.show .ts-toast-icon{opacity:1}@keyframes progress-bar{0%{width:0%}100%{width:100%}}@keyframes slide-top-reverse{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-bottom-reverse{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-left-reverse{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-right-reverse{from{transform:translateX(0)}to{transform:translateX(100%)}}.ts-toast-container .ts-toast.slide-out{animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}.ts-toast-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2147483646}.d-flex{display:inline-flex;align-items:center}body.ts-toast-no-scroll{overflow:hidden}
+.ts-toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;width:fit-content;max-width:calc(100% - 2rem)}.ts-toast-container>:not(:last-child){margin-bottom:0!important}.ts-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end}.ts-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start}.ts-toast-container.top-center{top:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end}.ts-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start}.ts-toast-container.bottom-center{bottom:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container .ts-toast{display:flex;align-items:center;gap:.75rem;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);padding:.75rem 1rem;border-radius:8px;border:1px solid var(--toast-border,#e5e7eb);box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1));font-family:sans-serif;font-size:.95rem;pointer-events:all;position:relative;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;width:auto!important}.ts-toast.ts-toast-confirm{display:flex;align-items:center;justify-content:center;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);border:1px solid var(--toast-border,#e5e7eb);border-radius:12px;padding:16px 20px;box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1))}.ts-toast.ts-toast-confirm .ts-toast-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.ts-toast.ts-toast-confirm .ts-toast-body{text-align:center}.ts-toast-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}.ts-toast-container .ts-toast.ts-toast-show{opacity:1;transform:translateY(0)}@keyframes ts-toast-slide-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes ts-toast-slide-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes ts-toast-slide-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes ts-toast-slide-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes ts-toast-zoom-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes ts-toast-zoom-out{from{transform:scale(1)}to{transform:scale(0)}}@keyframes ts-toast-flip{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}.ts-toast-container .ts-toast-icon{font-size:1.2rem}.ts-toast-container .ts-toast-success .ts-toast-icon{color:var(--toast-success-color,#66ee78)}.ts-toast-container .ts-toast-error .ts-toast-icon{color:var(--toast-error-color,#ef4444)}.ts-toast-container .ts-toast-loader{width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid var(--toast-loader-color,#66ee78);border-radius:50%;animation:ts-toast-spin 1s linear infinite}@keyframes ts-toast-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.ts-toast-container .ts-toast-loader.done{animation:none;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast-icon{font-size:1.2rem;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast.ts-toast-show .ts-toast-icon{opacity:1}@keyframes progress-bar{0%{width:0%}100%{width:100%}}@keyframes ts-toast-slide-top-reverse{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes ts-toast-slide-bottom-reverse{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes ts-toast-slide-left-reverse{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes ts-toast-slide-right-reverse{from{transform:translateX(0)}to{transform:translateX(100%)}}.ts-toast-container .ts-toast.ts-toast-slide-out{animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}.ts-toast-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2147483646}.ts-toast-d-flex{display:inline-flex;align-items:center}body.ts-toast-no-scroll{overflow:hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsirosgeorge/toastnotification",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "a toast notification plugin",
   "main": "toast.min.js",
   "scripts": {
@@ -15,7 +15,8 @@
     "toast.js",
     "toast.min.js",
     "assets/css/toast.css",
-    "assets/css/toast.min.css"
+  "assets/css/toast.min.css",
+  "assets/img/"
   ],
   "repository": {
     "type": "git",

package/toast.js

@@ -4,7 +4,7 @@
     // Dynamically load the external CSS file
     const link = document.createElement("link");
     link.rel = "stylesheet";
-    link.href = "https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/assets/css/toast.min.css";// Pinned to current release
+    link.href = "https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/css/toast.min.css";// Pinned to current release
     document.head.appendChild(link);
 
     // Inject minimal styles for confirm actions and overlay (kept tiny to avoid breaking existing CSS)
@@ -75,11 +75,22 @@
 
         // Pick an animation intelligently when one wasn't explicitly provided
         const resolvedAnimation = (typeof options.animation === 'string' && options.animation.trim())
-            ? options.animation.trim()
-            : (isConfirm ? 'zoom-in' : (position.startsWith('top') ? 'slide-top'
-                : position.startsWith('bottom') ? 'slide-bottom'
-                : position.endsWith('left') ? 'slide-left'
-                : 'slide-right'));
+            ? (function mapAnim(a){
+                const m = {
+                    'slide-top':'ts-toast-slide-top',
+                    'slide-bottom':'ts-toast-slide-bottom',
+                    'slide-left':'ts-toast-slide-left',
+                    'slide-right':'ts-toast-slide-right',
+                    'zoom-in':'ts-toast-zoom-in',
+                    'zoom-out':'ts-toast-zoom-out',
+                    'flip':'ts-toast-flip'
+                };
+                return m[a] || a;
+            })(options.animation.trim())
+            : (isConfirm ? 'ts-toast-zoom-in' : (position.startsWith('top') ? 'ts-toast-slide-top'
+                : position.startsWith('bottom') ? 'ts-toast-slide-bottom'
+                : position.endsWith('left') ? 'ts-toast-slide-left'
+                : 'ts-toast-slide-right'));
 
         // helper: remove with reverse animation and cleanup
         const removeWithAnimation = (el, callback) => {
@@ -88,25 +99,25 @@
 
             // Determine the reverse animation based on the current animation
             let reverseAnimation = '';
-            if (currentAnimation.includes('slide-top')) {
-                reverseAnimation = 'slide-top-reverse';
-            } else if (currentAnimation.includes('slide-bottom')) {
-                reverseAnimation = 'slide-bottom-reverse';
-            } else if (currentAnimation.includes('slide-left')) {
-                reverseAnimation = 'slide-left-reverse';
-            } else if (currentAnimation.includes('slide-right')) {
-                reverseAnimation = 'slide-right-reverse';
-            } else if (currentAnimation.includes('zoom-in')) {
-                reverseAnimation = 'zoom-out';
+            if (currentAnimation.includes('ts-toast-slide-top')) {
+                reverseAnimation = 'ts-toast-slide-top-reverse';
+            } else if (currentAnimation.includes('ts-toast-slide-bottom')) {
+                reverseAnimation = 'ts-toast-slide-bottom-reverse';
+            } else if (currentAnimation.includes('ts-toast-slide-left')) {
+                reverseAnimation = 'ts-toast-slide-left-reverse';
+            } else if (currentAnimation.includes('ts-toast-slide-right')) {
+                reverseAnimation = 'ts-toast-slide-right-reverse';
+            } else if (currentAnimation.includes('ts-toast-zoom-in')) {
+                reverseAnimation = 'ts-toast-zoom-out';
             }
 
             // Apply the reverse animation dynamically
-            el.classList.add('slide-out');
+            el.classList.add('ts-toast-slide-out');
             el.style.animation = `${reverseAnimation} 0.5s ease`;
 
             // Wait for the reverse animation to finish before removing the toast
             setTimeout(() => {
-                el.classList.remove('show', 'slide-out');
+                el.classList.remove('ts-toast-show', 'ts-toast-slide-out');
                 el.style.animation = '';
                 if (el.parentNode) el.parentNode.removeChild(el);
                 if (typeof callback === 'function') callback();
@@ -135,7 +146,7 @@
             img.style.height = '30px';
             img.style.objectFit = 'contain';
 
-            const baseUrl = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/assets/img/';
+            const baseUrl = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/';
             const timestamp = new Date().getTime(); // 🔄 force refresh
 
             if (type === 'success') {
@@ -282,7 +293,7 @@
 
         // Show Toast with animation
         setTimeout(() => {
-            toastElement.classList.add('show');
+            toastElement.classList.add('ts-toast-show');
         }, 100);
 
         // Handle Loader and Icon
@@ -403,13 +414,13 @@
             img.style.objectFit = 'contain';
 
             if (type === 'success') {
-                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/assets/img/success.gif';
+                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/success.gif';
             } else if (type === 'error') {
-                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/assets/img/error.gif';
+                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/error.gif';
             } else if (type === 'info') {
-                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/assets/img/info.gif';
+                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/info.gif';
             } else if (type === 'warning') {
-                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/assets/img/warning.gif';
+                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/warning.gif';
             }
 
             iconElement.appendChild(img);
@@ -445,10 +456,10 @@
                 else if (currentAnimation.includes('slide-left')) reverseAnimation = 'slide-left-reverse';
                 else if (currentAnimation.includes('slide-right')) reverseAnimation = 'slide-right-reverse';
                 else if (currentAnimation.includes('zoom-in')) reverseAnimation = 'zoom-out';
-                el.classList.add('slide-out');
+                el.classList.add('ts-toast-slide-out');
                 el.style.animation = `${reverseAnimation} 0.5s ease`;
                 setTimeout(() => {
-                    el.classList.remove('show', 'slide-out');
+                    el.classList.remove('ts-toast-show', 'ts-toast-slide-out');
                     el.style.animation = '';
                     if (el.parentNode) el.parentNode.removeChild(el);
                     if (typeof cb === 'function') cb();
@@ -474,7 +485,7 @@
 
         // Force reflow and add animation after DOM insert
         requestAnimationFrame(() => {
-            toastElement.classList.add('show');
+            toastElement.classList.add('ts-toast-show');
         });
 
         const loader = toastElement.querySelector('.ts-toast-loader');
@@ -517,10 +528,10 @@
                 else if (currentAnimation.includes('slide-left')) reverseAnimation = 'slide-left-reverse';
                 else if (currentAnimation.includes('slide-right')) reverseAnimation = 'slide-right-reverse';
                 else if (currentAnimation.includes('zoom-in')) reverseAnimation = 'zoom-out';
-                toastElement.classList.add('slide-out');
+                toastElement.classList.add('ts-toast-slide-out');
                 toastElement.style.animation = `${reverseAnimation} 0.5s ease`;
                 setTimeout(() => {
-                    toastElement.classList.remove('show', 'slide-out');
+                    toastElement.classList.remove('ts-toast-show', 'ts-toast-slide-out');
                     toastElement.style.animation = '';
                     if (toastElement.parentNode) toastElement.parentNode.removeChild(toastElement);
                 }, 500);

package/toast.min.js

@@ -1 +1 @@
-!function(){"use strict";const t=document.createElement("link");t.rel="stylesheet",t.href="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/assets/css/toast.min.css",document.head.appendChild(t),function(){const t="ts-toast-inline-extras";if(document.getElementById(t))return;const e=document.createElement("style");e.id=t,e.textContent="\n            /* Ensure center positions exist even if external CSS lacks them */\n            .ts-toast-container.top-center { top: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }\n            .ts-toast-container.bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }\n            .ts-toast-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2147483646; }\n            .ts-toast.ts-toast-confirm { max-width: min(92vw, 440px); width: max(320px, 60%); flex-direction: column; gap: 12px; padding: 16px 20px; background: var(--toast-bg, #fff); color: var(--toast-color, #000); border: 1px solid var(--toast-border, #e5e7eb); border-radius: 12px; box-shadow: var(--toast-shadow, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)); text-align: center; }\n            .ts-toast.ts-toast-confirm .ts-toast-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }\n            .ts-toast-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }\n            .ts-toast-btn { appearance: none; border: 0; padding: 8px 12px; border-radius: 8px; font-weight: 600; cursor: pointer; }\n            .ts-toast-btn.cancel { background: #e9ecef; color: #1f2937; }\n            .ts-toast-btn.confirm { background: #3b82f6; color: #fff; }\n            .ts-toast.ts-toast-error .ts-toast-btn.confirm,\n            .ts-toast.ts-toast-warning .ts-toast-btn.confirm { background: #ef4444; color: #fff; }\n            .ts-toast.ts-toast-confirm .ts-toast-title { font-weight: 700; font-size: 1.05rem; margin-top: 4px; }\n            .ts-toast.ts-toast-confirm .ts-toast-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 999px; border: 0; background: transparent; color: #6b7280; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }\n            .ts-toast.ts-toast-confirm .ts-toast-close:hover { background: rgba(0,0,0,0.06); }\n            .ts-toast.ts-toast-confirm .ts-toast-icon { width: 64px; height: 64px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }\n            .ts-toast.ts-toast-confirm .ts-toast-icon img { width: 36px; height: 36px; }\n            .ts-toast.ts-toast-confirm.ts-toast-success .ts-toast-icon { background: #dcfce7; }\n            .ts-toast.ts-toast-confirm.ts-toast-info .ts-toast-icon { background: #dbeafe; }\n            .ts-toast.ts-toast-confirm.ts-toast-warning .ts-toast-icon { background: #fef3c7; }\n            .ts-toast.ts-toast-confirm.ts-toast-error .ts-toast-icon { background: #fee2e2; }\n        ",document.head.appendChild(e)}();const e=function(t,e={}){const{position:o="top-right",animation:s="slide-right",type:n="info",duration:i=3e3,icon:a=null,showLoader:l=!1,mode:r="alert",title:c=null,confirmText:d="Yes",cancelText:m="No",confirmButtonBg:u=null,confirmButtonColor:p=null,cancelButtonBg:f=null,cancelButtonColor:g=null,onConfirm:h=null,onCancel:y=null,onResult:v=null,useOverlay:x=!0,closeOnOverlayClick:b=!0,showClose:C=!1,dismissOnClick:w=!0,onClick:L=null,onShow:N=null,onDismiss:E=null}=e,k="confirm"===r||"swal"===r,T="string"==typeof e.animation&&e.animation.trim()?e.animation.trim():k?"zoom-in":o.startsWith("top")?"slide-top":o.startsWith("bottom")?"slide-bottom":o.endsWith("left")?"slide-left":"slide-right",$=(t,e)=>{const o=t.style.animation||"";let s="";o.includes("slide-top")?s="slide-top-reverse":o.includes("slide-bottom")?s="slide-bottom-reverse":o.includes("slide-left")?s="slide-left-reverse":o.includes("slide-right")?s="slide-right-reverse":o.includes("zoom-in")&&(s="zoom-out"),t.classList.add("slide-out"),t.style.animation=`${s} 0.5s ease`,setTimeout((()=>{t.classList.remove("show","slide-out"),t.style.animation="",t.parentNode&&t.parentNode.removeChild(t),"function"==typeof e&&e()}),500)},j=document.createElement("div");j.className=`ts-toast ts-toast-${n}${k?" ts-toast-confirm":""}`,j.style.animation=`${T} 0.5s ease`,k||(j.style.flexDirection="row-reverse",j.style.justifyContent="flex-end");const _=document.createElement("span");if(_.className="ts-toast-icon",_.style.display="flex",a)_.textContent=a;else{const t=document.createElement("img");t.src="",t.style.width="30px",t.style.height="30px",t.style.objectFit="contain";const e="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/assets/img/",o=(new Date).getTime();"success"===n?t.src=`${e}success.gif?t=${o}`:"error"===n?t.src=`${e}error.gif?t=${o}`:"info"===n?t.src=`${e}info.gif?t=${o}`:"warning"===n&&(t.src=`${e}warning.gif?t=${o}`),_.appendChild(t)}const R=document.createElement("div");R.className="ts-toast-body",R.innerHTML=t;let B=null;if(k){if(B=document.createElement("div"),B.className="ts-toast-content",B.appendChild(_),c){const t=document.createElement("div");t.className="ts-toast-title",t.textContent=c,B.appendChild(t)}B.appendChild(R),j.appendChild(B)}else j.appendChild(R);let z=null,S=null;if(k){z=document.createElement("div"),z.className="ts-toast-actions";const t=document.createElement("button");t.className="ts-toast-btn cancel",t.textContent=m;const e=document.createElement("button");e.className="ts-toast-btn confirm",e.textContent=d,f&&(t.style.background=f),g&&(t.style.color=g),u&&(e.style.background=u),p&&(e.style.color=p),z.appendChild(t),z.appendChild(e),j.appendChild(z),j.result=new Promise((t=>{S=t}));const o=t=>{S&&S(t),t&&"function"==typeof h&&h(j),t||"function"!=typeof y||y(j),"function"==typeof v&&v(t,j),$(j,(()=>{E&&"function"==typeof E&&E(j),O&&O.parentNode&&O.parentNode.removeChild(O)}))};t.addEventListener("click",(t=>{t.stopPropagation(),o(!1)})),e.addEventListener("click",(t=>{t.stopPropagation(),o(!0)}))}let q=null;l&&(q=document.createElement("div"),q.className="ts-toast-loader",j.appendChild(q));let O=null;if(k&&x){if(O=document.createElement("div"),O.className="ts-toast-overlay",document.body.appendChild(O),O.appendChild(j),C){const t=document.createElement("button");t.className="ts-toast-close",t.setAttribute("aria-label","Close"),t.innerHTML="×",t.addEventListener("click",(t=>{t.stopPropagation(),$(j,(()=>{E&&"function"==typeof E&&E(j),O&&O.parentNode&&O.parentNode.removeChild(O)}))})),j.appendChild(t)}b&&O.addEventListener("click",(t=>{t.target===O&&(j.result&&"function"==typeof S&&S(!1),$(j,(()=>{E&&"function"==typeof E&&E(j),O&&O.parentNode&&O.parentNode.removeChild(O)})))}))}else{let t=document.querySelector(`.ts-toast-container.${o}`);t||(t=document.createElement("div"),t.className=`ts-toast-container ${o}`,document.body.appendChild(t)),t.appendChild(j)}if(N&&"function"==typeof N&&N(j),setTimeout((()=>{j.classList.add("show")}),100),l&&q&&setTimeout((()=>{j._managedByLoading||(q.classList.add("done"),q.remove(),j.contains(_)||(k&&B?B.appendChild(_):j.appendChild(_)))}),2e3),l||k||j.contains(_)||j.appendChild(_),!k&&i>0){const t=setTimeout((()=>{$(j,(()=>{E&&"function"==typeof E&&E(j)}))}),i);j._autoRemove=t}if(!k&&w&&j.addEventListener("click",(()=>{j._autoRemove&&clearTimeout(j._autoRemove),$(j,(()=>{L&&"function"==typeof L&&L(j),E&&"function"==typeof E&&E(j)}))})),!k){let t=0,e=0;j.addEventListener("touchstart",(e=>{t=e.changedTouches[0].screenX})),j.addEventListener("touchend",(o=>{e=o.changedTouches[0].screenX,Math.abs(t-e)>50&&(j._autoRemove&&clearTimeout(j._autoRemove),$(j,(()=>{E&&"function"==typeof E&&E(j)})))}))}return j};e.success=function(t,o){e(t,{...o,type:"success"})},e.error=function(t,o){e(t,{...o,type:"error"})},e.update=function(t,e,o={}){const{type:s=null,icon:n=null,showLoader:i=!1,duration:a=3e3,position:l="top-right",onClick:r=null,onShow:c=null,onDismiss:d=null}=o,m=t.querySelector(".ts-toast-loader"),u=t.querySelector(".ts-toast-icon");m&&m.remove(),s&&(t.className=`ts-toast ts-toast-${s} show ${l}`);const p=t.querySelector(".ts-toast-body");p&&(p.innerHTML=e),u&&u.remove();const f=document.createElement("span");if(f.className="ts-toast-icon",f.style.display="flex",n)f.textContent=n;else{const t=document.createElement("img");t.style.width="30px",t.style.height="30px",t.style.objectFit="contain","success"===s?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/assets/img/success.gif":"error"===s?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/assets/img/error.gif":"info"===s?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/assets/img/info.gif":"warning"===s&&(t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.0/assets/img/warning.gif"),f.appendChild(t)}if(t.appendChild(f),i){const e=document.createElement("div");e.className="ts-toast-loader",t.appendChild(e),setTimeout((()=>{e.classList.add("done")}),2e3)}t._autoRemove&&clearTimeout(t._autoRemove);const g=setTimeout((()=>{((t,e)=>{const o=t.style.animation||"";let s="";o.includes("slide-top")?s="slide-top-reverse":o.includes("slide-bottom")?s="slide-bottom-reverse":o.includes("slide-left")?s="slide-left-reverse":o.includes("slide-right")?s="slide-right-reverse":o.includes("zoom-in")&&(s="zoom-out"),t.classList.add("slide-out"),t.style.animation=`${s} 0.5s ease`,setTimeout((()=>{t.classList.remove("show","slide-out"),t.style.animation="",t.parentNode&&t.parentNode.removeChild(t),"function"==typeof e&&e()}),500)})(t,(()=>{d&&"function"==typeof d&&d(t)}))}),a);t._autoRemove=g},e.loading=function(t,o={}){const s=e(t,{...o,type:o.type||"info",duration:0,showLoader:!0,icon:null});requestAnimationFrame((()=>{s.classList.add("show")}));const n=s.querySelector(".ts-toast-loader");let i=s.querySelector(".ts-toast-icon");return i||(i=document.createElement("span"),i.className="ts-toast-icon",i.style.display="flex",s.appendChild(i)),s._managedByLoading=!0,n&&setTimeout((()=>{s._managedByLoading||n.classList.add("done")}),2e3),{update:(t,o={})=>{s._managedByLoading=!1,e.update(s,t,{...o,showLoader:!1})},close:()=>{s._autoRemove&&clearTimeout(s._autoRemove);const t=s.style.animation||"";let e="";t.includes("slide-top")?e="slide-top-reverse":t.includes("slide-bottom")?e="slide-bottom-reverse":t.includes("slide-left")?e="slide-left-reverse":t.includes("slide-right")?e="slide-right-reverse":t.includes("zoom-in")&&(e="zoom-out"),s.classList.add("slide-out"),s.style.animation=`${e} 0.5s ease`,setTimeout((()=>{s.classList.remove("show","slide-out"),s.style.animation="",s.parentNode&&s.parentNode.removeChild(s)}),500)}}},e.confirm=function(t,o={}){return new Promise((s=>{e(t,{...o,mode:"confirm",duration:0,dismissOnClick:!1,onResult:t=>s(!!t)})}))},window.toast=e}();
+!function(){"use strict";const t=document.createElement("link");t.rel="stylesheet",t.href="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/css/toast.min.css",document.head.appendChild(t),function(){const t="ts-toast-inline-extras";if(document.getElementById(t))return;const e=document.createElement("style");e.id=t,e.textContent="\n            /* Ensure center positions exist even if external CSS lacks them */\n            .ts-toast-container.top-center { top: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }\n            .ts-toast-container.bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }\n            .ts-toast-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2147483646; }\n            .ts-toast.ts-toast-confirm { max-width: min(92vw, 440px); width: max(320px, 60%); flex-direction: column; gap: 12px; padding: 16px 20px; background: var(--toast-bg, #fff); color: var(--toast-color, #000); border: 1px solid var(--toast-border, #e5e7eb); border-radius: 12px; box-shadow: var(--toast-shadow, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)); text-align: center; }\n            .ts-toast.ts-toast-confirm .ts-toast-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }\n            .ts-toast-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }\n            .ts-toast-btn { appearance: none; border: 0; padding: 8px 12px; border-radius: 8px; font-weight: 600; cursor: pointer; }\n            .ts-toast-btn.cancel { background: #e9ecef; color: #1f2937; }\n            .ts-toast-btn.confirm { background: #3b82f6; color: #fff; }\n            .ts-toast.ts-toast-error .ts-toast-btn.confirm,\n            .ts-toast.ts-toast-warning .ts-toast-btn.confirm { background: #ef4444; color: #fff; }\n            .ts-toast.ts-toast-confirm .ts-toast-title { font-weight: 700; font-size: 1.05rem; margin-top: 4px; }\n            .ts-toast.ts-toast-confirm .ts-toast-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 999px; border: 0; background: transparent; color: #6b7280; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }\n            .ts-toast.ts-toast-confirm .ts-toast-close:hover { background: rgba(0,0,0,0.06); }\n            .ts-toast.ts-toast-confirm .ts-toast-icon { width: 64px; height: 64px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }\n            .ts-toast.ts-toast-confirm .ts-toast-icon img { width: 36px; height: 36px; }\n            .ts-toast.ts-toast-confirm.ts-toast-success .ts-toast-icon { background: #dcfce7; }\n            .ts-toast.ts-toast-confirm.ts-toast-info .ts-toast-icon { background: #dbeafe; }\n            .ts-toast.ts-toast-confirm.ts-toast-warning .ts-toast-icon { background: #fef3c7; }\n            .ts-toast.ts-toast-confirm.ts-toast-error .ts-toast-icon { background: #fee2e2; }\n        ",document.head.appendChild(e)}();const e=function(t,e={}){const{position:s="top-right",animation:o="slide-right",type:n="info",duration:i=3e3,icon:a=null,showLoader:l=!1,mode:r="alert",title:c=null,confirmText:d="Yes",cancelText:m="No",confirmButtonBg:u=null,confirmButtonColor:p=null,cancelButtonBg:f=null,cancelButtonColor:g=null,onConfirm:h=null,onCancel:y=null,onResult:v=null,useOverlay:x=!0,closeOnOverlayClick:b=!0,showClose:C=!1,dismissOnClick:w=!0,onClick:L=null,onShow:N=null,onDismiss:E=null}=e,k="confirm"===r||"swal"===r,T="string"==typeof e.animation&&e.animation.trim()?{"slide-top":"ts-toast-slide-top","slide-bottom":"ts-toast-slide-bottom","slide-left":"ts-toast-slide-left","slide-right":"ts-toast-slide-right","zoom-in":"ts-toast-zoom-in","zoom-out":"ts-toast-zoom-out",flip:"ts-toast-flip"}[$=e.animation.trim()]||$:k?"ts-toast-zoom-in":s.startsWith("top")?"ts-toast-slide-top":s.startsWith("bottom")?"ts-toast-slide-bottom":s.endsWith("left")?"ts-toast-slide-left":"ts-toast-slide-right";var $;const j=(t,e)=>{const s=t.style.animation||"";let o="";s.includes("ts-toast-slide-top")?o="ts-toast-slide-top-reverse":s.includes("ts-toast-slide-bottom")?o="ts-toast-slide-bottom-reverse":s.includes("ts-toast-slide-left")?o="ts-toast-slide-left-reverse":s.includes("ts-toast-slide-right")?o="ts-toast-slide-right-reverse":s.includes("ts-toast-zoom-in")&&(o="ts-toast-zoom-out"),t.classList.add("ts-toast-slide-out"),t.style.animation=`${o} 0.5s ease`,setTimeout((()=>{t.classList.remove("ts-toast-show","ts-toast-slide-out"),t.style.animation="",t.parentNode&&t.parentNode.removeChild(t),"function"==typeof e&&e()}),500)},z=document.createElement("div");z.className=`ts-toast ts-toast-${n}${k?" ts-toast-confirm":""}`,z.style.animation=`${T} 0.5s ease`,k||(z.style.flexDirection="row-reverse",z.style.justifyContent="flex-end");const _=document.createElement("span");if(_.className="ts-toast-icon",_.style.display="flex",a)_.textContent=a;else{const t=document.createElement("img");t.src="",t.style.width="30px",t.style.height="30px",t.style.objectFit="contain";const e="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/",s=(new Date).getTime();"success"===n?t.src=`${e}success.gif?t=${s}`:"error"===n?t.src=`${e}error.gif?t=${s}`:"info"===n?t.src=`${e}info.gif?t=${s}`:"warning"===n&&(t.src=`${e}warning.gif?t=${s}`),_.appendChild(t)}const R=document.createElement("div");R.className="ts-toast-body",R.innerHTML=t;let B=null;if(k){if(B=document.createElement("div"),B.className="ts-toast-content",B.appendChild(_),c){const t=document.createElement("div");t.className="ts-toast-title",t.textContent=c,B.appendChild(t)}B.appendChild(R),z.appendChild(B)}else z.appendChild(R);let S=null,q=null;if(k){S=document.createElement("div"),S.className="ts-toast-actions";const t=document.createElement("button");t.className="ts-toast-btn cancel",t.textContent=m;const e=document.createElement("button");e.className="ts-toast-btn confirm",e.textContent=d,f&&(t.style.background=f),g&&(t.style.color=g),u&&(e.style.background=u),p&&(e.style.color=p),S.appendChild(t),S.appendChild(e),z.appendChild(S),z.result=new Promise((t=>{q=t}));const s=t=>{q&&q(t),t&&"function"==typeof h&&h(z),t||"function"!=typeof y||y(z),"function"==typeof v&&v(t,z),j(z,(()=>{E&&"function"==typeof E&&E(z),P&&P.parentNode&&P.parentNode.removeChild(P)}))};t.addEventListener("click",(t=>{t.stopPropagation(),s(!1)})),e.addEventListener("click",(t=>{t.stopPropagation(),s(!0)}))}let O=null;l&&(O=document.createElement("div"),O.className="ts-toast-loader",z.appendChild(O));let P=null;if(k&&x){if(P=document.createElement("div"),P.className="ts-toast-overlay",document.body.appendChild(P),P.appendChild(z),C){const t=document.createElement("button");t.className="ts-toast-close",t.setAttribute("aria-label","Close"),t.innerHTML="×",t.addEventListener("click",(t=>{t.stopPropagation(),j(z,(()=>{E&&"function"==typeof E&&E(z),P&&P.parentNode&&P.parentNode.removeChild(P)}))})),z.appendChild(t)}b&&P.addEventListener("click",(t=>{t.target===P&&(z.result&&"function"==typeof q&&q(!1),j(z,(()=>{E&&"function"==typeof E&&E(z),P&&P.parentNode&&P.parentNode.removeChild(P)})))}))}else{let t=document.querySelector(`.ts-toast-container.${s}`);t||(t=document.createElement("div"),t.className=`ts-toast-container ${s}`,document.body.appendChild(t)),t.appendChild(z)}if(N&&"function"==typeof N&&N(z),setTimeout((()=>{z.classList.add("ts-toast-show")}),100),l&&O&&setTimeout((()=>{z._managedByLoading||(O.classList.add("done"),O.remove(),z.contains(_)||(k&&B?B.appendChild(_):z.appendChild(_)))}),2e3),l||k||z.contains(_)||z.appendChild(_),!k&&i>0){const t=setTimeout((()=>{j(z,(()=>{E&&"function"==typeof E&&E(z)}))}),i);z._autoRemove=t}if(!k&&w&&z.addEventListener("click",(()=>{z._autoRemove&&clearTimeout(z._autoRemove),j(z,(()=>{L&&"function"==typeof L&&L(z),E&&"function"==typeof E&&E(z)}))})),!k){let t=0,e=0;z.addEventListener("touchstart",(e=>{t=e.changedTouches[0].screenX})),z.addEventListener("touchend",(s=>{e=s.changedTouches[0].screenX,Math.abs(t-e)>50&&(z._autoRemove&&clearTimeout(z._autoRemove),j(z,(()=>{E&&"function"==typeof E&&E(z)})))}))}return z};e.success=function(t,s){e(t,{...s,type:"success"})},e.error=function(t,s){e(t,{...s,type:"error"})},e.update=function(t,e,s={}){const{type:o=null,icon:n=null,showLoader:i=!1,duration:a=3e3,position:l="top-right",onClick:r=null,onShow:c=null,onDismiss:d=null}=s,m=t.querySelector(".ts-toast-loader"),u=t.querySelector(".ts-toast-icon");m&&m.remove(),o&&(t.className=`ts-toast ts-toast-${o} show ${l}`);const p=t.querySelector(".ts-toast-body");p&&(p.innerHTML=e),u&&u.remove();const f=document.createElement("span");if(f.className="ts-toast-icon",f.style.display="flex",n)f.textContent=n;else{const t=document.createElement("img");t.style.width="30px",t.style.height="30px",t.style.objectFit="contain","success"===o?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/success.gif":"error"===o?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/error.gif":"info"===o?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/info.gif":"warning"===o&&(t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.2.0/assets/img/warning.gif"),f.appendChild(t)}if(t.appendChild(f),i){const e=document.createElement("div");e.className="ts-toast-loader",t.appendChild(e),setTimeout((()=>{e.classList.add("done")}),2e3)}t._autoRemove&&clearTimeout(t._autoRemove);const g=setTimeout((()=>{((t,e)=>{const s=t.style.animation||"";let o="";s.includes("slide-top")?o="slide-top-reverse":s.includes("slide-bottom")?o="slide-bottom-reverse":s.includes("slide-left")?o="slide-left-reverse":s.includes("slide-right")?o="slide-right-reverse":s.includes("zoom-in")&&(o="zoom-out"),t.classList.add("ts-toast-slide-out"),t.style.animation=`${o} 0.5s ease`,setTimeout((()=>{t.classList.remove("ts-toast-show","ts-toast-slide-out"),t.style.animation="",t.parentNode&&t.parentNode.removeChild(t),"function"==typeof e&&e()}),500)})(t,(()=>{d&&"function"==typeof d&&d(t)}))}),a);t._autoRemove=g},e.loading=function(t,s={}){const o=e(t,{...s,type:s.type||"info",duration:0,showLoader:!0,icon:null});requestAnimationFrame((()=>{o.classList.add("ts-toast-show")}));const n=o.querySelector(".ts-toast-loader");let i=o.querySelector(".ts-toast-icon");return i||(i=document.createElement("span"),i.className="ts-toast-icon",i.style.display="flex",o.appendChild(i)),o._managedByLoading=!0,n&&setTimeout((()=>{o._managedByLoading||n.classList.add("done")}),2e3),{update:(t,s={})=>{o._managedByLoading=!1,e.update(o,t,{...s,showLoader:!1})},close:()=>{o._autoRemove&&clearTimeout(o._autoRemove);const t=o.style.animation||"";let e="";t.includes("slide-top")?e="slide-top-reverse":t.includes("slide-bottom")?e="slide-bottom-reverse":t.includes("slide-left")?e="slide-left-reverse":t.includes("slide-right")?e="slide-right-reverse":t.includes("zoom-in")&&(e="zoom-out"),o.classList.add("ts-toast-slide-out"),o.style.animation=`${e} 0.5s ease`,setTimeout((()=>{o.classList.remove("ts-toast-show","ts-toast-slide-out"),o.style.animation="",o.parentNode&&o.parentNode.removeChild(o)}),500)}}},e.confirm=function(t,s={}){return new Promise((o=>{e(t,{...s,mode:"confirm",duration:0,dismissOnClick:!1,onResult:t=>o(!!t)})}))},window.toast=e}();