sweetalert2 11.7.11 → 11.7.13

package/src/scss/_icons.scss

@@ -0,0 +1,235 @@
+// https://stackoverflow.com/a/12335841/1331425
+@function strip-units($number) {
+  @return math.div($number, ($number * 0 + 1));
+}
+$icon-zoom: math.div(strip-units($swal2-icon-size), 5);
+
+div:where(.swal2-icon) {
+  position: relative;
+  box-sizing: content-box;
+  justify-content: center;
+  width: $swal2-icon-size;
+  height: $swal2-icon-size;
+  margin: $swal2-icon-margin;
+  zoom: $swal2-icon-zoom;
+  border: #{0.25em * $icon-zoom} solid transparent;
+  border-radius: 50%;
+  border-color: $swal2-icon-border-color;
+  font-family: $swal2-icon-font-family;
+  line-height: $swal2-icon-size;
+  cursor: default;
+  user-select: none;
+
+  .swal2-icon-content {
+    display: flex;
+    align-items: center;
+    font-size: $swal2-icon-font-size;
+  }
+
+  &.swal2-error {
+    border-color: $swal2-error;
+    color: $swal2-error;
+
+    .swal2-x-mark {
+      position: relative;
+      flex-grow: 1;
+
+      @if $icon-zoom != 1 {
+        zoom: $icon-zoom;
+      }
+    }
+
+    [class^='swal2-x-mark-line'] {
+      display: block;
+      position: absolute;
+      top: 2.3125em;
+      width: 2.9375em;
+      height: 0.3125em;
+      border-radius: 0.125em;
+      background-color: $swal2-error;
+
+      &[class$='left'] {
+        left: 1.0625em;
+        transform: rotate(45deg);
+      }
+
+      &[class$='right'] {
+        right: 1em;
+        transform: rotate(-45deg);
+      }
+    }
+
+    // Error icon animation
+    &.swal2-icon-show {
+      @if $swal2-icon-animations {
+        animation: swal2-animate-error-icon 0.5s;
+
+        .swal2-x-mark {
+          animation: swal2-animate-error-x-mark 0.5s;
+        }
+      }
+    }
+  }
+
+  &.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 0.5s;
+
+        .swal2-icon-content {
+          animation: swal2-animate-i-mark 0.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 0.5s;
+
+        .swal2-icon-content {
+          animation: swal2-animate-i-mark 0.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 0.5s;
+
+        .swal2-icon-content {
+          animation: swal2-animate-question-mark 0.8s;
+        }
+      }
+    }
+  }
+
+  &.swal2-success {
+    border-color: $swal2-success;
+    color: $swal2-success;
+
+    [class^='swal2-success-circular-line'] {
+      // Emulate moving circular line
+      position: absolute;
+      width: 3.75em;
+      height: 7.5em;
+      transform: rotate(45deg);
+      border-radius: 50%;
+
+      &[class$='left'] {
+        top: -0.4375em;
+        left: -2.0635em;
+        transform: rotate(-45deg);
+        transform-origin: 3.75em 3.75em;
+        border-radius: 7.5em 0 0 7.5em;
+
+        @if $icon-zoom != 1 {
+          zoom: $icon-zoom;
+        }
+      }
+
+      &[class$='right'] {
+        top: -0.6875em;
+        left: 1.875em;
+        transform: rotate(-45deg);
+        transform-origin: 0 3.75em;
+        border-radius: 0 7.5em 7.5em 0;
+
+        @if $icon-zoom != 1 {
+          zoom: $icon-zoom;
+        }
+      }
+    }
+
+    .swal2-success-ring {
+      // Ring
+      position: absolute;
+      z-index: 2;
+      top: -0.25em;
+      left: -0.25em;
+      box-sizing: content-box;
+      width: 100%;
+      height: 100%;
+      border: 0.25em solid $swal2-success-border;
+      border-radius: 50%;
+
+      @if $icon-zoom != 1 {
+        zoom: $icon-zoom;
+      }
+    }
+
+    .swal2-success-fix {
+      // Hide corners left from animation
+      position: absolute;
+      z-index: 1;
+      top: 0.5em;
+      left: 1.625em;
+      width: 0.4375em;
+      height: 5.625em;
+      transform: rotate(-45deg);
+
+      @if $icon-zoom != 1 {
+        zoom: $icon-zoom;
+      }
+    }
+
+    [class^='swal2-success-line'] {
+      display: block;
+      position: absolute;
+      z-index: 2;
+      height: 0.3125em;
+      border-radius: 0.125em;
+      background-color: $swal2-success;
+
+      &[class$='tip'] {
+        top: 2.875em;
+        left: 0.8125em;
+        width: 1.5625em;
+        transform: rotate(45deg);
+      }
+
+      &[class$='long'] {
+        top: 2.375em;
+        right: 0.5em;
+        width: 2.9375em;
+        transform: rotate(-45deg);
+      }
+
+      @if $icon-zoom != 1 {
+        zoom: $icon-zoom;
+      }
+    }
+
+    // Success icon animation
+    &.swal2-icon-show {
+      @if $swal2-icon-animations {
+        .swal2-success-line-tip {
+          animation: swal2-animate-success-line-tip 0.75s;
+        }
+
+        .swal2-success-line-long {
+          animation: swal2-animate-success-line-long 0.75s;
+        }
+
+        .swal2-success-circular-line-right {
+          animation: swal2-rotate-success-circular-line 4.25s ease-in;
+        }
+      }
+    }
+  }
+}

package/src/staticMethods/timer.js

@@ -72,5 +72,5 @@ export const increaseTimer = (n) => {
  * @returns {boolean}
  */
 export const isTimerRunning = () => {
-  return globalState.timeout && globalState.timeout.isRunning()
+  return !!(globalState.timeout && globalState.timeout.isRunning())
 }

package/src/utils/aria.js

@@ -13,7 +13,7 @@ export const setAriaHidden = () => {
     }
 
     if (el.hasAttribute('aria-hidden')) {
-      el.setAttribute('data-previous-aria-hidden', el.getAttribute('aria-hidden'))
+      el.setAttribute('data-previous-aria-hidden', el.getAttribute('aria-hidden') || '')
     }
     el.setAttribute('aria-hidden', 'true')
   })
@@ -23,7 +23,7 @@ export const unsetAriaHidden = () => {
   const bodyChildren = Array.from(document.body.children)
   bodyChildren.forEach((el) => {
     if (el.hasAttribute('data-previous-aria-hidden')) {
-      el.setAttribute('aria-hidden', el.getAttribute('data-previous-aria-hidden'))
+      el.setAttribute('aria-hidden', el.getAttribute('data-previous-aria-hidden') || '')
       el.removeAttribute('data-previous-aria-hidden')
     } else {
       el.removeAttribute('aria-hidden')

package/src/utils/dom/domUtils.js

@@ -128,7 +128,7 @@ export const focusInput = (input) => {
 
 /**
  * @param {HTMLElement | HTMLElement[] | null} target
- * @param {string | string[] | readonly string[]} classList
+ * @param {string | string[] | readonly string[] | undefined} classList
  * @param {boolean} condition
  */
 export const toggleClass = (target, classList, condition) => {
@@ -151,7 +151,7 @@ export const toggleClass = (target, classList, condition) => {
 
 /**
  * @param {HTMLElement | HTMLElement[] | null} target
- * @param {string | string[] | readonly string[]} classList
+ * @param {string | string[] | readonly string[] | undefined} classList
  */
 export const addClass = (target, classList) => {
   toggleClass(target, classList, true)
@@ -159,7 +159,7 @@ export const addClass = (target, classList) => {
 
 /**
  * @param {HTMLElement | HTMLElement[] | null} target
- * @param {string | string[] | readonly string[]} classList
+ * @param {string | string[] | readonly string[] | undefined} classList
  */
 export const removeClass = (target, classList) => {
   toggleClass(target, classList, false)

package/src/utils/dom/getters.js

@@ -134,15 +134,17 @@ const focusable = `
  * @returns {HTMLElement[]}
  */
 export const getFocusableElements = () => {
+  const popup = getPopup()
+  if (!popup) {
+    return []
+  }
   /** @type {NodeListOf<HTMLElement>} */
-  const focusableElementsWithTabindex = getPopup().querySelectorAll(
-    '[tabindex]:not([tabindex="-1"]):not([tabindex="0"])'
-  )
+  const focusableElementsWithTabindex = popup.querySelectorAll('[tabindex]:not([tabindex="-1"]):not([tabindex="0"])')
   const focusableElementsWithTabindexSorted = Array.from(focusableElementsWithTabindex)
     // sort according to tabindex
     .sort((a, b) => {
-      const tabindexA = parseInt(a.getAttribute('tabindex'))
-      const tabindexB = parseInt(b.getAttribute('tabindex'))
+      const tabindexA = parseInt(a.getAttribute('tabindex') || '0')
+      const tabindexB = parseInt(b.getAttribute('tabindex') || '0')
       if (tabindexA > tabindexB) {
         return 1
       } else if (tabindexA < tabindexB) {
@@ -152,7 +154,7 @@ export const getFocusableElements = () => {
     })
 
   /** @type {NodeListOf<HTMLElement>} */
-  const otherFocusableElements = getPopup().querySelectorAll(focusable)
+  const otherFocusableElements = popup.querySelectorAll(focusable)
   const otherFocusableElementsFiltered = Array.from(otherFocusableElements).filter(
     (el) => el.getAttribute('tabindex') !== '-1'
   )
@@ -177,12 +179,20 @@ export const isModal = () => {
  * @returns {boolean}
  */
 export const isToast = () => {
-  return getPopup() && hasClass(getPopup(), swalClasses.toast)
+  const popup = getPopup()
+  if (!popup) {
+    return false
+  }
+  return hasClass(popup, swalClasses.toast)
 }
 
 /**
  * @returns {boolean}
  */
 export const isLoading = () => {
-  return getPopup().hasAttribute('data-loading')
+  const popup = getPopup()
+  if (!popup) {
+    return false
+  }
+  return popup.hasAttribute('data-loading')
 }

package/src/utils/dom/init.js

@@ -13,19 +13,19 @@ const sweetHTML = `
    <img class="${swalClasses.image}" />
    <h2 class="${swalClasses.title}" id="${swalClasses.title}"></h2>
    <div class="${swalClasses['html-container']}" id="${swalClasses['html-container']}"></div>
-   <input class="${swalClasses.input}" />
+   <input class="${swalClasses.input}" id="${swalClasses.input}" />
    <input type="file" class="${swalClasses.file}" />
    <div class="${swalClasses.range}">
      <input type="range" />
      <output></output>
    </div>
-   <select class="${swalClasses.select}"></select>
+   <select class="${swalClasses.select}" id="${swalClasses.select}"></select>
    <div class="${swalClasses.radio}"></div>
-   <label for="${swalClasses.checkbox}" class="${swalClasses.checkbox}">
-     <input type="checkbox" />
+   <label class="${swalClasses.checkbox}">
+     <input type="checkbox" id="${swalClasses.checkbox}" />
      <span class="${swalClasses.label}"></span>
    </label>
-   <textarea class="${swalClasses.textarea}"></textarea>
+   <textarea class="${swalClasses.textarea}" id="${swalClasses.textarea}"></textarea>
    <div class="${swalClasses['validation-message']}" id="${swalClasses['validation-message']}"></div>
    <div class="${swalClasses.actions}">
      <div class="${swalClasses.loader}"></div>

package/src/utils/dom/parseHtmlToContainer.js

@@ -22,7 +22,7 @@ export const parseHtmlToContainer = (param, target) => {
 }
 
 /**
- * @param {object} param
+ * @param {any} param
  * @param {HTMLElement} target
  */
 const handleObject = (param, target) => {
@@ -39,7 +39,7 @@ const handleObject = (param, target) => {
 
 /**
  * @param {HTMLElement} target
- * @param {HTMLElement} elem
+ * @param {any} elem
  */
 const handleJqueryElem = (target, elem) => {
   target.textContent = ''

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

@@ -28,7 +28,8 @@ export const render = (instance, params) => {
   renderActions(instance, params)
   renderFooter(instance, params)
 
-  if (typeof params.didRender === 'function') {
-    params.didRender(getPopup())
+  const popup = getPopup()
+  if (typeof params.didRender === 'function' && popup) {
+    params.didRender(popup)
   }
 }

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

@@ -9,6 +9,9 @@ import { capitalizeFirstLetter } from '../../utils.js'
 export const renderActions = (instance, params) => {
   const actions = dom.getActions()
   const loader = dom.getLoader()
+  if (!actions || !loader) {
+    return
+  }
 
   // Actions (buttons) wrapper
   if (!params.showConfirmButton && !params.showDenyButton && !params.showCancelButton) {
@@ -24,7 +27,7 @@ export const renderActions = (instance, params) => {
   renderButtons(actions, loader, params)
 
   // Loader
-  dom.setInnerHtml(loader, params.loaderHtml)
+  dom.setInnerHtml(loader, params.loaderHtml || '')
   dom.applyCustomClass(loader, params, 'loader')
 }
 
@@ -37,6 +40,9 @@ function renderButtons(actions, loader, params) {
   const confirmButton = dom.getConfirmButton()
   const denyButton = dom.getDenyButton()
   const cancelButton = dom.getCancelButton()
+  if (!confirmButton || !denyButton || !cancelButton) {
+    return
+  }
 
   // Render buttons
   renderButton(confirmButton, 'confirm', params)
@@ -91,12 +97,13 @@ function handleButtonsStyling(confirmButton, denyButton, cancelButton, params) {
  * @param {SweetAlertOptions} params
  */
 function renderButton(button, buttonType, params) {
-  dom.toggle(button, params[`show${capitalizeFirstLetter(buttonType)}Button`], 'inline-block')
-  dom.setInnerHtml(button, params[`${buttonType}ButtonText`]) // Set caption text
-  button.setAttribute('aria-label', params[`${buttonType}ButtonAriaLabel`]) // ARIA label
+  const buttonName = /** @type {'Confirm' | 'Deny' | 'Cancel'} */ (capitalizeFirstLetter(buttonType))
+
+  dom.toggle(button, params[`show${buttonName}Button`], 'inline-block')
+  dom.setInnerHtml(button, params[`${buttonType}ButtonText`] || '') // Set caption text
+  button.setAttribute('aria-label', params[`${buttonType}ButtonAriaLabel`] || '') // ARIA label
 
   // Add buttons custom classes
   button.className = swalClasses[buttonType]
   dom.applyCustomClass(button, params, `${buttonType}Button`)
-  dom.addClass(button, params[`${buttonType}ButtonClass`])
 }

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

@@ -39,6 +39,9 @@ function handleBackdropParam(container, backdrop) {
  * @param {SweetAlertOptions['position']} position
  */
 function handlePositionParam(container, position) {
+  if (!position) {
+    return
+  }
   if (position in swalClasses) {
     dom.addClass(container, swalClasses[position])
   } else {
@@ -52,10 +55,8 @@ function handlePositionParam(container, position) {
  * @param {SweetAlertOptions['grow']} grow
  */
 function handleGrowParam(container, grow) {
-  if (grow && typeof grow === 'string') {
-    const growClass = `grow-${grow}`
-    if (growClass in swalClasses) {
-      dom.addClass(container, swalClasses[growClass])
-    }
+  if (!grow) {
+    return
   }
+  dom.addClass(container, swalClasses[`grow-${grow}`])
 }

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

@@ -10,6 +10,9 @@ import { error } from '../../utils.js'
 export const renderIcon = (instance, params) => {
   const innerParams = privateProps.innerParams.get(instance)
   const icon = dom.getIcon()
+  if (!icon) {
+    return
+  }
 
   // if the given icon already rendered, apply the styling without re-rendering the icon
   if (innerParams && params.icon === innerParams.icon) {
@@ -39,7 +42,7 @@ export const renderIcon = (instance, params) => {
   applyStyles(icon, params)
 
   // Animate icon
-  dom.addClass(icon, params.showClass.icon)
+  dom.addClass(icon, params.showClass && params.showClass.icon)
 }
 
 /**
@@ -47,12 +50,12 @@ export const renderIcon = (instance, params) => {
  * @param {SweetAlertOptions} params
  */
 const applyStyles = (icon, params) => {
-  for (const iconType in iconTypes) {
+  for (const [iconType, iconClassName] of Object.entries(iconTypes)) {
     if (params.icon !== iconType) {
-      dom.removeClass(icon, iconTypes[iconType])
+      dom.removeClass(icon, iconClassName)
     }
   }
-  dom.addClass(icon, iconTypes[params.icon])
+  dom.addClass(icon, params.icon && iconTypes[params.icon])
 
   // Icon color
   setColor(icon, params)
@@ -67,6 +70,9 @@ const applyStyles = (icon, params) => {
 // Adjust success icon background color to match the popup background color
 const adjustSuccessIconBackgroundColor = () => {
   const popup = dom.getPopup()
+  if (!popup) {
+    return
+  }
   const popupBackgroundColor = window.getComputedStyle(popup).getPropertyValue('background-color')
   /** @type {NodeListOf<HTMLElement>} */
   const successIconParts = popup.querySelectorAll('[class^=swal2-success-circular-line], .swal2-success-fix')
@@ -94,6 +100,9 @@ const errorIconHtml = `
  * @param {SweetAlertOptions} params
  */
 const setContent = (icon, params) => {
+  if (!params.icon) {
+    return
+  }
   let oldContent = icon.innerHTML
   let newContent
   if (params.iconHtml) {

package/sweetalert2.d.ts

@@ -668,6 +668,7 @@ declare module 'sweetalert2' {
      *     closeButton: '...',
      *     icon: '...',
      *     image: '...',
+     *     htmlContainer: '...',
      *     input: '...',
      *     inputLabel: '...',
      *     validationMessage: '...',