sweetalert2 11.7.12 → 11.7.13

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/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: '...',