@tsirosgeorge/toastnotification 5.0.7 → 5.1.1

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@{LATEST VERSION GOES HERE}/toast.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/toast.min.js"></script>
 ```
 
 ## 📦 Include package via npm
@@ -35,12 +35,58 @@ toast('Data saved successfully!', {
 });
 ```
 
+### ✅ Convenience helpers
+```javascript
+toast.success('Saved!');
+toast.error('Failed!');
+```
+
+### ⚠️ Confirm (SweetAlert-like)
+- Promise API
+```javascript
+const ok = await toast.confirm('This will delete the file.', {
+  title: 'Are you sure?',
+  type: 'warning',
+  confirmText: 'Yes, delete',
+  cancelText: 'Cancel',
+  useOverlay: true,
+  closeOnOverlayClick: true,
+  showClose: true,
+  // optional custom button colors
+  confirmButtonBg: '#10b981',
+  confirmButtonColor: '#fff',
+  cancelButtonBg: '#e5e7eb',
+  cancelButtonColor: '#1f2937',
+});
+if (ok) {
+  // proceed
+}
+```
+
+- Callback API
+```javascript
+toast('Are you sure?', {
+  mode: 'confirm',
+  type: 'warning',
+  title: 'Confirm action',
+  onConfirm: () => console.log('YES'),
+  onCancel: () => console.log('NO'),
+});
+```
+
+### ⏳ Loading → Update
+```javascript
+const t = toast.loading('Uploading…', { type: 'info' });
+// later
+t.update('Done!', { type: 'success', duration: 2000 });
+```
+
 ## 🛠️ Available Options
 
 | Option       | Type       | Default       | Description                                                                                   |
 |--------------|------------|---------------|-----------------------------------------------------------------------------------------------|
-| `position`   | `string`   | `'top-right'` | Position of the toast container. Possible values: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`, `top-center`. |
-| `animation`  | `string`   | `'slide-right'` | Animation effect applied to the toast when it shows and hides. Examples: `'fade'`, `'slide-right'`, `'slide-left'`, `'slide-top'`, `'slide-bottom'`, `'zoom-in'`. The hide animation reverses the show animation automatically. |
+| `position`   | `string`   | `'top-right'` | Container position. Values: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`, `'top-center'`, `'bottom-center'`. |
+| `animation`  | `string`   | `'slide-right'` | Show animation. Examples: `'slide-right'`, `'slide-left'`, `'slide-top'`, `'slide-bottom'`, `'zoom-in'`. Hide uses reverse automatically. |
 | `type`       | `string`   | `'info'`      | Type of toast, controlling icon and styling. Possible values: `'info'`, `'success'`, `'error'`, `'warning'`. |
 | `duration`   | `number`   | `3000`        | Duration in milliseconds before the toast automatically dismisses.                            |
 | `icon`       | `string` or `null` | `null` | Optional custom icon displayed as text (e.g., emoji) before the toast message. If not set, a default GIF icon is used based on the `type`. |
@@ -49,6 +95,24 @@ toast('Data saved successfully!', {
 | `onShow`     | `function` or `null` | `null` | Callback function executed when the toast appears (after it's added to the DOM and shown).   |
 | `onDismiss`  | `function` or `null` | `null` | Callback function executed when the toast is dismissed and removed from the DOM.             |
 
+### 🧩 Confirm-specific options
+| Option | Type | Default | Description |
+|-------|------|---------|-------------|
+| `mode` | `"confirm" | "swal"` | — | Set to show a confirm dialog with Yes/No buttons. |
+| `title` | `string` | `null` | Optional heading shown above the message. |
+| `confirmText` | `string` | `"Yes"` | Confirm button label. |
+| `cancelText` | `string` | `"No"` | Cancel button label. |
+| `useOverlay` | `boolean` | `true` | Dim the background and center the dialog. |
+| `closeOnOverlayClick` | `boolean` | `true` | Clicking the overlay cancels. |
+| `showClose` | `boolean` | `false` | Show a top-right × button. |
+| `confirmButtonBg` | `string` | `null` | Inline background color for confirm button. |
+| `confirmButtonColor` | `string` | `null` | Inline text color for confirm button. |
+| `cancelButtonBg` | `string` | `null` | Inline background color for cancel button. |
+| `cancelButtonColor` | `string` | `null` | Inline text color for cancel button. |
+
+### 🧪 Playground
+Open `index.html` to experiment with all options (message, type, position, animation, duration, icon, loader, confirm title/texts, overlay, close, and button colors).
+
 
 ## 📝 License
 

package/assets/css/toast.css

@@ -76,6 +76,37 @@
     width: auto!important;
 }
 
+/* When toast is used outside a container (e.g., confirm in overlay), keep card styles */
+.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, 0.1), 0 4px 6px -4px rgba(0, 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;
+}
+
 /* Show toast with animation */
 .ts-toast-container .ts-toast.show {
     opacity: 1;
@@ -260,4 +291,26 @@
     animation-duration: 0.5s;
     animation-timing-function: ease-in-out;
     animation-fill-mode: forwards;
+}
+
+/* Overlay for confirm dialogs */
+.ts-toast-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5); /* darker backdrop */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2147483646;
+}
+
+/* Tiny utility: flex icon container */
+.d-flex {
+    display: inline-flex;
+    align-items: center;
+}
+
+/* Prevent scroll behind confirm overlay */
+body.ts-toast-no-scroll {
+    overflow: hidden;
 }

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-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-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}

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "@tsirosgeorge/toastnotification",
-  "version": "5.0.7",
+  "version": "5.1.1",
   "description": "a toast notification plugin",
   "main": "toast.min.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build:css": "cleancss -o assets/css/toast.min.css assets/css/toast.css",
-    "build:js": "terser toast.js --compress --mangle --output toast.min.js",
-    "build": "npm run build:css && npm run build:js",
-    "prepublishOnly": "npm run build"
+      "test": "echo \"Error: no test specified\" && exit 1",
+      "build:css": "cleancss -o assets/css/toast.min.css assets/css/toast.css",
+      "build:js": "terser toast.js --compress --mangle --output toast.min.js",
+      "build": "npm run build:css && npm run build:js",
+      "prepublishOnly": "npm run build",
+      "release": "npm version && git push origin main --follow-tags && npm publish --access public"
   },
   "files": [
     "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,32 +4,128 @@
     // Dynamically load the external CSS file
     const link = document.createElement("link");
     link.rel = "stylesheet";
-    link.href = "https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.0.7/assets/css/toast.min.css";// Update path as needed
+    link.href = "https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/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)
+    (function injectInlineStyles() {
+        const STYLE_ID = 'ts-toast-inline-extras';
+        if (document.getElementById(STYLE_ID)) return;
+        const style = document.createElement('style');
+        style.id = STYLE_ID;
+        style.textContent = `
+            /* Ensure center positions exist even if external CSS lacks them */
+            .ts-toast-container.top-center { top: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }
+            .ts-toast-container.bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }
+            .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; }
+            .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; }
+            .ts-toast.ts-toast-confirm .ts-toast-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
+            .ts-toast-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
+            .ts-toast-btn { appearance: none; border: 0; padding: 8px 12px; border-radius: 8px; font-weight: 600; cursor: pointer; }
+            .ts-toast-btn.cancel { background: #e9ecef; color: #1f2937; }
+            .ts-toast-btn.confirm { background: #3b82f6; color: #fff; }
+            .ts-toast.ts-toast-error .ts-toast-btn.confirm,
+            .ts-toast.ts-toast-warning .ts-toast-btn.confirm { background: #ef4444; color: #fff; }
+            .ts-toast.ts-toast-confirm .ts-toast-title { font-weight: 700; font-size: 1.05rem; margin-top: 4px; }
+            .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; }
+            .ts-toast.ts-toast-confirm .ts-toast-close:hover { background: rgba(0,0,0,0.06); }
+            .ts-toast.ts-toast-confirm .ts-toast-icon { width: 64px; height: 64px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
+            .ts-toast.ts-toast-confirm .ts-toast-icon img { width: 36px; height: 36px; }
+            .ts-toast.ts-toast-confirm.ts-toast-success .ts-toast-icon { background: #dcfce7; }
+            .ts-toast.ts-toast-confirm.ts-toast-info .ts-toast-icon { background: #dbeafe; }
+            .ts-toast.ts-toast-confirm.ts-toast-warning .ts-toast-icon { background: #fef3c7; }
+            .ts-toast.ts-toast-confirm.ts-toast-error .ts-toast-icon { background: #fee2e2; }
+        `;
+        document.head.appendChild(style);
+    })();
+
     const toast = function (message, options = {}) {
         const {
             position = 'top-right',
-            animation = 'slide-right', // Default animation is fade
+            animation = 'slide-right', // Default fallback animation
             type = 'info',
             duration = 3000,
             icon = null,
             showLoader = false,
+            // behavior/mode: 'alert' (default) or 'confirm'/'swal'
+            mode = 'alert',
+            // confirm options (used when mode is 'confirm' or 'swal')
+            title = null,
+            confirmText = 'Yes',
+            cancelText = 'No',
+            // confirm button color customization (optional)
+            confirmButtonBg = null,
+            confirmButtonColor = null,
+            cancelButtonBg = null,
+            cancelButtonColor = null,
+            onConfirm = null,
+            onCancel = null,
+            onResult = null,
+            useOverlay = true,
+            closeOnOverlayClick = true,
+            showClose = false,
+            // interactions
+            dismissOnClick = true, // ignored if confirm-mode
             onClick = null,      // Custom onClick event listener
             onShow = null,       // Custom onShow event listener
             onDismiss = null     // Custom onDismiss event listener
         } = options;
 
-        const toastElement = document.createElement('div');
-        toastElement.className = `ts-toast ts-toast-${type}`;
-        toastElement.style.animation = `${animation} 0.5s ease`; // Default fade animation
-        toastElement.style.flexDirection = 'row-reverse';
-        toastElement.style.justifyContent = 'flex-end';
+        const isConfirm = (mode === 'confirm' || mode === 'swal');
 
-        // Create Icon Element
-        const iconElement = document.createElement('span');
-        iconElement.className = 'ts-toast-icon';
+        // 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'));
+
+        // helper: remove with reverse animation and cleanup
+        const removeWithAnimation = (el, callback) => {
+            // Get the current animation applied to the toast
+            const currentAnimation = el.style.animation || '';
+
+            // 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';
+            }
+
+            // Apply the reverse animation dynamically
+            el.classList.add('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.style.animation = '';
+                if (el.parentNode) el.parentNode.removeChild(el);
+                if (typeof callback === 'function') callback();
+            }, 500);
+        };
+
+    const toastElement = document.createElement('div');
+        toastElement.className = `ts-toast ts-toast-${type}${isConfirm ? ' ts-toast-confirm' : ''}`;
+    toastElement.style.animation = `${resolvedAnimation} 0.5s ease`;
+        // In confirm mode, we stack content vertically; in alert mode keep original layout
+        if (!isConfirm) {
+            toastElement.style.flexDirection = 'row-reverse';
+            toastElement.style.justifyContent = 'flex-end';
+        }
 
+        // Create Icon Element
+    const iconElement = document.createElement('span');
+    iconElement.className = 'ts-toast-icon';
+    iconElement.style.display = 'flex';
         if (icon) {
             iconElement.textContent = icon;
         } else {
@@ -39,7 +135,7 @@
             img.style.height = '30px';
             img.style.objectFit = 'contain';
 
-            const baseUrl = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/';
+            const baseUrl = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/';
             const timestamp = new Date().getTime(); // 🔄 force refresh
 
             if (type === 'success') {
@@ -59,7 +155,68 @@
         const toastBody = document.createElement('div');
         toastBody.className = 'ts-toast-body';
         toastBody.innerHTML = message; // Allow HTML content in message
-        toastElement.appendChild(toastBody);
+
+        // Content row for confirm (icon + text side-by-side)
+        let contentRow = null;
+        if (isConfirm) {
+            contentRow = document.createElement('div');
+            contentRow.className = 'ts-toast-content';
+            contentRow.appendChild(iconElement);
+            if (title) {
+                const titleEl = document.createElement('div');
+                titleEl.className = 'ts-toast-title';
+                titleEl.textContent = title;
+                contentRow.appendChild(titleEl);
+            }
+            contentRow.appendChild(toastBody);
+            toastElement.appendChild(contentRow);
+        } else {
+            toastElement.appendChild(toastBody);
+        }
+
+        // Actions (for confirm mode)
+        let actionsContainer = null;
+        let resultResolver = null;
+        if (isConfirm) {
+            actionsContainer = document.createElement('div');
+            actionsContainer.className = 'ts-toast-actions';
+
+            const cancelBtn = document.createElement('button');
+            cancelBtn.className = 'ts-toast-btn cancel';
+            cancelBtn.textContent = cancelText;
+
+            const confirmBtn = document.createElement('button');
+            confirmBtn.className = 'ts-toast-btn confirm';
+            confirmBtn.textContent = confirmText;
+
+            // Apply custom button colors if provided (inline style overrides theme defaults)
+            if (cancelButtonBg) cancelBtn.style.background = cancelButtonBg;
+            if (cancelButtonColor) cancelBtn.style.color = cancelButtonColor;
+            if (confirmButtonBg) confirmBtn.style.background = confirmButtonBg;
+            if (confirmButtonColor) confirmBtn.style.color = confirmButtonColor;
+
+            actionsContainer.appendChild(cancelBtn);
+            actionsContainer.appendChild(confirmBtn);
+            toastElement.appendChild(actionsContainer);
+
+            // Create a Promise that resolves on user choice; expose via property
+            toastElement.result = new Promise((resolve) => { resultResolver = resolve; });
+
+            const resolveAndClose = (value) => {
+                if (resultResolver) resultResolver(value);
+                if (value && typeof onConfirm === 'function') onConfirm(toastElement);
+                if (!value && typeof onCancel === 'function') onCancel(toastElement);
+                if (typeof onResult === 'function') onResult(value, toastElement);
+                removeWithAnimation(toastElement, () => {
+                    if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
+                    // Remove overlay if present
+                    if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
+                });
+            };
+
+            cancelBtn.addEventListener('click', (e) => { e.stopPropagation(); resolveAndClose(false); });
+            confirmBtn.addEventListener('click', (e) => { e.stopPropagation(); resolveAndClose(true); });
+        }
 
         // Loader Element
         let loader = null;
@@ -69,16 +226,55 @@
             toastElement.appendChild(loader);
         }
 
-        // Container
-        let container = document.querySelector(`.ts-toast-container.${position}`);
-        if (!container) {
-            container = document.createElement('div');
-            container.className = `ts-toast-container ${position}`;
-            document.body.appendChild(container);
+        // Container/Overlay
+        let overlay = null;
+        if (isConfirm && useOverlay) {
+            overlay = document.createElement('div');
+            overlay.className = 'ts-toast-overlay';
+            document.body.appendChild(overlay);
+            overlay.appendChild(toastElement);
+            if (showClose) {
+                const closeBtn = document.createElement('button');
+                closeBtn.className = 'ts-toast-close';
+                closeBtn.setAttribute('aria-label', 'Close');
+                closeBtn.innerHTML = '×';
+                closeBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    removeWithAnimation(toastElement, () => {
+                        if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
+                        if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
+                    });
+                });
+                toastElement.appendChild(closeBtn);
+            }
+            if (closeOnOverlayClick) {
+                overlay.addEventListener('click', (e) => {
+                    if (e.target === overlay) {
+                        // Overlay background click -> cancel
+                        if (toastElement.result) {
+                            // let the confirm logic close and cleanup
+                            if (typeof resultResolver === 'function') {
+                                resultResolver(false);
+                            }
+                        }
+                        removeWithAnimation(toastElement, () => {
+                            if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
+                            if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
+                        });
+                    }
+                });
+            }
+        } else {
+            // Standard positioned container
+            let container = document.querySelector(`.ts-toast-container.${position}`);
+            if (!container) {
+                container = document.createElement('div');
+                container.className = `ts-toast-container ${position}`;
+                document.body.appendChild(container);
+            }
+            container.appendChild(toastElement);
         }
 
-        container.appendChild(toastElement);
-
         // Trigger the onShow event if provided
         if (onShow && typeof onShow === 'function') {
             onShow(toastElement);
@@ -92,88 +288,63 @@
         // Handle Loader and Icon
         if (showLoader && loader) {
             setTimeout(() => {
+                // Skip auto-complete if controlled by toast.loading()
+                if (toastElement._managedByLoading) return;
                 loader.classList.add('done');
                 loader.remove();
-                if (!toastElement.querySelector('.ts-toast-icon img')) {
-                    toastElement.appendChild(iconElement); // Add icon only if not present
+                if (!toastElement.contains(iconElement)) {
+                    if (isConfirm && contentRow) contentRow.appendChild(iconElement);
+                    else toastElement.appendChild(iconElement); // Add icon only if not present
                 }
             }, 2000); // Simulate a loading period of 2 seconds
         }
         if (!showLoader) {
-            toastElement.appendChild(iconElement);
-        }
-
-        // Auto remove after the duration
-        const autoRemove = setTimeout(() => {
-            // Get the current animation applied to the toast
-            const currentAnimation = toastElement.style.animation || '';
-
-            // 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'; // You could define a zoom-out animation if needed
+            // For confirm, icon already added above inside contentRow; avoid moving it
+            if (!isConfirm && !toastElement.contains(iconElement)) {
+                toastElement.appendChild(iconElement);
             }
+        }
 
-            // Apply the reverse animation dynamically
-            toastElement.classList.add('slide-out');
-            toastElement.style.animation = `${reverseAnimation} 0.5s ease`; // Dynamically apply the reverse animation
-
-            // Wait for the reverse animation to finish before removing the toast
-            setTimeout(() => {
-                toastElement.classList.remove('show', 'slide-out');
-                toastElement.style.animation = ''; // Reset the animation property
-                if (toastElement.parentNode) toastElement.parentNode.removeChild(toastElement);
-                if (onDismiss && typeof onDismiss === 'function') {
-                    onDismiss(toastElement); // Trigger the onDismiss event if provided
-                }
-            }, 500); // Match the duration of the reverse animation
-        }, duration);
-
-        toastElement._autoRemove = autoRemove;
-
-        // Add event listener for closing the toast when clicked
-        toastElement.addEventListener('click', () => {
-            clearTimeout(toastElement._autoRemove); // Clear the auto-remove timeout
-            toastElement.classList.remove('show');
-            setTimeout(() => {
-                if (toastElement.parentNode) toastElement.parentNode.removeChild(toastElement);
-            }, 500); // Match the duration of the closing animation
+        // Auto remove after the duration (skip for confirm mode or when duration <= 0)
+        if (!isConfirm && duration > 0) {
+            const autoRemove = setTimeout(() => {
+                removeWithAnimation(toastElement, () => {
+                    if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
+                });
+            }, duration);
+            toastElement._autoRemove = autoRemove;
+        }
 
-            if (onClick && typeof onClick === 'function') {
-                onClick(toastElement); // Trigger the onClick event if provided
-            }
-        });
+        // Add event listener for closing the toast when clicked (disabled in confirm mode)
+        if (!isConfirm && dismissOnClick) {
+            toastElement.addEventListener('click', () => {
+                if (toastElement._autoRemove) clearTimeout(toastElement._autoRemove); // Clear the auto-remove timeout
+                removeWithAnimation(toastElement, () => {
+                    if (onClick && typeof onClick === 'function') onClick(toastElement);
+                    if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
+                });
+            });
+        }
 
         // Add swipe event listeners for mobile dismissal
-        let touchStartX = 0;
-        let touchEndX = 0;
-
-        toastElement.addEventListener('touchstart', (e) => {
-            touchStartX = e.changedTouches[0].screenX;
-        });
-
-        toastElement.addEventListener('touchend', (e) => {
-            touchEndX = e.changedTouches[0].screenX;
-            if (Math.abs(touchStartX - touchEndX) > 50) { // Swipe distance threshold
-                clearTimeout(toastElement._autoRemove); // Clear the auto-remove timeout
-                toastElement.classList.remove('show');
-                setTimeout(() => {
-                    if (toastElement.parentNode) toastElement.parentNode.removeChild(toastElement);
-                }, 500); // Match the duration of the closing animation
-
-                if (onDismiss && typeof onDismiss === 'function') {
-                    onDismiss(toastElement); // Trigger the onDismiss event if provided
+        if (!isConfirm) {
+            let touchStartX = 0;
+            let touchEndX = 0;
+
+            toastElement.addEventListener('touchstart', (e) => {
+                touchStartX = e.changedTouches[0].screenX;
+            });
+
+            toastElement.addEventListener('touchend', (e) => {
+                touchEndX = e.changedTouches[0].screenX;
+                if (Math.abs(touchStartX - touchEndX) > 50) { // Swipe distance threshold
+                    if (toastElement._autoRemove) clearTimeout(toastElement._autoRemove);
+                    removeWithAnimation(toastElement, () => {
+                        if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
+                    });
                 }
-            }
-        });
+            });
+        }
 
         return toastElement;
     };
@@ -205,7 +376,10 @@
         if (oldLoader) oldLoader.remove();
 
         // Update toast class and message
-        toastElement.className = `toast toast-${type} show ${position}`;
+        if (type) {
+            // keep ts- prefix consistent
+            toastElement.className = `ts-toast ts-toast-${type} show ${position}`;
+        }
         const toastBody = toastElement.querySelector('.ts-toast-body');
         if (toastBody) {
             toastBody.innerHTML = message;
@@ -216,8 +390,9 @@
             oldIcon.remove(); // Remove the old icon first
         }
 
-        const iconElement = document.createElement('span');
-        iconElement.className = 'toast-icon';
+    const iconElement = document.createElement('span');
+    iconElement.className = 'ts-toast-icon';
+    iconElement.style.display = 'flex';
 
         if (icon) {
             iconElement.textContent = icon;
@@ -228,13 +403,13 @@
             img.style.objectFit = 'contain';
 
             if (type === 'success') {
-                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/success.gif';
+                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/success.gif';
             } else if (type === 'error') {
-                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/error.gif';
+                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/error.gif';
             } else if (type === 'info') {
-                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/info.gif';
+                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/info.gif';
             } else if (type === 'warning') {
-                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/warning.gif';
+                img.src = 'https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/warning.gif';
             }
 
             iconElement.appendChild(img);
@@ -246,7 +421,7 @@
         // Handle loader if requested
         if (showLoader) {
             const loader = document.createElement('div');
-            loader.className = 'toast-loader';
+            loader.className = 'ts-toast-loader';
             toastElement.appendChild(loader);
             setTimeout(() => {
                 loader.classList.add('done');
@@ -260,36 +435,29 @@
 
         // Set the auto-remove timer again to ensure toast disappears after the duration
         const autoRemove = setTimeout(() => {
-            // Get the current animation applied to the toast
-            const currentAnimation = toastElement.style.animation || '';
-
-            // 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'; // You could define a zoom-out animation if needed
-            }
-
-            // Apply the reverse animation dynamically
-            toastElement.classList.add('slide-out');
-            toastElement.style.animation = `${reverseAnimation} 0.5s ease`; // Dynamically apply the reverse animation
+            // Use the same helper removal used above
+            // Re-create the helper here in case update() is used alone
+            const removeWithAnimation = (el, cb) => {
+                const currentAnimation = el.style.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';
+                el.classList.add('slide-out');
+                el.style.animation = `${reverseAnimation} 0.5s ease`;
+                setTimeout(() => {
+                    el.classList.remove('show', 'slide-out');
+                    el.style.animation = '';
+                    if (el.parentNode) el.parentNode.removeChild(el);
+                    if (typeof cb === 'function') cb();
+                }, 500);
+            };
 
-            // Wait for the reverse animation to finish before removing the toast
-            setTimeout(() => {
-                toastElement.classList.remove('show', 'slide-out');
-                toastElement.style.animation = ''; // Reset the animation property
-                if (toastElement.parentNode) toastElement.parentNode.removeChild(toastElement);
-                if (onDismiss && typeof onDismiss === 'function') {
-                    onDismiss(toastElement); // Trigger the onDismiss event if provided
-                }
-            }, 500); // Match the duration of the reverse animation
+            removeWithAnimation(toastElement, () => {
+                if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
+            });
         }, duration);
 
         toastElement._autoRemove = autoRemove; // Re-set the auto-remove timer
@@ -299,7 +467,7 @@
         const toastElement = toast(message, {
             ...options,
             type: options.type || 'info', // Default type is 'info'
-            duration: 1000, // Long duration for manual closing
+            duration: 0, // Sticky until manually updated/closed
             showLoader: true, // Always show loader during loading
             icon: null
         });
@@ -316,32 +484,67 @@
         if (!iconElement) {
             iconElement = document.createElement('span');
             iconElement.className = 'ts-toast-icon';
+            iconElement.style.display = 'flex';
             toastElement.appendChild(iconElement);
         }
 
+        // mark as managed by loading flow to avoid internal auto-complete
+        toastElement._managedByLoading = true;
+
         // Ensure loader is handled properly
         if (loader) {
             setTimeout(() => {
-                loader.classList.add('done');
+                // Keep spinning until update() decides otherwise
+                if (!toastElement._managedByLoading) loader.classList.add('done');
             }, 2000); // Simulate a loading period of 2 seconds
         }
 
         return {
             update: (newMessage, newOptions = {}) => {
+                // Let update manage completion: stop managing/finish loader
+                toastElement._managedByLoading = false;
                 toast.update(toastElement, newMessage, {
                     ...newOptions,
                     showLoader: false // Disable loader when updating the message
                 });
             },
             close: () => {
-                toastElement.classList.remove('show');
+                if (toastElement._autoRemove) clearTimeout(toastElement._autoRemove);
+                const currentAnimation = toastElement.style.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';
+                toastElement.classList.add('slide-out');
+                toastElement.style.animation = `${reverseAnimation} 0.5s ease`;
                 setTimeout(() => {
+                    toastElement.classList.remove('show', 'slide-out');
+                    toastElement.style.animation = '';
                     if (toastElement.parentNode) toastElement.parentNode.removeChild(toastElement);
                 }, 500);
             }
         };
     };
 
+    // Convenience API: swal-like confirm dialog
+    // Usage: toast.confirm('Are you sure?', { type: 'warning', confirmText: 'Yes', cancelText: 'No' }).then(ok => {...})
+    toast.confirm = function (message, options = {}) {
+        return new Promise((resolve) => {
+            const el = toast(message, {
+                ...options,
+                mode: 'confirm',
+                duration: 0, // prevent auto-dismiss
+                dismissOnClick: false,
+                onResult: (val) => resolve(!!val)
+            });
+            // If consumer needs the element, it is returned by toast() but we ignore here.
+            // They can still call toast(...) with mode: 'confirm' to get the element and read el.result
+            void el; // no-op
+        });
+    };
+
     // Expose globally
     window.toast = toast;
 })();

package/toast.min.js

@@ -1 +1 @@
-!function(){"use strict";const e=document.createElement("link");e.rel="stylesheet",e.href="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.0.7/assets/css/toast.min.css",document.head.appendChild(e);const t=function(e,t={}){const{position:s="top-right",animation:o="slide-right",type:n="info",duration:i=3e3,icon:a=null,showLoader:l=!1,onClick:c=null,onShow:r=null,onDismiss:d=null}=t,m=document.createElement("div");m.className=`ts-toast ts-toast-${n}`,m.style.animation=`${o} 0.5s ease`,m.style.flexDirection="row-reverse",m.style.justifyContent="flex-end";const u=document.createElement("span");if(u.className="ts-toast-icon",a)u.textContent=a;else{const e=document.createElement("img");e.src="",e.style.width="30px",e.style.height="30px",e.style.objectFit="contain";const t="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/",s=(new Date).getTime();"success"===n?e.src=`${t}success.gif?t=${s}`:"error"===n?e.src=`${t}error.gif?t=${s}`:"info"===n?e.src=`${t}info.gif?t=${s}`:"warning"===n&&(e.src=`${t}warning.gif?t=${s}`),u.appendChild(e)}const p=document.createElement("div");p.className="ts-toast-body",p.innerHTML=e,m.appendChild(p);let h=null;l&&(h=document.createElement("div"),h.className="ts-toast-loader",m.appendChild(h));let f=document.querySelector(`.ts-toast-container.${s}`);f||(f=document.createElement("div"),f.className=`ts-toast-container ${s}`,document.body.appendChild(f)),f.appendChild(m),r&&"function"==typeof r&&r(m),setTimeout((()=>{m.classList.add("show")}),100),l&&h&&setTimeout((()=>{h.classList.add("done"),h.remove(),m.querySelector(".ts-toast-icon img")||m.appendChild(u)}),2e3),l||m.appendChild(u);const g=setTimeout((()=>{const e=m.style.animation||"";let t="";e.includes("slide-top")?t="slide-top-reverse":e.includes("slide-bottom")?t="slide-bottom-reverse":e.includes("slide-left")?t="slide-left-reverse":e.includes("slide-right")?t="slide-right-reverse":e.includes("zoom-in")&&(t="zoom-out"),m.classList.add("slide-out"),m.style.animation=`${t} 0.5s ease`,setTimeout((()=>{m.classList.remove("show","slide-out"),m.style.animation="",m.parentNode&&m.parentNode.removeChild(m),d&&"function"==typeof d&&d(m)}),500)}),i);m._autoRemove=g,m.addEventListener("click",(()=>{clearTimeout(m._autoRemove),m.classList.remove("show"),setTimeout((()=>{m.parentNode&&m.parentNode.removeChild(m)}),500),c&&"function"==typeof c&&c(m)}));let v=0,y=0;return m.addEventListener("touchstart",(e=>{v=e.changedTouches[0].screenX})),m.addEventListener("touchend",(e=>{y=e.changedTouches[0].screenX,Math.abs(v-y)>50&&(clearTimeout(m._autoRemove),m.classList.remove("show"),setTimeout((()=>{m.parentNode&&m.parentNode.removeChild(m)}),500),d&&"function"==typeof d&&d(m))})),m};t.success=function(e,s){t(e,{...s,type:"success"})},t.error=function(e,s){t(e,{...s,type:"error"})},t.update=function(e,t,s={}){const{type:o=null,icon:n=null,showLoader:i=!1,duration:a=3e3,position:l="top-right",onClick:c=null,onShow:r=null,onDismiss:d=null}=s,m=e.querySelector(".ts-toast-loader"),u=e.querySelector(".ts-toast-icon");m&&m.remove(),e.className=`toast toast-${o} show ${l}`;const p=e.querySelector(".ts-toast-body");p&&(p.innerHTML=t),u&&u.remove();const h=document.createElement("span");if(h.className="toast-icon",n)h.textContent=n;else{const e=document.createElement("img");e.style.width="30px",e.style.height="30px",e.style.objectFit="contain","success"===o?e.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/success.gif":"error"===o?e.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/error.gif":"info"===o?e.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/info.gif":"warning"===o&&(e.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/warning.gif"),h.appendChild(e)}if(e.appendChild(h),i){const t=document.createElement("div");t.className="toast-loader",e.appendChild(t),setTimeout((()=>{t.classList.add("done")}),2e3)}e._autoRemove&&clearTimeout(e._autoRemove);const f=setTimeout((()=>{const t=e.style.animation||"";let s="";t.includes("slide-top")?s="slide-top-reverse":t.includes("slide-bottom")?s="slide-bottom-reverse":t.includes("slide-left")?s="slide-left-reverse":t.includes("slide-right")?s="slide-right-reverse":t.includes("zoom-in")&&(s="zoom-out"),e.classList.add("slide-out"),e.style.animation=`${s} 0.5s ease`,setTimeout((()=>{e.classList.remove("show","slide-out"),e.style.animation="",e.parentNode&&e.parentNode.removeChild(e),d&&"function"==typeof d&&d(e)}),500)}),a);e._autoRemove=f},t.loading=function(e,s={}){const o=t(e,{...s,type:s.type||"info",duration:1e3,showLoader:!0,icon:null});requestAnimationFrame((()=>{o.classList.add("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",o.appendChild(i)),n&&setTimeout((()=>{n.classList.add("done")}),2e3),{update:(e,s={})=>{t.update(o,e,{...s,showLoader:!1})},close:()=>{o.classList.remove("show"),setTimeout((()=>{o.parentNode&&o.parentNode.removeChild(o)}),500)}}},window.toast=t}();
+!function(){"use strict";const t=document.createElement("link");t.rel="stylesheet",t.href="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/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.1/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.1/assets/img/success.gif":"error"===s?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/error.gif":"info"===s?t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/assets/img/info.gif":"warning"===s&&(t.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.1.1/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}();