sweetalert2 11.4.10 → 11.4.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +2 -2
  2. package/dist/sweetalert2.all.js +115 -44
  3. package/dist/sweetalert2.all.min.js +2 -2
  4. package/dist/sweetalert2.css +4 -4
  5. package/dist/sweetalert2.js +114 -43
  6. package/dist/sweetalert2.min.css +1 -1
  7. package/dist/sweetalert2.min.js +1 -1
  8. package/package.json +10 -10
  9. package/src/SweetAlert.js +1 -1
  10. package/src/scss/_animations.scss +13 -13
  11. package/src/scss/_toasts-animations.scss +16 -16
  12. package/src/scss/_toasts.scss +24 -23
  13. package/src/utils/dom/domUtils.js +9 -9
  14. package/src/utils/dom/renderers/renderInput.js +94 -32
  15. package/src/variables.scss +48 -52
  16. package/sweetalert2.d.ts +1 -0
package/src/utils/dom/domUtils.js CHANGED
@@ -76,18 +76,18 @@ export const applyCustomClass = (elem, params, className) => {
76
76
 
77
77
  /**
78
78
  * @param {HTMLElement} popup
79
- * @param {string} inputType
79
+ * @param {import('./renderers/renderInput').InputClass} inputClass
80
80
  * @returns {HTMLInputElement | null}
81
81
  */
82
- export const getInput = (popup, inputType) => {
83
- if (!inputType) {
82
+ export const getInput = (popup, inputClass) => {
83
+ if (!inputClass) {
84
84
  return null
85
85
  }
86
- switch (inputType) {
86
+ switch (inputClass) {
87
87
  case 'select':
88
88
  case 'textarea':
89
89
  case 'file':
90
- return popup.querySelector(`.${swalClasses.popup} > .${swalClasses[inputType]}`)
90
+ return popup.querySelector(`.${swalClasses.popup} > .${swalClasses[inputClass]}`)
91
91
  case 'checkbox':
92
92
  return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.checkbox} input`)
93
93
  case 'radio':
@@ -103,7 +103,7 @@ export const getInput = (popup, inputType) => {
103
103
  }
104
104
 
105
105
  /**
106
- * @param {HTMLInputElement} input
106
+ * @param {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} input
107
107
  */
108
108
  export const focusInput = (input) => {
109
109
  input.focus()
@@ -119,7 +119,7 @@ export const focusInput = (input) => {
119
119
 
120
120
  /**
121
121
  * @param {HTMLElement | HTMLElement[] | null} target
122
- * @param {string | string[]} classList
122
+ * @param {string | string[] | readonly string[]} classList
123
123
  * @param {boolean} condition
124
124
  */
125
125
  export const toggleClass = (target, classList, condition) => {
@@ -142,7 +142,7 @@ export const toggleClass = (target, classList, condition) => {
142
142
 
143
143
  /**
144
144
  * @param {HTMLElement | HTMLElement[] | null} target
145
- * @param {string | string[]} classList
145
+ * @param {string | string[] | readonly string[]} classList
146
146
  */
147
147
  export const addClass = (target, classList) => {
148
148
  toggleClass(target, classList, true)
@@ -150,7 +150,7 @@ export const addClass = (target, classList) => {
150
150
 
151
151
  /**
152
152
  * @param {HTMLElement | HTMLElement[] | null} target
153
- * @param {string | string[]} classList
153
+ * @param {string | string[] | readonly string[]} classList
154
154
  */
155
155
  export const removeClass = (target, classList) => {
156
156
  toggleClass(target, classList, false)
package/src/utils/dom/renderers/renderInput.js CHANGED
@@ -1,30 +1,37 @@
1
1
  /// <reference path="../../../../sweetalert2.d.ts"/>
2
2
 
3
+ /**
4
+ * @typedef { import('sweetalert2') } SweetAlert2
5
+ * @typedef { import('sweetalert2').SweetAlertOptions } SweetAlertOptions
6
+ * @typedef { HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement } Input
7
+ * @typedef { 'input' | 'file' | 'range' | 'select' | 'radio' | 'checkbox' | 'textarea' } InputClass
8
+ */
9
+
3
10
  import { swalClasses } from '../../classes.js'
4
11
  import { error, isPromise, warn } from '../../utils.js'
5
12
  import * as dom from '../../dom/index.js'
6
13
  import privateProps from '../../../privateProps.js'
7
14
 
8
- const inputTypes = ['input', 'file', 'range', 'select', 'radio', 'checkbox', 'textarea']
15
+ /** @type {InputClass[]} */
16
+ const inputClasses = ['input', 'file', 'range', 'select', 'radio', 'checkbox', 'textarea']
9
17
 
10
18
  /**
11
- * @typedef { import("sweetalert2").SweetAlertOptions } SweetAlertOptions
19
+ * @param {SweetAlert2} instance
20
+ * @param {SweetAlertOptions} params
12
21
  */
13
-
14
22
  export const renderInput = (instance, params) => {
15
23
  const popup = dom.getPopup()
16
24
  const innerParams = privateProps.innerParams.get(instance)
17
25
  const rerender = !innerParams || params.input !== innerParams.input
18
26
 
19
- inputTypes.forEach((inputType) => {
20
- const inputClass = swalClasses[inputType]
21
- const inputContainer = dom.getDirectChildByClass(popup, inputClass)
27
+ inputClasses.forEach((inputClass) => {
28
+ const inputContainer = dom.getDirectChildByClass(popup, swalClasses[inputClass])
22
29
 
23
30
  // set attributes
24
- setAttributes(inputType, params.inputAttributes)
31
+ setAttributes(inputClass, params.inputAttributes)
25
32
 
26
33
  // set class
27
- inputContainer.className = inputClass
34
+ inputContainer.className = swalClasses[inputClass]
28
35
 
29
36
  if (rerender) {
30
37
  dom.hide(inputContainer)
@@ -40,6 +47,9 @@ export const renderInput = (instance, params) => {
40
47
  }
41
48
  }
42
49
 
50
+ /**
51
+ * @param {SweetAlertOptions} params
52
+ */
43
53
  const showInput = (params) => {
44
54
  if (!renderInputType[params.input]) {
45
55
  return error(
@@ -49,7 +59,7 @@ const showInput = (params) => {
49
59
 
50
60
  const inputContainer = getInputContainer(params.input)
51
61
  const input = renderInputType[params.input](inputContainer, params)
52
- dom.show(input)
62
+ dom.show(inputContainer)
53
63
 
54
64
  // input autofocus
55
65
  setTimeout(() => {
@@ -57,6 +67,9 @@ const showInput = (params) => {
57
67
  })
58
68
  }
59
69
 
70
+ /**
71
+ * @param {HTMLInputElement} input
72
+ */
60
73
  const removeAttributes = (input) => {
61
74
  for (let i = 0; i < input.attributes.length; i++) {
62
75
  const attrName = input.attributes[i].name
@@ -66,8 +79,12 @@ const removeAttributes = (input) => {
66
79
  }
67
80
  }
68
81
 
69
- const setAttributes = (inputType, inputAttributes) => {
70
- const input = dom.getInput(dom.getPopup(), inputType)
82
+ /**
83
+ * @param {InputClass} inputClass
84
+ * @param {SweetAlertOptions['inputAttributes']} inputAttributes
85
+ */
86
+ const setAttributes = (inputClass, inputAttributes) => {
87
+ const input = dom.getInput(dom.getPopup(), inputClass)
71
88
  if (!input) {
72
89
  return
73
90
  }
@@ -79,19 +96,31 @@ const setAttributes = (inputType, inputAttributes) => {
79
96
  }
80
97
  }
81
98
 
99
+ /**
100
+ * @param {SweetAlertOptions} params
101
+ */
82
102
  const setCustomClass = (params) => {
83
103
  const inputContainer = getInputContainer(params.input)
84
- if (params.customClass) {
104
+ if (typeof params.customClass === 'object') {
85
105
  dom.addClass(inputContainer, params.customClass.input)
86
106
  }
87
107
  }
88
108
 
109
+ /**
110
+ * @param {HTMLInputElement | HTMLTextAreaElement} input
111
+ * @param {SweetAlertOptions} params
112
+ */
89
113
  const setInputPlaceholder = (input, params) => {
90
114
  if (!input.placeholder || params.inputPlaceholder) {
91
115
  input.placeholder = params.inputPlaceholder
92
116
  }
93
117
  }
94
118
 
119
+ /**
120
+ * @param {Input} input
121
+ * @param {Input} prependTo
122
+ * @param {SweetAlertOptions} params
123
+ */
95
124
  const setInputLabel = (input, prependTo, params) => {
96
125
  if (params.inputLabel) {
97
126
  input.id = swalClasses.input
@@ -99,35 +128,41 @@ const setInputLabel = (input, prependTo, params) => {
99
128
  const labelClass = swalClasses['input-label']
100
129
  label.setAttribute('for', input.id)
101
130
  label.className = labelClass
102
- dom.addClass(label, params.customClass.inputLabel)
131
+ if (typeof params.customClass === 'object') {
132
+ dom.addClass(label, params.customClass.inputLabel)
133
+ }
103
134
  label.innerText = params.inputLabel
104
135
  prependTo.insertAdjacentElement('beforebegin', label)
105
136
  }
106
137
  }
107
138
 
139
+ /**
140
+ * @param {SweetAlertOptions['input']} inputType
141
+ * @returns {HTMLElement}
142
+ */
108
143
  const getInputContainer = (inputType) => {
109
- const inputClass = swalClasses[inputType] ? swalClasses[inputType] : swalClasses.input
110
- return dom.getDirectChildByClass(dom.getPopup(), inputClass)
144
+ return dom.getDirectChildByClass(dom.getPopup(), swalClasses[inputType] || swalClasses.input)
111
145
  }
112
146
 
113
- const renderInputType = {}
114
-
115
147
  /**
116
- * @param {HTMLInputElement | HTMLTextAreaElement} input
117
- * @param {SweetAlertOptions} params
148
+ * @param {HTMLInputElement | HTMLOutputElement | HTMLTextAreaElement} input
149
+ * @param {SweetAlertOptions['inputValue']} inputValue
118
150
  */
119
- const checkAndSetInputValue = (input, params) => {
120
- if (['string', 'number'].includes(typeof params.inputValue)) {
121
- input.value = `${params.inputValue}`
122
- } else if (!isPromise(params.inputValue)) {
123
- warn(`Unexpected type of inputValue! Expected "string", "number" or "Promise", got "${typeof params.inputValue}"`)
151
+ const checkAndSetInputValue = (input, inputValue) => {
152
+ if (['string', 'number'].includes(typeof inputValue)) {
153
+ input.value = `${inputValue}`
154
+ } else if (!isPromise(inputValue)) {
155
+ warn(`Unexpected type of inputValue! Expected "string", "number" or "Promise", got "${typeof inputValue}"`)
124
156
  }
125
157
  }
126
158
 
159
+ /** @type Record<string, (input: Input | HTMLElement, params: SweetAlertOptions) => Input> */
160
+ const renderInputType = {}
161
+
127
162
  /**
128
163
  * @param {HTMLInputElement} input
129
164
  * @param {SweetAlertOptions} params
130
- * @returns
165
+ * @returns {HTMLInputElement}
131
166
  */
132
167
  renderInputType.text =
133
168
  renderInputType.email =
@@ -136,29 +171,44 @@ renderInputType.text =
136
171
  renderInputType.tel =
137
172
  renderInputType.url =
138
173
  (input, params) => {
139
- checkAndSetInputValue(input, params)
174
+ checkAndSetInputValue(input, params.inputValue)
140
175
  setInputLabel(input, input, params)
141
176
  setInputPlaceholder(input, params)
142
177
  input.type = params.input
143
178
  return input
144
179
  }
145
180
 
181
+ /**
182
+ * @param {HTMLInputElement} input
183
+ * @param {SweetAlertOptions} params
184
+ * @returns {HTMLInputElement}
185
+ */
146
186
  renderInputType.file = (input, params) => {
147
187
  setInputLabel(input, input, params)
148
188
  setInputPlaceholder(input, params)
149
189
  return input
150
190
  }
151
191
 
192
+ /**
193
+ * @param {HTMLInputElement} range
194
+ * @param {SweetAlertOptions} params
195
+ * @returns {HTMLInputElement}
196
+ */
152
197
  renderInputType.range = (range, params) => {
153
198
  const rangeInput = range.querySelector('input')
154
199
  const rangeOutput = range.querySelector('output')
155
- rangeInput.value = params.inputValue
200
+ checkAndSetInputValue(rangeInput, params.inputValue)
156
201
  rangeInput.type = params.input
157
- rangeOutput.value = params.inputValue
202
+ checkAndSetInputValue(rangeOutput, params.inputValue)
158
203
  setInputLabel(rangeInput, range, params)
159
204
  return range
160
205
  }
161
206
 
207
+ /**
208
+ * @param {HTMLSelectElement} select
209
+ * @param {SweetAlertOptions} params
210
+ * @returns {HTMLSelectElement}
211
+ */
162
212
  renderInputType.select = (select, params) => {
163
213
  select.textContent = ''
164
214
  if (params.inputPlaceholder) {
@@ -173,32 +223,44 @@ renderInputType.select = (select, params) => {
173
223
  return select
174
224
  }
175
225
 
226
+ /**
227
+ * @param {HTMLInputElement} radio
228
+ * @returns {HTMLInputElement}
229
+ */
176
230
  renderInputType.radio = (radio) => {
177
231
  radio.textContent = ''
178
232
  return radio
179
233
  }
180
234
 
235
+ /**
236
+ * @param {HTMLLabelElement} checkboxContainer
237
+ * @param {SweetAlertOptions} params
238
+ * @returns {HTMLInputElement}
239
+ */
181
240
  renderInputType.checkbox = (checkboxContainer, params) => {
182
- /** @type {HTMLInputElement} */
183
241
  const checkbox = dom.getInput(dom.getPopup(), 'checkbox')
184
242
  checkbox.value = '1'
185
243
  checkbox.id = swalClasses.checkbox
186
244
  checkbox.checked = Boolean(params.inputValue)
187
245
  const label = checkboxContainer.querySelector('span')
188
246
  dom.setInnerHtml(label, params.inputPlaceholder)
189
- return checkboxContainer
247
+ return checkbox
190
248
  }
191
249
 
192
250
  /**
193
251
  * @param {HTMLTextAreaElement} textarea
194
252
  * @param {SweetAlertOptions} params
195
- * @returns
253
+ * @returns {HTMLTextAreaElement}
196
254
  */
197
255
  renderInputType.textarea = (textarea, params) => {
198
- checkAndSetInputValue(textarea, params)
256
+ checkAndSetInputValue(textarea, params.inputValue)
199
257
  setInputPlaceholder(textarea, params)
200
258
  setInputLabel(textarea, textarea, params)
201
259
 
260
+ /**
261
+ * @param {HTMLElement} el
262
+ * @returns {number}
263
+ */
202
264
  const getMargin = (el) =>
203
265
  parseInt(window.getComputedStyle(el).marginLeft) + parseInt(window.getComputedStyle(el).marginRight)
204
266
 
package/src/variables.scss CHANGED
@@ -1,9 +1,9 @@
1
- $swal2-white: #fff !default;
2
- $swal2-black: #000 !default;
3
- $swal2-outline-color: rgba(100, 150, 200, .5) !default;
1
+ $swal2-white: #fff !default;
2
+ $swal2-black: #000 !default;
3
+ $swal2-outline-color: rgba(100, 150, 200, 0.5) !default;
4
4
 
5
5
  // CONTAINER
6
- $swal2-container-padding: .625em !default;
6
+ $swal2-container-padding: 0.625em !default;
7
7
 
8
8
  // POPUP
9
9
  $swal2-width: 32em !default;
@@ -14,8 +14,8 @@ $swal2-border-radius: 5px !default;
14
14
  $swal2-box-shadow: #d9d9d9 !default;
15
15
 
16
16
  // ANIMATIONS
17
- $swal2-show-animation: swal2-show .3s !default;
18
- $swal2-hide-animation: swal2-hide .15s forwards !default;
17
+ $swal2-show-animation: swal2-show 0.3s !default;
18
+ $swal2-hide-animation: swal2-hide 0.15s forwards !default;
19
19
 
20
20
  // BACKGROUND
21
21
  $swal2-background: $swal2-white !default;
@@ -25,19 +25,19 @@ $swal2-font: inherit !default;
25
25
  $swal2-font-size: 1rem !default;
26
26
 
27
27
  // BACKDROP
28
- $swal2-backdrop: rgba($swal2-black, .4) !default;
29
- $swal2-backdrop-transition: background-color .1s !default;
28
+ $swal2-backdrop: rgba($swal2-black, 0.4) !default;
29
+ $swal2-backdrop-transition: background-color 0.1s !default;
30
30
 
31
31
  // ICONS
32
32
  $swal2-icon-size: 5em !default;
33
33
  $swal2-icon-animations: true !default;
34
- $swal2-icon-margin: 2.5em auto .6em !default;
34
+ $swal2-icon-margin: 2.5em auto 0.6em !default;
35
35
  $swal2-icon-font-family: inherit !default;
36
36
  $swal2-icon-font-size: 3.75em !default;
37
37
  $swal2-icon-border-color: #000 !default;
38
38
  $swal2-icon-zoom: null !default;
39
39
  $swal2-success: #a5dc86 !default;
40
- $swal2-success-border: rgba($swal2-success, .3) !default;
40
+ $swal2-success-border: rgba($swal2-success, 0.3) !default;
41
41
  $swal2-error: #f27474 !default;
42
42
  $swal2-warning: #f8bb86 !default;
43
43
  $swal2-info: #3fc3ee !default;
@@ -50,7 +50,7 @@ $swal2-image-margin: 2em auto 1em !default;
50
50
  $swal2-title-position: relative !default;
51
51
  $swal2-title-max-width: 100% !default;
52
52
  $swal2-title-margin: 0 !default;
53
- $swal2-title-padding: .8em 1em 0 !default;
53
+ $swal2-title-padding: 0.8em 1em 0 !default;
54
54
  $swal2-title-color: inherit !default;
55
55
  $swal2-title-font-size: 1.875em !default;
56
56
  $swal2-title-font-weight: 600 !default;
@@ -58,7 +58,7 @@ $swal2-title-text-align: center !default;
58
58
 
59
59
  // HTML CONTAINER
60
60
  $swal2-html-container-justify-content: center !default;
61
- $swal2-html-container-margin: 1em 1.6em .3em !default;
61
+ $swal2-html-container-margin: 1em 1.6em 0.3em !default;
62
62
  $swal2-html-container-padding: 0 !default;
63
63
  $swal2-html-container-overflow: auto !default;
64
64
  $swal2-html-container-color: inherit !default;
@@ -73,23 +73,23 @@ $swal2-html-container-word-break: break-word !default;
73
73
  $swal2-input-margin: 1em 2em 3px !default;
74
74
  $swal2-input-width: auto !default;
75
75
  $swal2-input-height: 2.625em !default;
76
- $swal2-input-padding: 0 .75em !default;
76
+ $swal2-input-padding: 0 0.75em !default;
77
77
  $swal2-input-border: 1px solid lighten($swal2-black, 85) !default;
78
- $swal2-input-border-radius: .1875em !default;
79
- $swal2-input-box-shadow: inset 0 1px 1px rgba($swal2-black, .06), 0 0 0 3px transparent !default;
78
+ $swal2-input-border-radius: 0.1875em !default;
79
+ $swal2-input-box-shadow: inset 0 1px 1px rgba($swal2-black, 0.06), 0 0 0 3px transparent !default;
80
80
  $swal2-input-font-size: 1.125em !default;
81
- $swal2-input-background: inherit !default;
81
+ $swal2-input-background: transparent !default;
82
82
  $swal2-input-color: inherit !default;
83
- $swal2-input-transition: border-color .1s, box-shadow .1s !default;
83
+ $swal2-input-transition: border-color 0.1s, box-shadow 0.1s !default;
84
84
 
85
85
  // INPUT:FOCUS
86
86
  $swal2-input-focus-border: 1px solid #b4dbed !default;
87
87
  $swal2-input-focus-outline: none !default;
88
- $swal2-input-focus-box-shadow: inset 0 1px 1px rgba($swal2-black, .06), 0 0 0 3px $swal2-outline-color !default;
88
+ $swal2-input-focus-box-shadow: inset 0 1px 1px rgba($swal2-black, 0.06), 0 0 0 3px $swal2-outline-color !default;
89
89
 
90
90
  // TEXTAREA SPECIFIC VARIABLES
91
91
  $swal2-textarea-height: 6.75em !default;
92
- $swal2-textarea-padding: .75em !default;
92
+ $swal2-textarea-padding: 0.75em !default;
93
93
 
94
94
  // INPUT LABEL
95
95
  $swal2-input-label-margin: 1em auto 0 !default;
@@ -99,7 +99,7 @@ $swal2-input-label-justify-content: center !default;
99
99
  $swal2-validation-message-align-items: center !default;
100
100
  $swal2-validation-message-justify-content: center !default;
101
101
  $swal2-validation-message-margin: 1em 0 0 !default;
102
- $swal2-validation-message-padding: .625em !default;
102
+ $swal2-validation-message-padding: 0.625em !default;
103
103
  $swal2-validation-message-background: lighten($swal2-black, 94) !default;
104
104
  $swal2-validation-message-color: lighten($swal2-black, 40) !default;
105
105
  $swal2-validation-message-font-size: 1em !default;
@@ -112,7 +112,7 @@ $swal2-validation-message-icon-zoom: null !default;
112
112
  $swal2-progress-steps-flex-wrap: wrap !default;
113
113
  $swal2-progress-steps-align-items: center !default;
114
114
  $swal2-progress-steps-max-width: 100% !default;
115
- $swal2-progress-steps-background: inherit !default;
115
+ $swal2-progress-steps-background: transparent !default;
116
116
  $swal2-progress-steps-margin: 1.25em auto !default;
117
117
  $swal2-progress-steps-padding: 0 !default;
118
118
  $swal2-progress-steps-font-weight: 600 !default;
@@ -133,8 +133,8 @@ $swal2-footer-color: inherit !default;
133
133
  $swal2-footer-font-size: 1em !default;
134
134
 
135
135
  // TIMER POGRESS BAR
136
- $swal2-timer-progress-bar-height: .25em;
137
- $swal2-timer-progress-bar-background: rgba($swal2-black, .2) !default;
136
+ $swal2-timer-progress-bar-height: 0.25em;
137
+ $swal2-timer-progress-bar-background: rgba($swal2-black, 0.2) !default;
138
138
 
139
139
  // CLOSE BUTTON
140
140
  $swal2-close-button-justify-self: end !default;
@@ -145,7 +145,7 @@ $swal2-close-button-height: 1.2em !default;
145
145
  $swal2-close-button-position: null !default;
146
146
  $swal2-close-button-gap: 0 !default;
147
147
  $swal2-close-button-padding: 0 !default;
148
- $swal2-close-button-transition: color .1s, box-shadow .1s !default;
148
+ $swal2-close-button-transition: color 0.1s, box-shadow 0.1s !default;
149
149
  $swal2-close-button-border: none !default;
150
150
  $swal2-close-button-border-radius: $swal2-border-radius !default;
151
151
  $swal2-close-button-outline: null !default;
@@ -173,42 +173,42 @@ $swal2-actions-margin: 1.25em auto 0 !default;
173
173
  $swal2-actions-padding: 0 !default;
174
174
 
175
175
  // COMMON VARIABLES FOR ALL ACTION BUTTONS
176
- $swal2-button-margin: .3125em !default;
177
- $swal2-button-padding: .625em 1.1em !default;
178
- $swal2-button-transition: box-shadow .1s !default;
176
+ $swal2-button-margin: 0.3125em !default;
177
+ $swal2-button-padding: 0.625em 1.1em !default;
178
+ $swal2-button-transition: box-shadow 0.1s !default;
179
179
  $swal2-button-box-shadow: 0 0 0 3px transparent !default;
180
180
  $swal2-button-font-weight: 500 !default;
181
- $swal2-button-darken-hover: rgba($swal2-black, .1) !default;
182
- $swal2-button-darken-active: rgba($swal2-black, .2) !default;
181
+ $swal2-button-darken-hover: rgba($swal2-black, 0.1) !default;
182
+ $swal2-button-darken-active: rgba($swal2-black, 0.2) !default;
183
183
  $swal2-button-focus-outline: none !default;
184
184
  $swal2-button-focus-box-shadow: 0 0 0 3px $swal2-outline-color !default;
185
185
 
186
186
  // CONFIRM BUTTON
187
187
  $swal2-confirm-button-order: null !default;
188
188
  $swal2-confirm-button-border: 0 !default;
189
- $swal2-confirm-button-border-radius: .25em !default;
189
+ $swal2-confirm-button-border-radius: 0.25em !default;
190
190
  $swal2-confirm-button-background-color: #7066e0 !default;
191
191
  $swal2-confirm-button-color: $swal2-white !default;
192
192
  $swal2-confirm-button-font-size: 1em !default;
193
- $swal2-confirm-button-focus-box-shadow: 0 0 0 3px rgba($swal2-confirm-button-background-color, .5) !default;
193
+ $swal2-confirm-button-focus-box-shadow: 0 0 0 3px rgba($swal2-confirm-button-background-color, 0.5) !default;
194
194
 
195
195
  // DENY BUTTON
196
196
  $swal2-deny-button-order: null !default;
197
197
  $swal2-deny-button-border: 0 !default;
198
- $swal2-deny-button-border-radius: .25em !default;
198
+ $swal2-deny-button-border-radius: 0.25em !default;
199
199
  $swal2-deny-button-background-color: #dc3741 !default;
200
200
  $swal2-deny-button-color: $swal2-white !default;
201
201
  $swal2-deny-button-font-size: 1em !default;
202
- $swal2-deny-button-focus-box-shadow: 0 0 0 3px rgba($swal2-deny-button-background-color, .5) !default;
202
+ $swal2-deny-button-focus-box-shadow: 0 0 0 3px rgba($swal2-deny-button-background-color, 0.5) !default;
203
203
 
204
204
  // CANCEL BUTTON
205
205
  $swal2-cancel-button-order: null !default;
206
206
  $swal2-cancel-button-border: 0 !default;
207
- $swal2-cancel-button-border-radius: .25em !default;
207
+ $swal2-cancel-button-border-radius: 0.25em !default;
208
208
  $swal2-cancel-button-background-color: #6e7881 !default;
209
209
  $swal2-cancel-button-color: $swal2-white !default;
210
210
  $swal2-cancel-button-font-size: 1em !default;
211
- $swal2-cancel-button-focus-box-shadow: 0 0 0 3px rgba($swal2-cancel-button-background-color, .5) !default;
211
+ $swal2-cancel-button-focus-box-shadow: 0 0 0 3px rgba($swal2-cancel-button-background-color, 0.5) !default;
212
212
 
213
213
  // LOADER
214
214
  $swal2-loader-align-items: center !default;
@@ -217,40 +217,36 @@ $swal2-loader-width: 2.2em !default;
217
217
  $swal2-loader-height: 2.2em !default;
218
218
  $swal2-loader-margin: 0 1.875em !default;
219
219
  $swal2-loader-animation: swal2-rotate-loading 1.5s linear 0s infinite normal !default;
220
- $swal2-loader-border-width: .25em !default;
220
+ $swal2-loader-border-width: 0.25em !default;
221
221
  $swal2-loader-border-style: solid !default;
222
222
  $swal2-loader-border-radius: 100% !default;
223
223
  $swal2-loader-border-color: #2778c4 transparent #2778c4 transparent !default;
224
224
 
225
225
  // TOASTS
226
- $swal2-toast-show-animation: swal2-toast-show .5s !default;
227
- $swal2-toast-hide-animation: swal2-toast-hide .1s forwards !default;
226
+ $swal2-toast-show-animation: swal2-toast-show 0.5s !default;
227
+ $swal2-toast-hide-animation: swal2-toast-hide 0.1s forwards !default;
228
228
  $swal2-toast-border: none !default;
229
- $swal2-toast-box-shadow:
230
- 0 0 1px hsl(0deg 0% 0% / 0.075),
231
- 0 1px 2px hsl(0deg 0% 0% / 0.075),
232
- 1px 2px 4px hsl(0deg 0% 0% / 0.075),
233
- 1px 3px 8px hsl(0deg 0% 0% / 0.075),
234
- 2px 4px 16px hsl(0deg 0% 0% / 0.075) !default;
229
+ $swal2-toast-box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.075), 0 1px 2px hsl(0deg 0% 0% / 0.075),
230
+ 1px 2px 4px hsl(0deg 0% 0% / 0.075), 1px 3px 8px hsl(0deg 0% 0% / 0.075), 2px 4px 16px hsl(0deg 0% 0% / 0.075) !default;
235
231
  $swal2-toast-background: $swal2-white !default;
236
- $swal2-toast-close-button-width: .8em !default;
237
- $swal2-toast-close-button-height: .8em !default;
232
+ $swal2-toast-close-button-width: 0.8em !default;
233
+ $swal2-toast-close-button-height: 0.8em !default;
238
234
  $swal2-toast-close-button-margin: 0 !default;
239
235
  $swal2-toast-close-button-font-size: 2em !default;
240
236
  $swal2-toast-width: 360px !default;
241
237
  $swal2-toast-padding: 1em !default;
242
- $swal2-toast-title-margin: .5em 1em !default;
238
+ $swal2-toast-title-margin: 0.5em 1em !default;
243
239
  $swal2-toast-title-padding: 0 !default;
244
240
  $swal2-toast-title-font-size: 1em !default;
245
241
  $swal2-toast-icon-font-size: 1.8em !default;
246
- $swal2-toast-html-container-margin: .5em 1em !default;
242
+ $swal2-toast-html-container-margin: 0.5em 1em !default;
247
243
  $swal2-toast-html-container-padding: 0 !default;
248
244
  $swal2-toast-html-container-font-size: 1em !default;
249
245
  $swal2-toast-input-height: 2em !default;
250
- $swal2-toast-input-margin: .5em !default;
246
+ $swal2-toast-input-margin: 0.5em !default;
251
247
  $swal2-toast-input-font-size: 1em !default;
252
248
  $swal2-toast-validation-font-size: 1em !default;
253
249
  $swal2-toast-buttons-font-size: 1em !default;
254
- $swal2-toast-footer-margin: .5em 0 0 !default;
255
- $swal2-toast-footer-padding: .5em 0 0 !default;
256
- $swal2-toast-footer-font-size: .8em !default;
250
+ $swal2-toast-footer-margin: 0.5em 0 0 !default;
251
+ $swal2-toast-footer-padding: 0.5em 0 0 !default;
252
+ $swal2-toast-footer-font-size: 0.8em !default;
package/sweetalert2.d.ts CHANGED
@@ -421,6 +421,7 @@ declare module 'sweetalert2' {
421
421
  image?: string | readonly string[]
422
422
  htmlContainer?: string | readonly string[]
423
423
  input?: string | readonly string[]
424
+ inputLabel?: string | readonly string[]
424
425
  validationMessage?: string | readonly string[]
425
426
  actions?: string | readonly string[]
426
427
  confirmButton?: string | readonly string[]