@ionic/core 7.3.2-dev.11693262117.17edbf6d → 7.3.2-dev.11693321491.12123d27

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 (125) hide show
  1. package/components/action-sheet.js +17 -8
  2. package/components/alert.js +17 -8
  3. package/components/framework-delegate.js +5 -2
  4. package/components/ion-loading.js +17 -8
  5. package/components/ion-menu.js +1 -1
  6. package/components/ion-modal.js +34 -13
  7. package/components/ion-picker.js +17 -8
  8. package/components/ion-toast.js +17 -8
  9. package/components/overlays.js +1 -22
  10. package/components/popover.js +30 -9
  11. package/dist/cjs/{framework-delegate-e8174951.js → framework-delegate-91be3b84.js} +5 -2
  12. package/dist/cjs/index.cjs.js +2 -2
  13. package/dist/cjs/ion-action-sheet.cjs.entry.js +18 -9
  14. package/dist/cjs/ion-alert.cjs.entry.js +18 -9
  15. package/dist/cjs/ion-app_8.cjs.entry.js +1 -1
  16. package/dist/cjs/ion-datetime_3.cjs.entry.js +18 -9
  17. package/dist/cjs/ion-loading.cjs.entry.js +18 -9
  18. package/dist/cjs/ion-menu_3.cjs.entry.js +2 -2
  19. package/dist/cjs/ion-modal.cjs.entry.js +35 -14
  20. package/dist/cjs/ion-nav_2.cjs.entry.js +1 -1
  21. package/dist/cjs/ion-popover.cjs.entry.js +31 -10
  22. package/dist/cjs/ion-select_3.cjs.entry.js +2 -2
  23. package/dist/cjs/ion-tab_2.cjs.entry.js +1 -1
  24. package/dist/cjs/ion-toast.cjs.entry.js +18 -9
  25. package/dist/cjs/{overlays-2b9fa92e.js → overlays-cf7fa4cf.js} +1 -23
  26. package/dist/collection/components/action-sheet/action-sheet.js +17 -8
  27. package/dist/collection/components/alert/alert.js +17 -8
  28. package/dist/collection/components/loading/loading.js +17 -8
  29. package/dist/collection/components/modal/modal.js +34 -13
  30. package/dist/collection/components/picker/picker.js +17 -8
  31. package/dist/collection/components/popover/popover.js +30 -9
  32. package/dist/collection/components/popover/test/async/popover.e2e.js +20 -0
  33. package/dist/collection/components/toast/toast.js +17 -8
  34. package/dist/collection/utils/framework-delegate.js +5 -2
  35. package/dist/collection/utils/overlays.js +0 -21
  36. package/dist/docs.json +1 -1
  37. package/dist/esm/{framework-delegate-2b76c681.js → framework-delegate-43758c88.js} +5 -2
  38. package/dist/esm/index.js +2 -2
  39. package/dist/esm/ion-action-sheet.entry.js +18 -9
  40. package/dist/esm/ion-alert.entry.js +18 -9
  41. package/dist/esm/ion-app_8.entry.js +1 -1
  42. package/dist/esm/ion-datetime_3.entry.js +18 -9
  43. package/dist/esm/ion-loading.entry.js +18 -9
  44. package/dist/esm/ion-menu_3.entry.js +2 -2
  45. package/dist/esm/ion-modal.entry.js +35 -14
  46. package/dist/esm/ion-nav_2.entry.js +1 -1
  47. package/dist/esm/ion-popover.entry.js +31 -10
  48. package/dist/esm/ion-select_3.entry.js +2 -2
  49. package/dist/esm/ion-tab_2.entry.js +1 -1
  50. package/dist/esm/ion-toast.entry.js +18 -9
  51. package/dist/esm/{overlays-66222f79.js → overlays-236d01c6.js} +2 -23
  52. package/dist/esm-es5/framework-delegate-43758c88.js +4 -0
  53. package/dist/esm-es5/index.js +1 -1
  54. package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
  55. package/dist/esm-es5/ion-alert.entry.js +1 -1
  56. package/dist/esm-es5/ion-app_8.entry.js +1 -1
  57. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  58. package/dist/esm-es5/ion-loading.entry.js +1 -1
  59. package/dist/esm-es5/ion-menu_3.entry.js +1 -1
  60. package/dist/esm-es5/ion-modal.entry.js +1 -1
  61. package/dist/esm-es5/ion-nav_2.entry.js +1 -1
  62. package/dist/esm-es5/ion-popover.entry.js +1 -1
  63. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  64. package/dist/esm-es5/ion-tab_2.entry.js +1 -1
  65. package/dist/esm-es5/ion-toast.entry.js +1 -1
  66. package/dist/esm-es5/{overlays-66222f79.js → overlays-236d01c6.js} +1 -1
  67. package/dist/ionic/index.esm.js +1 -1
  68. package/dist/ionic/ionic.esm.js +1 -1
  69. package/dist/ionic/{p-0494a5b7.system.entry.js → p-04515b10.system.entry.js} +1 -1
  70. package/dist/ionic/p-13df6e84.system.entry.js +4 -0
  71. package/dist/ionic/p-2bdc6097.entry.js +4 -0
  72. package/dist/ionic/p-2c88183e.system.entry.js +4 -0
  73. package/dist/ionic/p-2d37d114.system.entry.js +4 -0
  74. package/dist/ionic/p-2f6666a9.entry.js +4 -0
  75. package/dist/ionic/{p-8d9475b5.system.js → p-33dc95e4.system.js} +1 -1
  76. package/dist/ionic/{p-20087c90.entry.js → p-4852bb39.entry.js} +1 -1
  77. package/dist/ionic/p-4adb3257.entry.js +4 -0
  78. package/dist/ionic/{p-b2098e96.system.entry.js → p-50e474b3.system.entry.js} +1 -1
  79. package/dist/ionic/{p-229df0d8.entry.js → p-5c0754cd.entry.js} +1 -1
  80. package/dist/ionic/{p-a0ffdd91.system.js → p-5f5d78da.system.js} +1 -1
  81. package/dist/ionic/p-647c433f.entry.js +4 -0
  82. package/dist/ionic/p-721933ff.system.js +1 -1
  83. package/dist/ionic/p-870fee8d.system.entry.js +4 -0
  84. package/dist/ionic/p-8d1ef5d0.entry.js +4 -0
  85. package/dist/ionic/p-ad5a562b.system.entry.js +4 -0
  86. package/dist/ionic/{p-f8e4da48.system.js → p-c275a599.system.js} +1 -1
  87. package/dist/ionic/p-d3602489.entry.js +4 -0
  88. package/dist/ionic/p-e015fbd9.system.entry.js +4 -0
  89. package/dist/ionic/p-e30f020d.entry.js +4 -0
  90. package/dist/ionic/{p-7776d062.entry.js → p-e484ae56.entry.js} +1 -1
  91. package/dist/ionic/{p-5c96dc4e.entry.js → p-ed290b4a.entry.js} +1 -1
  92. package/dist/ionic/{p-8074bdd7.system.entry.js → p-f1bf45b2.system.entry.js} +1 -1
  93. package/dist/ionic/p-f2743457.js +4 -0
  94. package/dist/ionic/{p-6b9bf14c.system.entry.js → p-f2c1459b.system.entry.js} +1 -1
  95. package/dist/ionic/p-f4bbbc33.js +4 -0
  96. package/dist/ionic/p-f94cad00.system.entry.js +4 -0
  97. package/dist/ionic/{p-9888a5a7.entry.js → p-fb16e75c.entry.js} +1 -1
  98. package/dist/ionic/{p-d1356034.system.entry.js → p-ff0f2ef4.system.entry.js} +1 -1
  99. package/dist/types/components/action-sheet/action-sheet.d.ts +1 -1
  100. package/dist/types/components/alert/alert.d.ts +1 -1
  101. package/dist/types/components/loading/loading.d.ts +1 -1
  102. package/dist/types/components/modal/modal.d.ts +1 -1
  103. package/dist/types/components/picker/picker.d.ts +1 -1
  104. package/dist/types/components/popover/popover.d.ts +1 -1
  105. package/dist/types/components/toast/toast.d.ts +1 -1
  106. package/dist/types/utils/overlays.d.ts +0 -9
  107. package/hydrate/index.js +147 -78
  108. package/package.json +1 -1
  109. package/dist/esm-es5/framework-delegate-2b76c681.js +0 -4
  110. package/dist/ionic/p-16fd72f2.entry.js +0 -4
  111. package/dist/ionic/p-1c9e3bc7.entry.js +0 -4
  112. package/dist/ionic/p-2a51c81c.entry.js +0 -4
  113. package/dist/ionic/p-2a649b3e.system.entry.js +0 -4
  114. package/dist/ionic/p-3ef9e271.system.entry.js +0 -4
  115. package/dist/ionic/p-6d484719.system.entry.js +0 -4
  116. package/dist/ionic/p-70d137a0.js +0 -4
  117. package/dist/ionic/p-7ac9bdfa.system.entry.js +0 -4
  118. package/dist/ionic/p-8d53d5a5.entry.js +0 -4
  119. package/dist/ionic/p-a133c215.system.entry.js +0 -4
  120. package/dist/ionic/p-b34c1ae1.js +0 -4
  121. package/dist/ionic/p-c0b4ca5c.system.entry.js +0 -4
  122. package/dist/ionic/p-cf768a4f.entry.js +0 -4
  123. package/dist/ionic/p-ddffbfa9.entry.js +0 -4
  124. package/dist/ionic/p-e2e2c2b0.entry.js +0 -4
  125. package/dist/ionic/p-ebb442c4.system.entry.js +0 -4
@@ -4,7 +4,7 @@
4
4
  import { proxyCustomElement, HTMLElement, createEvent, readTask, h, Host } from '@stencil/core/internal/client';
5
5
  import { c as createButtonActiveGesture } from './button-active.js';
6
6
  import { r as raf } from './helpers.js';
7
- import { d as createDelegateController, e as createLockController, f as createTriggerController, B as BACKDROP, i as isCancel, g as present, h as dismiss, j as eventMethod, s as safeCall, k as prepareOverlay, n as setOverlayId } from './overlays.js';
7
+ 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.js';
8
8
  import { g as getClassMap } from './theme.js';
9
9
  import { b as getIonMode } from './ionic-global.js';
10
10
  import { c as createAnimation } from './animation.js';
@@ -113,7 +113,6 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
113
113
  this.willDismissShorthand = createEvent(this, "willDismiss", 7);
114
114
  this.didDismissShorthand = createEvent(this, "didDismiss", 7);
115
115
  this.delegateController = createDelegateController(this);
116
- this.lockController = createLockController();
117
116
  this.triggerController = createTriggerController();
118
117
  this.presented = false;
119
118
  this.onBackdropTap = () => {
@@ -161,10 +160,21 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
161
160
  * Present the action sheet overlay after it has been created.
162
161
  */
163
162
  async present() {
164
- const unlock = await this.lockController.lock();
163
+ /**
164
+ * When using an inline action sheet
165
+ * and dismissing a action sheet it is possible to
166
+ * quickly present the action sheet while it is
167
+ * dismissing. We need to await any current
168
+ * transition to allow the dismiss to finish
169
+ * before presenting again.
170
+ */
171
+ if (this.currentTransition !== undefined) {
172
+ await this.currentTransition;
173
+ }
165
174
  await this.delegateController.attachViewToDom();
166
- await present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
167
- unlock();
175
+ this.currentTransition = present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
176
+ await this.currentTransition;
177
+ this.currentTransition = undefined;
168
178
  }
169
179
  /**
170
180
  * Dismiss the action sheet overlay after it has been presented.
@@ -176,12 +186,11 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
176
186
  * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
177
187
  */
178
188
  async dismiss(data, role) {
179
- const unlock = await this.lockController.lock();
180
- const dismissed = await dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
189
+ this.currentTransition = dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
190
+ const dismissed = await this.currentTransition;
181
191
  if (dismissed) {
182
192
  this.delegateController.removeViewFromDom();
183
193
  }
184
- unlock();
185
194
  return dismissed;
186
195
  }
187
196
  /**
@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } fr
5
5
  import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config.js';
6
6
  import { c as createButtonActiveGesture } from './button-active.js';
7
7
  import { r as raf } from './helpers.js';
8
- import { d as createDelegateController, e as createLockController, f as createTriggerController, B as BACKDROP, i as isCancel, k as prepareOverlay, n as setOverlayId, g as present, h as dismiss, j as eventMethod, s as safeCall } from './overlays.js';
8
+ 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.js';
9
9
  import { g as getClassMap } from './theme.js';
10
10
  import { c as config, b as getIonMode } from './ionic-global.js';
11
11
  import { c as createAnimation } from './animation.js';
@@ -114,7 +114,6 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
114
114
  this.willDismissShorthand = createEvent(this, "willDismiss", 7);
115
115
  this.didDismissShorthand = createEvent(this, "didDismiss", 7);
116
116
  this.delegateController = createDelegateController(this);
117
- this.lockController = createLockController();
118
117
  this.triggerController = createTriggerController();
119
118
  this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
120
119
  this.processedInputs = [];
@@ -281,10 +280,21 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
281
280
  * Present the alert overlay after it has been created.
282
281
  */
283
282
  async present() {
284
- const unlock = await this.lockController.lock();
283
+ /**
284
+ * When using an inline alert
285
+ * and dismissing an alert it is possible to
286
+ * quickly present the alert while it is
287
+ * dismissing. We need to await any current
288
+ * transition to allow the dismiss to finish
289
+ * before presenting again.
290
+ */
291
+ if (this.currentTransition !== undefined) {
292
+ await this.currentTransition;
293
+ }
285
294
  await this.delegateController.attachViewToDom();
286
- await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
287
- unlock();
295
+ this.currentTransition = present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
296
+ await this.currentTransition;
297
+ this.currentTransition = undefined;
288
298
  }
289
299
  /**
290
300
  * Dismiss the alert overlay after it has been presented.
@@ -296,12 +306,11 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
296
306
  * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
297
307
  */
298
308
  async dismiss(data, role) {
299
- const unlock = await this.lockController.lock();
300
- const dismissed = await dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
309
+ this.currentTransition = dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
310
+ const dismissed = await this.currentTransition;
301
311
  if (dismissed) {
302
312
  this.delegateController.removeViewFromDom();
303
313
  }
304
- unlock();
305
314
  return dismissed;
306
315
  }
307
316
  /**
@@ -39,6 +39,7 @@ const CoreDelegate = () => {
39
39
  const attachViewToDom = async (parentElement, userComponent, userComponentProps = {}, cssClasses = []) => {
40
40
  var _a, _b;
41
41
  BaseComponent = parentElement;
42
+ let ChildComponent;
42
43
  /**
43
44
  * If passing in a component via the `component` props
44
45
  * we need to append it inside of our overlay component.
@@ -65,6 +66,7 @@ const CoreDelegate = () => {
65
66
  * inside of the overlay component.
66
67
  */
67
68
  BaseComponent.appendChild(el);
69
+ ChildComponent = el;
68
70
  await new Promise((resolve) => componentOnReady(el, resolve));
69
71
  }
70
72
  else if (BaseComponent.children.length > 0 &&
@@ -73,7 +75,7 @@ const CoreDelegate = () => {
73
75
  * The delegate host wrapper el is only needed for modals and popovers
74
76
  * because they allow the dev to provide custom content to the overlay.
75
77
  */
76
- const root = BaseComponent.children[0];
78
+ const root = (ChildComponent = BaseComponent.children[0]);
77
79
  if (!root.classList.contains('ion-delegate-host')) {
78
80
  /**
79
81
  * If the root element is not a delegate host, it means
@@ -88,6 +90,7 @@ const CoreDelegate = () => {
88
90
  el.append(...BaseComponent.children);
89
91
  // Append the new parent element to the original parent element.
90
92
  BaseComponent.appendChild(el);
93
+ ChildComponent = el;
91
94
  }
92
95
  }
93
96
  /**
@@ -103,7 +106,7 @@ const CoreDelegate = () => {
103
106
  Reference = document.createComment('ionic teleport');
104
107
  BaseComponent.parentNode.insertBefore(Reference, BaseComponent);
105
108
  app.appendChild(BaseComponent);
106
- return BaseComponent;
109
+ return ChildComponent;
107
110
  };
108
111
  const removeViewFromDom = () => {
109
112
  /**
@@ -4,7 +4,7 @@
4
4
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
5
5
  import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config.js';
6
6
  import { r as raf } from './helpers.js';
7
- import { d as createDelegateController, e as createLockController, f as createTriggerController, B as BACKDROP, k as prepareOverlay, n as setOverlayId, g as present, h as dismiss, j as eventMethod } from './overlays.js';
7
+ 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.js';
8
8
  import { g as getClassMap } from './theme.js';
9
9
  import { c as config, b as getIonMode } from './ionic-global.js';
10
10
  import { c as createAnimation } from './animation.js';
@@ -116,7 +116,6 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
116
116
  this.willDismissShorthand = createEvent(this, "willDismiss", 7);
117
117
  this.didDismissShorthand = createEvent(this, "didDismiss", 7);
118
118
  this.delegateController = createDelegateController(this);
119
- this.lockController = createLockController();
120
119
  this.triggerController = createTriggerController();
121
120
  this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
122
121
  this.presented = false;
@@ -182,13 +181,24 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
182
181
  * Present the loading overlay after it has been created.
183
182
  */
184
183
  async present() {
185
- const unlock = await this.lockController.lock();
184
+ /**
185
+ * When using an inline loading indicator
186
+ * and dismissing a loading indicator it is possible to
187
+ * quickly present the loading indicator while it is
188
+ * dismissing. We need to await any current
189
+ * transition to allow the dismiss to finish
190
+ * before presenting again.
191
+ */
192
+ if (this.currentTransition !== undefined) {
193
+ await this.currentTransition;
194
+ }
186
195
  await this.delegateController.attachViewToDom();
187
- await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
196
+ this.currentTransition = present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
197
+ await this.currentTransition;
188
198
  if (this.duration > 0) {
189
199
  this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
190
200
  }
191
- unlock();
201
+ this.currentTransition = undefined;
192
202
  }
193
203
  /**
194
204
  * Dismiss the loading overlay after it has been presented.
@@ -200,15 +210,14 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
200
210
  * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
201
211
  */
202
212
  async dismiss(data, role) {
203
- const unlock = await this.lockController.lock();
204
213
  if (this.durationTimeout) {
205
214
  clearTimeout(this.durationTimeout);
206
215
  }
207
- const dismissed = await dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
216
+ this.currentTransition = dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
217
+ const dismissed = await this.currentTransition;
208
218
  if (dismissed) {
209
219
  this.delegateController.removeViewFromDom();
210
220
  }
211
- unlock();
212
221
  return dismissed;
213
222
  }
214
223
  /**
@@ -7,7 +7,7 @@ import { d as doc } from './index5.js';
7
7
  import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
8
8
  import { o as isEndSide, i as inheritAriaAttributes, p as assert, m as clamp } from './helpers.js';
9
9
  import { m as menuController } from './index4.js';
10
- import { q as getOverlay } from './overlays.js';
10
+ import { o as getOverlay } from './overlays.js';
11
11
  import { c as config, b as getIonMode } from './ionic-global.js';
12
12
  import { d as defineCustomElement$2 } from './backdrop.js';
13
13
 
@@ -7,7 +7,7 @@ import { C as CoreDelegate, a as attachComponent, d as detachComponent } from '.
7
7
  import { g as getElementRoot, m as clamp, r as raf, d as inheritAttributes, l as hasLazyBuild } from './helpers.js';
8
8
  import { p as printIonWarning } from './index6.js';
9
9
  import { g as getCapacitor } from './capacitor.js';
10
- import { G as GESTURE, e as createLockController, f as createTriggerController, B as BACKDROP, k as prepareOverlay, n as setOverlayId, g as present, r as activeAnimations, h as dismiss, j as eventMethod } from './overlays.js';
10
+ import { G as GESTURE, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, q as activeAnimations, g as dismiss, h as eventMethod } from './overlays.js';
11
11
  import { g as getClassMap } from './theme.js';
12
12
  import { e as deepReady, w as waitForMount } from './index3.js';
13
13
  import { b as getIonMode, c as config } from './ionic-global.js';
@@ -1113,7 +1113,6 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1113
1113
  this.willDismissShorthand = createEvent(this, "willDismiss", 7);
1114
1114
  this.didDismissShorthand = createEvent(this, "didDismiss", 7);
1115
1115
  this.ionMount = createEvent(this, "ionMount", 7);
1116
- this.lockController = createLockController();
1117
1116
  this.triggerController = createTriggerController();
1118
1117
  this.coreDelegate = CoreDelegate();
1119
1118
  this.isSheetModal = false;
@@ -1281,16 +1280,26 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1281
1280
  if (this.presented) {
1282
1281
  return;
1283
1282
  }
1284
- const unlock = await this.lockController.lock();
1285
1283
  const { presentingElement, el } = this;
1284
+ /**
1285
+ * When using an inline modal
1286
+ * and dismissing a modal it is possible to
1287
+ * quickly present the modal while it is
1288
+ * dismissing. We need to await any current
1289
+ * transition to allow the dismiss to finish
1290
+ * before presenting again.
1291
+ */
1292
+ if (this.currentTransition !== undefined) {
1293
+ await this.currentTransition;
1294
+ }
1286
1295
  /**
1287
1296
  * If the modal is presented multiple times (inline modals), we
1288
1297
  * need to reset the current breakpoint to the initial breakpoint.
1289
1298
  */
1290
1299
  this.currentBreakpoint = this.initialBreakpoint;
1291
1300
  const { inline, delegate } = this.getDelegate(true);
1292
- this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
1293
1301
  this.ionMount.emit();
1302
+ this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
1294
1303
  /**
1295
1304
  * When using the lazy loaded build of Stencil, we need to wait
1296
1305
  * for every Stencil component instance to be ready before presenting
@@ -1314,6 +1323,11 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1314
1323
  await waitForMount();
1315
1324
  }
1316
1325
  writeTask(() => this.el.classList.add('show-modal'));
1326
+ this.currentTransition = present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
1327
+ presentingEl: presentingElement,
1328
+ currentBreakpoint: this.initialBreakpoint,
1329
+ backdropBreakpoint: this.backdropBreakpoint,
1330
+ });
1317
1331
  /* tslint:disable-next-line */
1318
1332
  if (typeof window !== 'undefined') {
1319
1333
  /**
@@ -1356,18 +1370,14 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1356
1370
  this.statusBarStyle = await StatusBar.getStyle();
1357
1371
  setCardStatusBarDark();
1358
1372
  }
1359
- await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
1360
- presentingEl: presentingElement,
1361
- currentBreakpoint: this.initialBreakpoint,
1362
- backdropBreakpoint: this.backdropBreakpoint,
1363
- });
1373
+ await this.currentTransition;
1364
1374
  if (this.isSheetModal) {
1365
1375
  this.initSheetGesture();
1366
1376
  }
1367
1377
  else if (hasCardModal) {
1368
1378
  this.initSwipeToClose();
1369
1379
  }
1370
- unlock();
1380
+ this.currentTransition = undefined;
1371
1381
  }
1372
1382
  initSwipeToClose() {
1373
1383
  var _a;
@@ -1457,7 +1467,6 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1457
1467
  if (this.gestureAnimationDismissing && role !== GESTURE) {
1458
1468
  return false;
1459
1469
  }
1460
- const unlock = await this.lockController.lock();
1461
1470
  /**
1462
1471
  * If a canDismiss handler is responsible
1463
1472
  * for calling the dismiss method, we should
@@ -1481,12 +1490,24 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1481
1490
  window.removeEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
1482
1491
  this.keyboardOpenCallback = undefined;
1483
1492
  }
1493
+ /**
1494
+ * When using an inline modal
1495
+ * and presenting a modal it is possible to
1496
+ * quickly dismiss the modal while it is
1497
+ * presenting. We need to await any current
1498
+ * transition to allow the present to finish
1499
+ * before dismissing again.
1500
+ */
1501
+ if (this.currentTransition !== undefined) {
1502
+ await this.currentTransition;
1503
+ }
1484
1504
  const enteringAnimation = activeAnimations.get(this) || [];
1485
- const dismissed = await dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
1505
+ this.currentTransition = dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
1486
1506
  presentingEl: presentingElement,
1487
1507
  currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
1488
1508
  backdropBreakpoint: this.backdropBreakpoint,
1489
1509
  });
1510
+ const dismissed = await this.currentTransition;
1490
1511
  if (dismissed) {
1491
1512
  const { delegate } = this.getDelegate();
1492
1513
  await detachComponent(delegate, this.usersElement);
@@ -1500,8 +1521,8 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1500
1521
  enteringAnimation.forEach((ani) => ani.destroy());
1501
1522
  }
1502
1523
  this.currentBreakpoint = undefined;
1524
+ this.currentTransition = undefined;
1503
1525
  this.animation = undefined;
1504
- unlock();
1505
1526
  return dismissed;
1506
1527
  }
1507
1528
  /**
@@ -3,7 +3,7 @@
3
3
  */
4
4
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
5
5
  import { r as raf } from './helpers.js';
6
- import { d as createDelegateController, e as createLockController, f as createTriggerController, B as BACKDROP, i as isCancel, k as prepareOverlay, n as setOverlayId, g as present, h as dismiss, j as eventMethod, s as safeCall } from './overlays.js';
6
+ 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.js';
7
7
  import { g as getClassMap } from './theme.js';
8
8
  import { b as getIonMode } from './ionic-global.js';
9
9
  import { c as createAnimation } from './animation.js';
@@ -71,7 +71,6 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
71
71
  this.willDismissShorthand = createEvent(this, "willDismiss", 7);
72
72
  this.didDismissShorthand = createEvent(this, "didDismiss", 7);
73
73
  this.delegateController = createDelegateController(this);
74
- this.lockController = createLockController();
75
74
  this.triggerController = createTriggerController();
76
75
  this.onBackdropTap = () => {
77
76
  this.dismiss(undefined, BACKDROP);
@@ -138,13 +137,24 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
138
137
  * Present the picker overlay after it has been created.
139
138
  */
140
139
  async present() {
141
- const unlock = await this.lockController.lock();
140
+ /**
141
+ * When using an inline picker
142
+ * and dismissing an picker it is possible to
143
+ * quickly present the picker while it is
144
+ * dismissing. We need to await any current
145
+ * transition to allow the dismiss to finish
146
+ * before presenting again.
147
+ */
148
+ if (this.currentTransition !== undefined) {
149
+ await this.currentTransition;
150
+ }
142
151
  await this.delegateController.attachViewToDom();
143
- await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
152
+ this.currentTransition = present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
153
+ await this.currentTransition;
154
+ this.currentTransition = undefined;
144
155
  if (this.duration > 0) {
145
156
  this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
146
157
  }
147
- unlock();
148
158
  }
149
159
  /**
150
160
  * Dismiss the picker overlay after it has been presented.
@@ -156,15 +166,14 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
156
166
  * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
157
167
  */
158
168
  async dismiss(data, role) {
159
- const unlock = await this.lockController.lock();
160
169
  if (this.durationTimeout) {
161
170
  clearTimeout(this.durationTimeout);
162
171
  }
163
- const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
172
+ this.currentTransition = dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
173
+ const dismissed = await this.currentTransition;
164
174
  if (dismissed) {
165
175
  this.delegateController.removeViewFromDom();
166
176
  }
167
- unlock();
168
177
  return dismissed;
169
178
  }
170
179
  /**
@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
5
5
  import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config.js';
6
6
  import { g as getElementRoot, r as raf } from './helpers.js';
7
7
  import { p as printIonWarning } from './index6.js';
8
- import { d as createDelegateController, e as createLockController, f as createTriggerController, i as isCancel, k as prepareOverlay, n as setOverlayId, g as present, h as dismiss, j as eventMethod, s as safeCall } from './overlays.js';
8
+ 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.js';
9
9
  import { g as getClassMap, c as createColorClasses } from './theme.js';
10
10
  import { c as config, b as getIonMode } from './ionic-global.js';
11
11
  import { c as createAnimation } from './animation.js';
@@ -123,7 +123,6 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
123
123
  this.willDismissShorthand = createEvent(this, "willDismiss", 7);
124
124
  this.didDismissShorthand = createEvent(this, "didDismiss", 7);
125
125
  this.delegateController = createDelegateController(this);
126
- this.lockController = createLockController();
127
126
  this.triggerController = createTriggerController();
128
127
  this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
129
128
  this.presented = false;
@@ -193,19 +192,30 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
193
192
  * Present the toast overlay after it has been created.
194
193
  */
195
194
  async present() {
196
- const unlock = await this.lockController.lock();
195
+ /**
196
+ * When using an inline toast
197
+ * and dismissing a toast it is possible to
198
+ * quickly present the toast while it is
199
+ * dismissing. We need to await any current
200
+ * transition to allow the dismiss to finish
201
+ * before presenting again.
202
+ */
203
+ if (this.currentTransition !== undefined) {
204
+ await this.currentTransition;
205
+ }
197
206
  await this.delegateController.attachViewToDom();
198
- await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
207
+ this.currentTransition = present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
208
+ await this.currentTransition;
199
209
  /**
200
210
  * Content is revealed to screen readers after
201
211
  * the transition to avoid jank since this
202
212
  * state updates will cause a re-render.
203
213
  */
204
214
  this.revealContentToScreenReader = true;
215
+ this.currentTransition = undefined;
205
216
  if (this.duration > 0) {
206
217
  this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
207
218
  }
208
- unlock();
209
219
  }
210
220
  /**
211
221
  * Dismiss the toast overlay after it has been presented.
@@ -217,16 +227,15 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
217
227
  * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
218
228
  */
219
229
  async dismiss(data, role) {
220
- const unlock = await this.lockController.lock();
221
230
  if (this.durationTimeout) {
222
231
  clearTimeout(this.durationTimeout);
223
232
  }
224
- const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
233
+ this.currentTransition = dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
234
+ const dismissed = await this.currentTransition;
225
235
  if (dismissed) {
226
236
  this.delegateController.removeViewFromDom();
227
237
  this.revealContentToScreenReader = false;
228
238
  }
229
- unlock();
230
239
  return dismissed;
231
240
  }
232
241
  /**
@@ -617,27 +617,6 @@ const createDelegateController = (ref) => {
617
617
  removeViewFromDom,
618
618
  };
619
619
  };
620
- /**
621
- * Creates a lock controller.
622
- *
623
- * This function locks transitions.
624
- * The unlock() function within it calls resolve on this function, unlocking the transitions.
625
- */
626
- const createLockController = () => {
627
- let waitPromise;
628
- const lock = async () => {
629
- const p = waitPromise;
630
- let resolve;
631
- waitPromise = new Promise((r) => (resolve = r));
632
- if (p !== undefined) {
633
- await p;
634
- }
635
- return resolve;
636
- };
637
- return {
638
- lock,
639
- };
640
- };
641
620
  /**
642
621
  * Constructs a trigger interaction for an overlay.
643
622
  * Presents an overlay when the trigger is clicked.
@@ -689,4 +668,4 @@ const createTriggerController = () => {
689
668
  };
690
669
  };
691
670
 
692
- export { BACKDROP as B, GESTURE as G, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createLockController as e, createTriggerController as f, present as g, dismiss as h, isCancel as i, eventMethod as j, prepareOverlay as k, loadingController as l, modalController as m, setOverlayId as n, focusFirstDescendant as o, pickerController as p, getOverlay as q, activeAnimations as r, safeCall as s, toastController as t };
671
+ export { BACKDROP as B, GESTURE as G, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getOverlay as o, pickerController as p, activeAnimations as q, safeCall as s, toastController as t };
@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
5
5
  import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate.js';
6
6
  import { r as raf, g as getElementRoot, a as addEventListener, l as hasLazyBuild } from './helpers.js';
7
7
  import { p as printIonWarning } from './index6.js';
8
- import { e as createLockController, B as BACKDROP, k as prepareOverlay, n as setOverlayId, g as present, o as focusFirstDescendant, h as dismiss, j as eventMethod } from './overlays.js';
8
+ import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays.js';
9
9
  import { b as getIonMode, a as isPlatform } from './ionic-global.js';
10
10
  import { g as getClassMap } from './theme.js';
11
11
  import { e as deepReady, w as waitForMount } from './index3.js';
@@ -984,7 +984,6 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
984
984
  this.ionMount = createEvent(this, "ionMount", 7);
985
985
  this.parentPopover = null;
986
986
  this.coreDelegate = CoreDelegate();
987
- this.lockController = createLockController();
988
987
  this.inline = false;
989
988
  this.focusDescendantOnPresent = false;
990
989
  this.onBackdropTap = () => {
@@ -1161,15 +1160,25 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
1161
1160
  if (this.presented) {
1162
1161
  return;
1163
1162
  }
1164
- const unlock = await this.lockController.lock();
1163
+ /**
1164
+ * When using an inline popover
1165
+ * and dismissing a popover it is possible to
1166
+ * quickly present the popover while it is
1167
+ * dismissing. We need to await any current
1168
+ * transition to allow the dismiss to finish
1169
+ * before presenting again.
1170
+ */
1171
+ if (this.currentTransition !== undefined) {
1172
+ await this.currentTransition;
1173
+ }
1165
1174
  const { el } = this;
1166
1175
  const { inline, delegate } = this.getDelegate(true);
1176
+ this.ionMount.emit();
1167
1177
  this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
1168
1178
  if (!this.keyboardEvents) {
1169
1179
  this.configureKeyboardInteraction();
1170
1180
  }
1171
1181
  this.configureDismissInteraction();
1172
- this.ionMount.emit();
1173
1182
  /**
1174
1183
  * When using the lazy loaded build of Stencil, we need to wait
1175
1184
  * for every Stencil component instance to be ready before presenting
@@ -1192,7 +1201,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
1192
1201
  else if (!this.keepContentsMounted) {
1193
1202
  await waitForMount();
1194
1203
  }
1195
- await present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
1204
+ this.currentTransition = present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
1196
1205
  event: event || this.event,
1197
1206
  size: this.size,
1198
1207
  trigger: this.triggerEl,
@@ -1200,6 +1209,8 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
1200
1209
  side: this.side,
1201
1210
  align: this.alignment,
1202
1211
  });
1212
+ await this.currentTransition;
1213
+ this.currentTransition = undefined;
1203
1214
  /**
1204
1215
  * If popover is nested and was
1205
1216
  * presented using the "Right" arrow key,
@@ -1209,7 +1220,6 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
1209
1220
  if (this.focusDescendantOnPresent) {
1210
1221
  focusFirstDescendant(this.el, this.el);
1211
1222
  }
1212
- unlock();
1213
1223
  }
1214
1224
  /**
1215
1225
  * Dismiss the popover overlay after it has been presented.
@@ -1220,12 +1230,23 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
1220
1230
  * a parent popover if this popover is nested. Defaults to `true`.
1221
1231
  */
1222
1232
  async dismiss(data, role, dismissParentPopover = true) {
1223
- const unlock = await this.lockController.lock();
1233
+ /**
1234
+ * When using an inline popover
1235
+ * and presenting a popover it is possible to
1236
+ * quickly dismiss the popover while it is
1237
+ * presenting. We need to await any current
1238
+ * transition to allow the present to finish
1239
+ * before dismissing again.
1240
+ */
1241
+ if (this.currentTransition !== undefined) {
1242
+ await this.currentTransition;
1243
+ }
1224
1244
  const { destroyKeyboardInteraction, destroyDismissInteraction } = this;
1225
1245
  if (dismissParentPopover && this.parentPopover) {
1226
1246
  this.parentPopover.dismiss(data, role, dismissParentPopover);
1227
1247
  }
1228
- const shouldDismiss = await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
1248
+ this.currentTransition = dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
1249
+ const shouldDismiss = await this.currentTransition;
1229
1250
  if (shouldDismiss) {
1230
1251
  if (destroyKeyboardInteraction) {
1231
1252
  destroyKeyboardInteraction();
@@ -1243,7 +1264,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
1243
1264
  const { delegate } = this.getDelegate();
1244
1265
  await detachComponent(delegate, this.usersElement);
1245
1266
  }
1246
- unlock();
1267
+ this.currentTransition = undefined;
1247
1268
  return shouldDismiss;
1248
1269
  }
1249
1270
  /**