@ionic/core 8.8.14-dev.11783455203.1cbca643 → 8.8.14-dev.11783969828.1f28d893
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-Cg0yUncF.js → p-BUcrNuxp.js} +1 -1
- package/components/{p-BeaZQGdD.js → p-CMVYv6xu.js} +1 -1
- package/components/p-CSRA1aW0.js +4 -0
- package/components/{p-CiZjmDRO.js → p-Ch5WJNJF.js} +1 -1
- package/components/{p-BI99_O7M.js → p-DoL_wAtc.js} +1 -1
- package/components/{p-CoDFQCkp.js → p-qiecYdXI.js} +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
- package/dist/cjs/ion-alert.cjs.entry.js +1 -1
- package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-loading.cjs.entry.js +1 -1
- package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-modal.cjs.entry.js +24 -17
- package/dist/cjs/ion-popover.cjs.entry.js +1 -1
- 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-B9WEMRRo.js → overlays-BeMrOwMt.js} +4 -21
- package/dist/collection/components/modal/gestures/sheet.js +8 -0
- package/dist/collection/components/modal/gestures/swipe-to-close.js +8 -0
- package/dist/collection/components/modal/modal.ios.css +8 -0
- package/dist/collection/components/modal/modal.js +5 -14
- package/dist/collection/components/modal/modal.md.css +8 -0
- package/dist/collection/utils/overlays.js +4 -21
- package/dist/docs.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +1 -1
- package/dist/esm/ion-alert.entry.js +1 -1
- package/dist/esm/ion-datetime_3.entry.js +1 -1
- package/dist/esm/ion-loading.entry.js +1 -1
- package/dist/esm/ion-menu_3.entry.js +1 -1
- package/dist/esm/ion-modal.entry.js +24 -17
- package/dist/esm/ion-popover.entry.js +1 -1
- 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--4JLDr6C.js → overlays-DBQMGaJ9.js} +4 -21
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-8b4e6e7f.entry.js → p-0124647d.entry.js} +1 -1
- package/dist/ionic/{p-766bbdff.entry.js → p-305a059a.entry.js} +1 -1
- package/dist/ionic/{p-a6ad9c29.entry.js → p-4abbd79c.entry.js} +1 -1
- package/dist/ionic/{p-badb48f9.entry.js → p-5076b325.entry.js} +1 -1
- package/dist/ionic/{p-c8739c33.entry.js → p-6209ed93.entry.js} +1 -1
- package/dist/ionic/{p-b580c366.entry.js → p-6e3d2097.entry.js} +1 -1
- package/dist/ionic/{p-57e31cc8.entry.js → p-9f8cb0f3.entry.js} +1 -1
- package/dist/ionic/{p-e930122a.entry.js → p-a1b57bd4.entry.js} +1 -1
- package/dist/ionic/{p-28df2088.entry.js → p-ddb2d591.entry.js} +1 -1
- package/dist/ionic/p-e13c6c40.entry.js +4 -0
- package/hydrate/index.js +27 -37
- package/hydrate/index.mjs +27 -37
- package/package.json +1 -1
- package/components/p-DfAYowgb.js +0 -4
- package/dist/ionic/p-aa56131f.entry.js +0 -4
- /package/components/{p-BhiHTRHr.js → p-BylFVz1e.js} +0 -0
- /package/dist/ionic/{p-Dzyqeklk.js → p-BnzgTfDG.js} +0 -0
|
@@ -9,7 +9,7 @@ var frameworkDelegate = require('./framework-delegate-BtICZDHr.js');
|
|
|
9
9
|
var helpers = require('./helpers-Cv23MFHM.js');
|
|
10
10
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
11
11
|
var capacitor = require('./capacitor-DmA66EwP.js');
|
|
12
|
-
var overlays = require('./overlays-
|
|
12
|
+
var overlays = require('./overlays-BeMrOwMt.js');
|
|
13
13
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
14
14
|
var index$4 = require('./index-BERfRao3.js');
|
|
15
15
|
var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
|
|
@@ -332,8 +332,15 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onD
|
|
|
332
332
|
}
|
|
333
333
|
return false;
|
|
334
334
|
};
|
|
335
|
+
/**
|
|
336
|
+
* In Firefox, pressing over a text caret in the focusable wrapper can
|
|
337
|
+
* start a native drag that swallows the gesture's pointer events.
|
|
338
|
+
* Cancel native drag while the gesture is active.
|
|
339
|
+
*/
|
|
340
|
+
const preventNativeDragStart = (ev) => ev.preventDefault();
|
|
335
341
|
const onStart = (detail) => {
|
|
336
342
|
const { deltaY } = detail;
|
|
343
|
+
el.addEventListener('dragstart', preventNativeDragStart);
|
|
337
344
|
/**
|
|
338
345
|
* Get the initial scrollY value so
|
|
339
346
|
* that we can correctly reset the scrollY
|
|
@@ -436,6 +443,7 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onD
|
|
|
436
443
|
onDragMove(eventDetail);
|
|
437
444
|
};
|
|
438
445
|
const onEnd = (detail) => {
|
|
446
|
+
el.removeEventListener('dragstart', preventNativeDragStart);
|
|
439
447
|
const velocity = detail.velocityY;
|
|
440
448
|
const step = detail.deltaY / height;
|
|
441
449
|
const isAttemptingDismissWithCanDismiss = step >= 0 && canDismissBlocksGesture;
|
|
@@ -1218,7 +1226,14 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1218
1226
|
}
|
|
1219
1227
|
return true;
|
|
1220
1228
|
};
|
|
1229
|
+
/**
|
|
1230
|
+
* In Firefox, pressing over a text caret in the focusable wrapper can
|
|
1231
|
+
* start a native drag that swallows the gesture's pointer events.
|
|
1232
|
+
* Cancel native drag while the gesture is active.
|
|
1233
|
+
*/
|
|
1234
|
+
const preventNativeDragStart = (ev) => ev.preventDefault();
|
|
1221
1235
|
const onStart = (detail) => {
|
|
1236
|
+
baseEl.addEventListener('dragstart', preventNativeDragStart);
|
|
1222
1237
|
/**
|
|
1223
1238
|
* If canDismiss is anything other than `true`
|
|
1224
1239
|
* then users should be able to swipe down
|
|
@@ -1345,6 +1360,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1345
1360
|
onDragMove(eventDetail);
|
|
1346
1361
|
};
|
|
1347
1362
|
const onEnd = (detail) => {
|
|
1363
|
+
baseEl.removeEventListener('dragstart', preventNativeDragStart);
|
|
1348
1364
|
const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
|
|
1349
1365
|
const eventDetail = {
|
|
1350
1366
|
currentY: detail.currentY,
|
|
@@ -1821,9 +1837,9 @@ const clearSafeAreaOverrides = (hostEl) => {
|
|
|
1821
1837
|
hostEl.style.removeProperty('--ion-safe-area-right');
|
|
1822
1838
|
};
|
|
1823
1839
|
|
|
1824
|
-
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}}@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-modal-offset-top, 0px) + 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}`;
|
|
1840
|
+
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-wrapper{outline:none}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@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-modal-offset-top, 0px) + 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}`;
|
|
1825
1841
|
|
|
1826
|
-
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}}@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-modal-offset-top, 0px) + 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}`;
|
|
1842
|
+
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-wrapper{outline:none}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@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-modal-offset-top, 0px) + 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}`;
|
|
1827
1843
|
|
|
1828
1844
|
const Modal = class {
|
|
1829
1845
|
constructor(hostRef) {
|
|
@@ -2964,28 +2980,19 @@ const Modal = class {
|
|
|
2964
2980
|
// Allow the modal to be navigable when the handle is focusable
|
|
2965
2981
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
2966
2982
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2967
|
-
}, 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: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '
|
|
2983
|
+
}, 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: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '4d84bd3a6b7dd0e349aba843f92129000ce90170',
|
|
2968
2984
|
/*
|
|
2969
2985
|
role and aria-modal must be used on the
|
|
2970
2986
|
same element. They must also be set inside the
|
|
2971
2987
|
shadow DOM otherwise ion-button will not be highlighted
|
|
2972
2988
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
2973
2989
|
|
|
2974
|
-
tabIndex={-1}
|
|
2975
|
-
|
|
2976
|
-
the modal opens, so assistive technologies get a focus target
|
|
2977
|
-
that actually carries the dialog's role/label. It is not part
|
|
2978
|
-
of the Tab order since -1 is never Tab-reachable.
|
|
2979
|
-
|
|
2980
|
-
This is only applied to default modals. For sheet and iOS card
|
|
2981
|
-
modals the wrapper doubles as the drag-gesture surface, and
|
|
2982
|
-
leaving focus on that surface interferes with the pointer
|
|
2983
|
-
gesture (most visibly on Firefox). Those modals keep focusing
|
|
2984
|
-
the host as before.
|
|
2990
|
+
tabIndex={-1} lets present() focus this element (which carries
|
|
2991
|
+
the dialog role) instead of the role-less host.
|
|
2985
2992
|
*/
|
|
2986
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex:
|
|
2993
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '498f9fa839c460f9a586904aa0809a8130e1a05d', class: "modal-handle",
|
|
2987
2994
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
2988
|
-
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: '
|
|
2995
|
+
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: '668e769738476faa4f7adfbb03b0e72dad57c22b', onSlotchange: this.onSlotChange }))));
|
|
2989
2996
|
}
|
|
2990
2997
|
get el() { return index$3.getElement(this); }
|
|
2991
2998
|
static get watchers() { return {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
'use strict';
|
|
5
5
|
|
|
6
6
|
var index = require('./index-Ct7gcRif.js');
|
|
7
|
-
var overlays = require('./overlays-
|
|
7
|
+
var overlays = require('./overlays-BeMrOwMt.js');
|
|
8
8
|
var frameworkDelegate = require('./framework-delegate-BtICZDHr.js');
|
|
9
9
|
var helpers = require('./helpers-Cv23MFHM.js');
|
|
10
10
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
var index = require('./index-Ct7gcRif.js');
|
|
7
7
|
var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
|
|
8
|
-
var overlays = require('./overlays-
|
|
8
|
+
var overlays = require('./overlays-BeMrOwMt.js');
|
|
9
9
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
10
10
|
require('./index-DkNv4J_i.js');
|
|
11
11
|
require('./helpers-Cv23MFHM.js');
|
|
@@ -8,7 +8,7 @@ var notchController = require('./notch-controller-18PzRGXd.js');
|
|
|
8
8
|
var compareWithUtils = require('./compare-with-utils-DSicavqM.js');
|
|
9
9
|
var validity = require('./validity-BpS37YFM.js');
|
|
10
10
|
var helpers = require('./helpers-Cv23MFHM.js');
|
|
11
|
-
var overlays = require('./overlays-
|
|
11
|
+
var overlays = require('./overlays-BeMrOwMt.js');
|
|
12
12
|
var dir = require('./dir-Cn0z1rJH.js');
|
|
13
13
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
14
14
|
var watchOptions = require('./watch-options-CviOsrTS.js');
|
|
@@ -7,7 +7,7 @@ var index$1 = require('./index-Ct7gcRif.js');
|
|
|
7
7
|
var config = require('./config-xninhj0J.js');
|
|
8
8
|
var helpers = require('./helpers-Cv23MFHM.js');
|
|
9
9
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
10
|
-
var overlays = require('./overlays-
|
|
10
|
+
var overlays = require('./overlays-BeMrOwMt.js');
|
|
11
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
12
12
|
var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
|
|
13
13
|
var animation = require('./animation-BJq0kcy2.js');
|
|
@@ -579,27 +579,10 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
579
579
|
*/
|
|
580
580
|
if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
|
|
581
581
|
/**
|
|
582
|
-
* Some overlays (modal
|
|
583
|
-
* `
|
|
584
|
-
*
|
|
585
|
-
*
|
|
586
|
-
* focus target with no accessible role or name -- screen readers that
|
|
587
|
-
* rely on the focus/accessibility-focus event to know a dialog opened
|
|
588
|
-
* (e.g. Android TalkBack, which does not treat `aria-modal` alone as a
|
|
589
|
-
* navigation boundary) get no usable landing point, so their linear
|
|
590
|
-
* navigation cursor never actually enters the overlay's content.
|
|
591
|
-
*
|
|
592
|
-
* Other overlays (action-sheet, loading, popover) keep those
|
|
593
|
-
* attributes on the host and leave `.ion-overlay-wrapper` without a
|
|
594
|
-
* `tabindex`, in which case it is not focusable and the host remains
|
|
595
|
-
* the correct target. Only redirect to the wrapper when it actually
|
|
596
|
-
* declares a `tabindex` (i.e. the component authored it to be
|
|
597
|
-
* focusable) so overlays that already focus the host correctly are
|
|
598
|
-
* left untouched.
|
|
599
|
-
*
|
|
600
|
-
* `preventScroll` keeps this purely an accessibility-focus move: we
|
|
601
|
-
* do not want focusing the wrapper to scroll it into view, since the
|
|
602
|
-
* host was already the scroll-neutral, full-viewport container.
|
|
582
|
+
* Some overlays (e.g. modal) put the dialog role and label on the
|
|
583
|
+
* `.ion-overlay-wrapper` rather than the host. Screen readers like
|
|
584
|
+
* TalkBack need focus to land there, so focus the wrapper when it is
|
|
585
|
+
* focusable (has a `tabindex`); otherwise focus the host as before.
|
|
603
586
|
*/
|
|
604
587
|
const overlayWrapper = helpers.getElementRoot(overlay.el).querySelector('.ion-overlay-wrapper');
|
|
605
588
|
const focusTarget = (overlayWrapper === null || overlayWrapper === void 0 ? void 0 : overlayWrapper.hasAttribute('tabindex')) ? overlayWrapper : overlay.el;
|
|
@@ -223,7 +223,14 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
|
|
|
223
223
|
}
|
|
224
224
|
return true;
|
|
225
225
|
};
|
|
226
|
+
/**
|
|
227
|
+
* In Firefox, pressing over a text caret in the focusable wrapper can
|
|
228
|
+
* start a native drag that swallows the gesture's pointer events.
|
|
229
|
+
* Cancel native drag while the gesture is active.
|
|
230
|
+
*/
|
|
231
|
+
const preventNativeDragStart = (ev) => ev.preventDefault();
|
|
226
232
|
const onStart = (detail) => {
|
|
233
|
+
baseEl.addEventListener('dragstart', preventNativeDragStart);
|
|
227
234
|
/**
|
|
228
235
|
* If canDismiss is anything other than `true`
|
|
229
236
|
* then users should be able to swipe down
|
|
@@ -350,6 +357,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
|
|
|
350
357
|
onDragMove(eventDetail);
|
|
351
358
|
};
|
|
352
359
|
const onEnd = (detail) => {
|
|
360
|
+
baseEl.removeEventListener('dragstart', preventNativeDragStart);
|
|
353
361
|
const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
|
|
354
362
|
const eventDetail = {
|
|
355
363
|
currentY: detail.currentY,
|
|
@@ -95,8 +95,15 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
|
|
|
95
95
|
}
|
|
96
96
|
return false;
|
|
97
97
|
};
|
|
98
|
+
/**
|
|
99
|
+
* In Firefox, pressing over a text caret in the focusable wrapper can
|
|
100
|
+
* start a native drag that swallows the gesture's pointer events.
|
|
101
|
+
* Cancel native drag while the gesture is active.
|
|
102
|
+
*/
|
|
103
|
+
const preventNativeDragStart = (ev) => ev.preventDefault();
|
|
98
104
|
const onStart = (detail) => {
|
|
99
105
|
const { deltaY } = detail;
|
|
106
|
+
el.addEventListener('dragstart', preventNativeDragStart);
|
|
100
107
|
/**
|
|
101
108
|
* Get the initial scrollY value so
|
|
102
109
|
* that we can correctly reset the scrollY
|
|
@@ -199,6 +206,7 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
|
|
|
199
206
|
onDragMove(eventDetail);
|
|
200
207
|
};
|
|
201
208
|
const onEnd = (detail) => {
|
|
209
|
+
el.removeEventListener('dragstart', preventNativeDragStart);
|
|
202
210
|
const velocity = detail.velocityY;
|
|
203
211
|
const step = detail.deltaY / height;
|
|
204
212
|
const isAttemptingDismissWithCanDismiss = step >= 0 && canDismissBlocksGesture;
|
|
@@ -126,6 +126,14 @@ ion-backdrop {
|
|
|
126
126
|
z-index: 10;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
+
/**
|
|
130
|
+
* The wrapper is focused on present (see modal.tsx); suppress its focus
|
|
131
|
+
* ring, matching the host above.
|
|
132
|
+
*/
|
|
133
|
+
.modal-wrapper {
|
|
134
|
+
outline: none;
|
|
135
|
+
}
|
|
136
|
+
|
|
129
137
|
.modal-shadow {
|
|
130
138
|
position: absolute;
|
|
131
139
|
background: transparent;
|
|
@@ -1166,28 +1166,19 @@ export class Modal {
|
|
|
1166
1166
|
// Allow the modal to be navigable when the handle is focusable
|
|
1167
1167
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
1168
1168
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1169
|
-
}, 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: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), h("div", Object.assign({ key: '
|
|
1169
|
+
}, 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: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), h("div", Object.assign({ key: '4d84bd3a6b7dd0e349aba843f92129000ce90170',
|
|
1170
1170
|
/*
|
|
1171
1171
|
role and aria-modal must be used on the
|
|
1172
1172
|
same element. They must also be set inside the
|
|
1173
1173
|
shadow DOM otherwise ion-button will not be highlighted
|
|
1174
1174
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
1175
1175
|
|
|
1176
|
-
tabIndex={-1}
|
|
1177
|
-
|
|
1178
|
-
the modal opens, so assistive technologies get a focus target
|
|
1179
|
-
that actually carries the dialog's role/label. It is not part
|
|
1180
|
-
of the Tab order since -1 is never Tab-reachable.
|
|
1181
|
-
|
|
1182
|
-
This is only applied to default modals. For sheet and iOS card
|
|
1183
|
-
modals the wrapper doubles as the drag-gesture surface, and
|
|
1184
|
-
leaving focus on that surface interferes with the pointer
|
|
1185
|
-
gesture (most visibly on Firefox). Those modals keep focusing
|
|
1186
|
-
the host as before.
|
|
1176
|
+
tabIndex={-1} lets present() focus this element (which carries
|
|
1177
|
+
the dialog role) instead of the role-less host.
|
|
1187
1178
|
*/
|
|
1188
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex:
|
|
1179
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '498f9fa839c460f9a586904aa0809a8130e1a05d', class: "modal-handle",
|
|
1189
1180
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
1190
|
-
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: '
|
|
1181
|
+
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: '668e769738476faa4f7adfbb03b0e72dad57c22b', onSlotchange: this.onSlotChange }))));
|
|
1191
1182
|
}
|
|
1192
1183
|
static get is() { return "ion-modal"; }
|
|
1193
1184
|
static get encapsulation() { return "shadow"; }
|
|
@@ -126,6 +126,14 @@ ion-backdrop {
|
|
|
126
126
|
z-index: 10;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
+
/**
|
|
130
|
+
* The wrapper is focused on present (see modal.tsx); suppress its focus
|
|
131
|
+
* ring, matching the host above.
|
|
132
|
+
*/
|
|
133
|
+
.modal-wrapper {
|
|
134
|
+
outline: none;
|
|
135
|
+
}
|
|
136
|
+
|
|
129
137
|
.modal-shadow {
|
|
130
138
|
position: absolute;
|
|
131
139
|
background: transparent;
|
|
@@ -498,27 +498,10 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
|
|
|
498
498
|
*/
|
|
499
499
|
if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
|
|
500
500
|
/**
|
|
501
|
-
* Some overlays (modal
|
|
502
|
-
* `
|
|
503
|
-
*
|
|
504
|
-
*
|
|
505
|
-
* focus target with no accessible role or name -- screen readers that
|
|
506
|
-
* rely on the focus/accessibility-focus event to know a dialog opened
|
|
507
|
-
* (e.g. Android TalkBack, which does not treat `aria-modal` alone as a
|
|
508
|
-
* navigation boundary) get no usable landing point, so their linear
|
|
509
|
-
* navigation cursor never actually enters the overlay's content.
|
|
510
|
-
*
|
|
511
|
-
* Other overlays (action-sheet, loading, popover) keep those
|
|
512
|
-
* attributes on the host and leave `.ion-overlay-wrapper` without a
|
|
513
|
-
* `tabindex`, in which case it is not focusable and the host remains
|
|
514
|
-
* the correct target. Only redirect to the wrapper when it actually
|
|
515
|
-
* declares a `tabindex` (i.e. the component authored it to be
|
|
516
|
-
* focusable) so overlays that already focus the host correctly are
|
|
517
|
-
* left untouched.
|
|
518
|
-
*
|
|
519
|
-
* `preventScroll` keeps this purely an accessibility-focus move: we
|
|
520
|
-
* do not want focusing the wrapper to scroll it into view, since the
|
|
521
|
-
* host was already the scroll-neutral, full-viewport container.
|
|
501
|
+
* Some overlays (e.g. modal) put the dialog role and label on the
|
|
502
|
+
* `.ion-overlay-wrapper` rather than the host. Screen readers like
|
|
503
|
+
* TalkBack need focus to land there, so focus the wrapper when it is
|
|
504
|
+
* focusable (has a `tabindex`); otherwise focus the host as before.
|
|
522
505
|
*/
|
|
523
506
|
const overlayWrapper = getElementRoot(overlay.el).querySelector('.ion-overlay-wrapper');
|
|
524
507
|
const focusTarget = (overlayWrapper === null || overlayWrapper === void 0 ? void 0 : overlayWrapper.hasAttribute('tabindex')) ? overlayWrapper : overlay.el;
|
package/dist/docs.json
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -13,7 +13,7 @@ export { L as LogLevel } from './index-tcQvqkiX.js';
|
|
|
13
13
|
export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-DQCONYYp.js';
|
|
14
14
|
export { o as openURL } from './theme-DiVJyqlX.js';
|
|
15
15
|
export { m as menuController } from './index-Q6UPU0Ay.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-DBQMGaJ9.js';
|
|
17
17
|
import './index-ZjP4CjeZ.js';
|
|
18
18
|
import './gesture-controller-BTEOs1at.js';
|
|
19
19
|
import './hardware-back-button-B93Gru0Y.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-BSpTQmS9.js';
|
|
6
6
|
import { r as raf } from './helpers-HEqiOzXb.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 setOverlayId } from './overlays-DBQMGaJ9.js';
|
|
9
9
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
10
10
|
import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
|
|
11
11
|
import { c as createAnimation } from './animation-DLJpuoEz.js';
|
|
@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
|
|
|
6
6
|
import { c as createButtonActiveGesture } from './button-active-BSpTQmS9.js';
|
|
7
7
|
import { r as raf } from './helpers-HEqiOzXb.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, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays
|
|
9
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-DBQMGaJ9.js';
|
|
10
10
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
11
11
|
import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
|
|
12
12
|
import { c as createAnimation } from './animation-DLJpuoEz.js';
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { j as printIonError, f as printIonWarning, r as registerInstance, c as createEvent, w as writeTask, e as config, h, d as Host, g as getElement } from './index-tcQvqkiX.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-HEqiOzXb.js';
|
|
7
|
-
import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays
|
|
7
|
+
import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-DBQMGaJ9.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-DQCONYYp.js';
|
|
6
6
|
import { r as raf } from './helpers-HEqiOzXb.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, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays
|
|
8
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-DBQMGaJ9.js';
|
|
9
9
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
10
10
|
import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
|
|
11
11
|
import { c as createAnimation } from './animation-DLJpuoEz.js';
|
|
@@ -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-tcQvqkiX.js';
|
|
5
5
|
import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
|
|
6
|
-
import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays
|
|
6
|
+
import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-DBQMGaJ9.js';
|
|
7
7
|
import { G as GESTURE_CONTROLLER } from './gesture-controller-BTEOs1at.js';
|
|
8
8
|
import { shouldUseCloseWatcher } from './hardware-back-button-B93Gru0Y.js';
|
|
9
9
|
import { o as isEndSide, i as inheritAriaAttributes, l as assert, e as clamp } from './helpers-HEqiOzXb.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-HEqiOzXb.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 setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-DBQMGaJ9.js';
|
|
11
11
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
12
12
|
import { e as deepReady, w as waitForMount } from './index-B_dQk_WE.js';
|
|
13
13
|
import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
|
|
@@ -330,8 +330,15 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onD
|
|
|
330
330
|
}
|
|
331
331
|
return false;
|
|
332
332
|
};
|
|
333
|
+
/**
|
|
334
|
+
* In Firefox, pressing over a text caret in the focusable wrapper can
|
|
335
|
+
* start a native drag that swallows the gesture's pointer events.
|
|
336
|
+
* Cancel native drag while the gesture is active.
|
|
337
|
+
*/
|
|
338
|
+
const preventNativeDragStart = (ev) => ev.preventDefault();
|
|
333
339
|
const onStart = (detail) => {
|
|
334
340
|
const { deltaY } = detail;
|
|
341
|
+
el.addEventListener('dragstart', preventNativeDragStart);
|
|
335
342
|
/**
|
|
336
343
|
* Get the initial scrollY value so
|
|
337
344
|
* that we can correctly reset the scrollY
|
|
@@ -434,6 +441,7 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onD
|
|
|
434
441
|
onDragMove(eventDetail);
|
|
435
442
|
};
|
|
436
443
|
const onEnd = (detail) => {
|
|
444
|
+
el.removeEventListener('dragstart', preventNativeDragStart);
|
|
437
445
|
const velocity = detail.velocityY;
|
|
438
446
|
const step = detail.deltaY / height;
|
|
439
447
|
const isAttemptingDismissWithCanDismiss = step >= 0 && canDismissBlocksGesture;
|
|
@@ -1216,7 +1224,14 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1216
1224
|
}
|
|
1217
1225
|
return true;
|
|
1218
1226
|
};
|
|
1227
|
+
/**
|
|
1228
|
+
* In Firefox, pressing over a text caret in the focusable wrapper can
|
|
1229
|
+
* start a native drag that swallows the gesture's pointer events.
|
|
1230
|
+
* Cancel native drag while the gesture is active.
|
|
1231
|
+
*/
|
|
1232
|
+
const preventNativeDragStart = (ev) => ev.preventDefault();
|
|
1219
1233
|
const onStart = (detail) => {
|
|
1234
|
+
baseEl.addEventListener('dragstart', preventNativeDragStart);
|
|
1220
1235
|
/**
|
|
1221
1236
|
* If canDismiss is anything other than `true`
|
|
1222
1237
|
* then users should be able to swipe down
|
|
@@ -1343,6 +1358,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1343
1358
|
onDragMove(eventDetail);
|
|
1344
1359
|
};
|
|
1345
1360
|
const onEnd = (detail) => {
|
|
1361
|
+
baseEl.removeEventListener('dragstart', preventNativeDragStart);
|
|
1346
1362
|
const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
|
|
1347
1363
|
const eventDetail = {
|
|
1348
1364
|
currentY: detail.currentY,
|
|
@@ -1819,9 +1835,9 @@ const clearSafeAreaOverrides = (hostEl) => {
|
|
|
1819
1835
|
hostEl.style.removeProperty('--ion-safe-area-right');
|
|
1820
1836
|
};
|
|
1821
1837
|
|
|
1822
|
-
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}}@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-modal-offset-top, 0px) + 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}`;
|
|
1838
|
+
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-wrapper{outline:none}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@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-modal-offset-top, 0px) + 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}`;
|
|
1823
1839
|
|
|
1824
|
-
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}}@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-modal-offset-top, 0px) + 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}`;
|
|
1840
|
+
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-wrapper{outline:none}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@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-modal-offset-top, 0px) + 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}`;
|
|
1825
1841
|
|
|
1826
1842
|
const Modal = class {
|
|
1827
1843
|
constructor(hostRef) {
|
|
@@ -2962,28 +2978,19 @@ const Modal = class {
|
|
|
2962
2978
|
// Allow the modal to be navigable when the handle is focusable
|
|
2963
2979
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
2964
2980
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2965
|
-
}, 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: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), h("div", Object.assign({ key: '
|
|
2981
|
+
}, 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: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), h("div", Object.assign({ key: '4d84bd3a6b7dd0e349aba843f92129000ce90170',
|
|
2966
2982
|
/*
|
|
2967
2983
|
role and aria-modal must be used on the
|
|
2968
2984
|
same element. They must also be set inside the
|
|
2969
2985
|
shadow DOM otherwise ion-button will not be highlighted
|
|
2970
2986
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
2971
2987
|
|
|
2972
|
-
tabIndex={-1}
|
|
2973
|
-
|
|
2974
|
-
the modal opens, so assistive technologies get a focus target
|
|
2975
|
-
that actually carries the dialog's role/label. It is not part
|
|
2976
|
-
of the Tab order since -1 is never Tab-reachable.
|
|
2977
|
-
|
|
2978
|
-
This is only applied to default modals. For sheet and iOS card
|
|
2979
|
-
modals the wrapper doubles as the drag-gesture surface, and
|
|
2980
|
-
leaving focus on that surface interferes with the pointer
|
|
2981
|
-
gesture (most visibly on Firefox). Those modals keep focusing
|
|
2982
|
-
the host as before.
|
|
2988
|
+
tabIndex={-1} lets present() focus this element (which carries
|
|
2989
|
+
the dialog role) instead of the role-less host.
|
|
2983
2990
|
*/
|
|
2984
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex:
|
|
2991
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '498f9fa839c460f9a586904aa0809a8130e1a05d', class: "modal-handle",
|
|
2985
2992
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
2986
|
-
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: '
|
|
2993
|
+
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: '668e769738476faa4f7adfbb03b0e72dad57c22b', onSlotchange: this.onSlotChange }))));
|
|
2987
2994
|
}
|
|
2988
2995
|
get el() { return getElement(this); }
|
|
2989
2996
|
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-tcQvqkiX.js';
|
|
5
|
-
import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays
|
|
5
|
+
import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-DBQMGaJ9.js';
|
|
6
6
|
import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-FnPGymXL.js';
|
|
7
7
|
import { g as getElementRoot, r as raf, f as addEventListener, h as hasLazyBuild } from './helpers-HEqiOzXb.js';
|
|
8
8
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, h, i as forceUpdate, d as Host, g as getElement } from './index-tcQvqkiX.js';
|
|
5
5
|
import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
|
|
6
|
-
import { s as safeCall } from './overlays
|
|
6
|
+
import { s as safeCall } from './overlays-DBQMGaJ9.js';
|
|
7
7
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
8
8
|
import './index-ZjP4CjeZ.js';
|
|
9
9
|
import './helpers-HEqiOzXb.js';
|
|
@@ -6,7 +6,7 @@ import { c as createNotchController } from './notch-controller-DKDjU_O7.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-HEqiOzXb.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-DBQMGaJ9.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-DQCONYYp.js';
|
|
6
6
|
import { g as getElementRoot, r as raf } from './helpers-HEqiOzXb.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, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays
|
|
8
|
+
import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-DBQMGaJ9.js';
|
|
9
9
|
import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
|
|
10
10
|
import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
|
|
11
11
|
import { c as createAnimation } from './animation-DLJpuoEz.js';
|