sweetalert2 11.4.13 → 11.4.16

package/src/utils/dom/domUtils.js

@@ -46,6 +46,10 @@ export const hasClass = (elem, className) => {
   return true
 }
 
+/**
+ * @param {HTMLElement} elem
+ * @param {SweetAlertOptions} params
+ */
 const removeCustomClasses = (elem, params) => {
   toArray(elem.classList).forEach((className) => {
     if (
@@ -58,6 +62,11 @@ const removeCustomClasses = (elem, params) => {
   })
 }
 
+/**
+ * @param {HTMLElement} elem
+ * @param {SweetAlertOptions} params
+ * @param {string} className
+ */
 export const applyCustomClass = (elem, params, className) => {
   removeCustomClasses(elem, params)
 
@@ -203,26 +212,54 @@ export const hide = (elem) => {
   elem.style.display = 'none'
 }
 
+/**
+ * @param {HTMLElement} parent
+ * @param {string} selector
+ * @param {string} property
+ * @param {string} value
+ */
 export const setStyle = (parent, selector, property, value) => {
+  /** @type {HTMLElement} */
   const el = parent.querySelector(selector)
   if (el) {
     el.style[property] = value
   }
 }
 
-export const toggle = (elem, condition, display) => {
+/**
+ * @param {HTMLElement} elem
+ * @param {any} condition
+ * @param {string} display
+ */
+export const toggle = (elem, condition, display = 'flex') => {
   condition ? show(elem, display) : hide(elem)
 }
 
-// borrowed from jquery $(elem).is(':visible') implementation
+/**
+ * borrowed from jquery $(elem).is(':visible') implementation
+ *
+ * @param {HTMLElement} elem
+ * @returns {boolean}
+ */
 export const isVisible = (elem) => !!(elem && (elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length))
 
+/**
+ * @returns {boolean}
+ */
 export const allButtonsAreHidden = () =>
   !isVisible(getConfirmButton()) && !isVisible(getDenyButton()) && !isVisible(getCancelButton())
 
+/**
+ * @returns {boolean}
+ */
 export const isScrollable = (elem) => !!(elem.scrollHeight > elem.clientHeight)
 
-// borrowed from https://stackoverflow.com/a/46352119
+/**
+ * borrowed from https://stackoverflow.com/a/46352119
+ *
+ * @param {HTMLElement} elem
+ * @returns {boolean}
+ */
 export const hasCssAnimation = (elem) => {
   const style = window.getComputedStyle(elem)
 
@@ -232,6 +269,10 @@ export const hasCssAnimation = (elem) => {
   return animDuration > 0 || transDuration > 0
 }
 
+/**
+ * @param {number} timer
+ * @param {boolean} reset
+ */
 export const animateTimerProgressBar = (timer, reset = false) => {
   const timerProgressBar = getTimerProgressBar()
   if (isVisible(timerProgressBar)) {

package/src/utils/dom/getters.js

@@ -9,45 +9,101 @@ import { hasClass, isVisible } from './domUtils.js'
  */
 export const getContainer = () => document.body.querySelector(`.${swalClasses.container}`)
 
+/**
+ * @param {string} selectorString
+ * @returns {HTMLElement | null}
+ */
 export const elementBySelector = (selectorString) => {
   const container = getContainer()
   return container ? container.querySelector(selectorString) : null
 }
 
+/**
+ * @param {string} className
+ * @returns {HTMLElement | null}
+ */
 const elementByClass = (className) => {
   return elementBySelector(`.${className}`)
 }
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getPopup = () => elementByClass(swalClasses.popup)
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getIcon = () => elementByClass(swalClasses.icon)
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getTitle = () => elementByClass(swalClasses.title)
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getHtmlContainer = () => elementByClass(swalClasses['html-container'])
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getImage = () => elementByClass(swalClasses.image)
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getProgressSteps = () => elementByClass(swalClasses['progress-steps'])
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getValidationMessage = () => elementByClass(swalClasses['validation-message'])
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getConfirmButton = () => elementBySelector(`.${swalClasses.actions} .${swalClasses.confirm}`)
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getDenyButton = () => elementBySelector(`.${swalClasses.actions} .${swalClasses.deny}`)
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getInputLabel = () => elementByClass(swalClasses['input-label'])
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getLoader = () => elementBySelector(`.${swalClasses.loader}`)
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getCancelButton = () => elementBySelector(`.${swalClasses.actions} .${swalClasses.cancel}`)
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getActions = () => elementByClass(swalClasses.actions)
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getFooter = () => elementByClass(swalClasses.footer)
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getTimerProgressBar = () => elementByClass(swalClasses['timer-progress-bar'])
 
+/**
+ * @returns {HTMLElement | null}
+ */
 export const getCloseButton = () => elementByClass(swalClasses.close)
 
 // https://github.com/jkup/focusable/blob/master/index.js
@@ -67,7 +123,9 @@ const focusable = `
   video[controls],
   summary
 `
-
+/**
+ * @returns {HTMLElement[]}
+ */
 export const getFocusableElements = () => {
   const focusableElementsWithTabindex = toArray(
     getPopup().querySelectorAll('[tabindex]:not([tabindex="-1"]):not([tabindex="0"])')
@@ -91,6 +149,9 @@ export const getFocusableElements = () => {
   return uniqueArray(focusableElementsWithTabindex.concat(otherFocusableElements)).filter((el) => isVisible(el))
 }
 
+/**
+ * @returns {boolean}
+ */
 export const isModal = () => {
   return (
     hasClass(document.body, swalClasses.shown) &&
@@ -99,10 +160,16 @@ export const isModal = () => {
   )
 }
 
+/**
+ * @returns {boolean}
+ */
 export const isToast = () => {
   return getPopup() && hasClass(getPopup(), swalClasses.toast)
 }
 
+/**
+ * @returns {boolean}
+ */
 export const isLoading = () => {
   return getPopup().hasAttribute('data-loading')
 }

package/src/utils/dom/init.js

@@ -40,6 +40,9 @@ const sweetHTML = `
  </div>
 `.replace(/(^|\n)\s*/g, '')
 
+/**
+ * @returns {boolean}
+ */
 const resetOldContainer = () => {
   const oldContainer = getContainer()
   if (!oldContainer) {
@@ -64,9 +67,12 @@ const addInputChangeListeners = () => {
 
   const input = getDirectChildByClass(popup, swalClasses.input)
   const file = getDirectChildByClass(popup, swalClasses.file)
+  /** @type {HTMLInputElement} */
   const range = popup.querySelector(`.${swalClasses.range} input`)
+  /** @type {HTMLOutputElement} */
   const rangeOutput = popup.querySelector(`.${swalClasses.range} output`)
   const select = getDirectChildByClass(popup, swalClasses.select)
+  /** @type {HTMLInputElement} */
   const checkbox = popup.querySelector(`.${swalClasses.checkbox} input`)
   const textarea = getDirectChildByClass(popup, swalClasses.textarea)
 
@@ -83,12 +89,19 @@ const addInputChangeListeners = () => {
 
   range.onchange = () => {
     resetValidationMessage()
-    range.nextSibling.value = range.value
+    rangeOutput.value = range.value
   }
 }
 
+/**
+ * @param {string | HTMLElement} target
+ * @returns {HTMLElement}
+ */
 const getTarget = (target) => (typeof target === 'string' ? document.querySelector(target) : target)
 
+/**
+ * @param {SweetAlertOptions} params
+ */
 const setupAccessibility = (params) => {
   const popup = getPopup()
 
@@ -99,14 +112,19 @@ const setupAccessibility = (params) => {
   }
 }
 
+/**
+ * @param {HTMLElement} targetElement
+ */
 const setupRTL = (targetElement) => {
   if (window.getComputedStyle(targetElement).direction === 'rtl') {
     addClass(getContainer(), swalClasses.rtl)
   }
 }
 
-/*
+/**
  * Add modal + backdrop + no-war message for Russians to DOM
+ *
+ * @param {SweetAlertOptions} params
  */
 export const init = (params) => {
   // Clean up the old popup container if it exists
@@ -135,6 +153,10 @@ export const init = (params) => {
   noWarMessageForRussians(container, params)
 }
 
+/**
+ * @param {HTMLElement} container
+ * @param {SweetAlertOptions} params
+ */
 const noWarMessageForRussians = (container, params) => {
   if (params.toast) {
     return
@@ -168,6 +190,14 @@ const noWarMessageForRussians = (container, params) => {
       text: 'ФИНСКИЙ ДРУГ РОССИИ <br> говорит ПО-РУССКИ о спецоперации',
       youtubeId: 'hkCYb6edUrQ',
     },
+    {
+      text: 'ЮРИЙ ПОДОЛЯКА честно <br> о генералах РУССКОЙ АРМИИ',
+      youtubeId: 'w4-_8BJKfpk',
+    },
+    {
+      text: 'Полковник ФСБ СТРЕЛКОВ <br> об успехах РОССИИ в спецоперации',
+      youtubeId: 'saK5UTKroDA',
+    },
   ])
   // The message will only be shown to Russian users visiting Russian sites
   if (navigator.language === 'ru' && location.host.match(/\.(ru|su|xn--p1ai)$/)) {

package/src/utils/dom/measureScrollbar.js

@@ -1,7 +1,11 @@
 import { swalClasses } from '../classes.js'
 
-// Measure scrollbar width for padding body during modal show/hide
-// https://github.com/twbs/bootstrap/blob/master/js/src/modal.js
+/**
+ * Measure scrollbar width for padding body during modal show/hide
+ * https://github.com/twbs/bootstrap/blob/master/js/src/modal.js
+ *
+ * @returns {number}
+ */
 export const measureScrollbar = () => {
   const scrollDiv = document.createElement('div')
   scrollDiv.className = swalClasses['scrollbar-measure']

package/src/utils/dom/parseHtmlToContainer.js

@@ -37,6 +37,10 @@ const handleObject = (param, target) => {
   }
 }
 
+/**
+ * @param {HTMLElement} target
+ * @param {HTMLElement} elem
+ */
 const handleJqueryElem = (target, elem) => {
   target.textContent = ''
   if (0 in elem) {

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

@@ -10,6 +10,10 @@ import { renderProgressSteps } from './renderProgressSteps.js'
 import { renderTitle } from './renderTitle.js'
 import { renderPopup } from './renderPopup.js'
 
+/**
+ * @param {SweetAlert2} instance
+ * @param {SweetAlertOptions} params
+ */
 export const render = (instance, params) => {
   renderPopup(instance, params)
   renderContainer(instance, params)

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

@@ -2,6 +2,10 @@ import { swalClasses } from '../../classes.js'
 import * as dom from '../../dom/index.js'
 import { capitalizeFirstLetter } from '../../utils.js'
 
+/**
+ * @param {SweetAlert2} instance
+ * @param {SweetAlertOptions} params
+ */
 export const renderActions = (instance, params) => {
   const actions = dom.getActions()
   const loader = dom.getLoader()
@@ -24,6 +28,11 @@ export const renderActions = (instance, params) => {
   dom.applyCustomClass(loader, params, 'loader')
 }
 
+/**
+ * @param {HTMLElement} actions
+ * @param {HTMLElement} loader
+ * @param {SweetAlertOptions} params
+ */
 function renderButtons(actions, loader, params) {
   const confirmButton = dom.getConfirmButton()
   const denyButton = dom.getDenyButton()
@@ -47,6 +56,12 @@ function renderButtons(actions, loader, params) {
   }
 }
 
+/**
+ * @param {HTMLElement} confirmButton
+ * @param {HTMLElement} denyButton
+ * @param {HTMLElement} cancelButton
+ * @param {SweetAlertOptions} params
+ */
 function handleButtonsStyling(confirmButton, denyButton, cancelButton, params) {
   if (!params.buttonsStyling) {
     return dom.removeClass([confirmButton, denyButton, cancelButton], swalClasses.styled)
@@ -69,6 +84,11 @@ function handleButtonsStyling(confirmButton, denyButton, cancelButton, params) {
   }
 }
 
+/**
+ * @param {HTMLElement} button
+ * @param {'confirm' | 'deny' | 'cancel'} buttonType
+ * @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

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

@@ -1,5 +1,9 @@
 import * as dom from '../../dom/index.js'
 
+/**
+ * @param {SweetAlert2} instance
+ * @param {SweetAlertOptions} params
+ */
 export const renderCloseButton = (instance, params) => {
   const closeButton = dom.getCloseButton()
 

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

@@ -2,6 +2,30 @@ import { swalClasses } from '../../classes.js'
 import { warn } from '../../utils.js'
 import * as dom from '../../dom/index.js'
 
+/**
+ * @param {SweetAlert2} instance
+ * @param {SweetAlertOptions} params
+ */
+export const renderContainer = (instance, params) => {
+  const container = dom.getContainer()
+
+  if (!container) {
+    return
+  }
+
+  handleBackdropParam(container, params.backdrop)
+
+  handlePositionParam(container, params.position)
+  handleGrowParam(container, params.grow)
+
+  // Custom class
+  dom.applyCustomClass(container, params, 'container')
+}
+
+/**
+ * @param {HTMLElement} container
+ * @param {SweetAlertOptions['backdrop']} backdrop
+ */
 function handleBackdropParam(container, backdrop) {
   if (typeof backdrop === 'string') {
     container.style.background = backdrop
@@ -10,6 +34,10 @@ function handleBackdropParam(container, backdrop) {
   }
 }
 
+/**
+ * @param {HTMLElement} container
+ * @param {SweetAlertOptions['position']} position
+ */
 function handlePositionParam(container, position) {
   if (position in swalClasses) {
     dom.addClass(container, swalClasses[position])
@@ -19,6 +47,10 @@ function handlePositionParam(container, position) {
   }
 }
 
+/**
+ * @param {HTMLElement} container
+ * @param {SweetAlertOptions['grow']} grow
+ */
 function handleGrowParam(container, grow) {
   if (grow && typeof grow === 'string') {
     const growClass = `grow-${grow}`
@@ -27,19 +59,3 @@ function handleGrowParam(container, grow) {
     }
   }
 }
-
-export const renderContainer = (instance, params) => {
-  const container = dom.getContainer()
-
-  if (!container) {
-    return
-  }
-
-  handleBackdropParam(container, params.backdrop)
-
-  handlePositionParam(container, params.position)
-  handleGrowParam(container, params.grow)
-
-  // Custom class
-  dom.applyCustomClass(container, params, 'container')
-}

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

@@ -1,6 +1,10 @@
 import * as dom from '../../dom/index.js'
 import { renderInput } from './renderInput.js'
 
+/**
+ * @param {SweetAlert2} instance
+ * @param {SweetAlertOptions} params
+ */
 export const renderContent = (instance, params) => {
   const htmlContainer = dom.getHtmlContainer()
 

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

@@ -1,5 +1,9 @@
 import * as dom from '../../dom/index.js'
 
+/**
+ * @param {SweetAlert2} instance
+ * @param {SweetAlertOptions} params
+ */
 export const renderFooter = (instance, params) => {
   const footer = dom.getFooter()
 

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

@@ -3,6 +3,10 @@ import { error } from '../../utils.js'
 import * as dom from '../../dom/index.js'
 import privateProps from '../../../privateProps.js'
 
+/**
+ * @param {SweetAlert2} instance
+ * @param {SweetAlertOptions} params
+ */
 export const renderIcon = (instance, params) => {
   const innerParams = privateProps.innerParams.get(instance)
   const icon = dom.getIcon()
@@ -36,6 +40,10 @@ export const renderIcon = (instance, params) => {
   dom.addClass(icon, params.showClass.icon)
 }
 
+/**
+ * @param {HTMLElement} icon
+ * @param {SweetAlertOptions} params
+ */
 const applyStyles = (icon, params) => {
   for (const iconType in iconTypes) {
     if (params.icon !== iconType) {
@@ -58,6 +66,7 @@ const applyStyles = (icon, params) => {
 const adjustSuccessIconBackgroundColor = () => {
   const popup = dom.getPopup()
   const popupBackgroundColor = window.getComputedStyle(popup).getPropertyValue('background-color')
+  /** @type {NodeListOf<HTMLElement>} */
   const successIconParts = popup.querySelectorAll('[class^=swal2-success-circular-line], .swal2-success-fix')
   for (let i = 0; i < successIconParts.length; i++) {
     successIconParts[i].style.backgroundColor = popupBackgroundColor
@@ -78,6 +87,10 @@ const errorIconHtml = `
   </span>
 `
 
+/**
+ * @param {HTMLElement} icon
+ * @param {SweetAlertOptions} params
+ */
 const setContent = (icon, params) => {
   icon.textContent = ''
 
@@ -97,6 +110,10 @@ const setContent = (icon, params) => {
   }
 }
 
+/**
+ * @param {HTMLElement} icon
+ * @param {SweetAlertOptions} params
+ */
 const setColor = (icon, params) => {
   if (!params.iconColor) {
     return
@@ -114,4 +131,7 @@ const setColor = (icon, params) => {
   dom.setStyle(icon, '.swal2-success-ring', 'borderColor', params.iconColor)
 }
 
+/**
+ * @param {string} content
+ */
 const iconContent = (content) => `<div class="${swalClasses['icon-content']}">${content}</div>`

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

@@ -1,6 +1,10 @@
 import { swalClasses } from '../../classes.js'
 import * as dom from '../../dom/index.js'
 
+/**
+ * @param {SweetAlert2} instance
+ * @param {SweetAlertOptions} params
+ */
 export const renderImage = (instance, params) => {
   const image = dom.getImage()
 

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

@@ -1,8 +1,6 @@
 /// <reference path="../../../../sweetalert2.d.ts"/>
 
 /**
- * @typedef { import('sweetalert2') } SweetAlert2
- * @typedef { import('sweetalert2').SweetAlertOptions } SweetAlertOptions
  * @typedef { HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement } Input
  * @typedef { 'input' | 'file' | 'range' | 'select' | 'radio' | 'checkbox' | 'textarea' } InputClass
  */

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

@@ -1,6 +1,10 @@
 import { swalClasses } from '../../classes.js'
 import * as dom from '../../dom/index.js'
 
+/**
+ * @param {SweetAlert2} instance
+ * @param {SweetAlertOptions} params
+ */
 export const renderPopup = (instance, params) => {
   const container = dom.getContainer()
   const popup = dom.getPopup()
@@ -34,6 +38,10 @@ export const renderPopup = (instance, params) => {
   addClasses(popup, params)
 }
 
+/**
+ * @param {HTMLElement} popup
+ * @param {SweetAlertOptions} params
+ */
 const addClasses = (popup, params) => {
   // Default Class + showClass when updating Swal.update({})
   popup.className = `${swalClasses.popup} ${dom.isVisible(popup) ? params.showClass.popup : ''}`

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

@@ -2,22 +2,10 @@ import { swalClasses } from '../../classes.js'
 import { warn } from '../../utils.js'
 import * as dom from '../../dom/index.js'
 
-const createStepElement = (step) => {
-  const stepEl = document.createElement('li')
-  dom.addClass(stepEl, swalClasses['progress-step'])
-  dom.setInnerHtml(stepEl, step)
-  return stepEl
-}
-
-const createLineElement = (params) => {
-  const lineEl = document.createElement('li')
-  dom.addClass(lineEl, swalClasses['progress-step-line'])
-  if (params.progressStepsDistance) {
-    lineEl.style.width = params.progressStepsDistance
-  }
-  return lineEl
-}
-
+/**
+ * @param {SweetAlert2} instance
+ * @param {SweetAlertOptions} params
+ */
 export const renderProgressSteps = (instance, params) => {
   const progressStepsContainer = dom.getProgressSteps()
   if (!params.progressSteps || params.progressSteps.length === 0) {
@@ -46,3 +34,27 @@ export const renderProgressSteps = (instance, params) => {
     }
   })
 }
+
+/**
+ * @param {string} step
+ * @returns {HTMLLIElement}
+ */
+const createStepElement = (step) => {
+  const stepEl = document.createElement('li')
+  dom.addClass(stepEl, swalClasses['progress-step'])
+  dom.setInnerHtml(stepEl, step)
+  return stepEl
+}
+
+/**
+ * @param {SweetAlertOptions} params
+ * @returns {HTMLLIElement}
+ */
+const createLineElement = (params) => {
+  const lineEl = document.createElement('li')
+  dom.addClass(lineEl, swalClasses['progress-step-line'])
+  if (params.progressStepsDistance) {
+    dom.applyNumericalStyle(lineEl, 'width', params.progressStepsDistance)
+  }
+  return lineEl
+}

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

@@ -1,5 +1,9 @@
 import * as dom from '../../dom/index.js'
 
+/**
+ * @param {SweetAlert2} instance
+ * @param {SweetAlertOptions} params
+ */
 export const renderTitle = (instance, params) => {
   const title = dom.getTitle()
 

package/src/utils/utils.js

@@ -22,7 +22,7 @@ export const uniqueArray = (arr) => {
 export const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1)
 
 /**
- * @param {NodeList | HTMLCollection | NamedNodeMap} nodeList
+ * @param {NodeList | HTMLCollection | NamedNodeMap | DOMTokenList} nodeList
  * @returns {array}
  */
 export const toArray = (nodeList) => Array.prototype.slice.call(nodeList)