@ionic/core 8.7.12-dev.11764873961.1fedca46 → 8.7.12-dev.11764903007.1dc6d1ca
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/modal.js +52 -8
- package/dist/cjs/ion-modal.cjs.entry.js +52 -8
- package/dist/collection/components/modal/modal.ios.css +13 -0
- package/dist/collection/components/modal/modal.js +50 -6
- package/dist/collection/components/modal/modal.md.css +13 -0
- package/dist/docs.json +1 -1
- package/dist/esm/ion-modal.entry.js +52 -8
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-7ab02bd6.entry.js +4 -0
- package/hydrate/index.js +52 -8
- package/hydrate/index.mjs +52 -8
- package/package.json +2 -1
- package/dist/ionic/p-a80f1b04.entry.js +0 -4
package/components/modal.js
CHANGED
|
@@ -1471,9 +1471,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1471
1471
|
};
|
|
1472
1472
|
};
|
|
1473
1473
|
|
|
1474
|
-
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
1474
|
+
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.ion-disable-focus-trap){pointer-events:none}:host(.ion-disable-focus-trap) ion-backdrop{pointer-events:none}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
1475
1475
|
|
|
1476
|
-
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
1476
|
+
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.ion-disable-focus-trap){pointer-events:none}:host(.ion-disable-focus-trap) ion-backdrop{pointer-events:none}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
1477
1477
|
|
|
1478
1478
|
const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
1479
1479
|
constructor(registerHost) {
|
|
@@ -1921,7 +1921,13 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
1921
1921
|
};
|
|
1922
1922
|
window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
|
|
1923
1923
|
}
|
|
1924
|
-
|
|
1924
|
+
/**
|
|
1925
|
+
* Recalculate isSheetModal here because framework bindings (e.g., Angular)
|
|
1926
|
+
* may not have been applied when componentWillLoad ran.
|
|
1927
|
+
*/
|
|
1928
|
+
const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
|
|
1929
|
+
this.isSheetModal = isSheetModal;
|
|
1930
|
+
if (isSheetModal) {
|
|
1925
1931
|
this.initSheetGesture();
|
|
1926
1932
|
}
|
|
1927
1933
|
else if (hasCardModal) {
|
|
@@ -2003,6 +2009,31 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
2003
2009
|
this.gesture = gesture;
|
|
2004
2010
|
this.moveSheetToBreakpoint = moveSheetToBreakpoint;
|
|
2005
2011
|
this.gesture.enable(true);
|
|
2012
|
+
/**
|
|
2013
|
+
* When showBackdrop or focusTrap is false, allow clicks to pass through
|
|
2014
|
+
* the modal to content behind it. This also handles the case where the modal
|
|
2015
|
+
* is in a child route - the parent elements need pointer-events disabled.
|
|
2016
|
+
* See https://github.com/ionic-team/ionic-framework/issues/30700
|
|
2017
|
+
*/
|
|
2018
|
+
if (this.showBackdrop === false || this.focusTrap === false) {
|
|
2019
|
+
this.el.classList.add(FOCUS_TRAP_DISABLE_CLASS);
|
|
2020
|
+
this.el.style.setProperty('pointer-events', 'none');
|
|
2021
|
+
if (this.backdropEl) {
|
|
2022
|
+
this.backdropEl.style.setProperty('pointer-events', 'none');
|
|
2023
|
+
}
|
|
2024
|
+
/**
|
|
2025
|
+
* The modal's original parent may block pointer events after the modal
|
|
2026
|
+
* is moved to ion-app. Disable pointer-events on the parent and its
|
|
2027
|
+
* immediate ion-router-outlet (if in a child route).
|
|
2028
|
+
*/
|
|
2029
|
+
if (this.cachedOriginalParent) {
|
|
2030
|
+
this.cachedOriginalParent.style.setProperty('pointer-events', 'none');
|
|
2031
|
+
const immediateParent = this.cachedOriginalParent.parentElement;
|
|
2032
|
+
if ((immediateParent === null || immediateParent === void 0 ? void 0 : immediateParent.tagName) === 'ION-ROUTER-OUTLET') {
|
|
2033
|
+
immediateParent.style.setProperty('pointer-events', 'none');
|
|
2034
|
+
}
|
|
2035
|
+
}
|
|
2036
|
+
}
|
|
2006
2037
|
}
|
|
2007
2038
|
sheetOnDismiss() {
|
|
2008
2039
|
/**
|
|
@@ -2034,7 +2065,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
2034
2065
|
* For example, `cancel` or `backdrop`.
|
|
2035
2066
|
*/
|
|
2036
2067
|
async dismiss(data, role) {
|
|
2037
|
-
var _a;
|
|
2068
|
+
var _a, _b;
|
|
2038
2069
|
if (this.gestureAnimationDismissing && role !== GESTURE) {
|
|
2039
2070
|
return false;
|
|
2040
2071
|
}
|
|
@@ -2092,6 +2123,19 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
2092
2123
|
}
|
|
2093
2124
|
this.cleanupViewTransitionListener();
|
|
2094
2125
|
this.cleanupParentRemovalObserver();
|
|
2126
|
+
/**
|
|
2127
|
+
* Clean up pointer-events changes made in initSheetGesture.
|
|
2128
|
+
*/
|
|
2129
|
+
this.el.classList.remove(FOCUS_TRAP_DISABLE_CLASS);
|
|
2130
|
+
this.el.style.removeProperty('pointer-events');
|
|
2131
|
+
(_b = this.backdropEl) === null || _b === void 0 ? void 0 : _b.style.removeProperty('pointer-events');
|
|
2132
|
+
if (this.cachedOriginalParent) {
|
|
2133
|
+
this.cachedOriginalParent.style.removeProperty('pointer-events');
|
|
2134
|
+
const immediateParent = this.cachedOriginalParent.parentElement;
|
|
2135
|
+
if ((immediateParent === null || immediateParent === void 0 ? void 0 : immediateParent.tagName) === 'ION-ROUTER-OUTLET') {
|
|
2136
|
+
immediateParent.style.removeProperty('pointer-events');
|
|
2137
|
+
}
|
|
2138
|
+
}
|
|
2095
2139
|
}
|
|
2096
2140
|
this.currentBreakpoint = undefined;
|
|
2097
2141
|
this.animation = undefined;
|
|
@@ -2329,20 +2373,20 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
2329
2373
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
2330
2374
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
2331
2375
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
2332
|
-
return (h(Host, Object.assign({ key: '
|
|
2376
|
+
return (h(Host, Object.assign({ key: '034e57f66152a97863886b8152f0b9c64139a719', "no-router": true,
|
|
2333
2377
|
// Allow the modal to be navigable when the handle is focusable
|
|
2334
2378
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
2335
2379
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2336
|
-
}, 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: '
|
|
2380
|
+
}, 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: 'e60cea429657b664475d930a45ea15b65c97b9b6', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '9cacec5e0eb6c8a2683318656c6aaafdd4edf561', class: "modal-shadow" }), h("div", Object.assign({ key: '63de4640f1ddb2d290e9a86a637f1f6034d653ae',
|
|
2337
2381
|
/*
|
|
2338
2382
|
role and aria-modal must be used on the
|
|
2339
2383
|
same element. They must also be set inside the
|
|
2340
2384
|
shadow DOM otherwise ion-button will not be highlighted
|
|
2341
2385
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
2342
2386
|
*/
|
|
2343
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '
|
|
2387
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '760ef15fe7f75dbcc608a20a66c5f0ba31ee293e', class: "modal-handle",
|
|
2344
2388
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
2345
|
-
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: '
|
|
2389
|
+
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: '68bab993da56d687b7c3f7fd5b8faa6128269b42', onSlotchange: this.onSlotChange }))));
|
|
2346
2390
|
}
|
|
2347
2391
|
get el() { return this; }
|
|
2348
2392
|
static get watchers() { return {
|
|
@@ -1474,9 +1474,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1474
1474
|
};
|
|
1475
1475
|
};
|
|
1476
1476
|
|
|
1477
|
-
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
1477
|
+
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.ion-disable-focus-trap){pointer-events:none}:host(.ion-disable-focus-trap) ion-backdrop{pointer-events:none}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
1478
1478
|
|
|
1479
|
-
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
1479
|
+
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.ion-disable-focus-trap){pointer-events:none}:host(.ion-disable-focus-trap) ion-backdrop{pointer-events:none}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
1480
1480
|
|
|
1481
1481
|
const Modal = class {
|
|
1482
1482
|
constructor(hostRef) {
|
|
@@ -1920,7 +1920,13 @@ const Modal = class {
|
|
|
1920
1920
|
};
|
|
1921
1921
|
window.addEventListener(keyboard.KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
|
|
1922
1922
|
}
|
|
1923
|
-
|
|
1923
|
+
/**
|
|
1924
|
+
* Recalculate isSheetModal here because framework bindings (e.g., Angular)
|
|
1925
|
+
* may not have been applied when componentWillLoad ran.
|
|
1926
|
+
*/
|
|
1927
|
+
const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
|
|
1928
|
+
this.isSheetModal = isSheetModal;
|
|
1929
|
+
if (isSheetModal) {
|
|
1924
1930
|
this.initSheetGesture();
|
|
1925
1931
|
}
|
|
1926
1932
|
else if (hasCardModal) {
|
|
@@ -2002,6 +2008,31 @@ const Modal = class {
|
|
|
2002
2008
|
this.gesture = gesture;
|
|
2003
2009
|
this.moveSheetToBreakpoint = moveSheetToBreakpoint;
|
|
2004
2010
|
this.gesture.enable(true);
|
|
2011
|
+
/**
|
|
2012
|
+
* When showBackdrop or focusTrap is false, allow clicks to pass through
|
|
2013
|
+
* the modal to content behind it. This also handles the case where the modal
|
|
2014
|
+
* is in a child route - the parent elements need pointer-events disabled.
|
|
2015
|
+
* See https://github.com/ionic-team/ionic-framework/issues/30700
|
|
2016
|
+
*/
|
|
2017
|
+
if (this.showBackdrop === false || this.focusTrap === false) {
|
|
2018
|
+
this.el.classList.add(overlays.FOCUS_TRAP_DISABLE_CLASS);
|
|
2019
|
+
this.el.style.setProperty('pointer-events', 'none');
|
|
2020
|
+
if (this.backdropEl) {
|
|
2021
|
+
this.backdropEl.style.setProperty('pointer-events', 'none');
|
|
2022
|
+
}
|
|
2023
|
+
/**
|
|
2024
|
+
* The modal's original parent may block pointer events after the modal
|
|
2025
|
+
* is moved to ion-app. Disable pointer-events on the parent and its
|
|
2026
|
+
* immediate ion-router-outlet (if in a child route).
|
|
2027
|
+
*/
|
|
2028
|
+
if (this.cachedOriginalParent) {
|
|
2029
|
+
this.cachedOriginalParent.style.setProperty('pointer-events', 'none');
|
|
2030
|
+
const immediateParent = this.cachedOriginalParent.parentElement;
|
|
2031
|
+
if ((immediateParent === null || immediateParent === void 0 ? void 0 : immediateParent.tagName) === 'ION-ROUTER-OUTLET') {
|
|
2032
|
+
immediateParent.style.setProperty('pointer-events', 'none');
|
|
2033
|
+
}
|
|
2034
|
+
}
|
|
2035
|
+
}
|
|
2005
2036
|
}
|
|
2006
2037
|
sheetOnDismiss() {
|
|
2007
2038
|
/**
|
|
@@ -2033,7 +2064,7 @@ const Modal = class {
|
|
|
2033
2064
|
* For example, `cancel` or `backdrop`.
|
|
2034
2065
|
*/
|
|
2035
2066
|
async dismiss(data, role) {
|
|
2036
|
-
var _a;
|
|
2067
|
+
var _a, _b;
|
|
2037
2068
|
if (this.gestureAnimationDismissing && role !== overlays.GESTURE) {
|
|
2038
2069
|
return false;
|
|
2039
2070
|
}
|
|
@@ -2091,6 +2122,19 @@ const Modal = class {
|
|
|
2091
2122
|
}
|
|
2092
2123
|
this.cleanupViewTransitionListener();
|
|
2093
2124
|
this.cleanupParentRemovalObserver();
|
|
2125
|
+
/**
|
|
2126
|
+
* Clean up pointer-events changes made in initSheetGesture.
|
|
2127
|
+
*/
|
|
2128
|
+
this.el.classList.remove(overlays.FOCUS_TRAP_DISABLE_CLASS);
|
|
2129
|
+
this.el.style.removeProperty('pointer-events');
|
|
2130
|
+
(_b = this.backdropEl) === null || _b === void 0 ? void 0 : _b.style.removeProperty('pointer-events');
|
|
2131
|
+
if (this.cachedOriginalParent) {
|
|
2132
|
+
this.cachedOriginalParent.style.removeProperty('pointer-events');
|
|
2133
|
+
const immediateParent = this.cachedOriginalParent.parentElement;
|
|
2134
|
+
if ((immediateParent === null || immediateParent === void 0 ? void 0 : immediateParent.tagName) === 'ION-ROUTER-OUTLET') {
|
|
2135
|
+
immediateParent.style.removeProperty('pointer-events');
|
|
2136
|
+
}
|
|
2137
|
+
}
|
|
2094
2138
|
}
|
|
2095
2139
|
this.currentBreakpoint = undefined;
|
|
2096
2140
|
this.animation = undefined;
|
|
@@ -2328,20 +2372,20 @@ const Modal = class {
|
|
|
2328
2372
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
2329
2373
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
2330
2374
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
2331
|
-
return (index$3.h(index$3.Host, Object.assign({ key: '
|
|
2375
|
+
return (index$3.h(index$3.Host, Object.assign({ key: '034e57f66152a97863886b8152f0b9c64139a719', "no-router": true,
|
|
2332
2376
|
// Allow the modal to be navigable when the handle is focusable
|
|
2333
2377
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
2334
2378
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2335
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), index$3.h("ion-backdrop", { key: '
|
|
2379
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), index$3.h("ion-backdrop", { key: 'e60cea429657b664475d930a45ea15b65c97b9b6', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: '9cacec5e0eb6c8a2683318656c6aaafdd4edf561', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '63de4640f1ddb2d290e9a86a637f1f6034d653ae',
|
|
2336
2380
|
/*
|
|
2337
2381
|
role and aria-modal must be used on the
|
|
2338
2382
|
same element. They must also be set inside the
|
|
2339
2383
|
shadow DOM otherwise ion-button will not be highlighted
|
|
2340
2384
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
2341
2385
|
*/
|
|
2342
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '
|
|
2386
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '760ef15fe7f75dbcc608a20a66c5f0ba31ee293e', class: "modal-handle",
|
|
2343
2387
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
2344
|
-
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) })), index$3.h("slot", { key: '
|
|
2388
|
+
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) })), index$3.h("slot", { key: '68bab993da56d687b7c3f7fd5b8faa6128269b42', onSlotchange: this.onSlotChange }))));
|
|
2345
2389
|
}
|
|
2346
2390
|
get el() { return index$3.getElement(this); }
|
|
2347
2391
|
static get watchers() { return {
|
|
@@ -104,6 +104,19 @@ ion-backdrop {
|
|
|
104
104
|
pointer-events: auto;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
+
/**
|
|
108
|
+
* When focus trap is disabled, allow clicks to pass through the modal
|
|
109
|
+
* to content behind it. The .modal-wrapper retains pointer-events: auto
|
|
110
|
+
* so modal content remains interactive.
|
|
111
|
+
*/
|
|
112
|
+
:host(.ion-disable-focus-trap) {
|
|
113
|
+
pointer-events: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
:host(.ion-disable-focus-trap) ion-backdrop {
|
|
117
|
+
pointer-events: none;
|
|
118
|
+
}
|
|
119
|
+
|
|
107
120
|
:host(.overlay-hidden) {
|
|
108
121
|
display: none;
|
|
109
122
|
}
|
|
@@ -463,7 +463,13 @@ export class Modal {
|
|
|
463
463
|
};
|
|
464
464
|
window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
|
|
465
465
|
}
|
|
466
|
-
|
|
466
|
+
/**
|
|
467
|
+
* Recalculate isSheetModal here because framework bindings (e.g., Angular)
|
|
468
|
+
* may not have been applied when componentWillLoad ran.
|
|
469
|
+
*/
|
|
470
|
+
const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
|
|
471
|
+
this.isSheetModal = isSheetModal;
|
|
472
|
+
if (isSheetModal) {
|
|
467
473
|
this.initSheetGesture();
|
|
468
474
|
}
|
|
469
475
|
else if (hasCardModal) {
|
|
@@ -545,6 +551,31 @@ export class Modal {
|
|
|
545
551
|
this.gesture = gesture;
|
|
546
552
|
this.moveSheetToBreakpoint = moveSheetToBreakpoint;
|
|
547
553
|
this.gesture.enable(true);
|
|
554
|
+
/**
|
|
555
|
+
* When showBackdrop or focusTrap is false, allow clicks to pass through
|
|
556
|
+
* the modal to content behind it. This also handles the case where the modal
|
|
557
|
+
* is in a child route - the parent elements need pointer-events disabled.
|
|
558
|
+
* See https://github.com/ionic-team/ionic-framework/issues/30700
|
|
559
|
+
*/
|
|
560
|
+
if (this.showBackdrop === false || this.focusTrap === false) {
|
|
561
|
+
this.el.classList.add(FOCUS_TRAP_DISABLE_CLASS);
|
|
562
|
+
this.el.style.setProperty('pointer-events', 'none');
|
|
563
|
+
if (this.backdropEl) {
|
|
564
|
+
this.backdropEl.style.setProperty('pointer-events', 'none');
|
|
565
|
+
}
|
|
566
|
+
/**
|
|
567
|
+
* The modal's original parent may block pointer events after the modal
|
|
568
|
+
* is moved to ion-app. Disable pointer-events on the parent and its
|
|
569
|
+
* immediate ion-router-outlet (if in a child route).
|
|
570
|
+
*/
|
|
571
|
+
if (this.cachedOriginalParent) {
|
|
572
|
+
this.cachedOriginalParent.style.setProperty('pointer-events', 'none');
|
|
573
|
+
const immediateParent = this.cachedOriginalParent.parentElement;
|
|
574
|
+
if ((immediateParent === null || immediateParent === void 0 ? void 0 : immediateParent.tagName) === 'ION-ROUTER-OUTLET') {
|
|
575
|
+
immediateParent.style.setProperty('pointer-events', 'none');
|
|
576
|
+
}
|
|
577
|
+
}
|
|
578
|
+
}
|
|
548
579
|
}
|
|
549
580
|
sheetOnDismiss() {
|
|
550
581
|
/**
|
|
@@ -576,7 +607,7 @@ export class Modal {
|
|
|
576
607
|
* For example, `cancel` or `backdrop`.
|
|
577
608
|
*/
|
|
578
609
|
async dismiss(data, role) {
|
|
579
|
-
var _a;
|
|
610
|
+
var _a, _b;
|
|
580
611
|
if (this.gestureAnimationDismissing && role !== GESTURE) {
|
|
581
612
|
return false;
|
|
582
613
|
}
|
|
@@ -634,6 +665,19 @@ export class Modal {
|
|
|
634
665
|
}
|
|
635
666
|
this.cleanupViewTransitionListener();
|
|
636
667
|
this.cleanupParentRemovalObserver();
|
|
668
|
+
/**
|
|
669
|
+
* Clean up pointer-events changes made in initSheetGesture.
|
|
670
|
+
*/
|
|
671
|
+
this.el.classList.remove(FOCUS_TRAP_DISABLE_CLASS);
|
|
672
|
+
this.el.style.removeProperty('pointer-events');
|
|
673
|
+
(_b = this.backdropEl) === null || _b === void 0 ? void 0 : _b.style.removeProperty('pointer-events');
|
|
674
|
+
if (this.cachedOriginalParent) {
|
|
675
|
+
this.cachedOriginalParent.style.removeProperty('pointer-events');
|
|
676
|
+
const immediateParent = this.cachedOriginalParent.parentElement;
|
|
677
|
+
if ((immediateParent === null || immediateParent === void 0 ? void 0 : immediateParent.tagName) === 'ION-ROUTER-OUTLET') {
|
|
678
|
+
immediateParent.style.removeProperty('pointer-events');
|
|
679
|
+
}
|
|
680
|
+
}
|
|
637
681
|
}
|
|
638
682
|
this.currentBreakpoint = undefined;
|
|
639
683
|
this.animation = undefined;
|
|
@@ -879,20 +923,20 @@ export class Modal {
|
|
|
879
923
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
880
924
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
881
925
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
882
|
-
return (h(Host, Object.assign({ key: '
|
|
926
|
+
return (h(Host, Object.assign({ key: '034e57f66152a97863886b8152f0b9c64139a719', "no-router": true,
|
|
883
927
|
// Allow the modal to be navigable when the handle is focusable
|
|
884
928
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
885
929
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
886
|
-
}, 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: '
|
|
930
|
+
}, 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: 'e60cea429657b664475d930a45ea15b65c97b9b6', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '9cacec5e0eb6c8a2683318656c6aaafdd4edf561', class: "modal-shadow" }), h("div", Object.assign({ key: '63de4640f1ddb2d290e9a86a637f1f6034d653ae',
|
|
887
931
|
/*
|
|
888
932
|
role and aria-modal must be used on the
|
|
889
933
|
same element. They must also be set inside the
|
|
890
934
|
shadow DOM otherwise ion-button will not be highlighted
|
|
891
935
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
892
936
|
*/
|
|
893
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '
|
|
937
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '760ef15fe7f75dbcc608a20a66c5f0ba31ee293e', class: "modal-handle",
|
|
894
938
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
895
|
-
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: '
|
|
939
|
+
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: '68bab993da56d687b7c3f7fd5b8faa6128269b42', onSlotchange: this.onSlotChange }))));
|
|
896
940
|
}
|
|
897
941
|
static get is() { return "ion-modal"; }
|
|
898
942
|
static get encapsulation() { return "shadow"; }
|
|
@@ -104,6 +104,19 @@ ion-backdrop {
|
|
|
104
104
|
pointer-events: auto;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
+
/**
|
|
108
|
+
* When focus trap is disabled, allow clicks to pass through the modal
|
|
109
|
+
* to content behind it. The .modal-wrapper retains pointer-events: auto
|
|
110
|
+
* so modal content remains interactive.
|
|
111
|
+
*/
|
|
112
|
+
:host(.ion-disable-focus-trap) {
|
|
113
|
+
pointer-events: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
:host(.ion-disable-focus-trap) ion-backdrop {
|
|
117
|
+
pointer-events: none;
|
|
118
|
+
}
|
|
119
|
+
|
|
107
120
|
:host(.overlay-hidden) {
|
|
108
121
|
display: none;
|
|
109
122
|
}
|
package/dist/docs.json
CHANGED
|
@@ -1472,9 +1472,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1472
1472
|
};
|
|
1473
1473
|
};
|
|
1474
1474
|
|
|
1475
|
-
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
1475
|
+
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.ion-disable-focus-trap){pointer-events:none}:host(.ion-disable-focus-trap) ion-backdrop{pointer-events:none}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
1476
1476
|
|
|
1477
|
-
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
1477
|
+
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.ion-disable-focus-trap){pointer-events:none}:host(.ion-disable-focus-trap) ion-backdrop{pointer-events:none}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
1478
1478
|
|
|
1479
1479
|
const Modal = class {
|
|
1480
1480
|
constructor(hostRef) {
|
|
@@ -1918,7 +1918,13 @@ const Modal = class {
|
|
|
1918
1918
|
};
|
|
1919
1919
|
window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
|
|
1920
1920
|
}
|
|
1921
|
-
|
|
1921
|
+
/**
|
|
1922
|
+
* Recalculate isSheetModal here because framework bindings (e.g., Angular)
|
|
1923
|
+
* may not have been applied when componentWillLoad ran.
|
|
1924
|
+
*/
|
|
1925
|
+
const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
|
|
1926
|
+
this.isSheetModal = isSheetModal;
|
|
1927
|
+
if (isSheetModal) {
|
|
1922
1928
|
this.initSheetGesture();
|
|
1923
1929
|
}
|
|
1924
1930
|
else if (hasCardModal) {
|
|
@@ -2000,6 +2006,31 @@ const Modal = class {
|
|
|
2000
2006
|
this.gesture = gesture;
|
|
2001
2007
|
this.moveSheetToBreakpoint = moveSheetToBreakpoint;
|
|
2002
2008
|
this.gesture.enable(true);
|
|
2009
|
+
/**
|
|
2010
|
+
* When showBackdrop or focusTrap is false, allow clicks to pass through
|
|
2011
|
+
* the modal to content behind it. This also handles the case where the modal
|
|
2012
|
+
* is in a child route - the parent elements need pointer-events disabled.
|
|
2013
|
+
* See https://github.com/ionic-team/ionic-framework/issues/30700
|
|
2014
|
+
*/
|
|
2015
|
+
if (this.showBackdrop === false || this.focusTrap === false) {
|
|
2016
|
+
this.el.classList.add(FOCUS_TRAP_DISABLE_CLASS);
|
|
2017
|
+
this.el.style.setProperty('pointer-events', 'none');
|
|
2018
|
+
if (this.backdropEl) {
|
|
2019
|
+
this.backdropEl.style.setProperty('pointer-events', 'none');
|
|
2020
|
+
}
|
|
2021
|
+
/**
|
|
2022
|
+
* The modal's original parent may block pointer events after the modal
|
|
2023
|
+
* is moved to ion-app. Disable pointer-events on the parent and its
|
|
2024
|
+
* immediate ion-router-outlet (if in a child route).
|
|
2025
|
+
*/
|
|
2026
|
+
if (this.cachedOriginalParent) {
|
|
2027
|
+
this.cachedOriginalParent.style.setProperty('pointer-events', 'none');
|
|
2028
|
+
const immediateParent = this.cachedOriginalParent.parentElement;
|
|
2029
|
+
if ((immediateParent === null || immediateParent === void 0 ? void 0 : immediateParent.tagName) === 'ION-ROUTER-OUTLET') {
|
|
2030
|
+
immediateParent.style.setProperty('pointer-events', 'none');
|
|
2031
|
+
}
|
|
2032
|
+
}
|
|
2033
|
+
}
|
|
2003
2034
|
}
|
|
2004
2035
|
sheetOnDismiss() {
|
|
2005
2036
|
/**
|
|
@@ -2031,7 +2062,7 @@ const Modal = class {
|
|
|
2031
2062
|
* For example, `cancel` or `backdrop`.
|
|
2032
2063
|
*/
|
|
2033
2064
|
async dismiss(data, role) {
|
|
2034
|
-
var _a;
|
|
2065
|
+
var _a, _b;
|
|
2035
2066
|
if (this.gestureAnimationDismissing && role !== GESTURE) {
|
|
2036
2067
|
return false;
|
|
2037
2068
|
}
|
|
@@ -2089,6 +2120,19 @@ const Modal = class {
|
|
|
2089
2120
|
}
|
|
2090
2121
|
this.cleanupViewTransitionListener();
|
|
2091
2122
|
this.cleanupParentRemovalObserver();
|
|
2123
|
+
/**
|
|
2124
|
+
* Clean up pointer-events changes made in initSheetGesture.
|
|
2125
|
+
*/
|
|
2126
|
+
this.el.classList.remove(FOCUS_TRAP_DISABLE_CLASS);
|
|
2127
|
+
this.el.style.removeProperty('pointer-events');
|
|
2128
|
+
(_b = this.backdropEl) === null || _b === void 0 ? void 0 : _b.style.removeProperty('pointer-events');
|
|
2129
|
+
if (this.cachedOriginalParent) {
|
|
2130
|
+
this.cachedOriginalParent.style.removeProperty('pointer-events');
|
|
2131
|
+
const immediateParent = this.cachedOriginalParent.parentElement;
|
|
2132
|
+
if ((immediateParent === null || immediateParent === void 0 ? void 0 : immediateParent.tagName) === 'ION-ROUTER-OUTLET') {
|
|
2133
|
+
immediateParent.style.removeProperty('pointer-events');
|
|
2134
|
+
}
|
|
2135
|
+
}
|
|
2092
2136
|
}
|
|
2093
2137
|
this.currentBreakpoint = undefined;
|
|
2094
2138
|
this.animation = undefined;
|
|
@@ -2326,20 +2370,20 @@ const Modal = class {
|
|
|
2326
2370
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
2327
2371
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
2328
2372
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
2329
|
-
return (h(Host, Object.assign({ key: '
|
|
2373
|
+
return (h(Host, Object.assign({ key: '034e57f66152a97863886b8152f0b9c64139a719', "no-router": true,
|
|
2330
2374
|
// Allow the modal to be navigable when the handle is focusable
|
|
2331
2375
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
2332
2376
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2333
|
-
}, 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: '
|
|
2377
|
+
}, 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: 'e60cea429657b664475d930a45ea15b65c97b9b6', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '9cacec5e0eb6c8a2683318656c6aaafdd4edf561', class: "modal-shadow" }), h("div", Object.assign({ key: '63de4640f1ddb2d290e9a86a637f1f6034d653ae',
|
|
2334
2378
|
/*
|
|
2335
2379
|
role and aria-modal must be used on the
|
|
2336
2380
|
same element. They must also be set inside the
|
|
2337
2381
|
shadow DOM otherwise ion-button will not be highlighted
|
|
2338
2382
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
2339
2383
|
*/
|
|
2340
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '
|
|
2384
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '760ef15fe7f75dbcc608a20a66c5f0ba31ee293e', class: "modal-handle",
|
|
2341
2385
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
2342
|
-
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: '
|
|
2386
|
+
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: '68bab993da56d687b7c3f7fd5b8faa6128269b42', onSlotchange: this.onSlotChange }))));
|
|
2343
2387
|
}
|
|
2344
2388
|
get el() { return getElement(this); }
|
|
2345
2389
|
static get watchers() { return {
|