@ionic/core 8.8.1-dev.11773432149.19826d0c → 8.8.1-dev.11773665268.1511a6c7
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/index.js +1 -1
- package/components/ion-action-sheet.js +1 -1
- package/components/ion-alert.js +1 -1
- package/components/ion-datetime.js +1 -1
- package/components/ion-loading.js +1 -1
- package/components/ion-menu.js +1 -1
- package/components/ion-modal.js +1 -1
- package/components/ion-picker-legacy.js +1 -1
- package/components/ion-popover.js +1 -1
- package/components/ion-select-modal.js +1 -1
- package/components/ion-select-popover.js +1 -1
- package/components/ion-select.js +1 -1
- package/components/ion-toast.js +1 -1
- package/components/p-5ZSxeDaQ.js +4 -0
- package/components/{p-CVF7ukTk.js → p-CUevoqWT.js} +1 -1
- package/components/p-Cp1mV8on.js +4 -0
- package/components/p-D0Qi4M5h.js +4 -0
- package/components/{p-Bum_LjMh.js → p-DMGp52tQ.js} +1 -1
- package/components/p-EjNcvXpr.js +4 -0
- package/components/p-QyvDHa31.js +4 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +12 -4
- package/dist/cjs/ion-alert.cjs.entry.js +11 -3
- package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-loading.cjs.entry.js +11 -3
- package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-modal.cjs.entry.js +19 -5
- package/dist/cjs/ion-popover.cjs.entry.js +11 -3
- package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-toast.cjs.entry.js +1 -1
- package/dist/cjs/{overlays-C2jiBSNQ.js → overlays-Bn4qxNhB.js} +21 -0
- package/dist/collection/components/action-sheet/action-sheet.js +12 -4
- package/dist/collection/components/alert/alert.js +11 -3
- package/dist/collection/components/loading/loading.js +11 -3
- package/dist/collection/components/modal/modal.js +19 -5
- package/dist/collection/components/popover/popover.js +11 -3
- package/dist/collection/utils/overlays.js +20 -0
- package/dist/docs.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +12 -4
- package/dist/esm/ion-alert.entry.js +11 -3
- package/dist/esm/ion-datetime_3.entry.js +1 -1
- package/dist/esm/ion-loading.entry.js +11 -3
- package/dist/esm/ion-menu_3.entry.js +1 -1
- package/dist/esm/ion-modal.entry.js +19 -5
- package/dist/esm/ion-popover.entry.js +11 -3
- package/dist/esm/ion-select-modal.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +1 -1
- package/dist/esm/ion-toast.entry.js +1 -1
- package/dist/esm/{overlays-F8GHPo-e.js → overlays-Ie5kkCl2.js} +21 -1
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-066cf4b9.entry.js +4 -0
- package/dist/ionic/p-2b30f1a2.entry.js +4 -0
- package/dist/ionic/{p-e6c5f060.entry.js → p-4c63b74a.entry.js} +1 -1
- package/dist/ionic/{p-f69a5f71.entry.js → p-57d09155.entry.js} +1 -1
- package/dist/ionic/{p-7620be24.entry.js → p-770e90c9.entry.js} +1 -1
- package/dist/ionic/p-982a2080.entry.js +4 -0
- package/dist/ionic/p-BCTW1Nwr.js +4 -0
- package/dist/ionic/{p-aa47f46e.entry.js → p-a3ccd99d.entry.js} +1 -1
- package/dist/ionic/p-a5b1c583.entry.js +4 -0
- package/dist/ionic/p-acb9b50c.entry.js +4 -0
- package/dist/ionic/{p-4dd5e8e0.entry.js → p-f9c1530c.entry.js} +1 -1
- package/dist/types/utils/overlays.d.ts +10 -0
- package/hydrate/index.js +79 -13
- package/hydrate/index.mjs +79 -13
- package/package.json +1 -1
- package/components/p-1KVKSLu5.js +0 -4
- package/components/p-BVnB3eEn.js +0 -4
- package/components/p-CH0NYjKq.js +0 -4
- package/components/p-Cq8cQ0NL.js +0 -4
- package/components/p-DHsZWn1l.js +0 -4
- package/dist/ionic/p-16b65553.entry.js +0 -4
- package/dist/ionic/p-1b02923f.entry.js +0 -4
- package/dist/ionic/p-23fac490.entry.js +0 -4
- package/dist/ionic/p-51c11c47.entry.js +0 -4
- package/dist/ionic/p-7ca71c83.entry.js +0 -4
- package/dist/ionic/p-DTPR1Wpn.js +0 -4
|
@@ -7,7 +7,7 @@ import { createButtonActiveGesture } from "../../utils/gesture/button-active";
|
|
|
7
7
|
import { raf } from "../../utils/helpers";
|
|
8
8
|
import { createLockController } from "../../utils/lock-controller";
|
|
9
9
|
import { printIonWarning } from "../../utils/logging/index";
|
|
10
|
-
import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
|
|
10
|
+
import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, cleanupRootFocusTrapAccessibility, } from "../../utils/overlays";
|
|
11
11
|
import { sanitizeDOMString } from "../../utils/sanitization/index";
|
|
12
12
|
import { getClassMap } from "../../utils/theme";
|
|
13
13
|
import { config } from "../../global/config";
|
|
@@ -207,6 +207,14 @@ export class Alert {
|
|
|
207
207
|
this.gesture.destroy();
|
|
208
208
|
this.gesture = undefined;
|
|
209
209
|
}
|
|
210
|
+
if (this.presented) {
|
|
211
|
+
const el = this.el;
|
|
212
|
+
setTimeout(() => {
|
|
213
|
+
if (!el.isConnected) {
|
|
214
|
+
cleanupRootFocusTrapAccessibility();
|
|
215
|
+
}
|
|
216
|
+
}, 0);
|
|
217
|
+
}
|
|
210
218
|
}
|
|
211
219
|
componentDidLoad() {
|
|
212
220
|
/**
|
|
@@ -440,9 +448,9 @@ export class Alert {
|
|
|
440
448
|
* If neither are defined, do not set aria-labelledby.
|
|
441
449
|
*/
|
|
442
450
|
const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
|
|
443
|
-
return (h(Host, { key: '
|
|
451
|
+
return (h(Host, { key: '905a4c79854006d1a30198105506d646b4ae91f1', tabindex: "-1", style: {
|
|
444
452
|
zIndex: `${20000 + overlayIndex}`,
|
|
445
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '
|
|
453
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '494296a9ee259eb01300532fa152dd4e9b3dfeb3', tappable: this.backdropDismiss }), h("div", { key: '92262e204e0340326deccf2c00934b2ac84a42c5', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '8b6956165eec27e79d3620a4ef33dd09f19a7877', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '9e1f9398946b44649b94b65d43bffaace0052fbd', class: "alert-head" }, header && (h("h2", { key: 'a4c30a47bab67dba3931c2d80f8ac2a7efb44011', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: 'f6567532ff2b64469ef1b4ccd97583b0ca838e56', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '7c5d201cf22c96056cf03f232f8c0c1ba34875ab', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '0fcf76a02448116d9948eee6c70fabac02af47f8', tabindex: "0", "aria-hidden": "true" })));
|
|
446
454
|
}
|
|
447
455
|
static get is() { return "ion-alert"; }
|
|
448
456
|
static get encapsulation() { return "scoped"; }
|
|
@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
|
|
|
5
5
|
import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
|
|
6
6
|
import { raf } from "../../utils/helpers";
|
|
7
7
|
import { createLockController } from "../../utils/lock-controller";
|
|
8
|
-
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createTriggerController, setOverlayId, } from "../../utils/overlays";
|
|
8
|
+
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createTriggerController, setOverlayId, cleanupRootFocusTrapAccessibility, } 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";
|
|
@@ -114,6 +114,14 @@ export class Loading {
|
|
|
114
114
|
}
|
|
115
115
|
disconnectedCallback() {
|
|
116
116
|
this.triggerController.removeClickListener();
|
|
117
|
+
if (this.presented) {
|
|
118
|
+
const el = this.el;
|
|
119
|
+
setTimeout(() => {
|
|
120
|
+
if (!el.isConnected) {
|
|
121
|
+
cleanupRootFocusTrapAccessibility();
|
|
122
|
+
}
|
|
123
|
+
}, 0);
|
|
124
|
+
}
|
|
117
125
|
}
|
|
118
126
|
/**
|
|
119
127
|
* Present the loading overlay after it has been created.
|
|
@@ -179,9 +187,9 @@ export class Loading {
|
|
|
179
187
|
* Otherwise, don't set aria-labelledby.
|
|
180
188
|
*/
|
|
181
189
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
182
|
-
return (h(Host, Object.assign({ key: '
|
|
190
|
+
return (h(Host, Object.assign({ key: '65eb9e96b3fb937ff30c3145858f5e4ca6cf739c', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
183
191
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
184
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '
|
|
192
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'c21c1701a641a56b98b248b4963aa3888530a3bc', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '0d3aacc605bda9cee34c08daab8a80766a934f72', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '675c9f582002f4306c9d6ccdf7560a3562f16e15', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'ff610d72cdd1ebdb0ac57753d76a57e8630bcc4a', class: "loading-spinner" }, h("ion-spinner", { key: '4a48bbb926f71fba9d97dc51f9e398e6af59a34e', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '0721486e2be7e3c687bbd864d3efc1aeaa61068c', tabindex: "0", "aria-hidden": "true" })));
|
|
185
193
|
}
|
|
186
194
|
static get is() { return "ion-loading"; }
|
|
187
195
|
static get encapsulation() { return "scoped"; }
|
|
@@ -8,7 +8,7 @@ import { raf, inheritAttributes, hasLazyBuild, getElementRoot } from "../../util
|
|
|
8
8
|
import { createLockController } from "../../utils/lock-controller";
|
|
9
9
|
import { printIonWarning } from "../../utils/logging/index";
|
|
10
10
|
import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
|
|
11
|
-
import { GESTURE, BACKDROP, dismiss, eventMethod, prepareOverlay, present, createTriggerController, setOverlayId, FOCUS_TRAP_DISABLE_CLASS, } from "../../utils/overlays";
|
|
11
|
+
import { GESTURE, BACKDROP, dismiss, eventMethod, prepareOverlay, present, createTriggerController, setOverlayId, FOCUS_TRAP_DISABLE_CLASS, cleanupRootFocusTrapAccessibility, } from "../../utils/overlays";
|
|
12
12
|
import { getClassMap } from "../../utils/theme";
|
|
13
13
|
import { deepReady, waitForMount } from "../../utils/transition/index";
|
|
14
14
|
import { config } from "../../global/config";
|
|
@@ -277,6 +277,20 @@ export class Modal {
|
|
|
277
277
|
// Also called in dismiss() — intentional dual cleanup covers both
|
|
278
278
|
// dismiss-then-remove and direct DOM removal without dismiss.
|
|
279
279
|
this.cleanupSafeAreaOverrides();
|
|
280
|
+
// If the modal was removed from the DOM while still presented
|
|
281
|
+
// (e.g., a framework unmounted it during a route change without
|
|
282
|
+
// calling dismiss()), clean up aria-hidden on the root outlet
|
|
283
|
+
// so the app remains accessible.
|
|
284
|
+
// Deferred to a microtask so DOM moves (disconnect + reconnect in
|
|
285
|
+
// the same tick, e.g. React portals) don't prematurely clear it.
|
|
286
|
+
if (this.presented) {
|
|
287
|
+
const el = this.el;
|
|
288
|
+
setTimeout(() => {
|
|
289
|
+
if (!el.isConnected) {
|
|
290
|
+
cleanupRootFocusTrapAccessibility();
|
|
291
|
+
}
|
|
292
|
+
}, 0);
|
|
293
|
+
}
|
|
280
294
|
}
|
|
281
295
|
componentWillLoad() {
|
|
282
296
|
var _a;
|
|
@@ -1133,20 +1147,20 @@ export class Modal {
|
|
|
1133
1147
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
1134
1148
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
1135
1149
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
1136
|
-
return (h(Host, Object.assign({ key: '
|
|
1150
|
+
return (h(Host, Object.assign({ key: '06c06b4b475da99c8bdb63663265d62f77e1716f', "no-router": true,
|
|
1137
1151
|
// Allow the modal to be navigable when the handle is focusable
|
|
1138
1152
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
1139
1153
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1140
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '
|
|
1154
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '356b54af9039b40ff0d5431d2c800943d0b5bc03', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'e5b75d40f069e8c79b7ffeab49849bea994fc4b1', class: "modal-shadow" }), h("div", Object.assign({ key: '5144554b1bb7c119eef03936b55df44f3d745f5c',
|
|
1141
1155
|
/*
|
|
1142
1156
|
role and aria-modal must be used on the
|
|
1143
1157
|
same element. They must also be set inside the
|
|
1144
1158
|
shadow DOM otherwise ion-button will not be highlighted
|
|
1145
1159
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
1146
1160
|
*/
|
|
1147
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '
|
|
1161
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '8740ede37e0f38fc70dd555494e3b49bb02c6622', class: "modal-handle",
|
|
1148
1162
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
1149
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '
|
|
1163
|
+
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'bff95653b5c2629ec5348e0a5f7055d4a45e8490', onSlotchange: this.onSlotChange }))));
|
|
1150
1164
|
}
|
|
1151
1165
|
static get is() { return "ion-modal"; }
|
|
1152
1166
|
static get encapsulation() { return "shadow"; }
|
|
@@ -7,7 +7,7 @@ import { CoreDelegate, attachComponent, detachComponent } from "../../utils/fram
|
|
|
7
7
|
import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
|
|
8
8
|
import { createLockController } from "../../utils/lock-controller";
|
|
9
9
|
import { printIonWarning } from "../../utils/logging/index";
|
|
10
|
-
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId, FOCUS_TRAP_DISABLE_CLASS, } from "../../utils/overlays";
|
|
10
|
+
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId, FOCUS_TRAP_DISABLE_CLASS, cleanupRootFocusTrapAccessibility, } from "../../utils/overlays";
|
|
11
11
|
import { isPlatform } from "../../utils/platform";
|
|
12
12
|
import { getClassMap } from "../../utils/theme";
|
|
13
13
|
import { deepReady, waitForMount } from "../../utils/transition/index";
|
|
@@ -229,6 +229,14 @@ export class Popover {
|
|
|
229
229
|
this.headerResizeObserver.disconnect();
|
|
230
230
|
this.headerResizeObserver = undefined;
|
|
231
231
|
}
|
|
232
|
+
if (this.presented) {
|
|
233
|
+
const el = this.el;
|
|
234
|
+
setTimeout(() => {
|
|
235
|
+
if (!el.isConnected) {
|
|
236
|
+
cleanupRootFocusTrapAccessibility();
|
|
237
|
+
}
|
|
238
|
+
}, 0);
|
|
239
|
+
}
|
|
232
240
|
}
|
|
233
241
|
componentWillLoad() {
|
|
234
242
|
var _a, _b;
|
|
@@ -467,9 +475,9 @@ export class Popover {
|
|
|
467
475
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
468
476
|
const desktop = isPlatform('desktop');
|
|
469
477
|
const enableArrow = arrow && !parentPopover;
|
|
470
|
-
return (h(Host, Object.assign({ key: '
|
|
478
|
+
return (h(Host, Object.assign({ key: 'ffe93d304b75ddd2caac4678e0ac34fa590eca12', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
471
479
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
472
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '
|
|
480
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '7c8fb1caa06e45a721923011debccc0bebc993af', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'cedaee91689606a705b3272b9ca2c74cc2ca4193', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '6046d50f5b7593f385ce1a5e4f651e3a39171b26', class: "popover-arrow", part: "arrow" }), h("div", { key: 'ec8feab51ec81bac7b4ef6e6d84570f95033e3a2', class: "popover-content", part: "content" }, h("slot", { key: 'cbe3ac604048509fcf481786a5eefd8bce65ad1a' })))));
|
|
473
481
|
}
|
|
474
482
|
static get is() { return "ion-popover"; }
|
|
475
483
|
static get encapsulation() { return "shadow"; }
|
|
@@ -432,6 +432,26 @@ export const setRootAriaHidden = (hidden = false) => {
|
|
|
432
432
|
viewContainer.removeAttribute('aria-hidden');
|
|
433
433
|
}
|
|
434
434
|
};
|
|
435
|
+
/**
|
|
436
|
+
* Cleans up root `aria-hidden` and `backdrop-no-scroll` when
|
|
437
|
+
* an overlay is removed from the DOM without going through
|
|
438
|
+
* the `dismiss()` flow (e.g., when a framework unmounts the
|
|
439
|
+
* overlay during a route change).
|
|
440
|
+
*
|
|
441
|
+
* Should be called from an overlay's `disconnectedCallback`
|
|
442
|
+
* when the overlay was still presented at the time of removal.
|
|
443
|
+
*/
|
|
444
|
+
export const cleanupRootFocusTrapAccessibility = () => {
|
|
445
|
+
const remainingOverlays = getPresentedOverlays(document);
|
|
446
|
+
const hasRemainingLocking = remainingOverlays.some((o) => {
|
|
447
|
+
const el = o;
|
|
448
|
+
return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
|
|
449
|
+
});
|
|
450
|
+
if (!hasRemainingLocking) {
|
|
451
|
+
setRootAriaHidden(false);
|
|
452
|
+
document.body.classList.remove(BACKDROP_NO_SCROLL);
|
|
453
|
+
}
|
|
454
|
+
};
|
|
435
455
|
export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
|
|
436
456
|
var _a, _b;
|
|
437
457
|
if (overlay.presented) {
|
package/dist/docs.json
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -13,7 +13,7 @@ export { L as LogLevel } from './index-IGIE5vDm.js';
|
|
|
13
13
|
export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-TO1rZH52.js';
|
|
14
14
|
export { o as openURL } from './theme-DiVJyqlX.js';
|
|
15
15
|
export { m as menuController } from './index-B2KwgBLx.js';
|
|
16
|
-
export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-
|
|
16
|
+
export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-Ie5kkCl2.js';
|
|
17
17
|
import './index-ZjP4CjeZ.js';
|
|
18
18
|
import './gesture-controller-BTEOs1at.js';
|
|
19
19
|
import './hardware-back-button-CTe4XmL7.js';
|
|
@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, a as readTask, h, d as Host, g
|
|
|
5
5
|
import { c as createButtonActiveGesture } from './button-active-BBx21brx.js';
|
|
6
6
|
import { r as raf } from './helpers-Tl8jw6S2.js';
|
|
7
7
|
import { c as createLockController } from './lock-controller-B-hirT0v.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-
|
|
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 cleanupRootFocusTrapAccessibility, n as setOverlayId } from './overlays-Ie5kkCl2.js';
|
|
9
9
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
10
10
|
import { b as getIonMode } from './ionic-global-DfbeLwcV.js';
|
|
11
11
|
import { c as createAnimation } from './animation-CnGMT4ji.js';
|
|
@@ -383,6 +383,14 @@ const ActionSheet = class {
|
|
|
383
383
|
this.gesture = undefined;
|
|
384
384
|
}
|
|
385
385
|
this.triggerController.removeClickListener();
|
|
386
|
+
if (this.presented) {
|
|
387
|
+
const el = this.el;
|
|
388
|
+
setTimeout(() => {
|
|
389
|
+
if (!el.isConnected) {
|
|
390
|
+
cleanupRootFocusTrapAccessibility();
|
|
391
|
+
}
|
|
392
|
+
}, 0);
|
|
393
|
+
}
|
|
386
394
|
}
|
|
387
395
|
componentWillLoad() {
|
|
388
396
|
var _a;
|
|
@@ -486,12 +494,12 @@ const ActionSheet = class {
|
|
|
486
494
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
487
495
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
488
496
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
489
|
-
return (h(Host, Object.assign({ key: '
|
|
497
|
+
return (h(Host, Object.assign({ key: '3e5413d627089cebe5dfd236512d4d9681209c29', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
490
498
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
491
|
-
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '
|
|
499
|
+
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '9e3dc9a6934be6ecd5700eb4fc9069d874c67405', tappable: this.backdropDismiss }), h("div", { key: 'd81be64948960867544029199d05939fa36778c7', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'd7ecc0c52868b2e62aa0b8e17fdfa34a24137764', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'b8860377b8feda32d137b059bf211cdc7b07ee2d', class: "action-sheet-container" }, h("div", { key: '93e070908c8c51384eab547bdb6fbce259957b5b', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (h("div", { key: '2649f19074f1e2ba562f91e36ac963420c61f4cc', id: headerID, class: {
|
|
492
500
|
'action-sheet-title': true,
|
|
493
501
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
494
|
-
} }, header, this.subHeader && h("div", { key: '
|
|
502
|
+
} }, header, this.subHeader && h("div", { key: '07ccf243adfa9383616f848e86729e6e62fc00d0', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: '8945e66b5fc0b15ad96c3545b91b461ee7b6a88c', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '47c16b28caf3d8ae6954c254bcc6d1879b5f2cf0' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '4e2947ab7c74210bb66744324a904287bc4b6d0d', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '138e5f954b7e000ce2d6dcdec114a1d232549977', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'd546d12794f42da5c13e0d84a8c55f6705ca0900' })))))), h("div", { key: '37479a217f671085855e565f7b9a0c0b713e28e4', tabindex: "0", "aria-hidden": "true" })));
|
|
495
503
|
}
|
|
496
504
|
get el() { return getElement(this); }
|
|
497
505
|
static get watchers() { return {
|
|
@@ -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-BBx21brx.js';
|
|
7
7
|
import { r as raf } from './helpers-Tl8jw6S2.js';
|
|
8
8
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
9
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay,
|
|
9
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, n as setOverlayId, k as cleanupRootFocusTrapAccessibility, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-Ie5kkCl2.js';
|
|
10
10
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
11
11
|
import { b as getIonMode } from './ionic-global-DfbeLwcV.js';
|
|
12
12
|
import { c as createAnimation } from './animation-CnGMT4ji.js';
|
|
@@ -303,6 +303,14 @@ const Alert = class {
|
|
|
303
303
|
this.gesture.destroy();
|
|
304
304
|
this.gesture = undefined;
|
|
305
305
|
}
|
|
306
|
+
if (this.presented) {
|
|
307
|
+
const el = this.el;
|
|
308
|
+
setTimeout(() => {
|
|
309
|
+
if (!el.isConnected) {
|
|
310
|
+
cleanupRootFocusTrapAccessibility();
|
|
311
|
+
}
|
|
312
|
+
}, 0);
|
|
313
|
+
}
|
|
306
314
|
}
|
|
307
315
|
componentDidLoad() {
|
|
308
316
|
/**
|
|
@@ -536,9 +544,9 @@ const Alert = class {
|
|
|
536
544
|
* If neither are defined, do not set aria-labelledby.
|
|
537
545
|
*/
|
|
538
546
|
const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
|
|
539
|
-
return (h(Host, { key: '
|
|
547
|
+
return (h(Host, { key: '905a4c79854006d1a30198105506d646b4ae91f1', tabindex: "-1", style: {
|
|
540
548
|
zIndex: `${20000 + overlayIndex}`,
|
|
541
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '
|
|
549
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '494296a9ee259eb01300532fa152dd4e9b3dfeb3', tappable: this.backdropDismiss }), h("div", { key: '92262e204e0340326deccf2c00934b2ac84a42c5', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '8b6956165eec27e79d3620a4ef33dd09f19a7877', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '9e1f9398946b44649b94b65d43bffaace0052fbd', class: "alert-head" }, header && (h("h2", { key: 'a4c30a47bab67dba3931c2d80f8ac2a7efb44011', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: 'f6567532ff2b64469ef1b4ccd97583b0ca838e56', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '7c5d201cf22c96056cf03f232f8c0c1ba34875ab', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '0fcf76a02448116d9948eee6c70fabac02af47f8', tabindex: "0", "aria-hidden": "true" })));
|
|
542
550
|
}
|
|
543
551
|
get el() { return getElement(this); }
|
|
544
552
|
static get watchers() { return {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { j as printIonError, f as printIonWarning, r as registerInstance, c as createEvent, w as writeTask, h, d as Host, g as getElement } from './index-IGIE5vDm.js';
|
|
5
5
|
import { startFocusVisible } from './focus-visible-BmVRXR1y.js';
|
|
6
6
|
import { r as raf, g as getElementRoot, a as renderHiddenInput, e as clamp } from './helpers-Tl8jw6S2.js';
|
|
7
|
-
import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay,
|
|
7
|
+
import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, n as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-Ie5kkCl2.js';
|
|
8
8
|
import { i as isRTL } from './dir-C53feagD.js';
|
|
9
9
|
import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
|
|
10
10
|
import { l as chevronDown, o as caretUpSharp, p as chevronForward, q as caretDownSharp, c as chevronBack } from './index-DV3sJJW8.js';
|
|
@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, e as config, h, d as Host, g a
|
|
|
5
5
|
import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-TO1rZH52.js';
|
|
6
6
|
import { r as raf } from './helpers-Tl8jw6S2.js';
|
|
7
7
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
8
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay,
|
|
8
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, n as setOverlayId, k as cleanupRootFocusTrapAccessibility, f as present, g as dismiss, h as eventMethod } from './overlays-Ie5kkCl2.js';
|
|
9
9
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
10
10
|
import { b as getIonMode } from './ionic-global-DfbeLwcV.js';
|
|
11
11
|
import { c as createAnimation } from './animation-CnGMT4ji.js';
|
|
@@ -211,6 +211,14 @@ const Loading = class {
|
|
|
211
211
|
}
|
|
212
212
|
disconnectedCallback() {
|
|
213
213
|
this.triggerController.removeClickListener();
|
|
214
|
+
if (this.presented) {
|
|
215
|
+
const el = this.el;
|
|
216
|
+
setTimeout(() => {
|
|
217
|
+
if (!el.isConnected) {
|
|
218
|
+
cleanupRootFocusTrapAccessibility();
|
|
219
|
+
}
|
|
220
|
+
}, 0);
|
|
221
|
+
}
|
|
214
222
|
}
|
|
215
223
|
/**
|
|
216
224
|
* Present the loading overlay after it has been created.
|
|
@@ -276,9 +284,9 @@ const Loading = class {
|
|
|
276
284
|
* Otherwise, don't set aria-labelledby.
|
|
277
285
|
*/
|
|
278
286
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
279
|
-
return (h(Host, Object.assign({ key: '
|
|
287
|
+
return (h(Host, Object.assign({ key: '65eb9e96b3fb937ff30c3145858f5e4ca6cf739c', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
280
288
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
281
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '
|
|
289
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'c21c1701a641a56b98b248b4963aa3888530a3bc', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '0d3aacc605bda9cee34c08daab8a80766a934f72', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '675c9f582002f4306c9d6ccdf7560a3562f16e15', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'ff610d72cdd1ebdb0ac57753d76a57e8630bcc4a', class: "loading-spinner" }, h("ion-spinner", { key: '4a48bbb926f71fba9d97dc51f9e398e6af59a34e', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '0721486e2be7e3c687bbd864d3efc1aeaa61068c', tabindex: "0", "aria-hidden": "true" })));
|
|
282
290
|
}
|
|
283
291
|
get el() { return getElement(this); }
|
|
284
292
|
static get watchers() { return {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, c as createEvent, e as config, j as printIonError, h, d as Host, g as getElement } from './index-IGIE5vDm.js';
|
|
5
5
|
import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
|
|
6
|
-
import {
|
|
6
|
+
import { q as getPresentedOverlay, B as BACKDROP, o as focusFirstDescendant, r as focusLastDescendant, G as GESTURE } from './overlays-Ie5kkCl2.js';
|
|
7
7
|
import { G as GESTURE_CONTROLLER } from './gesture-controller-BTEOs1at.js';
|
|
8
8
|
import { shouldUseCloseWatcher } from './hardware-back-button-CTe4XmL7.js';
|
|
9
9
|
import { o as isEndSide, i as inheritAriaAttributes, l as assert, e as clamp } from './helpers-Tl8jw6S2.js';
|
|
@@ -7,7 +7,7 @@ import { C as CoreDelegate, a as attachComponent, d as detachComponent } from '.
|
|
|
7
7
|
import { e as clamp, g as getElementRoot, r as raf, b as inheritAttributes, h as hasLazyBuild } from './helpers-Tl8jw6S2.js';
|
|
8
8
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
9
9
|
import { g as getCapacitor } from './capacitor-CFERIeaU.js';
|
|
10
|
-
import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-
|
|
10
|
+
import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as cleanupRootFocusTrapAccessibility, n as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-Ie5kkCl2.js';
|
|
11
11
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
12
12
|
import { e as deepReady, w as waitForMount } from './index-B-hkiOUh.js';
|
|
13
13
|
import { b as getIonMode } from './ionic-global-DfbeLwcV.js';
|
|
@@ -2056,6 +2056,20 @@ const Modal = class {
|
|
|
2056
2056
|
// Also called in dismiss() — intentional dual cleanup covers both
|
|
2057
2057
|
// dismiss-then-remove and direct DOM removal without dismiss.
|
|
2058
2058
|
this.cleanupSafeAreaOverrides();
|
|
2059
|
+
// If the modal was removed from the DOM while still presented
|
|
2060
|
+
// (e.g., a framework unmounted it during a route change without
|
|
2061
|
+
// calling dismiss()), clean up aria-hidden on the root outlet
|
|
2062
|
+
// so the app remains accessible.
|
|
2063
|
+
// Deferred to a microtask so DOM moves (disconnect + reconnect in
|
|
2064
|
+
// the same tick, e.g. React portals) don't prematurely clear it.
|
|
2065
|
+
if (this.presented) {
|
|
2066
|
+
const el = this.el;
|
|
2067
|
+
setTimeout(() => {
|
|
2068
|
+
if (!el.isConnected) {
|
|
2069
|
+
cleanupRootFocusTrapAccessibility();
|
|
2070
|
+
}
|
|
2071
|
+
}, 0);
|
|
2072
|
+
}
|
|
2059
2073
|
}
|
|
2060
2074
|
componentWillLoad() {
|
|
2061
2075
|
var _a;
|
|
@@ -2904,20 +2918,20 @@ const Modal = class {
|
|
|
2904
2918
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
2905
2919
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
2906
2920
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
2907
|
-
return (h(Host, Object.assign({ key: '
|
|
2921
|
+
return (h(Host, Object.assign({ key: '06c06b4b475da99c8bdb63663265d62f77e1716f', "no-router": true,
|
|
2908
2922
|
// Allow the modal to be navigable when the handle is focusable
|
|
2909
2923
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
2910
2924
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2911
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '
|
|
2925
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '356b54af9039b40ff0d5431d2c800943d0b5bc03', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'e5b75d40f069e8c79b7ffeab49849bea994fc4b1', class: "modal-shadow" }), h("div", Object.assign({ key: '5144554b1bb7c119eef03936b55df44f3d745f5c',
|
|
2912
2926
|
/*
|
|
2913
2927
|
role and aria-modal must be used on the
|
|
2914
2928
|
same element. They must also be set inside the
|
|
2915
2929
|
shadow DOM otherwise ion-button will not be highlighted
|
|
2916
2930
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
2917
2931
|
*/
|
|
2918
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '
|
|
2932
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '8740ede37e0f38fc70dd555494e3b49bb02c6622', class: "modal-handle",
|
|
2919
2933
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
2920
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '
|
|
2934
|
+
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'bff95653b5c2629ec5348e0a5f7055d4a45e8490', onSlotchange: this.onSlotChange }))));
|
|
2921
2935
|
}
|
|
2922
2936
|
get el() { return getElement(this); }
|
|
2923
2937
|
static get watchers() { return {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as Host, g as getElement } from './index-IGIE5vDm.js';
|
|
5
|
-
import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present,
|
|
5
|
+
import { B as BACKDROP, j as prepareOverlay, k as cleanupRootFocusTrapAccessibility, n as setOverlayId, f as present, o as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-Ie5kkCl2.js';
|
|
6
6
|
import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-CyxE1S_P.js';
|
|
7
7
|
import { g as getElementRoot, r as raf, f as addEventListener, h as hasLazyBuild } from './helpers-Tl8jw6S2.js';
|
|
8
8
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
@@ -1304,6 +1304,14 @@ const Popover = class {
|
|
|
1304
1304
|
this.headerResizeObserver.disconnect();
|
|
1305
1305
|
this.headerResizeObserver = undefined;
|
|
1306
1306
|
}
|
|
1307
|
+
if (this.presented) {
|
|
1308
|
+
const el = this.el;
|
|
1309
|
+
setTimeout(() => {
|
|
1310
|
+
if (!el.isConnected) {
|
|
1311
|
+
cleanupRootFocusTrapAccessibility();
|
|
1312
|
+
}
|
|
1313
|
+
}, 0);
|
|
1314
|
+
}
|
|
1307
1315
|
}
|
|
1308
1316
|
componentWillLoad() {
|
|
1309
1317
|
var _a, _b;
|
|
@@ -1542,9 +1550,9 @@ const Popover = class {
|
|
|
1542
1550
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
1543
1551
|
const desktop = isPlatform('desktop');
|
|
1544
1552
|
const enableArrow = arrow && !parentPopover;
|
|
1545
|
-
return (h(Host, Object.assign({ key: '
|
|
1553
|
+
return (h(Host, Object.assign({ key: 'ffe93d304b75ddd2caac4678e0ac34fa590eca12', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
1546
1554
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1547
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '
|
|
1555
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '7c8fb1caa06e45a721923011debccc0bebc993af', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'cedaee91689606a705b3272b9ca2c74cc2ca4193', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '6046d50f5b7593f385ce1a5e4f651e3a39171b26', class: "popover-arrow", part: "arrow" }), h("div", { key: 'ec8feab51ec81bac7b4ef6e6d84570f95033e3a2', class: "popover-content", part: "content" }, h("slot", { key: 'cbe3ac604048509fcf481786a5eefd8bce65ad1a' })))));
|
|
1548
1556
|
}
|
|
1549
1557
|
get el() { return getElement(this); }
|
|
1550
1558
|
static get watchers() { return {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, h, i as forceUpdate, d as Host, g as getElement } from './index-IGIE5vDm.js';
|
|
5
5
|
import { b as getIonMode } from './ionic-global-DfbeLwcV.js';
|
|
6
|
-
import { s as safeCall } from './overlays-
|
|
6
|
+
import { s as safeCall } from './overlays-Ie5kkCl2.js';
|
|
7
7
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
8
8
|
import './index-ZjP4CjeZ.js';
|
|
9
9
|
import './helpers-Tl8jw6S2.js';
|
|
@@ -6,7 +6,7 @@ import { c as createNotchController } from './notch-controller-DAcvKU57.js';
|
|
|
6
6
|
import { i as isOptionSelected, c as compareOptions } from './compare-with-utils-sObYyvOy.js';
|
|
7
7
|
import { c as checkInvalidState } from './validity-DJztqcrH.js';
|
|
8
8
|
import { b as inheritAttributes, a as renderHiddenInput, n as focusVisibleElement } from './helpers-Tl8jw6S2.js';
|
|
9
|
-
import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-
|
|
9
|
+
import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-Ie5kkCl2.js';
|
|
10
10
|
import { i as isRTL } from './dir-C53feagD.js';
|
|
11
11
|
import { h as hostContext, c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
|
|
12
12
|
import { w as watchForOptions } from './watch-options-Dtdm8lKC.js';
|
|
@@ -5,7 +5,7 @@ import { f as printIonWarning, r as registerInstance, c as createEvent, e as con
|
|
|
5
5
|
import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-TO1rZH52.js';
|
|
6
6
|
import { g as getElementRoot, r as raf } from './helpers-Tl8jw6S2.js';
|
|
7
7
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
8
|
-
import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay,
|
|
8
|
+
import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, n as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-Ie5kkCl2.js';
|
|
9
9
|
import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
|
|
10
10
|
import { b as getIonMode } from './ionic-global-DfbeLwcV.js';
|
|
11
11
|
import { c as createAnimation } from './animation-CnGMT4ji.js';
|
|
@@ -511,6 +511,26 @@ const setRootAriaHidden = (hidden = false) => {
|
|
|
511
511
|
viewContainer.removeAttribute('aria-hidden');
|
|
512
512
|
}
|
|
513
513
|
};
|
|
514
|
+
/**
|
|
515
|
+
* Cleans up root `aria-hidden` and `backdrop-no-scroll` when
|
|
516
|
+
* an overlay is removed from the DOM without going through
|
|
517
|
+
* the `dismiss()` flow (e.g., when a framework unmounts the
|
|
518
|
+
* overlay during a route change).
|
|
519
|
+
*
|
|
520
|
+
* Should be called from an overlay's `disconnectedCallback`
|
|
521
|
+
* when the overlay was still presented at the time of removal.
|
|
522
|
+
*/
|
|
523
|
+
const cleanupRootFocusTrapAccessibility = () => {
|
|
524
|
+
const remainingOverlays = getPresentedOverlays(document);
|
|
525
|
+
const hasRemainingLocking = remainingOverlays.some((o) => {
|
|
526
|
+
const el = o;
|
|
527
|
+
return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
|
|
528
|
+
});
|
|
529
|
+
if (!hasRemainingLocking) {
|
|
530
|
+
setRootAriaHidden(false);
|
|
531
|
+
document.body.classList.remove(BACKDROP_NO_SCROLL);
|
|
532
|
+
}
|
|
533
|
+
};
|
|
514
534
|
const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
|
|
515
535
|
var _a, _b;
|
|
516
536
|
if (overlay.presented) {
|
|
@@ -912,4 +932,4 @@ const createTriggerController = () => {
|
|
|
912
932
|
};
|
|
913
933
|
const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
|
|
914
934
|
|
|
915
|
-
export { BACKDROP as B, FOCUS_TRAP_DISABLE_CLASS as F, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, 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,
|
|
935
|
+
export { BACKDROP as B, FOCUS_TRAP_DISABLE_CLASS as F, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, 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, cleanupRootFocusTrapAccessibility as k, loadingController as l, modalController as m, setOverlayId as n, focusFirstDescendant as o, pickerController as p, getPresentedOverlay as q, focusLastDescendant as r, safeCall as s, toastController as t };
|
package/dist/ionic/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
|
-
export{c as createAnimation}from"./p-Bum7H1fw.js";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,g as getIonPageElement}from"./p-BW_TRJm8.js";export{iosTransitionAnimation}from"./p-BAt5H1ac.js";export{mdTransitionAnimation}from"./p-DtVZDHlS.js";export{g as getTimeGivenProgression}from"./p-hHmYLOfE.js";export{createGesture}from"./p-Cl0B-RWe.js";export{g as getPlatforms,i as initialize,a as isPlatform}from"./p-NFFyoJ4Q.js";export{c as componentOnReady}from"./p-CGmVTdWh.js";export{L as LogLevel}from"./p-IGIE5vDm.js";export{I as IonicSafeString,g as getMode,s as setupConfig}from"./p-gbVXD275.js";export{o as openURL}from"./p-DiVJyqlX.js";export{m as menuController}from"./p-DLbbmF9h.js";export{b as actionSheetController,a as alertController,l as loadingController,m as modalController,p as pickerController,c as popoverController,t as toastController}from"./p-
|
|
4
|
+
export{c as createAnimation}from"./p-Bum7H1fw.js";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,g as getIonPageElement}from"./p-BW_TRJm8.js";export{iosTransitionAnimation}from"./p-BAt5H1ac.js";export{mdTransitionAnimation}from"./p-DtVZDHlS.js";export{g as getTimeGivenProgression}from"./p-hHmYLOfE.js";export{createGesture}from"./p-Cl0B-RWe.js";export{g as getPlatforms,i as initialize,a as isPlatform}from"./p-NFFyoJ4Q.js";export{c as componentOnReady}from"./p-CGmVTdWh.js";export{L as LogLevel}from"./p-IGIE5vDm.js";export{I as IonicSafeString,g as getMode,s as setupConfig}from"./p-gbVXD275.js";export{o as openURL}from"./p-DiVJyqlX.js";export{m as menuController}from"./p-DLbbmF9h.js";export{b as actionSheetController,a as alertController,l as loadingController,m as modalController,p as pickerController,c as popoverController,t as toastController}from"./p-BCTW1Nwr.js";import"./p-ZjP4CjeZ.js";import"./p-BTEOs1at.js";import"./p-DB_iPQC-.js";import"./p-CmFz1Mjc.js";const e=e=>{const{swiper:o,extendParams:t}=e,s={effect:void 0,direction:"horizontal",initialSlide:0,loop:!1,parallax:!1,slidesPerView:1,spaceBetween:0,speed:300,slidesPerColumn:1,slidesPerColumnFill:"column",slidesPerGroup:1,centeredSlides:!1,slidesOffsetBefore:0,slidesOffsetAfter:0,touchEventsTarget:"container",freeMode:!1,freeModeMomentum:!0,freeModeMomentumRatio:1,freeModeMomentumBounce:!0,freeModeMomentumBounceRatio:1,freeModeMomentumVelocityRatio:1,freeModeSticky:!1,freeModeMinimumVelocity:.02,autoHeight:!1,setWrapperSize:!1,zoom:{maxRatio:3,minRatio:1,toggle:!1},touchRatio:1,touchAngle:45,simulateTouch:!0,touchStartPreventDefault:!1,shortSwipes:!0,longSwipes:!0,longSwipesRatio:.5,longSwipesMs:300,followFinger:!0,threshold:0,touchMoveStopPropagation:!0,touchReleaseOnEdges:!1,iOSEdgeSwipeDetection:!1,iOSEdgeSwipeThreshold:20,resistance:!0,resistanceRatio:.85,watchSlidesProgress:!1,watchSlidesVisibility:!1,preventClicks:!0,preventClicksPropagation:!0,slideToClickedSlide:!1,loopAdditionalSlides:0,noSwiping:!0,runCallbacksOnInit:!0,coverflowEffect:{rotate:50,stretch:0,depth:100,modifier:1,slideShadows:!0},flipEffect:{slideShadows:!0,limitRotation:!0},cubeEffect:{slideShadows:!0,shadow:!0,shadowOffset:20,shadowScale:.94},fadeEffect:{crossFade:!1},a11y:{prevSlideMessage:"Previous slide",nextSlideMessage:"Next slide",firstSlideMessage:"This is the first slide",lastSlideMessage:"This is the last slide"}};o.pagination&&(s.pagination={type:"bullets",clickable:!1,hideOnClick:!1}),o.scrollbar&&(s.scrollbar={hide:!0}),t(s)};export{e as IonicSlides}
|