sweetalert2 11.3.1 → 11.3.5

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) => {
@@ -69,11 +74,11 @@ export const getFocusableElements = () => {
   )
   // sort according to tabindex
     .sort((a, b) => {
-      a = parseInt(a.getAttribute('tabindex'))
-      b = parseInt(b.getAttribute('tabindex'))
-      if (a > b) {
+      const tabindexA = parseInt(a.getAttribute('tabindex'))
+      const tabindexB = parseInt(b.getAttribute('tabindex'))
+      if (tabindexA > tabindexB) {
         return 1
-      } else if (a < b) {
+      } else if (tabindexA < tabindexB) {
         return -1
       }
       return 0

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/renderIcon.js

@@ -48,14 +48,14 @@ const applyStyles = (icon, params) => {
   setColor(icon, params)
 
   // Success icon background color
-  adjustSuccessIconBackgoundColor()
+  adjustSuccessIconBackgroundColor()
 
   // Custom class
   dom.applyCustomClass(icon, params, 'icon')
 }
 
 // Adjust success icon background color to match the popup background color
-const adjustSuccessIconBackgoundColor = () => {
+const adjustSuccessIconBackgroundColor = () => {
   const popup = dom.getPopup()
   const popupBackgroundColor = window.getComputedStyle(popup).getPropertyValue('background-color')
   const successIconParts = popup.querySelectorAll('[class^=swal2-success-circular-line], .swal2-success-fix')

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/getTemplateParams.js

@@ -28,14 +28,13 @@ const getSwalParams = (templateContent) => {
   toArray(templateContent.querySelectorAll('swal-param')).forEach((param) => {
     showWarningsForAttributes(param, ['name', 'value'])
     const paramName = param.getAttribute('name')
-    let value = param.getAttribute('value')
+    const value = param.getAttribute('value')
     if (typeof defaultParams[paramName] === 'boolean' && value === 'false') {
-      value = false
+      result[paramName] = false
     }
     if (typeof defaultParams[paramName] === 'object') {
-      value = JSON.parse(value)
+      result[paramName] = JSON.parse(value)
     }
-    result[paramName] = value
   })
   return result
 }
@@ -153,6 +152,10 @@ const showWarningsForElements = (template) => {
   })
 }
 
+/**
+ * @param {HTMLElement} el
+ * @param {string[]} allowedAttributes
+ */
 const showWarningsForAttributes = (el, allowedAttributes) => {
   toArray(el.attributes).forEach((attribute) => {
     if (allowedAttributes.indexOf(attribute.name) === -1) {

package/src/utils/iosFix.js

@@ -5,19 +5,26 @@ 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
     document.body.style.top = `${offset * -1}px`
     dom.addClass(document.body, swalClasses.iosfix)
     lockBodyScroll()
-    addBottomPaddingForTallPopups() // #1948
+    addBottomPaddingForTallPopups()
   }
 }
 
+/**
+ * https://github.com/sweetalert2/sweetalert2/issues/1948
+ */
 const addBottomPaddingForTallPopups = () => {
-  const safari = !navigator.userAgent.match(/(CriOS|FxiOS|EdgiOS|YaBrowser|UCBrowser)/i)
-  if (safari) {
+  const ua = navigator.userAgent
+  const iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i)
+  const webkit = !!ua.match(/WebKit/i)
+  const iOSSafari = iOS && webkit && !ua.match(/CriOS/i)
+  if (iOSSafari) {
     const bottomPanelHeight = 44
     if (dom.getPopup().scrollHeight > window.innerHeight - bottomPanelHeight) {
       dom.getContainer().style.paddingBottom = `${bottomPanelHeight}px`
@@ -42,7 +49,7 @@ const lockBodyScroll = () => { // #1246
 const shouldPreventTouchMove = (event) => {
   const target = event.target
   const container = dom.getContainer()
-  if (isStylys(event) || isZoom(event)) {
+  if (isStylus(event) || isZoom(event)) {
     return false
   }
   if (target === container) {
@@ -62,7 +69,13 @@ const shouldPreventTouchMove = (event) => {
   return false
 }
 
-const isStylys = (event) => { // #1786
+/**
+ * https://github.com/sweetalert2/sweetalert2/issues/1786
+ *
+ * @param {*} event
+ * @returns {boolean}
+ */
+const isStylus = (event) => {
   return event.touches && event.touches.length && event.touches[0].touchType === 'stylus'
 }
 

package/src/utils/openPopup.js

@@ -79,7 +79,7 @@ const fixScrollContainer = (container, scrollbarPadding, initialBodyOverflow) =>
 
 const addClasses = (container, popup, params) => {
   dom.addClass(container, params.showClass.backdrop)
-  // the workaround with setting/unsetting opacity is needed for #2019 and 2059
+  // this workaround with opacity is needed for https://github.com/sweetalert2/sweetalert2/issues/2059
   popup.style.setProperty('opacity', '0', 'important')
   dom.show(popup, 'grid')
   setTimeout(() => {

package/src/utils/params.js

@@ -152,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)
@@ -160,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
@@ -168,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/utils/utils.js

@@ -16,27 +16,28 @@ export const uniqueArray = (arr) => {
 
 /**
  * Capitalize the first letter of a string
- * @param str
+ * @param {string} str
+ * @returns {string}
  */
 export const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1)
 
 /**
- * Convert NodeList to Array
- * @param nodeList
+ * @param {NodeList | HTMLCollection | NamedNodeMap} nodeList
+ * @returns {array}
  */
 export const toArray = (nodeList) => Array.prototype.slice.call(nodeList)
 
 /**
- * Standardise console warnings
- * @param message
+ * Standardize console warnings
+ * @param {string | array} message
  */
 export const warn = (message) => {
   console.warn(`${consolePrefix} ${typeof message === 'object' ? message.join(' ') : message}`)
 }
 
 /**
- * Standardise console errors
- * @param message
+ * Standardize console errors
+ * @param {string} message
  */
 export const error = (message) => {
   console.error(`${consolePrefix} ${message}`)
@@ -51,7 +52,7 @@ const previousWarnOnceMessages = []
 
 /**
  * Show a console warning, but only if it hasn't already been shown
- * @param message
+ * @param {string} message
  */
 export const warnOnce = (message) => {
   if (!previousWarnOnceMessages.includes(message)) {

package/src/variables.scss

@@ -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;