@ionic/core 7.5.4-dev.11699632730.1e6d9b70 → 7.5.4-dev.11699895923.130c21aa

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 (94) hide show
  1. package/components/ion-modal.js +2 -2
  2. package/components/ion-toast.js +417 -67
  3. package/components/overlays.js +2 -1
  4. package/css/ionic.bundle.css +1 -1
  5. package/css/ionic.bundle.css.map +1 -1
  6. package/css/utils.bundle.css +0 -133
  7. package/css/utils.bundle.css.map +1 -1
  8. package/dist/cjs/index.cjs.js +1 -1
  9. package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
  10. package/dist/cjs/ion-alert.cjs.entry.js +1 -1
  11. package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
  12. package/dist/cjs/ion-loading.cjs.entry.js +1 -1
  13. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  14. package/dist/cjs/ion-modal.cjs.entry.js +2 -2
  15. package/dist/cjs/ion-popover.cjs.entry.js +1 -1
  16. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  17. package/dist/cjs/ion-toast.cjs.entry.js +430 -83
  18. package/dist/cjs/ionic.cjs.js +1 -1
  19. package/dist/cjs/loader.cjs.js +1 -1
  20. package/dist/cjs/{overlays-d80a2cf2.js → overlays-ba1a1e21.js} +2 -0
  21. package/dist/collection/components/modal/gestures/swipe-to-close.js +2 -1
  22. package/dist/collection/components/toast/animations/ios.enter.js +2 -1
  23. package/dist/collection/components/toast/animations/md.enter.js +2 -1
  24. package/dist/collection/components/toast/animations/utils.js +11 -0
  25. package/dist/collection/components/toast/gestures/swipe-to-dismiss.js +267 -0
  26. package/dist/collection/components/toast/test/swipe-gesture/toast.e2e.js +84 -0
  27. package/dist/collection/components/toast/toast.js +104 -1
  28. package/dist/collection/utils/overlays.js +1 -0
  29. package/dist/docs.json +37 -1
  30. package/dist/esm/index.js +1 -1
  31. package/dist/esm/ion-action-sheet.entry.js +1 -1
  32. package/dist/esm/ion-alert.entry.js +1 -1
  33. package/dist/esm/ion-datetime_3.entry.js +1 -1
  34. package/dist/esm/ion-loading.entry.js +1 -1
  35. package/dist/esm/ion-menu_3.entry.js +1 -1
  36. package/dist/esm/ion-modal.entry.js +2 -2
  37. package/dist/esm/ion-popover.entry.js +1 -1
  38. package/dist/esm/ion-select_3.entry.js +1 -1
  39. package/dist/esm/ion-toast.entry.js +413 -66
  40. package/dist/esm/ionic.js +1 -1
  41. package/dist/esm/loader.js +1 -1
  42. package/dist/esm/{overlays-a31c8878.js → overlays-d79b34b4.js} +2 -1
  43. package/dist/esm-es5/index.js +1 -1
  44. package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
  45. package/dist/esm-es5/ion-alert.entry.js +1 -1
  46. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  47. package/dist/esm-es5/ion-loading.entry.js +1 -1
  48. package/dist/esm-es5/ion-menu_3.entry.js +1 -1
  49. package/dist/esm-es5/ion-modal.entry.js +1 -1
  50. package/dist/esm-es5/ion-popover.entry.js +1 -1
  51. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  52. package/dist/esm-es5/ion-toast.entry.js +1 -1
  53. package/dist/esm-es5/ionic.js +1 -1
  54. package/dist/esm-es5/loader.js +1 -1
  55. package/dist/esm-es5/{overlays-a31c8878.js → overlays-d79b34b4.js} +1 -1
  56. package/dist/html.html-data.json +9 -0
  57. package/dist/ionic/index.esm.js +1 -1
  58. package/dist/ionic/ionic.esm.js +1 -1
  59. package/dist/ionic/{p-c32a6c04.entry.js → p-020dd47f.entry.js} +1 -1
  60. package/dist/ionic/p-02663394.system.js +1 -1
  61. package/dist/ionic/{p-b86c6c05.entry.js → p-138a4a93.entry.js} +1 -1
  62. package/dist/ionic/{p-4c75cb48.system.js → p-1511dc35.system.js} +1 -1
  63. package/dist/ionic/{p-3a769110.system.entry.js → p-1fc6b5a5.system.entry.js} +1 -1
  64. package/dist/ionic/{p-90020ef0.system.entry.js → p-2151a4a4.system.entry.js} +1 -1
  65. package/dist/ionic/{p-539c09e8.system.entry.js → p-2ae9a434.system.entry.js} +1 -1
  66. package/dist/ionic/{p-1e59dd04.system.entry.js → p-3dedd258.system.entry.js} +1 -1
  67. package/dist/ionic/{p-98c70e3c.system.js → p-53f75103.system.js} +1 -1
  68. package/dist/ionic/{p-75338011.entry.js → p-664cc492.entry.js} +1 -1
  69. package/dist/ionic/p-6c89025e.system.entry.js +4 -0
  70. package/dist/ionic/{p-8140a084.entry.js → p-78a8e1e8.entry.js} +1 -1
  71. package/dist/ionic/{p-d54a8393.system.entry.js → p-81bdfa1c.system.entry.js} +1 -1
  72. package/dist/ionic/p-8414ed31.entry.js +4 -0
  73. package/dist/ionic/{p-307963db.js → p-938c4956.js} +1 -1
  74. package/dist/ionic/{p-c09fa14d.entry.js → p-a9424586.entry.js} +1 -1
  75. package/dist/ionic/{p-59107f99.system.entry.js → p-ab1908ba.system.entry.js} +1 -1
  76. package/dist/ionic/{p-e91c7eb4.system.entry.js → p-cb6c380e.system.entry.js} +1 -1
  77. package/dist/ionic/{p-a4e4dba1.entry.js → p-e119ac8b.entry.js} +1 -1
  78. package/dist/ionic/p-e3b7a2d0.system.entry.js +4 -0
  79. package/dist/ionic/{p-53b1930e.entry.js → p-e525dbea.entry.js} +1 -1
  80. package/dist/ionic/p-f2d4e3c8.entry.js +4 -0
  81. package/dist/types/components/toast/animations/utils.d.ts +9 -0
  82. package/dist/types/components/toast/gestures/swipe-to-dismiss.d.ts +9 -0
  83. package/dist/types/components/toast/toast-interface.d.ts +1 -0
  84. package/dist/types/components/toast/toast.d.ts +28 -1
  85. package/dist/types/components.d.ts +10 -2
  86. package/dist/types/utils/overlays.d.ts +1 -0
  87. package/hydrate/index.js +413 -66
  88. package/package.json +1 -1
  89. package/css/themes/dark.css +0 -135
  90. package/css/themes/dark.css.map +0 -1
  91. package/dist/ionic/p-139bd79d.system.entry.js +0 -4
  92. package/dist/ionic/p-7d68e4ea.entry.js +0 -4
  93. package/dist/ionic/p-999a7271.entry.js +0 -4
  94. package/dist/ionic/p-e66f7d10.system.entry.js +0 -4
@@ -0,0 +1,267 @@
1
+ /*!
2
+ * (C) Ionic http://ionicframework.com - MIT License
3
+ */
4
+ import { Build } from "@stencil/core";
5
+ import { createAnimation } from "../../../utils/animation/animation";
6
+ import { createGesture } from "../../../utils/gesture/index";
7
+ import { getElementRoot } from "../../../utils/helpers";
8
+ import { OVERLAY_GESTURE_PRIORITY } from "../../../utils/overlays";
9
+ import { getOffsetForMiddlePosition } from "../animations/utils";
10
+ /**
11
+ * Create a gesture that allows the Toast
12
+ * to be swiped to dismiss.
13
+ * @param el - The Toast element
14
+ * @param toastPosition - The last computed position of the Toast. This is computed in the "present" method.
15
+ * @param onDismiss - A callback to fire when the Toast was swiped to dismiss.
16
+ */
17
+ export const createSwipeToDismissGesture = (el, toastPosition, onDismiss) => {
18
+ /**
19
+ * Users should swipe on the visible toast wrapper
20
+ * rather than on ion-toast which covers the entire screen.
21
+ * When testing the class instance the inner wrapper will not
22
+ * be defined. As a result, we use a placeholder element in those environments.
23
+ */
24
+ const wrapperEl = Build.isTesting
25
+ ? document.createElement('div')
26
+ : getElementRoot(el).querySelector('.toast-wrapper');
27
+ const hostElHeight = el.clientHeight;
28
+ const wrapperElBox = wrapperEl.getBoundingClientRect();
29
+ /**
30
+ * The maximum amount that
31
+ * the toast can be swiped. This should
32
+ * account for the wrapper element's height
33
+ * too so the toast can be swiped offscreen
34
+ * completely.
35
+ */
36
+ let MAX_SWIPE_DISTANCE = 0;
37
+ /**
38
+ * The step value at which a toast
39
+ * is eligible for dismissing via gesture.
40
+ */
41
+ const DISMISS_THRESHOLD = 0.5;
42
+ /**
43
+ * The middle position Toast starts 50% of the way
44
+ * through the animation, so we need to use this
45
+ * as the starting point for our step values.
46
+ */
47
+ const STEP_OFFSET = el.position === 'middle' ? 0.5 : 0;
48
+ /**
49
+ * When the Toast is at the top users will be
50
+ * swiping up. As a result, the delta values will be
51
+ * negative numbers which will result in negative steps
52
+ * and thresholds. As a result, we need to make those numbers
53
+ * positive.
54
+ */
55
+ const INVERSION_FACTOR = el.position === 'top' ? -1 : 1;
56
+ /**
57
+ * The top offset that places the
58
+ * toast in the middle of the screen.
59
+ * Only needed when position="middle".
60
+ */
61
+ const topPosition = getOffsetForMiddlePosition(hostElHeight, wrapperElBox.height);
62
+ const SWIPE_UP_DOWN_KEYFRAMES = [
63
+ { offset: 0, transform: `translateY(-${topPosition + wrapperElBox.height}px)` },
64
+ { offset: 0.5, transform: `translateY(0px)` },
65
+ { offset: 1, transform: `translateY(${topPosition + wrapperElBox.height}px)` },
66
+ ];
67
+ const swipeAnimation = createAnimation('toast-swipe-to-dismiss-animation')
68
+ .addElement(wrapperEl)
69
+ /**
70
+ * The specific value here does not actually
71
+ * matter. We just need this to be a positive
72
+ * value so the animation does not jump
73
+ * to the end when the user beings to drag.
74
+ */
75
+ .duration(100);
76
+ switch (el.position) {
77
+ case 'middle':
78
+ MAX_SWIPE_DISTANCE = hostElHeight + wrapperElBox.height;
79
+ swipeAnimation.keyframes(SWIPE_UP_DOWN_KEYFRAMES);
80
+ /**
81
+ * Toast can be swiped up or down but
82
+ * should start in the middle of the screen.
83
+ */
84
+ swipeAnimation.progressStart(true, 0.5);
85
+ break;
86
+ case 'top':
87
+ /**
88
+ * The bottom edge of the wrapper
89
+ * includes the distance between the top
90
+ * of the screen and the top of the wrapper
91
+ * as well as the wrapper height so the wrapper
92
+ * can be dragged fully offscreen.
93
+ */
94
+ MAX_SWIPE_DISTANCE = wrapperElBox.bottom;
95
+ swipeAnimation.keyframes([
96
+ { offset: 0, transform: `translateY(${toastPosition.top})` },
97
+ { offset: 1, transform: 'translateY(-100%)' },
98
+ ]);
99
+ swipeAnimation.progressStart(true, 0);
100
+ break;
101
+ case 'bottom':
102
+ default:
103
+ /**
104
+ * This computes the distance between the
105
+ * top of the wrapper and the bottom of the
106
+ * screen including the height of the wrapper
107
+ * element so it can be dragged fully offscreen.
108
+ */
109
+ MAX_SWIPE_DISTANCE = hostElHeight - wrapperElBox.top;
110
+ swipeAnimation.keyframes([
111
+ { offset: 0, transform: `translateY(${toastPosition.bottom})` },
112
+ { offset: 1, transform: 'translateY(100%)' },
113
+ ]);
114
+ swipeAnimation.progressStart(true, 0);
115
+ break;
116
+ }
117
+ const computeStep = (delta) => {
118
+ return (delta * INVERSION_FACTOR) / MAX_SWIPE_DISTANCE;
119
+ };
120
+ const onMove = (detail) => {
121
+ const step = STEP_OFFSET + computeStep(detail.deltaY);
122
+ swipeAnimation.progressStep(step);
123
+ };
124
+ const onEnd = (detail) => {
125
+ const velocity = detail.velocityY;
126
+ const threshold = ((detail.deltaY + velocity * 1000) / MAX_SWIPE_DISTANCE) * INVERSION_FACTOR;
127
+ /**
128
+ * Disable the gesture for the remainder of the animation.
129
+ * It will be re-enabled if the toast animates back to
130
+ * its initial presented position.
131
+ */
132
+ gesture.enable(false);
133
+ let shouldDismiss = true;
134
+ let playTo = 1;
135
+ let step = 0;
136
+ let remainingDistance = 0;
137
+ if (el.position === 'middle') {
138
+ /**
139
+ * A middle positioned Toast appears
140
+ * in the middle of the screen (at animation offset 0.5).
141
+ * As a result, the threshold will be calculated relative
142
+ * to this starting position. In other words at animation offset 0.5
143
+ * the threshold will be 0. We want the middle Toast to be eligible
144
+ * for dismiss when the user has swiped either half way up or down the
145
+ * screen. As a result, we divide DISMISS_THRESHOLD in half. We also
146
+ * consider when the threshold is a negative in the event the
147
+ * user drags up (since the deltaY will also be negative).
148
+ */
149
+ shouldDismiss = threshold >= DISMISS_THRESHOLD / 2 || threshold <= -DISMISS_THRESHOLD / 2;
150
+ /**
151
+ * Since we are replacing the keyframes
152
+ * below the animation always starts from
153
+ * the beginning of the new keyframes.
154
+ * Similarly, we are always playing to
155
+ * the end of the new keyframes.
156
+ */
157
+ playTo = 1;
158
+ step = 0;
159
+ /**
160
+ * The Toast should animate from wherever its
161
+ * current position is to the desired end state.
162
+ *
163
+ * To begin, we get the current position of the
164
+ * Toast for its starting state.
165
+ */
166
+ const wrapperElBox = wrapperEl.getBoundingClientRect();
167
+ const startOffset = wrapperElBox.top - topPosition;
168
+ const startPosition = `${startOffset}px`;
169
+ /**
170
+ * If the deltaY is negative then the user is swiping
171
+ * up, so the Toast should animate to the top of the screen.
172
+ * If the deltaY is positive then the user is swiping
173
+ * down, so the Toast should animate to the bottom of the screen.
174
+ * We also account for when the deltaY is 0, but realistically
175
+ * that should never happen because it means the user did not drag
176
+ * the toast.
177
+ */
178
+ const offsetFactor = detail.deltaY <= 0 ? -1 : 1;
179
+ const endOffset = (topPosition + wrapperElBox.height) * offsetFactor;
180
+ /**
181
+ * If the Toast should dismiss
182
+ * then we need to figure out which edge of
183
+ * the screen it should animate towards.
184
+ * By default, the Toast will come
185
+ * back to its default state in the
186
+ * middle of the screen.
187
+ */
188
+ const endPosition = shouldDismiss ? `${endOffset}px` : '0px';
189
+ const KEYFRAMES = [
190
+ { offset: 0, transform: `translateY(${startPosition})` },
191
+ { offset: 1, transform: `translateY(${endPosition})` },
192
+ ];
193
+ swipeAnimation.keyframes(KEYFRAMES);
194
+ /**
195
+ * Compute the remaining amount of pixels the
196
+ * toast needs to move to be fully dismissed.
197
+ */
198
+ remainingDistance = endOffset - startOffset;
199
+ }
200
+ else {
201
+ shouldDismiss = threshold >= DISMISS_THRESHOLD;
202
+ playTo = shouldDismiss ? 1 : 0;
203
+ step = computeStep(detail.deltaY);
204
+ /**
205
+ * Compute the remaining amount of pixels the
206
+ * toast needs to move to be fully dismissed.
207
+ */
208
+ const remainingStepAmount = shouldDismiss ? 1 - step : step;
209
+ remainingDistance = remainingStepAmount * MAX_SWIPE_DISTANCE;
210
+ }
211
+ /**
212
+ * The animation speed should depend on how quickly
213
+ * the user flicks the toast across the screen. However,
214
+ * it should be no slower than 200ms.
215
+ * We use Math.abs on the remainingDistance because that value
216
+ * can be negative when swiping up on a middle position toast.
217
+ */
218
+ const duration = Math.min(Math.abs(remainingDistance) / Math.abs(velocity), 200);
219
+ swipeAnimation
220
+ .onFinish(() => {
221
+ if (shouldDismiss) {
222
+ onDismiss();
223
+ swipeAnimation.destroy();
224
+ }
225
+ else {
226
+ if (el.position === 'middle') {
227
+ /**
228
+ * If the toast snapped back to
229
+ * the middle of the screen we need
230
+ * to reset the keyframes
231
+ * so the toast can be swiped
232
+ * up or down again.
233
+ */
234
+ swipeAnimation.keyframes(SWIPE_UP_DOWN_KEYFRAMES).progressStart(true, 0.5);
235
+ }
236
+ else {
237
+ swipeAnimation.progressStart(true, 0);
238
+ }
239
+ /**
240
+ * If the toast did not dismiss then
241
+ * the user should be able to swipe again.
242
+ */
243
+ gesture.enable(true);
244
+ }
245
+ /**
246
+ * This must be a one time callback
247
+ * otherwise a new callback will
248
+ * be added every time onEnd runs.
249
+ */
250
+ }, { oneTimeCallback: true })
251
+ .progressEnd(playTo, step, duration);
252
+ };
253
+ const gesture = createGesture({
254
+ el: wrapperEl,
255
+ gestureName: 'toast-swipe-to-dismiss',
256
+ gesturePriority: OVERLAY_GESTURE_PRIORITY,
257
+ /**
258
+ * Toast only supports vertical swipes.
259
+ * This needs to be updated if we later
260
+ * support horizontal swipes.
261
+ */
262
+ direction: 'y',
263
+ onMove,
264
+ onEnd,
265
+ });
266
+ return gesture;
267
+ };
@@ -0,0 +1,84 @@
1
+ /*!
2
+ * (C) Ionic http://ionicframework.com - MIT License
3
+ */
4
+ import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
5
+ /**
6
+ * This behavior does not vary across modes and directions.
7
+ */
8
+ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => {
9
+ test.describe(title('toast: swipe gesture with top position'), () => {
10
+ test.beforeEach(async ({ page }) => {
11
+ await page.goto('src/components/toast/test/swipe-gesture', config);
12
+ });
13
+ test('should swipe up to dismiss', async ({ page }) => {
14
+ const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
15
+ const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
16
+ const presentButton = page.locator('#top');
17
+ await presentButton.click();
18
+ await ionToastDidPresent.next();
19
+ const toastWrapper = page.locator('ion-toast#top-toast .toast-wrapper');
20
+ await dragElementBy(toastWrapper, page, 0, -30);
21
+ await ionToastDidDismiss.next();
22
+ });
23
+ test('should swipe up to dismiss with anchor', async ({ page }) => {
24
+ const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
25
+ const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
26
+ const presentButton = page.locator('#top-anchor');
27
+ await presentButton.click();
28
+ await ionToastDidPresent.next();
29
+ const toastWrapper = page.locator('ion-toast#top-anchor-toast .toast-wrapper');
30
+ await dragElementBy(toastWrapper, page, 0, -30);
31
+ await ionToastDidDismiss.next();
32
+ });
33
+ });
34
+ test.describe(title('toast: swipe gesture with bottom position'), () => {
35
+ test.beforeEach(async ({ page }) => {
36
+ await page.goto('src/components/toast/test/swipe-gesture', config);
37
+ });
38
+ test('should swipe down to dismiss', async ({ page }) => {
39
+ const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
40
+ const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
41
+ const presentButton = page.locator('#bottom');
42
+ await presentButton.click();
43
+ await ionToastDidPresent.next();
44
+ const toastWrapper = page.locator('ion-toast#bottom-toast .toast-wrapper');
45
+ await dragElementBy(toastWrapper, page, 0, 30);
46
+ await ionToastDidDismiss.next();
47
+ });
48
+ test('should swipe down to dismiss with anchor', async ({ page }) => {
49
+ const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
50
+ const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
51
+ const presentButton = page.locator('#bottom-anchor');
52
+ await presentButton.click();
53
+ await ionToastDidPresent.next();
54
+ const toastWrapper = page.locator('ion-toast#bottom-anchor-toast .toast-wrapper');
55
+ await dragElementBy(toastWrapper, page, 0, 30);
56
+ await ionToastDidDismiss.next();
57
+ });
58
+ });
59
+ test.describe(title('toast: swipe gesture with middle position'), () => {
60
+ test.beforeEach(async ({ page }) => {
61
+ await page.goto('src/components/toast/test/swipe-gesture', config);
62
+ });
63
+ test('should swipe down to dismiss', async ({ page }) => {
64
+ const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
65
+ const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
66
+ const presentButton = page.locator('#middle');
67
+ await presentButton.click();
68
+ await ionToastDidPresent.next();
69
+ const toastWrapper = page.locator('ion-toast#middle-toast .toast-wrapper');
70
+ await dragElementBy(toastWrapper, page, 0, 100);
71
+ await ionToastDidDismiss.next();
72
+ });
73
+ test('should swipe up to dismiss', async ({ page }) => {
74
+ const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
75
+ const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
76
+ const presentButton = page.locator('#middle');
77
+ await presentButton.click();
78
+ await ionToastDidPresent.next();
79
+ const toastWrapper = page.locator('ion-toast#middle-toast .toast-wrapper');
80
+ await dragElementBy(toastWrapper, page, 0, -100);
81
+ await ionToastDidDismiss.next();
82
+ });
83
+ });
84
+ });
@@ -6,7 +6,7 @@ import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
6
6
  import { raf } from "../../utils/helpers";
7
7
  import { createLockController } from "../../utils/lock-controller";
8
8
  import { printIonWarning } from "../../utils/logging/index";
9
- import { createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
9
+ import { GESTURE, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
10
10
  import { sanitizeDOMString } from "../../utils/sanitization/index";
11
11
  import { createColorClasses, getClassMap } from "../../utils/theme";
12
12
  import { config } from "../../global/config";
@@ -16,6 +16,7 @@ import { iosLeaveAnimation } from "./animations/ios.leave";
16
16
  import { mdEnterAnimation } from "./animations/md.enter";
17
17
  import { mdLeaveAnimation } from "./animations/md.leave";
18
18
  import { getAnimationPosition } from "./animations/utils";
19
+ import { createSwipeToDismissGesture } from "./gestures/swipe-to-dismiss";
19
20
  // TODO(FW-2832): types
20
21
  /**
21
22
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -41,6 +42,41 @@ export class Toast {
41
42
  this.callButtonHandler(cancelButton);
42
43
  }
43
44
  };
45
+ /**
46
+ * Create a new swipe gesture so Toast
47
+ * can be swiped to dismiss.
48
+ */
49
+ this.createSwipeGesture = (toastPosition) => {
50
+ const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
51
+ /**
52
+ * If the gesture completed then
53
+ * we should dismiss the toast.
54
+ */
55
+ this.dismiss(undefined, GESTURE);
56
+ }));
57
+ gesture.enable(true);
58
+ };
59
+ /**
60
+ * Destroy an existing swipe gesture
61
+ * so Toast can no longer be swiped to dismiss.
62
+ */
63
+ this.destroySwipeGesture = () => {
64
+ const { gesture } = this;
65
+ if (gesture === undefined) {
66
+ return;
67
+ }
68
+ gesture.destroy();
69
+ this.gesture = undefined;
70
+ };
71
+ /**
72
+ * Returns `true` if swipeGesture
73
+ * is configured to a value that enables the swipe behavior.
74
+ * Returns `false` otherwise.
75
+ */
76
+ this.prefersSwipeGesture = () => {
77
+ const { swipeGesture } = this;
78
+ return swipeGesture === 'vertical';
79
+ };
44
80
  this.revealContentToScreenReader = false;
45
81
  this.overlayIndex = undefined;
46
82
  this.delegate = undefined;
@@ -61,9 +97,37 @@ export class Toast {
61
97
  this.animated = true;
62
98
  this.icon = undefined;
63
99
  this.htmlAttributes = undefined;
100
+ this.swipeGesture = undefined;
64
101
  this.isOpen = false;
65
102
  this.trigger = undefined;
66
103
  }
104
+ swipeGestureChanged() {
105
+ /**
106
+ * If the Toast is presented, then we need to destroy
107
+ * any actives gestures before a new gesture is potentially
108
+ * created below.
109
+ *
110
+ * If the Toast is dismissed, then no gesture should be available
111
+ * since the Toast is not visible. This case should never
112
+ * happen since the "dismiss" method handles destroying
113
+ * any active swipe gestures, but we keep this code
114
+ * around to handle the first case.
115
+ */
116
+ this.destroySwipeGesture();
117
+ /**
118
+ * A new swipe gesture should only be created
119
+ * if the Toast is presented. If the Toast is not
120
+ * yet presented then the "present" method will
121
+ * handle calling the swipe gesture setup function.
122
+ */
123
+ if (this.presented && this.prefersSwipeGesture()) {
124
+ /**
125
+ * If the Toast is presented then
126
+ * lastPresentedPosition is defined.
127
+ */
128
+ this.createSwipeGesture(this.lastPresentedPosition);
129
+ }
130
+ }
67
131
  onIsOpenChange(newValue, oldValue) {
68
132
  if (newValue === true && oldValue === false) {
69
133
  this.present();
@@ -125,6 +189,14 @@ export class Toast {
125
189
  if (this.duration > 0) {
126
190
  this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
127
191
  }
192
+ /**
193
+ * If the Toast has a swipe gesture then we can
194
+ * create the gesture so users can swipe the
195
+ * presented Toast.
196
+ */
197
+ if (this.prefersSwipeGesture()) {
198
+ this.createSwipeGesture(animationPosition);
199
+ }
128
200
  unlock();
129
201
  }
130
202
  /**
@@ -159,6 +231,11 @@ export class Toast {
159
231
  this.revealContentToScreenReader = false;
160
232
  }
161
233
  this.lastPresentedPosition = undefined;
234
+ /**
235
+ * If the Toast has a swipe gesture then we can
236
+ * safely destroy it now that it is dismissed.
237
+ */
238
+ this.destroySwipeGesture();
162
239
  unlock();
163
240
  return dismissed;
164
241
  }
@@ -699,6 +776,29 @@ export class Toast {
699
776
  "text": "Additional attributes to pass to the toast."
700
777
  }
701
778
  },
779
+ "swipeGesture": {
780
+ "type": "string",
781
+ "mutable": false,
782
+ "complexType": {
783
+ "original": "ToastSwipeGestureDirection",
784
+ "resolved": "\"vertical\" | undefined",
785
+ "references": {
786
+ "ToastSwipeGestureDirection": {
787
+ "location": "import",
788
+ "path": "./toast-interface",
789
+ "id": "src/components/toast/toast-interface.ts::ToastSwipeGestureDirection"
790
+ }
791
+ }
792
+ },
793
+ "required": false,
794
+ "optional": true,
795
+ "docs": {
796
+ "tags": [],
797
+ "text": "If set to 'vertical', the Toast can be dismissed with\na swipe gesture. The swipe direction is determined by\nthe value of the `position` property:\n`top`: The Toast can be swiped up to dismiss.\n`bottom`: The Toast can be swiped down to dismiss.\n`middle`: The Toast can be swiped up or down to dismiss."
798
+ },
799
+ "attribute": "swipe-gesture",
800
+ "reflect": false
801
+ },
702
802
  "isOpen": {
703
803
  "type": "boolean",
704
804
  "mutable": false,
@@ -1009,6 +1109,9 @@ export class Toast {
1009
1109
  static get elementRef() { return "el"; }
1010
1110
  static get watchers() {
1011
1111
  return [{
1112
+ "propName": "swipeGesture",
1113
+ "methodName": "swipeGestureChanged"
1114
+ }, {
1012
1115
  "propName": "isOpen",
1013
1116
  "methodName": "onIsOpenChange"
1014
1117
  }, {
@@ -562,6 +562,7 @@ export const safeCall = (handler, arg) => {
562
562
  };
563
563
  export const BACKDROP = 'backdrop';
564
564
  export const GESTURE = 'gesture';
565
+ export const OVERLAY_GESTURE_PRIORITY = 39;
565
566
  /**
566
567
  * Creates a delegate controller.
567
568
  *
package/dist/docs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2023-11-10T16:14:04",
2
+ "timestamp": "2023-11-13T17:20:32",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.7.0",
@@ -27821,6 +27821,37 @@
27821
27821
  "optional": true,
27822
27822
  "required": false
27823
27823
  },
27824
+ {
27825
+ "name": "swipeGesture",
27826
+ "type": "\"vertical\" | undefined",
27827
+ "complexType": {
27828
+ "original": "ToastSwipeGestureDirection",
27829
+ "resolved": "\"vertical\" | undefined",
27830
+ "references": {
27831
+ "ToastSwipeGestureDirection": {
27832
+ "location": "import",
27833
+ "path": "./toast-interface",
27834
+ "id": "src/components/toast/toast-interface.ts::ToastSwipeGestureDirection"
27835
+ }
27836
+ }
27837
+ },
27838
+ "mutable": false,
27839
+ "attr": "swipe-gesture",
27840
+ "reflectToAttr": false,
27841
+ "docs": "If set to 'vertical', the Toast can be dismissed with\na swipe gesture. The swipe direction is determined by\nthe value of the `position` property:\n`top`: The Toast can be swiped up to dismiss.\n`bottom`: The Toast can be swiped down to dismiss.\n`middle`: The Toast can be swiped up or down to dismiss.",
27842
+ "docsTags": [],
27843
+ "values": [
27844
+ {
27845
+ "value": "vertical",
27846
+ "type": "string"
27847
+ },
27848
+ {
27849
+ "type": "undefined"
27850
+ }
27851
+ ],
27852
+ "optional": true,
27853
+ "required": false
27854
+ },
27824
27855
  {
27825
27856
  "name": "translucent",
27826
27857
  "type": "boolean",
@@ -29384,6 +29415,11 @@
29384
29415
  "docstring": "",
29385
29416
  "path": "src/components/toast/toast-interface.ts"
29386
29417
  },
29418
+ "src/components/toast/toast-interface.ts::ToastSwipeGestureDirection": {
29419
+ "declaration": "\"vertical\"",
29420
+ "docstring": "",
29421
+ "path": "src/components/toast/toast-interface.ts"
29422
+ },
29387
29423
  "src/components/toast/toast-interface.ts::ToastPresentOptions": {
29388
29424
  "declaration": "export type ToastPresentOptions = ToastPositionAlias & ToastAnimationPosition;",
29389
29425
  "docstring": "",
package/dist/esm/index.js CHANGED
@@ -12,7 +12,7 @@ export { c as componentOnReady } from './helpers-3379ba19.js';
12
12
  export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-96c9ace3.js';
13
13
  export { o as openURL } from './theme-17531cdf.js';
14
14
  export { m as menuController } from './index-6a48e009.js';
15
- export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-a31c8878.js';
15
+ export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-d79b34b4.js';
16
16
  import './index-a5d50daf.js';
17
17
  import './index-4392ebcb.js';
18
18
  import './gesture-controller-0fa396c4.js';
@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, e as readTask, h, H as Host, f
5
5
  import { c as createButtonActiveGesture } from './button-active-109ba60d.js';
6
6
  import { r as raf } from './helpers-3379ba19.js';
7
7
  import { c as createLockController } from './lock-controller-e8c6c051.js';
8
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-a31c8878.js';
8
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-d79b34b4.js';
9
9
  import { g as getClassMap } from './theme-17531cdf.js';
10
10
  import { b as getIonMode } from './ionic-global-7efdecd0.js';
11
11
  import { c as createAnimation } from './animation-cf3dd234.js';
@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
6
6
  import { c as createButtonActiveGesture } from './button-active-109ba60d.js';
7
7
  import { r as raf } from './helpers-3379ba19.js';
8
8
  import { c as createLockController } from './lock-controller-e8c6c051.js';
9
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, 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';
9
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-d79b34b4.js';
10
10
  import { g as getClassMap } 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';
@@ -11,7 +11,7 @@ import { c as chevronBack, o as chevronForward, l as chevronDown, p as caretUpSh
11
11
  import { b as getIonMode } from './ionic-global-7efdecd0.js';
12
12
  import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getEndOfWeek, j as getStartOfWeek, k as getPreviousDay, l as getNextDay, m as getPreviousWeek, n as getNextWeek, p as parseMinParts, o as parseMaxParts, q as parseDate, w as warnIfValueOutOfBounds, r as convertToArrayOfNumbers, s as convertDataToISO, t as getToday, u as getClosestValidDate, x as getNumDaysInMonth, y as getCombinedDateColumnData, z as getMonthColumnData, A as getDayColumnData, B as getYearColumnData, C as isMonthFirstLocale, D as getTimeColumnsData, E as isLocaleDayPeriodRTL, F as getDaysOfWeek, G as getMonthAndYear, H as getDaysOfMonth, I as generateMonths, J as getHourCycle, K as getLocalizedTime, L as getMonthAndDay, M as formatValue, N as getNextYear, O as getPreviousYear, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-44d9e816.js';
13
13
  import { c as createLockController } from './lock-controller-e8c6c051.js';
14
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, 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';
14
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-d79b34b4.js';
15
15
  import { c as createAnimation } from './animation-cf3dd234.js';
16
16
  import { b as hapticSelectionChanged, h as hapticSelectionEnd, a as hapticSelectionStart } from './haptic-1a66d69f.js';
17
17
  import './index-a5d50daf.js';
@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, h, H as Host, f as getElement
5
5
  import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-96c9ace3.js';
6
6
  import { r as raf } from './helpers-3379ba19.js';
7
7
  import { c as createLockController } from './lock-controller-e8c6c051.js';
8
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-a31c8878.js';
8
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-d79b34b4.js';
9
9
  import { g as getClassMap } from './theme-17531cdf.js';
10
10
  import { c as config, b as getIonMode } from './ionic-global-7efdecd0.js';
11
11
  import { c as createAnimation } from './animation-cf3dd234.js';
@@ -6,7 +6,7 @@ import { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
6
6
  import { G as GESTURE_CONTROLLER } from './gesture-controller-0fa396c4.js';
7
7
  import { p as isEndSide, i as inheritAriaAttributes, o as assert, l as clamp } from './helpers-3379ba19.js';
8
8
  import { m as menuController } from './index-6a48e009.js';
9
- import { q as getPresentedOverlay } from './overlays-a31c8878.js';
9
+ import { q as getPresentedOverlay } from './overlays-d79b34b4.js';
10
10
  import { c as config, b as getIonMode } from './ionic-global-7efdecd0.js';
11
11
  import { c as createColorClasses, h as hostContext } from './theme-17531cdf.js';
12
12
  import { u as menuOutline, v as menuSharp } from './index-c132c5f1.js';
@@ -8,7 +8,7 @@ import { g as getElementRoot, l as clamp, r as raf, k as inheritAttributes, m as
8
8
  import { c as createLockController } from './lock-controller-e8c6c051.js';
9
9
  import { p as printIonWarning } from './index-595d62c9.js';
10
10
  import { g as getCapacitor } from './capacitor-f1f25364.js';
11
- import { G as GESTURE, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as activeAnimations, g as dismiss, h as eventMethod } from './overlays-a31c8878.js';
11
+ import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as activeAnimations, g as dismiss, h as eventMethod } from './overlays-d79b34b4.js';
12
12
  import { g as getClassMap } from './theme-17531cdf.js';
13
13
  import { e as deepReady, w as waitForMount } from './index-50582f1c.js';
14
14
  import { b as getIonMode, c as config } from './ionic-global-7efdecd0.js';
@@ -504,7 +504,7 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) =>
504
504
  const gesture = createGesture({
505
505
  el,
506
506
  gestureName: 'modalSwipeToClose',
507
- gesturePriority: 39,
507
+ gesturePriority: OVERLAY_GESTURE_PRIORITY,
508
508
  direction: 'y',
509
509
  threshold: 10,
510
510
  canStart,
@@ -6,7 +6,7 @@ import { C as CoreDelegate, a as attachComponent, d as detachComponent } from '.
6
6
  import { r as raf, g as getElementRoot, a as addEventListener, m as hasLazyBuild } 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 { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, o as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays-a31c8878.js';
9
+ import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, o as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays-d79b34b4.js';
10
10
  import { b as getIonMode, a as isPlatform } from './ionic-global-7efdecd0.js';
11
11
  import { g as getClassMap } from './theme-17531cdf.js';
12
12
  import { e as deepReady, w as waitForMount } from './index-50582f1c.js';