sweetalert2 11.1.9 → 11.2.2

package/src/instanceMethods/_destroy.js

@@ -41,7 +41,7 @@ const disposeSwal = (instance) => {
 }
 
 const disposeWeakMaps = (instance) => {
-  // If the current instance is awaiting a promise result, we keep the privateMethods to call them once the promise result is retreived #2335
+  // If the current instance is awaiting a promise result, we keep the privateMethods to call them once the promise result is retrieved #2335
   if (instance.isAwaitingPromise()) {
     unsetWeakMaps(privateProps, instance)
     privateProps.awaitingPromise.set(instance, true)

package/src/privateMethods.js

@@ -1,5 +1,5 @@
 /**
- * This module containts `WeakMap`s for each effectively-"private  property" that a `Swal` has.
+ * This module contains `WeakMap`s for each effectively-"private  property" that a `Swal` has.
  * For example, to set the private property "foo" of `this` to "bar", you can `privateProps.foo.set(this, 'bar')`
  * This is the approach that Babel will probably take to implement private methods/fields
  *   https://github.com/tc39/proposal-private-methods

package/src/privateProps.js

@@ -1,5 +1,5 @@
 /**
- * This module containts `WeakMap`s for each effectively-"private  property" that a `Swal` has.
+ * This module contains `WeakMap`s for each effectively-"private  property" that a `Swal` has.
  * For example, to set the private property "foo" of `this` to "bar", you can `privateProps.foo.set(this, 'bar')`
  * This is the approach that Babel will probably take to implement private methods/fields
  *   https://github.com/tc39/proposal-private-methods

package/src/scss/_animations.scss

@@ -156,3 +156,42 @@
     transform: rotate(360deg);
   }
 }
+
+// Question mark animation
+@keyframes swal2-animate-question-mark {
+  0% {
+    transform: rotateY(-360deg);
+  }
+
+  100% {
+    transform: rotateY(0);
+  }
+}
+
+// Info and Warning mark animation
+@keyframes swal2-animate-i-mark {
+  0% {
+    transform: rotateZ(45deg);
+    opacity: 0;
+  }
+
+  25% {
+    transform: rotateZ(-25deg);
+    opacity: .4;
+  }
+
+  50% {
+    transform: rotateZ(15deg);
+    opacity: .8;
+  }
+
+  75% {
+    transform: rotateZ(-5deg);
+    opacity: 1;
+  }
+
+  100% {
+    transform: rotateX(0);
+    opacity: 1;
+  }
+}

package/src/scss/_core.scss

@@ -577,16 +577,49 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5);
   &.swal2-warning {
     border-color: lighten($swal2-warning, 7);
     color: $swal2-warning;
+
+    // Warning icon animation
+    &.swal2-icon-show {
+      @if $swal2-icon-animations {
+        animation: swal2-animate-error-icon .5s;
+
+        .swal2-icon-content {
+          animation: swal2-animate-i-mark .5s;
+        }
+      }
+    }
   }
 
   &.swal2-info {
     border-color: lighten($swal2-info, 20);
     color: $swal2-info;
+
+    // Info icon animation
+    &.swal2-icon-show {
+      @if $swal2-icon-animations {
+        animation: swal2-animate-error-icon .5s;
+
+        .swal2-icon-content {
+          animation: swal2-animate-i-mark .8s;
+        }
+      }
+    }
   }
 
   &.swal2-question {
     border-color: lighten($swal2-question, 20);
     color: $swal2-question;
+
+    // Question icon animation
+    &.swal2-icon-show {
+      @if $swal2-icon-animations {
+        animation: swal2-animate-error-icon .5s;
+
+        .swal2-icon-content {
+          animation: swal2-animate-question-mark .8s;
+        }
+      }
+    }
   }
 
   &.swal2-success {

package/src/utils/dom/getters.js

@@ -1,6 +1,6 @@
 import { swalClasses } from '../classes.js'
 import { uniqueArray, toArray } from '../utils.js'
-import { isVisible } from './domUtils.js'
+import { isVisible, hasClass } from './domUtils.js'
 
 export const getContainer = () => document.body.querySelector(`.${swalClasses.container}`)
 
@@ -87,11 +87,11 @@ export const getFocusableElements = () => {
 }
 
 export const isModal = () => {
-  return !isToast() && !document.body.classList.contains(swalClasses['no-backdrop'])
+  return !hasClass(document.body, swalClasses['toast-shown']) && !hasClass(document.body, swalClasses['no-backdrop'])
 }
 
 export const isToast = () => {
-  return document.body.classList.contains(swalClasses['toast-shown'])
+  return getPopup() && hasClass(getPopup(), swalClasses.toast)
 }
 
 export const isLoading = () => {

package/src/utils/dom/renderers/renderActions.js

@@ -5,9 +5,6 @@ import { capitalizeFirstLetter } from '../../utils.js'
 export const renderActions = (instance, params) => {
   const actions = dom.getActions()
   const loader = dom.getLoader()
-  const confirmButton = dom.getConfirmButton()
-  const denyButton = dom.getDenyButton()
-  const cancelButton = dom.getCancelButton()
 
   // Actions (buttons) wrapper
   if (!params.showConfirmButton && !params.showDenyButton && !params.showCancelButton) {
@@ -19,6 +16,19 @@ export const renderActions = (instance, params) => {
   // Custom class
   dom.applyCustomClass(actions, params, 'actions')
 
+  // Render all the buttons
+  renderButtons(actions, loader, params)
+
+  // Loader
+  dom.setInnerHtml(loader, params.loaderHtml)
+  dom.applyCustomClass(loader, params, 'loader')
+}
+
+function renderButtons (actions, loader, params) {
+  const confirmButton = dom.getConfirmButton()
+  const denyButton = dom.getDenyButton()
+  const cancelButton = dom.getCancelButton()
+
   // Render buttons
   renderButton(confirmButton, 'confirm', params)
   renderButton(denyButton, 'deny', params)
@@ -26,14 +36,15 @@ export const renderActions = (instance, params) => {
   handleButtonsStyling(confirmButton, denyButton, cancelButton, params)
 
   if (params.reverseButtons) {
-    actions.insertBefore(cancelButton, loader)
-    actions.insertBefore(denyButton, loader)
-    actions.insertBefore(confirmButton, loader)
+    if (params.toast) {
+      actions.insertBefore(cancelButton, confirmButton)
+      actions.insertBefore(denyButton, confirmButton)
+    } else {
+      actions.insertBefore(cancelButton, loader)
+      actions.insertBefore(denyButton, loader)
+      actions.insertBefore(confirmButton, loader)
+    }
   }
-
-  // Loader
-  dom.setInnerHtml(loader, params.loaderHtml)
-  dom.applyCustomClass(loader, params, 'loader')
 }
 
 function handleButtonsStyling (confirmButton, denyButton, cancelButton, params) {

package/src/variables.scss

@@ -187,7 +187,7 @@ $swal2-button-focus-box-shadow: 0 0 0 3px $swal2-outline-color !default;
 $swal2-confirm-button-order: null !default;
 $swal2-confirm-button-border: 0 !default;
 $swal2-confirm-button-border-radius: .25em !default;
-$swal2-confirm-button-background-color: #7367f0 !default;
+$swal2-confirm-button-background-color: #7066e0 !default;
 $swal2-confirm-button-color: $swal2-white !default;
 $swal2-confirm-button-font-size: 1em !default;
 $swal2-confirm-button-focus-box-shadow: 0 0 0 3px rgba($swal2-confirm-button-background-color, .5) !default;
@@ -196,7 +196,7 @@ $swal2-confirm-button-focus-box-shadow: 0 0 0 3px rgba($swal2-confirm-button-bac
 $swal2-deny-button-order: null !default;
 $swal2-deny-button-border: 0 !default;
 $swal2-deny-button-border-radius: .25em !default;
-$swal2-deny-button-background-color: #ea5455 !default;
+$swal2-deny-button-background-color: #dc3741 !default;
 $swal2-deny-button-color: $swal2-white !default;
 $swal2-deny-button-font-size: 1em !default;
 $swal2-deny-button-focus-box-shadow: 0 0 0 3px rgba($swal2-deny-button-background-color, .5) !default;
@@ -205,7 +205,7 @@ $swal2-deny-button-focus-box-shadow: 0 0 0 3px rgba($swal2-deny-button-backgroun
 $swal2-cancel-button-order: null !default;
 $swal2-cancel-button-border: 0 !default;
 $swal2-cancel-button-border-radius: .25em !default;
-$swal2-cancel-button-background-color: #6e7d88 !default;
+$swal2-cancel-button-background-color: #6e7881 !default;
 $swal2-cancel-button-color: $swal2-white !default;
 $swal2-cancel-button-font-size: 1em !default;
 $swal2-cancel-button-focus-box-shadow: 0 0 0 3px rgba($swal2-cancel-button-background-color, .5) !default;