@ionic/core 7.5.4-dev.11699469920.1af6ea12 → 7.5.4-dev.11699632730.1e6d9b70

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 (121) hide show
  1. package/components/ion-modal.js +2 -2
  2. package/components/ion-select.js +1 -23
  3. package/components/ion-toast.js +67 -417
  4. package/components/overlays.js +1 -2
  5. package/components/radio-group.js +2 -0
  6. package/components/radio.js +40 -2
  7. package/css/ionic.bundle.css +1 -1
  8. package/css/ionic.bundle.css.map +1 -1
  9. package/css/themes/dark.css +135 -0
  10. package/css/themes/dark.css.map +1 -0
  11. package/css/utils.bundle.css +133 -0
  12. package/css/utils.bundle.css.map +1 -1
  13. package/dist/cjs/compare-with-utils-c0444525.js +44 -0
  14. package/dist/cjs/index.cjs.js +1 -1
  15. package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
  16. package/dist/cjs/ion-alert.cjs.entry.js +1 -1
  17. package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
  18. package/dist/cjs/ion-loading.cjs.entry.js +1 -1
  19. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  20. package/dist/cjs/ion-modal.cjs.entry.js +2 -2
  21. package/dist/cjs/ion-popover.cjs.entry.js +1 -1
  22. package/dist/cjs/ion-radio_2.cjs.entry.js +4 -1
  23. package/dist/cjs/ion-select_3.cjs.entry.js +6 -27
  24. package/dist/cjs/ion-toast.cjs.entry.js +83 -430
  25. package/dist/cjs/ionic.cjs.js +1 -1
  26. package/dist/cjs/loader.cjs.js +1 -1
  27. package/dist/cjs/{overlays-ba1a1e21.js → overlays-d80a2cf2.js} +0 -2
  28. package/dist/collection/components/modal/gestures/swipe-to-close.js +1 -2
  29. package/dist/collection/components/radio/radio.js +3 -2
  30. package/dist/collection/components/radio-group/radio-group.js +24 -0
  31. package/dist/collection/components/select/select.js +2 -24
  32. package/dist/collection/components/toast/animations/ios.enter.js +1 -2
  33. package/dist/collection/components/toast/animations/md.enter.js +1 -2
  34. package/dist/collection/components/toast/animations/utils.js +0 -11
  35. package/dist/collection/components/toast/toast.js +1 -104
  36. package/dist/collection/utils/forms/compare-with-utils.js +39 -0
  37. package/dist/collection/utils/forms/index.js +1 -0
  38. package/dist/collection/utils/overlays.js +0 -1
  39. package/dist/docs.json +43 -38
  40. package/dist/esm/compare-with-utils-4928c09d.js +41 -0
  41. package/dist/esm/index.js +1 -1
  42. package/dist/esm/ion-action-sheet.entry.js +1 -1
  43. package/dist/esm/ion-alert.entry.js +1 -1
  44. package/dist/esm/ion-datetime_3.entry.js +1 -1
  45. package/dist/esm/ion-loading.entry.js +1 -1
  46. package/dist/esm/ion-menu_3.entry.js +1 -1
  47. package/dist/esm/ion-modal.entry.js +2 -2
  48. package/dist/esm/ion-popover.entry.js +1 -1
  49. package/dist/esm/ion-radio_2.entry.js +4 -1
  50. package/dist/esm/ion-select_3.entry.js +2 -23
  51. package/dist/esm/ion-toast.entry.js +66 -413
  52. package/dist/esm/ionic.js +1 -1
  53. package/dist/esm/loader.js +1 -1
  54. package/dist/esm/{overlays-d79b34b4.js → overlays-a31c8878.js} +1 -2
  55. package/dist/esm-es5/compare-with-utils-4928c09d.js +4 -0
  56. package/dist/esm-es5/index.js +1 -1
  57. package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
  58. package/dist/esm-es5/ion-alert.entry.js +1 -1
  59. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  60. package/dist/esm-es5/ion-loading.entry.js +1 -1
  61. package/dist/esm-es5/ion-menu_3.entry.js +1 -1
  62. package/dist/esm-es5/ion-modal.entry.js +1 -1
  63. package/dist/esm-es5/ion-popover.entry.js +1 -1
  64. package/dist/esm-es5/ion-radio_2.entry.js +1 -1
  65. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  66. package/dist/esm-es5/ion-toast.entry.js +1 -1
  67. package/dist/esm-es5/ionic.js +1 -1
  68. package/dist/esm-es5/loader.js +1 -1
  69. package/dist/esm-es5/{overlays-d79b34b4.js → overlays-a31c8878.js} +1 -1
  70. package/dist/html.html-data.json +5 -10
  71. package/dist/ionic/index.esm.js +1 -1
  72. package/dist/ionic/ionic.esm.js +1 -1
  73. package/dist/ionic/p-02663394.system.js +1 -1
  74. package/dist/ionic/p-139bd79d.system.entry.js +4 -0
  75. package/dist/ionic/{p-3dedd258.system.entry.js → p-1e59dd04.system.entry.js} +1 -1
  76. package/dist/ionic/{p-938c4956.js → p-307963db.js} +1 -1
  77. package/dist/ionic/{p-1fc6b5a5.system.entry.js → p-3a769110.system.entry.js} +1 -1
  78. package/dist/ionic/p-3bc3d880.system.js +4 -0
  79. package/dist/ionic/p-43716898.js +4 -0
  80. package/dist/ionic/{p-1511dc35.system.js → p-4c75cb48.system.js} +1 -1
  81. package/dist/ionic/p-539c09e8.system.entry.js +4 -0
  82. package/dist/ionic/{p-e525dbea.entry.js → p-53b1930e.entry.js} +1 -1
  83. package/dist/ionic/{p-ab1908ba.system.entry.js → p-59107f99.system.entry.js} +1 -1
  84. package/dist/ionic/p-6b45cfd0.system.entry.js +4 -0
  85. package/dist/ionic/{p-664cc492.entry.js → p-75338011.entry.js} +1 -1
  86. package/dist/ionic/p-7d68e4ea.entry.js +4 -0
  87. package/dist/ionic/{p-78a8e1e8.entry.js → p-8140a084.entry.js} +1 -1
  88. package/dist/ionic/{p-2151a4a4.system.entry.js → p-90020ef0.system.entry.js} +1 -1
  89. package/dist/ionic/{p-53f75103.system.js → p-98c70e3c.system.js} +1 -1
  90. package/dist/ionic/p-999a7271.entry.js +4 -0
  91. package/dist/ionic/p-a4e4dba1.entry.js +4 -0
  92. package/dist/ionic/{p-138a4a93.entry.js → p-b86c6c05.entry.js} +1 -1
  93. package/dist/ionic/p-be499f29.entry.js +4 -0
  94. package/dist/ionic/{p-a9424586.entry.js → p-c09fa14d.entry.js} +1 -1
  95. package/dist/ionic/{p-020dd47f.entry.js → p-c32a6c04.entry.js} +1 -1
  96. package/dist/ionic/{p-81bdfa1c.system.entry.js → p-d54a8393.system.entry.js} +1 -1
  97. package/dist/ionic/p-e66f7d10.system.entry.js +4 -0
  98. package/dist/ionic/{p-cb6c380e.system.entry.js → p-e91c7eb4.system.entry.js} +1 -1
  99. package/dist/types/components/radio-group/radio-group-interface.d.ts +1 -0
  100. package/dist/types/components/radio-group/radio-group.d.ts +8 -1
  101. package/dist/types/components/select/select.d.ts +4 -1
  102. package/dist/types/components/toast/animations/utils.d.ts +0 -9
  103. package/dist/types/components/toast/toast-interface.d.ts +0 -1
  104. package/dist/types/components/toast/toast.d.ts +1 -28
  105. package/dist/types/components.d.ts +14 -14
  106. package/dist/types/utils/forms/compare-with-utils.d.ts +18 -0
  107. package/dist/types/utils/forms/index.d.ts +1 -0
  108. package/dist/types/utils/overlays.d.ts +0 -1
  109. package/hydrate/index.js +107 -436
  110. package/package.json +1 -1
  111. package/dist/collection/components/toast/gestures/swipe-to-dismiss.js +0 -267
  112. package/dist/collection/components/toast/test/swipe-gesture/toast.e2e.js +0 -84
  113. package/dist/ionic/p-344706aa.entry.js +0 -4
  114. package/dist/ionic/p-637d836a.system.entry.js +0 -4
  115. package/dist/ionic/p-6c89025e.system.entry.js +0 -4
  116. package/dist/ionic/p-8414ed31.entry.js +0 -4
  117. package/dist/ionic/p-d075c0aa.system.entry.js +0 -4
  118. package/dist/ionic/p-e3b7a2d0.system.entry.js +0 -4
  119. package/dist/ionic/p-ea1650b0.entry.js +0 -4
  120. package/dist/ionic/p-f2d4e3c8.entry.js +0 -4
  121. package/dist/types/components/toast/gestures/swipe-to-dismiss.d.ts +0 -9
@@ -6,102 +6,13 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
6
6
  import { g as getElementRoot, r as raf } from './helpers-3379ba19.js';
7
7
  import { c as createLockController } from './lock-controller-e8c6c051.js';
8
8
  import { p as printIonWarning } from './index-595d62c9.js';
9
- import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-d79b34b4.js';
9
+ import { d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-a31c8878.js';
10
10
  import { g as getClassMap, c as createColorClasses } from './theme-17531cdf.js';
11
11
  import { c as config, b as getIonMode } from './ionic-global-7efdecd0.js';
12
12
  import { c as createAnimation } from './animation-cf3dd234.js';
13
13
  import { w as win } from './index-a5d50daf.js';
14
- import { createGesture } from './index-ff313b19.js';
15
14
  import './framework-delegate-aa433dea.js';
16
15
  import './hardware-back-button-39299f84.js';
17
- import './gesture-controller-0fa396c4.js';
18
-
19
- /**
20
- * Calculate the CSS top and bottom position of the toast, to be used
21
- * as starting points for the animation keyframes.
22
- *
23
- * The default animations for both MD and iOS
24
- * use translateY, which calculates from the
25
- * top edge of the screen. This behavior impacts
26
- * how we compute the offset when a toast has
27
- * position='bottom' since we need to calculate from
28
- * the bottom edge of the screen instead.
29
- *
30
- * @param position The value of the toast's position prop.
31
- * @param positionAnchor The element the toast should be anchored to,
32
- * if applicable.
33
- * @param mode The toast component's mode (md, ios, etc).
34
- * @param toast A reference to the toast element itself.
35
- */
36
- function getAnimationPosition(position, positionAnchor, mode, toast) {
37
- /**
38
- * Start with a predefined offset from the edge the toast will be
39
- * positioned relative to, whether on the screen or anchor element.
40
- */
41
- let offset;
42
- if (mode === 'md') {
43
- offset = position === 'top' ? 8 : -8;
44
- }
45
- else {
46
- offset = position === 'top' ? 10 : -10;
47
- }
48
- /**
49
- * If positionAnchor is defined, add in the distance from the target
50
- * screen edge to the target anchor edge. For position="top", the
51
- * bottom anchor edge is targeted. For position="bottom", the top
52
- * anchor edge is targeted.
53
- */
54
- if (positionAnchor && win) {
55
- warnIfAnchorIsHidden(positionAnchor, toast);
56
- const box = positionAnchor.getBoundingClientRect();
57
- if (position === 'top') {
58
- offset += box.bottom;
59
- }
60
- else if (position === 'bottom') {
61
- /**
62
- * Just box.top is the distance from the top edge of the screen
63
- * to the top edge of the anchor. We want to calculate from the
64
- * bottom edge of the screen instead.
65
- */
66
- offset -= win.innerHeight - box.top;
67
- }
68
- /**
69
- * We don't include safe area here because that should already be
70
- * accounted for when checking the position of the anchor.
71
- */
72
- return {
73
- top: `${offset}px`,
74
- bottom: `${offset}px`,
75
- };
76
- }
77
- else {
78
- return {
79
- top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
80
- bottom: `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
81
- };
82
- }
83
- }
84
- /**
85
- * If the anchor element is hidden, getBoundingClientRect()
86
- * will return all 0s for it, which can cause unexpected
87
- * results in the position calculation when animating.
88
- */
89
- function warnIfAnchorIsHidden(positionAnchor, toast) {
90
- if (positionAnchor.offsetParent === null) {
91
- printIonWarning('The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.', toast);
92
- }
93
- }
94
- /**
95
- * Returns the top offset required to place
96
- * the toast in the middle of the screen.
97
- * Only needed when position="toast".
98
- * @param toastHeight: The height of the ion-toast element
99
- * @param wrapperHeight: The height of the .toast-wrapper element
100
- * inside the toast's shadow root.
101
- */
102
- const getOffsetForMiddlePosition = (toastHeight, wrapperHeight) => {
103
- return Math.floor(toastHeight / 2 - wrapperHeight / 2);
104
- };
105
16
 
106
17
  /**
107
18
  * iOS Toast Enter Animation
@@ -118,7 +29,7 @@ const iosEnterAnimation = (baseEl, opts) => {
118
29
  wrapperAnimation.fromTo('transform', 'translateY(-100%)', `translateY(${top})`);
119
30
  break;
120
31
  case 'middle':
121
- const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
32
+ const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
122
33
  wrapperEl.style.top = `${topPosition}px`;
123
34
  wrapperAnimation.fromTo('opacity', 0.01, 1);
124
35
  break;
@@ -169,7 +80,7 @@ const mdEnterAnimation = (baseEl, opts) => {
169
80
  wrapperAnimation.fromTo('opacity', 0.01, 1);
170
81
  break;
171
82
  case 'middle':
172
- const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
83
+ const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
173
84
  wrapperEl.style.top = `${topPosition}px`;
174
85
  wrapperAnimation.fromTo('opacity', 0.01, 1);
175
86
  break;
@@ -194,261 +105,80 @@ const mdLeaveAnimation = (baseEl) => {
194
105
  };
195
106
 
196
107
  /**
197
- * Create a gesture that allows the Toast
198
- * to be swiped to dismiss.
199
- * @param el - The Toast element
200
- * @param toastPosition - The last computed position of the Toast. This is computed in the "present" method.
201
- * @param onDismiss - A callback to fire when the Toast was swiped to dismiss.
108
+ * Calculate the CSS top and bottom position of the toast, to be used
109
+ * as starting points for the animation keyframes.
110
+ *
111
+ * The default animations for both MD and iOS
112
+ * use translateY, which calculates from the
113
+ * top edge of the screen. This behavior impacts
114
+ * how we compute the offset when a toast has
115
+ * position='bottom' since we need to calculate from
116
+ * the bottom edge of the screen instead.
117
+ *
118
+ * @param position The value of the toast's position prop.
119
+ * @param positionAnchor The element the toast should be anchored to,
120
+ * if applicable.
121
+ * @param mode The toast component's mode (md, ios, etc).
122
+ * @param toast A reference to the toast element itself.
202
123
  */
203
- const createSwipeToDismissGesture = (el, toastPosition, onDismiss) => {
204
- /**
205
- * Users should swipe on the visible toast wrapper
206
- * rather than on ion-toast which covers the entire screen.
207
- * When testing the class instance the inner wrapper will not
208
- * be defined. As a result, we use a placeholder element in those environments.
209
- */
210
- const wrapperEl = getElementRoot(el).querySelector('.toast-wrapper');
211
- const hostElHeight = el.clientHeight;
212
- const wrapperElBox = wrapperEl.getBoundingClientRect();
213
- /**
214
- * The maximum amount that
215
- * the toast can be swiped. This should
216
- * account for the wrapper element's height
217
- * too so the toast can be swiped offscreen
218
- * completely.
219
- */
220
- let MAX_SWIPE_DISTANCE = 0;
221
- /**
222
- * The step value at which a toast
223
- * is eligible for dismissing via gesture.
224
- */
225
- const DISMISS_THRESHOLD = 0.5;
226
- /**
227
- * The middle position Toast starts 50% of the way
228
- * through the animation, so we need to use this
229
- * as the starting point for our step values.
230
- */
231
- const STEP_OFFSET = el.position === 'middle' ? 0.5 : 0;
124
+ function getAnimationPosition(position, positionAnchor, mode, toast) {
232
125
  /**
233
- * When the Toast is at the top users will be
234
- * swiping up. As a result, the delta values will be
235
- * negative numbers which will result in negative steps
236
- * and thresholds. As a result, we need to make those numbers
237
- * positive.
126
+ * Start with a predefined offset from the edge the toast will be
127
+ * positioned relative to, whether on the screen or anchor element.
238
128
  */
239
- const INVERSION_FACTOR = el.position === 'top' ? -1 : 1;
129
+ let offset;
130
+ if (mode === 'md') {
131
+ offset = position === 'top' ? 8 : -8;
132
+ }
133
+ else {
134
+ offset = position === 'top' ? 10 : -10;
135
+ }
240
136
  /**
241
- * The top offset that places the
242
- * toast in the middle of the screen.
243
- * Only needed when position="middle".
137
+ * If positionAnchor is defined, add in the distance from the target
138
+ * screen edge to the target anchor edge. For position="top", the
139
+ * bottom anchor edge is targeted. For position="bottom", the top
140
+ * anchor edge is targeted.
244
141
  */
245
- const topPosition = getOffsetForMiddlePosition(hostElHeight, wrapperElBox.height);
246
- const SWIPE_UP_DOWN_KEYFRAMES = [
247
- { offset: 0, transform: `translateY(-${topPosition + wrapperElBox.height}px)` },
248
- { offset: 0.5, transform: `translateY(0px)` },
249
- { offset: 1, transform: `translateY(${topPosition + wrapperElBox.height}px)` },
250
- ];
251
- const swipeAnimation = createAnimation('toast-swipe-to-dismiss-animation')
252
- .addElement(wrapperEl)
253
- /**
254
- * The specific value here does not actually
255
- * matter. We just need this to be a positive
256
- * value so the animation does not jump
257
- * to the end when the user beings to drag.
258
- */
259
- .duration(100);
260
- switch (el.position) {
261
- case 'middle':
262
- MAX_SWIPE_DISTANCE = hostElHeight + wrapperElBox.height;
263
- swipeAnimation.keyframes(SWIPE_UP_DOWN_KEYFRAMES);
264
- /**
265
- * Toast can be swiped up or down but
266
- * should start in the middle of the screen.
267
- */
268
- swipeAnimation.progressStart(true, 0.5);
269
- break;
270
- case 'top':
271
- /**
272
- * The bottom edge of the wrapper
273
- * includes the distance between the top
274
- * of the screen and the top of the wrapper
275
- * as well as the wrapper height so the wrapper
276
- * can be dragged fully offscreen.
277
- */
278
- MAX_SWIPE_DISTANCE = wrapperElBox.bottom;
279
- swipeAnimation.keyframes([
280
- { offset: 0, transform: `translateY(${toastPosition.top})` },
281
- { offset: 1, transform: 'translateY(-100%)' },
282
- ]);
283
- swipeAnimation.progressStart(true, 0);
284
- break;
285
- case 'bottom':
286
- default:
287
- /**
288
- * This computes the distance between the
289
- * top of the wrapper and the bottom of the
290
- * screen including the height of the wrapper
291
- * element so it can be dragged fully offscreen.
292
- */
293
- MAX_SWIPE_DISTANCE = hostElHeight - wrapperElBox.top;
294
- swipeAnimation.keyframes([
295
- { offset: 0, transform: `translateY(${toastPosition.bottom})` },
296
- { offset: 1, transform: 'translateY(100%)' },
297
- ]);
298
- swipeAnimation.progressStart(true, 0);
299
- break;
300
- }
301
- const computeStep = (delta) => {
302
- return (delta * INVERSION_FACTOR) / MAX_SWIPE_DISTANCE;
303
- };
304
- const onMove = (detail) => {
305
- const step = STEP_OFFSET + computeStep(detail.deltaY);
306
- swipeAnimation.progressStep(step);
307
- };
308
- const onEnd = (detail) => {
309
- const velocity = detail.velocityY;
310
- const threshold = ((detail.deltaY + velocity * 1000) / MAX_SWIPE_DISTANCE) * INVERSION_FACTOR;
311
- /**
312
- * Disable the gesture for the remainder of the animation.
313
- * It will be re-enabled if the toast animates back to
314
- * its initial presented position.
315
- */
316
- gesture.enable(false);
317
- let shouldDismiss = true;
318
- let playTo = 1;
319
- let step = 0;
320
- let remainingDistance = 0;
321
- if (el.position === 'middle') {
322
- /**
323
- * A middle positioned Toast appears
324
- * in the middle of the screen (at animation offset 0.5).
325
- * As a result, the threshold will be calculated relative
326
- * to this starting position. In other words at animation offset 0.5
327
- * the threshold will be 0. We want the middle Toast to be eligible
328
- * for dismiss when the user has swiped either half way up or down the
329
- * screen. As a result, we divide DISMISS_THRESHOLD in half. We also
330
- * consider when the threshold is a negative in the event the
331
- * user drags up (since the deltaY will also be negative).
332
- */
333
- shouldDismiss = threshold >= DISMISS_THRESHOLD / 2 || threshold <= -DISMISS_THRESHOLD / 2;
334
- /**
335
- * Since we are replacing the keyframes
336
- * below the animation always starts from
337
- * the beginning of the new keyframes.
338
- * Similarly, we are always playing to
339
- * the end of the new keyframes.
340
- */
341
- playTo = 1;
342
- step = 0;
343
- /**
344
- * The Toast should animate from wherever its
345
- * current position is to the desired end state.
346
- *
347
- * To begin, we get the current position of the
348
- * Toast for its starting state.
349
- */
350
- const wrapperElBox = wrapperEl.getBoundingClientRect();
351
- const startOffset = wrapperElBox.top - topPosition;
352
- const startPosition = `${startOffset}px`;
353
- /**
354
- * If the deltaY is negative then the user is swiping
355
- * up, so the Toast should animate to the top of the screen.
356
- * If the deltaY is positive then the user is swiping
357
- * down, so the Toast should animate to the bottom of the screen.
358
- * We also account for when the deltaY is 0, but realistically
359
- * that should never happen because it means the user did not drag
360
- * the toast.
361
- */
362
- const offsetFactor = detail.deltaY <= 0 ? -1 : 1;
363
- const endOffset = (topPosition + wrapperElBox.height) * offsetFactor;
364
- /**
365
- * If the Toast should dismiss
366
- * then we need to figure out which edge of
367
- * the screen it should animate towards.
368
- * By default, the Toast will come
369
- * back to its default state in the
370
- * middle of the screen.
371
- */
372
- const endPosition = shouldDismiss ? `${endOffset}px` : '0px';
373
- const KEYFRAMES = [
374
- { offset: 0, transform: `translateY(${startPosition})` },
375
- { offset: 1, transform: `translateY(${endPosition})` },
376
- ];
377
- swipeAnimation.keyframes(KEYFRAMES);
378
- /**
379
- * Compute the remaining amount of pixels the
380
- * toast needs to move to be fully dismissed.
381
- */
382
- remainingDistance = endOffset - startOffset;
142
+ if (positionAnchor && win) {
143
+ warnIfAnchorIsHidden(positionAnchor, toast);
144
+ const box = positionAnchor.getBoundingClientRect();
145
+ if (position === 'top') {
146
+ offset += box.bottom;
383
147
  }
384
- else {
385
- shouldDismiss = threshold >= DISMISS_THRESHOLD;
386
- playTo = shouldDismiss ? 1 : 0;
387
- step = computeStep(detail.deltaY);
148
+ else if (position === 'bottom') {
388
149
  /**
389
- * Compute the remaining amount of pixels the
390
- * toast needs to move to be fully dismissed.
150
+ * Just box.top is the distance from the top edge of the screen
151
+ * to the top edge of the anchor. We want to calculate from the
152
+ * bottom edge of the screen instead.
391
153
  */
392
- const remainingStepAmount = shouldDismiss ? 1 - step : step;
393
- remainingDistance = remainingStepAmount * MAX_SWIPE_DISTANCE;
154
+ offset -= win.innerHeight - box.top;
394
155
  }
395
156
  /**
396
- * The animation speed should depend on how quickly
397
- * the user flicks the toast across the screen. However,
398
- * it should be no slower than 200ms.
399
- * We use Math.abs on the remainingDistance because that value
400
- * can be negative when swiping up on a middle position toast.
401
- */
402
- const duration = Math.min(Math.abs(remainingDistance) / Math.abs(velocity), 200);
403
- swipeAnimation
404
- .onFinish(() => {
405
- if (shouldDismiss) {
406
- onDismiss();
407
- swipeAnimation.destroy();
408
- }
409
- else {
410
- if (el.position === 'middle') {
411
- /**
412
- * If the toast snapped back to
413
- * the middle of the screen we need
414
- * to reset the keyframes
415
- * so the toast can be swiped
416
- * up or down again.
417
- */
418
- swipeAnimation.keyframes(SWIPE_UP_DOWN_KEYFRAMES).progressStart(true, 0.5);
419
- }
420
- else {
421
- swipeAnimation.progressStart(true, 0);
422
- }
423
- /**
424
- * If the toast did not dismiss then
425
- * the user should be able to swipe again.
426
- */
427
- gesture.enable(true);
428
- }
429
- /**
430
- * This must be a one time callback
431
- * otherwise a new callback will
432
- * be added every time onEnd runs.
433
- */
434
- }, { oneTimeCallback: true })
435
- .progressEnd(playTo, step, duration);
436
- };
437
- const gesture = createGesture({
438
- el: wrapperEl,
439
- gestureName: 'toast-swipe-to-dismiss',
440
- gesturePriority: OVERLAY_GESTURE_PRIORITY,
441
- /**
442
- * Toast only supports vertical swipes.
443
- * This needs to be updated if we later
444
- * support horizontal swipes.
157
+ * We don't include safe area here because that should already be
158
+ * accounted for when checking the position of the anchor.
445
159
  */
446
- direction: 'y',
447
- onMove,
448
- onEnd,
449
- });
450
- return gesture;
451
- };
160
+ return {
161
+ top: `${offset}px`,
162
+ bottom: `${offset}px`,
163
+ };
164
+ }
165
+ else {
166
+ return {
167
+ top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
168
+ bottom: `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
169
+ };
170
+ }
171
+ }
172
+ /**
173
+ * If the anchor element is hidden, getBoundingClientRect()
174
+ * will return all 0s for it, which can cause unexpected
175
+ * results in the position calculation when animating.
176
+ */
177
+ function warnIfAnchorIsHidden(positionAnchor, toast) {
178
+ if (positionAnchor.offsetParent === null) {
179
+ printIonWarning('The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.', toast);
180
+ }
181
+ }
452
182
 
453
183
  const toastIosCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-wrapper.toast-top{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);top:0}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);bottom:0}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{-ms-flex-wrap:wrap;flex-wrap:wrap}.toast-layout-baseline .toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-layout-stacked .toast-button-group{-ms-flex-pack:end;justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-50, #f2f2f2);--border-radius:14px;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-850, #262626);--max-width:700px;--max-height:478px;--start:10px;--end:10px;font-size:clamp(14px, 0.875rem, 43.4px)}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}:host(.ion-color.toast-translucent) .toast-wrapper{background:rgba(var(--ion-color-base-rgb), 0.8)}}.toast-wrapper.toast-middle{opacity:0.01}.toast-content{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;min-height:44px;-webkit-transition:background-color, opacity 100ms linear;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:clamp(17px, 1.0625rem, 21.998px);font-weight:500;overflow:hidden}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
454
184
 
@@ -477,41 +207,6 @@ const Toast = class {
477
207
  this.callButtonHandler(cancelButton);
478
208
  }
479
209
  };
480
- /**
481
- * Create a new swipe gesture so Toast
482
- * can be swiped to dismiss.
483
- */
484
- this.createSwipeGesture = (toastPosition) => {
485
- const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
486
- /**
487
- * If the gesture completed then
488
- * we should dismiss the toast.
489
- */
490
- this.dismiss(undefined, GESTURE);
491
- }));
492
- gesture.enable(true);
493
- };
494
- /**
495
- * Destroy an existing swipe gesture
496
- * so Toast can no longer be swiped to dismiss.
497
- */
498
- this.destroySwipeGesture = () => {
499
- const { gesture } = this;
500
- if (gesture === undefined) {
501
- return;
502
- }
503
- gesture.destroy();
504
- this.gesture = undefined;
505
- };
506
- /**
507
- * Returns `true` if swipeGesture
508
- * is configured to a value that enables the swipe behavior.
509
- * Returns `false` otherwise.
510
- */
511
- this.prefersSwipeGesture = () => {
512
- const { swipeGesture } = this;
513
- return swipeGesture === 'vertical';
514
- };
515
210
  this.revealContentToScreenReader = false;
516
211
  this.overlayIndex = undefined;
517
212
  this.delegate = undefined;
@@ -532,37 +227,9 @@ const Toast = class {
532
227
  this.animated = true;
533
228
  this.icon = undefined;
534
229
  this.htmlAttributes = undefined;
535
- this.swipeGesture = undefined;
536
230
  this.isOpen = false;
537
231
  this.trigger = undefined;
538
232
  }
539
- swipeGestureChanged() {
540
- /**
541
- * If the Toast is presented, then we need to destroy
542
- * any actives gestures before a new gesture is potentially
543
- * created below.
544
- *
545
- * If the Toast is dismissed, then no gesture should be available
546
- * since the Toast is not visible. This case should never
547
- * happen since the "dismiss" method handles destroying
548
- * any active swipe gestures, but we keep this code
549
- * around to handle the first case.
550
- */
551
- this.destroySwipeGesture();
552
- /**
553
- * A new swipe gesture should only be created
554
- * if the Toast is presented. If the Toast is not
555
- * yet presented then the "present" method will
556
- * handle calling the swipe gesture setup function.
557
- */
558
- if (this.presented && this.prefersSwipeGesture()) {
559
- /**
560
- * If the Toast is presented then
561
- * lastPresentedPosition is defined.
562
- */
563
- this.createSwipeGesture(this.lastPresentedPosition);
564
- }
565
- }
566
233
  onIsOpenChange(newValue, oldValue) {
567
234
  if (newValue === true && oldValue === false) {
568
235
  this.present();
@@ -624,14 +291,6 @@ const Toast = class {
624
291
  if (this.duration > 0) {
625
292
  this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
626
293
  }
627
- /**
628
- * If the Toast has a swipe gesture then we can
629
- * create the gesture so users can swipe the
630
- * presented Toast.
631
- */
632
- if (this.prefersSwipeGesture()) {
633
- this.createSwipeGesture(animationPosition);
634
- }
635
294
  unlock();
636
295
  }
637
296
  /**
@@ -666,11 +325,6 @@ const Toast = class {
666
325
  this.revealContentToScreenReader = false;
667
326
  }
668
327
  this.lastPresentedPosition = undefined;
669
- /**
670
- * If the Toast has a swipe gesture then we can
671
- * safely destroy it now that it is dismissed.
672
- */
673
- this.destroySwipeGesture();
674
328
  unlock();
675
329
  return dismissed;
676
330
  }
@@ -815,7 +469,6 @@ const Toast = class {
815
469
  }
816
470
  get el() { return getElement(this); }
817
471
  static get watchers() { return {
818
- "swipeGesture": ["swipeGestureChanged"],
819
472
  "isOpen": ["onIsOpenChange"],
820
473
  "trigger": ["triggerChanged"]
821
474
  }; }