sweetalert2 11.2.2 → 11.3.3

package/src/{instanceMethods/buttons-handlers.js → buttons-handlers.js}

@@ -1,10 +1,10 @@
-import { isVisible } from '../utils/dom/domUtils.js'
-import { getInputValue } from '../utils/dom/inputUtils.js'
-import { getDenyButton, getValidationMessage } from '../utils/dom/getters.js'
-import { asPromise } from '../utils/utils.js'
-import { showLoading } from '../staticMethods/showLoading.js'
-import { DismissReason } from '../utils/DismissReason.js'
-import privateProps from '../privateProps.js'
+import { isVisible } from './utils/dom/domUtils.js'
+import { getInputValue } from './utils/dom/inputUtils.js'
+import { getDenyButton, getValidationMessage } from './utils/dom/getters.js'
+import { asPromise } from './utils/utils.js'
+import { showLoading } from './staticMethods/showLoading.js'
+import { DismissReason } from './utils/DismissReason.js'
+import privateProps from './privateProps.js'
 
 export const handleConfirmButtonClick = (instance) => {
   const innerParams = privateProps.innerParams.get(instance)

package/src/instanceMethods/getInput.js

@@ -1,7 +1,10 @@
 import * as dom from '../utils/dom/index.js'
 import privateProps from '../privateProps.js'
 
-// Get input element by specified type or, if type isn't specified, by params.input
+/**
+ * Gets the input DOM node, this method works with input parameter.
+ * @returns {HTMLElement | null}
+ */
 export function getInput (instance) {
   const innerParams = privateProps.innerParams.get(instance || this)
   const domCache = privateProps.domCache.get(instance || this)

package/src/instanceMethods/update.js

@@ -1,7 +1,7 @@
 import * as dom from '../../src/utils/dom/index.js'
 import { warn } from '../../src/utils/utils.js'
-import sweetAlert from '../sweetalert2.js'
 import privateProps from '../privateProps.js'
+import { isUpdatableParameter } from '../../src/utils/params.js'
 
 /**
  * Updates popup parameters.
@@ -18,7 +18,7 @@ export function update (params) {
 
   // assign valid params from `params` to `defaults`
   Object.keys(params).forEach(param => {
-    if (sweetAlert.isUpdatableParameter(param)) {
+    if (isUpdatableParameter(param)) {
       validUpdatableParams[param] = params[param]
     } else {
       warn(`Invalid parameter to update: "${param}". Updatable params are listed here: https://github.com/sweetalert2/sweetalert2/blob/master/src/utils/params.js\n\nIf you think this parameter should be updatable, request it here: https://github.com/sweetalert2/sweetalert2/issues/new?template=02_feature_request.md`)

package/src/instanceMethods.js

@@ -4,6 +4,5 @@ export * from './instanceMethods/close.js'
 export * from './instanceMethods/enable-disable-elements.js'
 export * from './instanceMethods/validation-message.js'
 export * from './instanceMethods/progress-steps.js'
-export * from './instanceMethods/_main.js'
 export * from './instanceMethods/update.js'
 export * from './instanceMethods/_destroy.js'

package/src/{instanceMethods/keydown-handler.js → keydown-handler.js}

@@ -1,8 +1,8 @@
-import * as dom from '../utils/dom/index.js'
-import { DismissReason } from '../utils/DismissReason.js'
-import { callIfFunction } from '../utils/utils.js'
-import { clickConfirm } from '../staticMethods/dom.js'
-import privateProps from '../privateProps.js'
+import * as dom from './utils/dom/index.js'
+import { DismissReason } from './utils/DismissReason.js'
+import { callIfFunction } from './utils/utils.js'
+import { clickConfirm } from './staticMethods/dom.js'
+import privateProps from './privateProps.js'
 
 export const addKeydownHandler = (instance, globalState, innerParams, dismissWith) => {
   if (globalState.keydownTarget && globalState.keydownHandlerAdded) {
@@ -126,7 +126,7 @@ const handleArrows = (key) => {
   }
   const sibling = arrowKeysNextButton.includes(key) ? 'nextElementSibling' : 'previousElementSibling'
   const buttonToFocus = document.activeElement[sibling]
-  if (buttonToFocus) {
+  if (buttonToFocus instanceof HTMLElement) {
     buttonToFocus.focus()
   }
 }

package/src/{instanceMethods/popup-click-handler.js → popup-click-handler.js}

@@ -1,6 +1,6 @@
-import { callIfFunction } from '../utils/utils.js'
-import { DismissReason } from '../utils/DismissReason.js'
-import privateProps from '../privateProps.js'
+import { callIfFunction } from './utils/utils.js'
+import { DismissReason } from './utils/DismissReason.js'
+import privateProps from './privateProps.js'
 
 export const handlePopupClick = (instance, domCache, dismissWith) => {
   const innerParams = privateProps.innerParams.get(instance)
@@ -22,20 +22,24 @@ const handleToastClick = (instance, domCache, dismissWith) => {
   // Closing toast by internal click
   domCache.popup.onclick = () => {
     const innerParams = privateProps.innerParams.get(instance)
-    if (
-      innerParams.showConfirmButton ||
-      innerParams.showDenyButton ||
-      innerParams.showCancelButton ||
-      innerParams.showCloseButton ||
-      innerParams.timer ||
-      innerParams.input
-    ) {
+    if (innerParams && (isAnyButtonShown(innerParams) || innerParams.timer || innerParams.input)) {
       return
     }
     dismissWith(DismissReason.close)
   }
 }
 
+/**
+ * @param {*} innerParams
+ * @returns {boolean}
+ */
+const isAnyButtonShown = (innerParams) => {
+  return innerParams.showConfirmButton ||
+    innerParams.showDenyButton ||
+    innerParams.showCancelButton ||
+    innerParams.showCloseButton
+}
+
 let ignoreOutsideClick = false
 
 const handleModalMousedown = (domCache) => {

package/src/staticMethods/showLoading.js

@@ -9,7 +9,7 @@ import { swalClasses } from '../utils/classes.js'
 const showLoading = (buttonToReplace) => {
   let popup = dom.getPopup()
   if (!popup) {
-    Swal.fire()
+    new Swal() // eslint-disable-line no-new
   }
   popup = dom.getPopup()
   const loader = dom.getLoader()

package/src/sweetalert2.js

@@ -1,6 +1,7 @@
 import SweetAlert from './SweetAlert.js'
 
 const Swal = SweetAlert
+// @ts-ignore
 Swal.default = Swal
 
 export default Swal

package/src/utils/Timer.js

@@ -20,7 +20,7 @@ export default class Timer {
     if (this.running) {
       this.running = false
       clearTimeout(this.id)
-      this.remaining -= new Date() - this.started
+      this.remaining -= new Date().getTime() - this.started.getTime()
     }
     return this.remaining
   }

package/src/utils/dom/domUtils.js

@@ -7,7 +7,14 @@ export const states = {
   previousBodyPadding: null
 }
 
-export const setInnerHtml = (elem, html) => { // #1926
+/**
+ * Securely set innerHTML of an element
+ * https://github.com/sweetalert2/sweetalert2/issues/1926
+ *
+ * @param {HTMLElement} elem
+ * @param {string} html
+ */
+export const setInnerHtml = (elem, html) => {
   elem.textContent = ''
   if (html) {
     const parser = new DOMParser()
@@ -21,6 +28,11 @@ export const setInnerHtml = (elem, html) => { // #1926
   }
 }
 
+/**
+ * @param {HTMLElement} elem
+ * @param {string} className
+ * @returns {boolean}
+ */
 export const hasClass = (elem, className) => {
   if (!className) {
     return false
@@ -58,6 +70,11 @@ export const applyCustomClass = (elem, params, className) => {
   }
 }
 
+/**
+ * @param {HTMLElement} popup
+ * @param {string} inputType
+ * @returns {HTMLInputElement | null}
+ */
 export const getInput = (popup, inputType) => {
   if (!inputType) {
     return null
@@ -66,19 +83,22 @@ export const getInput = (popup, inputType) => {
     case 'select':
     case 'textarea':
     case 'file':
-      return getChildByClass(popup, swalClasses[inputType])
+      return popup.querySelector(`.${swalClasses.popup} > .${swalClasses[inputType]}`)
     case 'checkbox':
-      return popup.querySelector(`.${swalClasses.checkbox} input`)
+      return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.checkbox} input`)
     case 'radio':
-      return popup.querySelector(`.${swalClasses.radio} input:checked`) ||
-        popup.querySelector(`.${swalClasses.radio} input:first-child`)
+      return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.radio} input:checked`) ||
+        popup.querySelector(`.${swalClasses.popup} > .${swalClasses.radio} input:first-child`)
     case 'range':
-      return popup.querySelector(`.${swalClasses.range} input`)
+      return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.range} input`)
     default:
-      return getChildByClass(popup, swalClasses.input)
+      return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.input}`)
   }
 }
 
+/**
+ * @param {HTMLInputElement} input
+ */
 export const focusInput = (input) => {
   input.focus()
 
@@ -91,6 +111,11 @@ export const focusInput = (input) => {
   }
 }
 
+/**
+ * @param {HTMLElement | HTMLElement[] | null} target
+ * @param {string | string[]} classList
+ * @param {boolean} condition
+ */
 export const toggleClass = (target, classList, condition) => {
   if (!target || !classList) {
     return
@@ -99,7 +124,7 @@ export const toggleClass = (target, classList, condition) => {
     classList = classList.split(/\s+/).filter(Boolean)
   }
   classList.forEach((className) => {
-    if (target.forEach) {
+    if (Array.isArray(target)) {
       target.forEach((elem) => {
         condition ? elem.classList.add(className) : elem.classList.remove(className)
       })
@@ -109,22 +134,43 @@ export const toggleClass = (target, classList, condition) => {
   })
 }
 
+/**
+ * @param {HTMLElement | HTMLElement[] | null} target
+ * @param {string | string[]} classList
+ */
 export const addClass = (target, classList) => {
   toggleClass(target, classList, true)
 }
 
+/**
+ * @param {HTMLElement | HTMLElement[] | null} target
+ * @param {string | string[]} classList
+ */
 export const removeClass = (target, classList) => {
   toggleClass(target, classList, false)
 }
 
-export const getChildByClass = (elem, className) => {
-  for (let i = 0; i < elem.childNodes.length; i++) {
-    if (hasClass(elem.childNodes[i], className)) {
-      return elem.childNodes[i]
+/**
+ * Get direct child of an element by class name
+ *
+ * @param {HTMLElement} elem
+ * @param {string} className
+ * @returns {HTMLElement | null}
+ */
+export const getDirectChildByClass = (elem, className) => {
+  const childNodes = toArray(elem.childNodes)
+  for (let i = 0; i < childNodes.length; i++) {
+    if (hasClass(childNodes[i], className)) {
+      return childNodes[i]
     }
   }
 }
 
+/**
+ * @param {HTMLElement} elem
+ * @param {string} property
+ * @param {*} value
+ */
 export const applyNumericalStyle = (elem, property, value) => {
   if (value === `${parseInt(value)}`) {
     value = parseInt(value)
@@ -136,10 +182,17 @@ export const applyNumericalStyle = (elem, property, value) => {
   }
 }
 
+/**
+ * @param {HTMLElement} elem
+ * @param {string} display
+ */
 export const show = (elem, display = 'flex') => {
   elem.style.display = display
 }
 
+/**
+ * @param {HTMLElement} elem
+ */
 export const hide = (elem) => {
   elem.style.display = 'none'
 }
@@ -192,7 +245,7 @@ export const stopTimerProgressBar = () => {
   timerProgressBar.style.removeProperty('transition')
   timerProgressBar.style.width = '100%'
   const timerProgressBarFullWidth = parseInt(window.getComputedStyle(timerProgressBar).width)
-  const timerProgressBarPercent = parseInt(timerProgressBarWidth / timerProgressBarFullWidth * 100)
+  const timerProgressBarPercent = timerProgressBarWidth / timerProgressBarFullWidth * 100
   timerProgressBar.style.removeProperty('transition')
   timerProgressBar.style.width = `${timerProgressBarPercent}%`
 }

package/src/utils/dom/getters.js

@@ -2,6 +2,11 @@ import { swalClasses } from '../classes.js'
 import { uniqueArray, toArray } from '../utils.js'
 import { isVisible, hasClass } from './domUtils.js'
 
+/**
+ * Gets the popup container which contains the backdrop and the popup itself.
+ *
+ * @returns {HTMLElement | null}
+ */
 export const getContainer = () => document.body.querySelector(`.${swalClasses.container}`)
 
 export const elementBySelector = (selectorString) => {

package/src/utils/dom/init.js

@@ -1,9 +1,9 @@
 import { swalClasses } from '../classes.js'
 import { getContainer, getPopup } from './getters.js'
-import { addClass, removeClass, getChildByClass, setInnerHtml } from './domUtils.js'
+import { addClass, removeClass, getDirectChildByClass, setInnerHtml } from './domUtils.js'
 import { isNodeEnv } from '../isNodeEnv.js'
 import { error } from '../utils.js'
-import sweetAlert from '../../sweetalert2.js'
+import globalState from '../../globalState.js'
 
 const sweetHTML = `
  <div aria-labelledby="${swalClasses.title}" aria-describedby="${swalClasses['html-container']}" class="${swalClasses.popup}" tabindex="-1">
@@ -60,21 +60,19 @@ const resetOldContainer = () => {
 }
 
 const resetValidationMessage = () => {
-  if (sweetAlert.isVisible()) {
-    sweetAlert.resetValidationMessage()
-  }
+  globalState.currentInstance.resetValidationMessage()
 }
 
 const addInputChangeListeners = () => {
   const popup = getPopup()
 
-  const input = getChildByClass(popup, swalClasses.input)
-  const file = getChildByClass(popup, swalClasses.file)
+  const input = getDirectChildByClass(popup, swalClasses.input)
+  const file = getDirectChildByClass(popup, swalClasses.file)
   const range = popup.querySelector(`.${swalClasses.range} input`)
   const rangeOutput = popup.querySelector(`.${swalClasses.range} output`)
-  const select = getChildByClass(popup, swalClasses.select)
+  const select = getDirectChildByClass(popup, swalClasses.select)
   const checkbox = popup.querySelector(`.${swalClasses.checkbox} input`)
-  const textarea = getChildByClass(popup, swalClasses.textarea)
+  const textarea = getDirectChildByClass(popup, swalClasses.textarea)
 
   input.oninput = resetValidationMessage
   file.onchange = resetValidationMessage

package/src/utils/dom/inputUtils.js

@@ -1,6 +1,6 @@
 import * as dom from './index.js'
 import { swalClasses } from '../classes.js'
-import { getChildByClass } from './domUtils.js'
+import { getDirectChildByClass } from './domUtils.js'
 import { asPromise, error, hasToPromiseFn, isPromise } from '../utils.js'
 import { showLoading } from '../../staticMethods/showLoading.js'
 
@@ -75,7 +75,7 @@ const handleInputValue = (instance, params) => {
 
 const populateInputOptions = {
   select: (popup, inputOptions, params) => {
-    const select = getChildByClass(popup, swalClasses.select)
+    const select = getDirectChildByClass(popup, swalClasses.select)
     const renderOption = (parent, optionLabel, optionValue) => {
       const option = document.createElement('option')
       option.value = optionValue
@@ -104,7 +104,7 @@ const populateInputOptions = {
   },
 
   radio: (popup, inputOptions, params) => {
-    const radio = getChildByClass(popup, swalClasses.radio)
+    const radio = getDirectChildByClass(popup, swalClasses.radio)
     inputOptions.forEach(inputOption => {
       const radioValue = inputOption[0]
       const radioLabel = inputOption[1]

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

@@ -12,7 +12,7 @@ export const renderInput = (instance, params) => {
 
   inputTypes.forEach((inputType) => {
     const inputClass = swalClasses[inputType]
-    const inputContainer = dom.getChildByClass(popup, inputClass)
+    const inputContainer = dom.getDirectChildByClass(popup, inputClass)
 
     // set attributes
     setAttributes(inputType, params.inputAttributes)
@@ -99,7 +99,7 @@ const setInputLabel = (input, prependTo, params) => {
 
 const getInputContainer = (inputType) => {
   const inputClass = swalClasses[inputType] ? swalClasses[inputType] : swalClasses.input
-  return dom.getChildByClass(dom.getPopup(), inputClass)
+  return dom.getDirectChildByClass(dom.getPopup(), inputClass)
 }
 
 const renderInputType = {}
@@ -157,8 +157,9 @@ renderInputType.radio = (radio) => {
 }
 
 renderInputType.checkbox = (checkboxContainer, params) => {
+  /** @type {HTMLInputElement} */
   const checkbox = dom.getInput(dom.getPopup(), 'checkbox')
-  checkbox.value = 1
+  checkbox.value = '1'
   checkbox.id = swalClasses.checkbox
   checkbox.checked = Boolean(params.inputValue)
   const label = checkboxContainer.querySelector('span')

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

@@ -17,6 +17,11 @@ export const renderPopup = (instance, params) => {
   // Padding
   dom.applyNumericalStyle(popup, 'padding', params.padding)
 
+  // Color
+  if (params.color) {
+    popup.style.color = params.color
+  }
+
   // Background
   if (params.background) {
     popup.style.background = params.background

package/src/utils/iosFix.js

@@ -5,6 +5,7 @@ import { swalClasses } from '../utils/classes.js'
 // Fix iOS scrolling http://stackoverflow.com/q/39626302
 
 export const iOSfix = () => {
+  // @ts-ignore
   const iOS = (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
   if (iOS && !dom.hasClass(document.body, swalClasses.iosfix)) {
     const offset = document.body.scrollTop

package/src/utils/params.js

@@ -23,6 +23,7 @@ export const defaultParams = {
   },
   customClass: {},
   target: 'body',
+  color: undefined,
   backdrop: true,
   heightAuto: true,
   allowOutsideClick: true,
@@ -99,6 +100,7 @@ export const updatableParams = [
   'cancelButtonText',
   'closeButtonAriaLabel',
   'closeButtonHtml',
+  'color',
   'confirmButtonAriaLabel',
   'confirmButtonColor',
   'confirmButtonText',
@@ -150,7 +152,7 @@ const toastIncompatibleParams = [
 
 /**
  * Is valid parameter
- * @param {String} paramName
+ * @param {string} paramName
  */
 export const isValidParameter = (paramName) => {
   return Object.prototype.hasOwnProperty.call(defaultParams, paramName)
@@ -158,7 +160,7 @@ export const isValidParameter = (paramName) => {
 
 /**
  * Is valid parameter for Swal.update() method
- * @param {String} paramName
+ * @param {string} paramName
  */
 export const isUpdatableParameter = (paramName) => {
   return updatableParams.indexOf(paramName) !== -1
@@ -166,7 +168,7 @@ export const isUpdatableParameter = (paramName) => {
 
 /**
  * Is deprecated parameter
- * @param {String} paramName
+ * @param {string} paramName
  */
 export const isDeprecatedParameter = (paramName) => {
   return deprecatedParams[paramName]

package/src/utils/setParameters.js

@@ -29,7 +29,6 @@ function validateCustomTargetElement (params) {
  * Set type, text and actions on popup
  *
  * @param params
- * @returns {boolean}
  */
 export default function setParameters (params) {
   setDefaultInputValidators(params)

package/src/variables.scss

@@ -51,7 +51,7 @@ $swal2-title-position: relative !default;
 $swal2-title-max-width: 100% !default;
 $swal2-title-margin: 0 !default;
 $swal2-title-padding: .8em 1em 0 !default;
-$swal2-title-color: lighten($swal2-black, 35) !default;
+$swal2-title-color: inherit !default;
 $swal2-title-font-size: 1.875em !default;
 $swal2-title-font-weight: 600 !default;
 $swal2-title-text-align: center !default;
@@ -61,7 +61,7 @@ $swal2-html-container-justify-content: center !default;
 $swal2-html-container-margin: 1em 1.6em .3em !default;
 $swal2-html-container-padding: 0 !default;
 $swal2-html-container-overflow: auto !default;
-$swal2-html-container-color: lighten($swal2-black, 33) !default;
+$swal2-html-container-color: inherit !default;
 $swal2-html-container-font-size: 1.125em !default;
 $swal2-html-container-font-weight: normal !default;
 $swal2-html-container-line-height: normal !default;
@@ -70,7 +70,7 @@ $swal2-html-container-word-wrap: break-word !default;
 $swal2-html-container-word-break: break-word !default;
 
 // INPUT
-$swal2-input-margin: 1em 2em 0 !default;
+$swal2-input-margin: 1em 2em 3px !default;
 $swal2-input-width: auto !default;
 $swal2-input-height: 2.625em !default;
 $swal2-input-padding: 0 .75em !default;
@@ -129,7 +129,7 @@ $swal2-active-step-color: $swal2-white !default;
 $swal2-footer-margin: 1em 0 0 !default;
 $swal2-footer-padding: 1em 1em 0 !default;
 $swal2-footer-border-color: #eee !default;
-$swal2-footer-color: lighten($swal2-black, 33) !default;
+$swal2-footer-color: inherit !default;
 $swal2-footer-font-size: 1em !default;
 
 // TIMER POGRESS BAR

package/sweetalert2.d.ts

@@ -580,7 +580,14 @@ declare module 'sweetalert2' {
     padding?: number | string;
 
     /**
-     * Popup background (CSS `background` property).
+     * Color for title, content and footer (CSS `color` property).  The default color is `#545454`.
+     *
+     * @default undefined
+     */
+    color?: string;
+
+    /**
+     * Popup background (CSS `background` property). The default background is `#fff`.
      *
      * @default undefined
      */