@ionic/core 7.3.2-dev.11692887667.1614d10a → 7.3.2-dev.11693262117.17edbf6d
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.
- package/components/action-sheet.js +8 -17
- package/components/alert.js +8 -17
- package/components/ion-loading.js +8 -17
- package/components/ion-menu.js +15 -2
- package/components/ion-modal.js +12 -33
- package/components/ion-picker.js +8 -17
- package/components/ion-toast.js +8 -17
- package/components/overlays.js +22 -1
- package/components/popover.js +8 -29
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +8 -17
- package/dist/cjs/ion-alert.cjs.entry.js +8 -17
- package/dist/cjs/ion-datetime_3.cjs.entry.js +8 -17
- package/dist/cjs/ion-loading.cjs.entry.js +8 -17
- package/dist/cjs/ion-menu_3.cjs.entry.js +15 -2
- package/dist/cjs/ion-modal.cjs.entry.js +12 -33
- package/dist/cjs/ion-popover.cjs.entry.js +8 -29
- package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-toast.cjs.entry.js +8 -17
- package/dist/cjs/{overlays-0ea06fcb.js → overlays-2b9fa92e.js} +22 -0
- package/dist/collection/components/action-sheet/action-sheet.js +8 -17
- package/dist/collection/components/alert/alert.js +8 -17
- package/dist/collection/components/loading/loading.js +8 -17
- package/dist/collection/components/menu/menu.js +14 -1
- package/dist/collection/components/menu-button/test/async/menu-button.e2e.js +23 -0
- package/dist/collection/components/modal/modal.js +12 -33
- package/dist/collection/components/picker/picker.js +8 -17
- package/dist/collection/components/popover/popover.js +8 -29
- package/dist/collection/components/toast/toast.js +8 -17
- package/dist/collection/utils/overlays.js +21 -0
- package/dist/docs.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +8 -17
- package/dist/esm/ion-alert.entry.js +8 -17
- package/dist/esm/ion-datetime_3.entry.js +8 -17
- package/dist/esm/ion-loading.entry.js +8 -17
- package/dist/esm/ion-menu_3.entry.js +15 -2
- package/dist/esm/ion-modal.entry.js +12 -33
- package/dist/esm/ion-popover.entry.js +8 -29
- package/dist/esm/ion-select_3.entry.js +1 -1
- package/dist/esm/ion-toast.entry.js +8 -17
- package/dist/esm/{overlays-c3387ec0.js → overlays-66222f79.js} +22 -1
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
- package/dist/esm-es5/ion-alert.entry.js +1 -1
- package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
- package/dist/esm-es5/ion-loading.entry.js +1 -1
- package/dist/esm-es5/ion-menu_3.entry.js +1 -1
- package/dist/esm-es5/ion-modal.entry.js +1 -1
- package/dist/esm-es5/ion-popover.entry.js +1 -1
- package/dist/esm-es5/ion-select_3.entry.js +1 -1
- package/dist/esm-es5/ion-toast.entry.js +1 -1
- package/dist/esm-es5/{overlays-c3387ec0.js → overlays-66222f79.js} +1 -1
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-8fa43732.system.entry.js → p-0494a5b7.system.entry.js} +1 -1
- package/dist/ionic/p-16fd72f2.entry.js +4 -0
- package/dist/ionic/p-1c9e3bc7.entry.js +4 -0
- package/dist/ionic/p-2a51c81c.entry.js +4 -0
- package/dist/ionic/p-2a649b3e.system.entry.js +4 -0
- package/dist/ionic/p-3ef9e271.system.entry.js +4 -0
- package/dist/ionic/p-6d484719.system.entry.js +4 -0
- package/dist/ionic/p-70d137a0.js +4 -0
- package/dist/ionic/p-721933ff.system.js +1 -1
- package/dist/ionic/{p-c0d1e5a1.entry.js → p-7776d062.entry.js} +1 -1
- package/dist/ionic/p-7ac9bdfa.system.entry.js +4 -0
- package/dist/ionic/p-8d53d5a5.entry.js +4 -0
- package/dist/ionic/p-9888a5a7.entry.js +4 -0
- package/dist/ionic/{p-db46fc66.system.js → p-a0ffdd91.system.js} +1 -1
- package/dist/ionic/p-a133c215.system.entry.js +4 -0
- package/dist/ionic/p-b2098e96.system.entry.js +4 -0
- package/dist/ionic/p-c0b4ca5c.system.entry.js +4 -0
- package/dist/ionic/p-cf768a4f.entry.js +4 -0
- package/dist/ionic/p-ddffbfa9.entry.js +4 -0
- package/dist/ionic/p-e2e2c2b0.entry.js +4 -0
- package/dist/ionic/p-ebb442c4.system.entry.js +4 -0
- package/dist/ionic/{p-81b46714.system.js → p-f8e4da48.system.js} +1 -1
- package/dist/types/components/action-sheet/action-sheet.d.ts +1 -1
- package/dist/types/components/alert/alert.d.ts +1 -1
- package/dist/types/components/loading/loading.d.ts +1 -1
- package/dist/types/components/menu/menu.d.ts +2 -0
- package/dist/types/components/modal/modal.d.ts +1 -1
- package/dist/types/components/picker/picker.d.ts +1 -1
- package/dist/types/components/popover/popover.d.ts +1 -1
- package/dist/types/components/toast/toast.d.ts +1 -1
- package/dist/types/utils/overlays.d.ts +9 -0
- package/hydrate/index.js +87 -141
- package/package.json +2 -2
- package/dist/ionic/p-06f1f560.system.entry.js +0 -4
- package/dist/ionic/p-2936ec7f.system.entry.js +0 -4
- package/dist/ionic/p-29b3e70a.entry.js +0 -4
- package/dist/ionic/p-2bc49e5d.system.entry.js +0 -4
- package/dist/ionic/p-2da3e015.system.entry.js +0 -4
- package/dist/ionic/p-423d5a4d.entry.js +0 -4
- package/dist/ionic/p-564aaba3.entry.js +0 -4
- package/dist/ionic/p-5ef91692.js +0 -4
- package/dist/ionic/p-61769039.entry.js +0 -4
- package/dist/ionic/p-74723f41.entry.js +0 -4
- package/dist/ionic/p-8b55f026.entry.js +0 -4
- package/dist/ionic/p-9b3c3564.entry.js +0 -4
- package/dist/ionic/p-ac80da6c.system.entry.js +0 -4
- package/dist/ionic/p-ccea9adc.system.entry.js +0 -4
- package/dist/ionic/p-d5db0834.system.entry.js +0 -4
- package/dist/ionic/p-d8538837.entry.js +0 -4
- package/dist/ionic/p-dd0b6889.system.entry.js +0 -4
|
@@ -5,7 +5,7 @@ import { Host, forceUpdate, h } from "@stencil/core";
|
|
|
5
5
|
import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
|
|
6
6
|
import { createButtonActiveGesture } from "../../utils/gesture/button-active";
|
|
7
7
|
import { raf } from "../../utils/helpers";
|
|
8
|
-
import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
|
|
8
|
+
import { createDelegateController, createLockController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
|
|
9
9
|
import { sanitizeDOMString } from "../../utils/sanitization/index";
|
|
10
10
|
import { getClassMap } from "../../utils/theme";
|
|
11
11
|
import { config } from "../../global/config";
|
|
@@ -21,6 +21,7 @@ import { mdLeaveAnimation } from "./animations/md.leave";
|
|
|
21
21
|
export class Alert {
|
|
22
22
|
constructor() {
|
|
23
23
|
this.delegateController = createDelegateController(this);
|
|
24
|
+
this.lockController = createLockController();
|
|
24
25
|
this.triggerController = createTriggerController();
|
|
25
26
|
this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
|
|
26
27
|
this.processedInputs = [];
|
|
@@ -187,21 +188,10 @@ export class Alert {
|
|
|
187
188
|
* Present the alert overlay after it has been created.
|
|
188
189
|
*/
|
|
189
190
|
async present() {
|
|
190
|
-
|
|
191
|
-
* When using an inline alert
|
|
192
|
-
* and dismissing an alert it is possible to
|
|
193
|
-
* quickly present the alert while it is
|
|
194
|
-
* dismissing. We need to await any current
|
|
195
|
-
* transition to allow the dismiss to finish
|
|
196
|
-
* before presenting again.
|
|
197
|
-
*/
|
|
198
|
-
if (this.currentTransition !== undefined) {
|
|
199
|
-
await this.currentTransition;
|
|
200
|
-
}
|
|
191
|
+
const unlock = await this.lockController.lock();
|
|
201
192
|
await this.delegateController.attachViewToDom();
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
this.currentTransition = undefined;
|
|
193
|
+
await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
|
|
194
|
+
unlock();
|
|
205
195
|
}
|
|
206
196
|
/**
|
|
207
197
|
* Dismiss the alert overlay after it has been presented.
|
|
@@ -213,11 +203,12 @@ export class Alert {
|
|
|
213
203
|
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
|
214
204
|
*/
|
|
215
205
|
async dismiss(data, role) {
|
|
216
|
-
|
|
217
|
-
const dismissed = await this
|
|
206
|
+
const unlock = await this.lockController.lock();
|
|
207
|
+
const dismissed = await dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
|
|
218
208
|
if (dismissed) {
|
|
219
209
|
this.delegateController.removeViewFromDom();
|
|
220
210
|
}
|
|
211
|
+
unlock();
|
|
221
212
|
return dismissed;
|
|
222
213
|
}
|
|
223
214
|
/**
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { Host, h } from "@stencil/core";
|
|
5
5
|
import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
|
|
6
6
|
import { raf } from "../../utils/helpers";
|
|
7
|
-
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createTriggerController, setOverlayId, } from "../../utils/overlays";
|
|
7
|
+
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createLockController, createTriggerController, setOverlayId, } from "../../utils/overlays";
|
|
8
8
|
import { sanitizeDOMString } from "../../utils/sanitization/index";
|
|
9
9
|
import { getClassMap } from "../../utils/theme";
|
|
10
10
|
import { config } from "../../global/config";
|
|
@@ -20,6 +20,7 @@ import { mdLeaveAnimation } from "./animations/md.leave";
|
|
|
20
20
|
export class Loading {
|
|
21
21
|
constructor() {
|
|
22
22
|
this.delegateController = createDelegateController(this);
|
|
23
|
+
this.lockController = createLockController();
|
|
23
24
|
this.triggerController = createTriggerController();
|
|
24
25
|
this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
|
|
25
26
|
this.presented = false;
|
|
@@ -85,24 +86,13 @@ export class Loading {
|
|
|
85
86
|
* Present the loading overlay after it has been created.
|
|
86
87
|
*/
|
|
87
88
|
async present() {
|
|
88
|
-
|
|
89
|
-
* When using an inline loading indicator
|
|
90
|
-
* and dismissing a loading indicator it is possible to
|
|
91
|
-
* quickly present the loading indicator while it is
|
|
92
|
-
* dismissing. We need to await any current
|
|
93
|
-
* transition to allow the dismiss to finish
|
|
94
|
-
* before presenting again.
|
|
95
|
-
*/
|
|
96
|
-
if (this.currentTransition !== undefined) {
|
|
97
|
-
await this.currentTransition;
|
|
98
|
-
}
|
|
89
|
+
const unlock = await this.lockController.lock();
|
|
99
90
|
await this.delegateController.attachViewToDom();
|
|
100
|
-
|
|
101
|
-
await this.currentTransition;
|
|
91
|
+
await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
|
|
102
92
|
if (this.duration > 0) {
|
|
103
93
|
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
|
|
104
94
|
}
|
|
105
|
-
|
|
95
|
+
unlock();
|
|
106
96
|
}
|
|
107
97
|
/**
|
|
108
98
|
* Dismiss the loading overlay after it has been presented.
|
|
@@ -114,14 +104,15 @@ export class Loading {
|
|
|
114
104
|
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
|
115
105
|
*/
|
|
116
106
|
async dismiss(data, role) {
|
|
107
|
+
const unlock = await this.lockController.lock();
|
|
117
108
|
if (this.durationTimeout) {
|
|
118
109
|
clearTimeout(this.durationTimeout);
|
|
119
110
|
}
|
|
120
|
-
|
|
121
|
-
const dismissed = await this.currentTransition;
|
|
111
|
+
const dismissed = await dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
|
|
122
112
|
if (dismissed) {
|
|
123
113
|
this.delegateController.removeViewFromDom();
|
|
124
114
|
}
|
|
115
|
+
unlock();
|
|
125
116
|
return dismissed;
|
|
126
117
|
}
|
|
127
118
|
/**
|
|
@@ -23,6 +23,7 @@ export class Menu {
|
|
|
23
23
|
constructor() {
|
|
24
24
|
this.lastOnEnd = 0;
|
|
25
25
|
this.blocker = GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
|
|
26
|
+
this.didLoad = false;
|
|
26
27
|
this.isAnimating = false;
|
|
27
28
|
this._isOpen = false;
|
|
28
29
|
this.inheritedAttributes = {};
|
|
@@ -110,6 +111,7 @@ export class Menu {
|
|
|
110
111
|
this.sideChanged();
|
|
111
112
|
// register this menu with the app's menu controller
|
|
112
113
|
menuController._register(this);
|
|
114
|
+
this.menuChanged();
|
|
113
115
|
this.gesture = (await import('../../utils/gesture')).createGesture({
|
|
114
116
|
el: document,
|
|
115
117
|
gestureName: 'menu-swipe',
|
|
@@ -128,9 +130,20 @@ export class Menu {
|
|
|
128
130
|
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
129
131
|
}
|
|
130
132
|
async componentDidLoad() {
|
|
131
|
-
this.
|
|
133
|
+
this.didLoad = true;
|
|
134
|
+
this.menuChanged();
|
|
132
135
|
this.updateState();
|
|
133
136
|
}
|
|
137
|
+
menuChanged() {
|
|
138
|
+
/**
|
|
139
|
+
* Inform dependent components such as ion-menu-button
|
|
140
|
+
* that the menu is ready. Note that we only want to do this
|
|
141
|
+
* once the menu has been rendered which is why we check for didLoad.
|
|
142
|
+
*/
|
|
143
|
+
if (this.didLoad) {
|
|
144
|
+
this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
|
|
145
|
+
}
|
|
146
|
+
}
|
|
134
147
|
async disconnectedCallback() {
|
|
135
148
|
/**
|
|
136
149
|
* The menu should be closed when it is
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
+
*/
|
|
4
|
+
import { expect } from "@playwright/test";
|
|
5
|
+
import { configs, test } from "../../../../utils/test/playwright/index";
|
|
6
|
+
/**
|
|
7
|
+
* This behavior does not vary across modes/directions
|
|
8
|
+
*/
|
|
9
|
+
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
|
10
|
+
test.describe(title('menu button: async'), () => {
|
|
11
|
+
test('menu button should be visible if menu is moved', async ({ page }) => {
|
|
12
|
+
await page.goto(`/src/components/menu-button/test/async`, config);
|
|
13
|
+
const menu = page.locator('ion-menu');
|
|
14
|
+
const menuButton = page.locator('ion-menu-button');
|
|
15
|
+
const triggerButton = page.locator('#trigger');
|
|
16
|
+
await expect(menu).not.toBeAttached();
|
|
17
|
+
await expect(menuButton).toBeHidden();
|
|
18
|
+
await triggerButton.click();
|
|
19
|
+
await expect(menu).toBeAttached();
|
|
20
|
+
await expect(menuButton).toBeVisible();
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
});
|
|
@@ -7,7 +7,7 @@ import { CoreDelegate, attachComponent, detachComponent } from "../../utils/fram
|
|
|
7
7
|
import { raf, inheritAttributes, hasLazyBuild } from "../../utils/helpers";
|
|
8
8
|
import { printIonWarning } from "../../utils/logging/index";
|
|
9
9
|
import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
|
|
10
|
-
import { GESTURE, BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present, createTriggerController, setOverlayId, } from "../../utils/overlays";
|
|
10
|
+
import { GESTURE, BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present, createLockController, createTriggerController, setOverlayId, } from "../../utils/overlays";
|
|
11
11
|
import { getClassMap } from "../../utils/theme";
|
|
12
12
|
import { deepReady, waitForMount } from "../../utils/transition/index";
|
|
13
13
|
import { config } from "../../global/config";
|
|
@@ -32,6 +32,7 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
|
|
|
32
32
|
*/
|
|
33
33
|
export class Modal {
|
|
34
34
|
constructor() {
|
|
35
|
+
this.lockController = createLockController();
|
|
35
36
|
this.triggerController = createTriggerController();
|
|
36
37
|
this.coreDelegate = CoreDelegate();
|
|
37
38
|
this.isSheetModal = false;
|
|
@@ -199,18 +200,8 @@ export class Modal {
|
|
|
199
200
|
if (this.presented) {
|
|
200
201
|
return;
|
|
201
202
|
}
|
|
203
|
+
const unlock = await this.lockController.lock();
|
|
202
204
|
const { presentingElement, el } = this;
|
|
203
|
-
/**
|
|
204
|
-
* When using an inline modal
|
|
205
|
-
* and dismissing a modal it is possible to
|
|
206
|
-
* quickly present the modal while it is
|
|
207
|
-
* dismissing. We need to await any current
|
|
208
|
-
* transition to allow the dismiss to finish
|
|
209
|
-
* before presenting again.
|
|
210
|
-
*/
|
|
211
|
-
if (this.currentTransition !== undefined) {
|
|
212
|
-
await this.currentTransition;
|
|
213
|
-
}
|
|
214
205
|
/**
|
|
215
206
|
* If the modal is presented multiple times (inline modals), we
|
|
216
207
|
* need to reset the current breakpoint to the initial breakpoint.
|
|
@@ -242,11 +233,6 @@ export class Modal {
|
|
|
242
233
|
await waitForMount();
|
|
243
234
|
}
|
|
244
235
|
writeTask(() => this.el.classList.add('show-modal'));
|
|
245
|
-
this.currentTransition = present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
|
|
246
|
-
presentingEl: presentingElement,
|
|
247
|
-
currentBreakpoint: this.initialBreakpoint,
|
|
248
|
-
backdropBreakpoint: this.backdropBreakpoint,
|
|
249
|
-
});
|
|
250
236
|
/* tslint:disable-next-line */
|
|
251
237
|
if (typeof window !== 'undefined') {
|
|
252
238
|
/**
|
|
@@ -289,14 +275,18 @@ export class Modal {
|
|
|
289
275
|
this.statusBarStyle = await StatusBar.getStyle();
|
|
290
276
|
setCardStatusBarDark();
|
|
291
277
|
}
|
|
292
|
-
await this
|
|
278
|
+
await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
|
|
279
|
+
presentingEl: presentingElement,
|
|
280
|
+
currentBreakpoint: this.initialBreakpoint,
|
|
281
|
+
backdropBreakpoint: this.backdropBreakpoint,
|
|
282
|
+
});
|
|
293
283
|
if (this.isSheetModal) {
|
|
294
284
|
this.initSheetGesture();
|
|
295
285
|
}
|
|
296
286
|
else if (hasCardModal) {
|
|
297
287
|
this.initSwipeToClose();
|
|
298
288
|
}
|
|
299
|
-
|
|
289
|
+
unlock();
|
|
300
290
|
}
|
|
301
291
|
initSwipeToClose() {
|
|
302
292
|
var _a;
|
|
@@ -386,6 +376,7 @@ export class Modal {
|
|
|
386
376
|
if (this.gestureAnimationDismissing && role !== GESTURE) {
|
|
387
377
|
return false;
|
|
388
378
|
}
|
|
379
|
+
const unlock = await this.lockController.lock();
|
|
389
380
|
/**
|
|
390
381
|
* If a canDismiss handler is responsible
|
|
391
382
|
* for calling the dismiss method, we should
|
|
@@ -409,24 +400,12 @@ export class Modal {
|
|
|
409
400
|
window.removeEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
|
|
410
401
|
this.keyboardOpenCallback = undefined;
|
|
411
402
|
}
|
|
412
|
-
/**
|
|
413
|
-
* When using an inline modal
|
|
414
|
-
* and presenting a modal it is possible to
|
|
415
|
-
* quickly dismiss the modal while it is
|
|
416
|
-
* presenting. We need to await any current
|
|
417
|
-
* transition to allow the present to finish
|
|
418
|
-
* before dismissing again.
|
|
419
|
-
*/
|
|
420
|
-
if (this.currentTransition !== undefined) {
|
|
421
|
-
await this.currentTransition;
|
|
422
|
-
}
|
|
423
403
|
const enteringAnimation = activeAnimations.get(this) || [];
|
|
424
|
-
|
|
404
|
+
const dismissed = await dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
|
|
425
405
|
presentingEl: presentingElement,
|
|
426
406
|
currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
|
|
427
407
|
backdropBreakpoint: this.backdropBreakpoint,
|
|
428
408
|
});
|
|
429
|
-
const dismissed = await this.currentTransition;
|
|
430
409
|
if (dismissed) {
|
|
431
410
|
const { delegate } = this.getDelegate();
|
|
432
411
|
await detachComponent(delegate, this.usersElement);
|
|
@@ -440,8 +419,8 @@ export class Modal {
|
|
|
440
419
|
enteringAnimation.forEach((ani) => ani.destroy());
|
|
441
420
|
}
|
|
442
421
|
this.currentBreakpoint = undefined;
|
|
443
|
-
this.currentTransition = undefined;
|
|
444
422
|
this.animation = undefined;
|
|
423
|
+
unlock();
|
|
445
424
|
return dismissed;
|
|
446
425
|
}
|
|
447
426
|
/**
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { Host, h } from "@stencil/core";
|
|
5
5
|
import { raf } from "../../utils/helpers";
|
|
6
|
-
import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
|
|
6
|
+
import { createDelegateController, createLockController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
|
|
7
7
|
import { getClassMap } from "../../utils/theme";
|
|
8
8
|
import { getIonMode } from "../../global/ionic-global";
|
|
9
9
|
import { iosEnterAnimation } from "./animations/ios.enter";
|
|
@@ -15,6 +15,7 @@ import { iosLeaveAnimation } from "./animations/ios.leave";
|
|
|
15
15
|
export class Picker {
|
|
16
16
|
constructor() {
|
|
17
17
|
this.delegateController = createDelegateController(this);
|
|
18
|
+
this.lockController = createLockController();
|
|
18
19
|
this.triggerController = createTriggerController();
|
|
19
20
|
this.onBackdropTap = () => {
|
|
20
21
|
this.dismiss(undefined, BACKDROP);
|
|
@@ -81,24 +82,13 @@ export class Picker {
|
|
|
81
82
|
* Present the picker overlay after it has been created.
|
|
82
83
|
*/
|
|
83
84
|
async present() {
|
|
84
|
-
|
|
85
|
-
* When using an inline picker
|
|
86
|
-
* and dismissing an picker it is possible to
|
|
87
|
-
* quickly present the picker while it is
|
|
88
|
-
* dismissing. We need to await any current
|
|
89
|
-
* transition to allow the dismiss to finish
|
|
90
|
-
* before presenting again.
|
|
91
|
-
*/
|
|
92
|
-
if (this.currentTransition !== undefined) {
|
|
93
|
-
await this.currentTransition;
|
|
94
|
-
}
|
|
85
|
+
const unlock = await this.lockController.lock();
|
|
95
86
|
await this.delegateController.attachViewToDom();
|
|
96
|
-
|
|
97
|
-
await this.currentTransition;
|
|
98
|
-
this.currentTransition = undefined;
|
|
87
|
+
await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
|
|
99
88
|
if (this.duration > 0) {
|
|
100
89
|
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
|
|
101
90
|
}
|
|
91
|
+
unlock();
|
|
102
92
|
}
|
|
103
93
|
/**
|
|
104
94
|
* Dismiss the picker overlay after it has been presented.
|
|
@@ -110,14 +100,15 @@ export class Picker {
|
|
|
110
100
|
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
|
111
101
|
*/
|
|
112
102
|
async dismiss(data, role) {
|
|
103
|
+
const unlock = await this.lockController.lock();
|
|
113
104
|
if (this.durationTimeout) {
|
|
114
105
|
clearTimeout(this.durationTimeout);
|
|
115
106
|
}
|
|
116
|
-
|
|
117
|
-
const dismissed = await this.currentTransition;
|
|
107
|
+
const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
|
|
118
108
|
if (dismissed) {
|
|
119
109
|
this.delegateController.removeViewFromDom();
|
|
120
110
|
}
|
|
111
|
+
unlock();
|
|
121
112
|
return dismissed;
|
|
122
113
|
}
|
|
123
114
|
/**
|
|
@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
|
|
|
5
5
|
import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
|
|
6
6
|
import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
|
|
7
7
|
import { printIonWarning } from "../../utils/logging/index";
|
|
8
|
-
import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
|
|
8
|
+
import { BACKDROP, createLockController, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
|
|
9
9
|
import { isPlatform } from "../../utils/platform";
|
|
10
10
|
import { getClassMap } from "../../utils/theme";
|
|
11
11
|
import { deepReady, waitForMount } from "../../utils/transition/index";
|
|
@@ -29,6 +29,7 @@ export class Popover {
|
|
|
29
29
|
constructor() {
|
|
30
30
|
this.parentPopover = null;
|
|
31
31
|
this.coreDelegate = CoreDelegate();
|
|
32
|
+
this.lockController = createLockController();
|
|
32
33
|
this.inline = false;
|
|
33
34
|
this.focusDescendantOnPresent = false;
|
|
34
35
|
this.onBackdropTap = () => {
|
|
@@ -205,17 +206,7 @@ export class Popover {
|
|
|
205
206
|
if (this.presented) {
|
|
206
207
|
return;
|
|
207
208
|
}
|
|
208
|
-
|
|
209
|
-
* When using an inline popover
|
|
210
|
-
* and dismissing a popover it is possible to
|
|
211
|
-
* quickly present the popover while it is
|
|
212
|
-
* dismissing. We need to await any current
|
|
213
|
-
* transition to allow the dismiss to finish
|
|
214
|
-
* before presenting again.
|
|
215
|
-
*/
|
|
216
|
-
if (this.currentTransition !== undefined) {
|
|
217
|
-
await this.currentTransition;
|
|
218
|
-
}
|
|
209
|
+
const unlock = await this.lockController.lock();
|
|
219
210
|
const { el } = this;
|
|
220
211
|
const { inline, delegate } = this.getDelegate(true);
|
|
221
212
|
this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
|
|
@@ -246,7 +237,7 @@ export class Popover {
|
|
|
246
237
|
else if (!this.keepContentsMounted) {
|
|
247
238
|
await waitForMount();
|
|
248
239
|
}
|
|
249
|
-
|
|
240
|
+
await present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
|
|
250
241
|
event: event || this.event,
|
|
251
242
|
size: this.size,
|
|
252
243
|
trigger: this.triggerEl,
|
|
@@ -254,8 +245,6 @@ export class Popover {
|
|
|
254
245
|
side: this.side,
|
|
255
246
|
align: this.alignment,
|
|
256
247
|
});
|
|
257
|
-
await this.currentTransition;
|
|
258
|
-
this.currentTransition = undefined;
|
|
259
248
|
/**
|
|
260
249
|
* If popover is nested and was
|
|
261
250
|
* presented using the "Right" arrow key,
|
|
@@ -265,6 +254,7 @@ export class Popover {
|
|
|
265
254
|
if (this.focusDescendantOnPresent) {
|
|
266
255
|
focusFirstDescendant(this.el, this.el);
|
|
267
256
|
}
|
|
257
|
+
unlock();
|
|
268
258
|
}
|
|
269
259
|
/**
|
|
270
260
|
* Dismiss the popover overlay after it has been presented.
|
|
@@ -275,23 +265,12 @@ export class Popover {
|
|
|
275
265
|
* a parent popover if this popover is nested. Defaults to `true`.
|
|
276
266
|
*/
|
|
277
267
|
async dismiss(data, role, dismissParentPopover = true) {
|
|
278
|
-
|
|
279
|
-
* When using an inline popover
|
|
280
|
-
* and presenting a popover it is possible to
|
|
281
|
-
* quickly dismiss the popover while it is
|
|
282
|
-
* presenting. We need to await any current
|
|
283
|
-
* transition to allow the present to finish
|
|
284
|
-
* before dismissing again.
|
|
285
|
-
*/
|
|
286
|
-
if (this.currentTransition !== undefined) {
|
|
287
|
-
await this.currentTransition;
|
|
288
|
-
}
|
|
268
|
+
const unlock = await this.lockController.lock();
|
|
289
269
|
const { destroyKeyboardInteraction, destroyDismissInteraction } = this;
|
|
290
270
|
if (dismissParentPopover && this.parentPopover) {
|
|
291
271
|
this.parentPopover.dismiss(data, role, dismissParentPopover);
|
|
292
272
|
}
|
|
293
|
-
|
|
294
|
-
const shouldDismiss = await this.currentTransition;
|
|
273
|
+
const shouldDismiss = await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
|
|
295
274
|
if (shouldDismiss) {
|
|
296
275
|
if (destroyKeyboardInteraction) {
|
|
297
276
|
destroyKeyboardInteraction();
|
|
@@ -309,7 +288,7 @@ export class Popover {
|
|
|
309
288
|
const { delegate } = this.getDelegate();
|
|
310
289
|
await detachComponent(delegate, this.usersElement);
|
|
311
290
|
}
|
|
312
|
-
|
|
291
|
+
unlock();
|
|
313
292
|
return shouldDismiss;
|
|
314
293
|
}
|
|
315
294
|
/**
|
|
@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
|
|
|
5
5
|
import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
|
|
6
6
|
import { raf } from "../../utils/helpers";
|
|
7
7
|
import { printIonWarning } from "../../utils/logging/index";
|
|
8
|
-
import { createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
|
|
8
|
+
import { createDelegateController, createLockController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
|
|
9
9
|
import { sanitizeDOMString } from "../../utils/sanitization/index";
|
|
10
10
|
import { createColorClasses, getClassMap } from "../../utils/theme";
|
|
11
11
|
import { config } from "../../global/config";
|
|
@@ -28,6 +28,7 @@ import { mdLeaveAnimation } from "./animations/md.leave";
|
|
|
28
28
|
export class Toast {
|
|
29
29
|
constructor() {
|
|
30
30
|
this.delegateController = createDelegateController(this);
|
|
31
|
+
this.lockController = createLockController();
|
|
31
32
|
this.triggerController = createTriggerController();
|
|
32
33
|
this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
|
|
33
34
|
this.presented = false;
|
|
@@ -97,30 +98,19 @@ export class Toast {
|
|
|
97
98
|
* Present the toast overlay after it has been created.
|
|
98
99
|
*/
|
|
99
100
|
async present() {
|
|
100
|
-
|
|
101
|
-
* When using an inline toast
|
|
102
|
-
* and dismissing a toast it is possible to
|
|
103
|
-
* quickly present the toast while it is
|
|
104
|
-
* dismissing. We need to await any current
|
|
105
|
-
* transition to allow the dismiss to finish
|
|
106
|
-
* before presenting again.
|
|
107
|
-
*/
|
|
108
|
-
if (this.currentTransition !== undefined) {
|
|
109
|
-
await this.currentTransition;
|
|
110
|
-
}
|
|
101
|
+
const unlock = await this.lockController.lock();
|
|
111
102
|
await this.delegateController.attachViewToDom();
|
|
112
|
-
|
|
113
|
-
await this.currentTransition;
|
|
103
|
+
await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
|
|
114
104
|
/**
|
|
115
105
|
* Content is revealed to screen readers after
|
|
116
106
|
* the transition to avoid jank since this
|
|
117
107
|
* state updates will cause a re-render.
|
|
118
108
|
*/
|
|
119
109
|
this.revealContentToScreenReader = true;
|
|
120
|
-
this.currentTransition = undefined;
|
|
121
110
|
if (this.duration > 0) {
|
|
122
111
|
this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
|
|
123
112
|
}
|
|
113
|
+
unlock();
|
|
124
114
|
}
|
|
125
115
|
/**
|
|
126
116
|
* Dismiss the toast overlay after it has been presented.
|
|
@@ -132,15 +122,16 @@ export class Toast {
|
|
|
132
122
|
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
|
133
123
|
*/
|
|
134
124
|
async dismiss(data, role) {
|
|
125
|
+
const unlock = await this.lockController.lock();
|
|
135
126
|
if (this.durationTimeout) {
|
|
136
127
|
clearTimeout(this.durationTimeout);
|
|
137
128
|
}
|
|
138
|
-
|
|
139
|
-
const dismissed = await this.currentTransition;
|
|
129
|
+
const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
|
|
140
130
|
if (dismissed) {
|
|
141
131
|
this.delegateController.removeViewFromDom();
|
|
142
132
|
this.revealContentToScreenReader = false;
|
|
143
133
|
}
|
|
134
|
+
unlock();
|
|
144
135
|
return dismissed;
|
|
145
136
|
}
|
|
146
137
|
/**
|
|
@@ -617,6 +617,27 @@ export 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
|
+
export 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
|
+
};
|
|
620
641
|
/**
|
|
621
642
|
* Constructs a trigger interaction for an overlay.
|
|
622
643
|
* Presents an overlay when the trigger is clicked.
|
package/dist/docs.json
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -11,7 +11,7 @@ export { c as componentOnReady } from './helpers-3379ba19.js';
|
|
|
11
11
|
export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-96c9ace3.js';
|
|
12
12
|
export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD } from './index-6391de89.js';
|
|
13
13
|
export { m as menuController } from './index-b3e05099.js';
|
|
14
|
-
export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-
|
|
14
|
+
export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-66222f79.js';
|
|
15
15
|
import './index-7a14ecec.js';
|
|
16
16
|
import './gesture-controller-0fa396c4.js';
|
|
17
17
|
import './index-847f2fde.js';
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { r as registerInstance, d as createEvent, e as readTask, h, H as Host, f as getElement } from './index-847f2fde.js';
|
|
5
5
|
import { c as createButtonActiveGesture } from './button-active-2da0f611.js';
|
|
6
6
|
import { r as raf } from './helpers-3379ba19.js';
|
|
7
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel,
|
|
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-66222f79.js';
|
|
8
8
|
import { g as getClassMap } from './theme-17531cdf.js';
|
|
9
9
|
import { b as getIonMode } from './ionic-global-1ef19007.js';
|
|
10
10
|
import { c as createAnimation } from './animation-a1d9e088.js';
|
|
@@ -117,6 +117,7 @@ const ActionSheet = class {
|
|
|
117
117
|
this.willDismissShorthand = createEvent(this, "willDismiss", 7);
|
|
118
118
|
this.didDismissShorthand = createEvent(this, "didDismiss", 7);
|
|
119
119
|
this.delegateController = createDelegateController(this);
|
|
120
|
+
this.lockController = createLockController();
|
|
120
121
|
this.triggerController = createTriggerController();
|
|
121
122
|
this.presented = false;
|
|
122
123
|
this.onBackdropTap = () => {
|
|
@@ -164,21 +165,10 @@ const ActionSheet = class {
|
|
|
164
165
|
* Present the action sheet overlay after it has been created.
|
|
165
166
|
*/
|
|
166
167
|
async present() {
|
|
167
|
-
|
|
168
|
-
* When using an inline action sheet
|
|
169
|
-
* and dismissing a action sheet it is possible to
|
|
170
|
-
* quickly present the action sheet while it is
|
|
171
|
-
* dismissing. We need to await any current
|
|
172
|
-
* transition to allow the dismiss to finish
|
|
173
|
-
* before presenting again.
|
|
174
|
-
*/
|
|
175
|
-
if (this.currentTransition !== undefined) {
|
|
176
|
-
await this.currentTransition;
|
|
177
|
-
}
|
|
168
|
+
const unlock = await this.lockController.lock();
|
|
178
169
|
await this.delegateController.attachViewToDom();
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
this.currentTransition = undefined;
|
|
170
|
+
await present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
|
|
171
|
+
unlock();
|
|
182
172
|
}
|
|
183
173
|
/**
|
|
184
174
|
* Dismiss the action sheet overlay after it has been presented.
|
|
@@ -190,11 +180,12 @@ const ActionSheet = class {
|
|
|
190
180
|
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
|
191
181
|
*/
|
|
192
182
|
async dismiss(data, role) {
|
|
193
|
-
|
|
194
|
-
const dismissed = await this
|
|
183
|
+
const unlock = await this.lockController.lock();
|
|
184
|
+
const dismissed = await dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
|
|
195
185
|
if (dismissed) {
|
|
196
186
|
this.delegateController.removeViewFromDom();
|
|
197
187
|
}
|
|
188
|
+
unlock();
|
|
198
189
|
return dismissed;
|
|
199
190
|
}
|
|
200
191
|
/**
|