@ionic/core 8.8.4-dev.11776246162.138c2737 → 8.8.4-dev.11776330355.18181725
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-range.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-tab-bar.js +1 -1
- package/components/ion-toast.js +1 -1
- package/components/p-B6czg-mf.js +4 -0
- package/components/p-BGHaEUgp.js +4 -0
- package/components/{p-CEUppJkx.js → p-BR9Yxas9.js} +1 -1
- package/components/p-Ch9P0ikq.js +4 -0
- package/components/p-GytrfCp8.js +4 -0
- package/components/p-ZeIAjDcZ.js +4 -0
- package/components/{p-B36-MWK0.js → p-iwGbwewM.js} +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +5 -29
- package/dist/cjs/ion-alert.cjs.entry.js +4 -29
- package/dist/cjs/ion-datetime_3.cjs.entry.js +4 -28
- package/dist/cjs/ion-loading.cjs.entry.js +4 -29
- package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-modal.cjs.entry.js +79 -176
- package/dist/cjs/ion-popover.cjs.entry.js +4 -90
- package/dist/cjs/ion-range.cjs.entry.js +8 -5
- 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-tab-bar_2.cjs.entry.js +1 -1
- package/dist/cjs/ion-toast.cjs.entry.js +4 -32
- package/dist/cjs/{overlays-BbhewSIQ.js → overlays-Dhoy6v_5.js} +4 -4
- package/dist/collection/components/action-sheet/action-sheet.js +4 -5
- package/dist/collection/components/alert/alert.js +3 -4
- package/dist/collection/components/loading/loading.js +3 -4
- package/dist/collection/components/modal/gestures/sheet.js +9 -71
- package/dist/collection/components/modal/modal.ionic.css +1 -1
- package/dist/collection/components/modal/modal.js +5 -6
- package/dist/collection/components/picker-legacy/picker.js +3 -4
- package/dist/collection/components/popover/popover.js +3 -4
- package/dist/collection/components/range/range.ionic.css +14 -10
- package/dist/collection/components/range/range.js +7 -4
- package/dist/collection/components/tab-bar/tab-bar.ionic.css +9 -0
- package/dist/collection/components/toast/toast.js +3 -4
- package/dist/collection/utils/overlays.js +5 -5
- package/dist/docs.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +5 -29
- package/dist/esm/ion-alert.entry.js +4 -29
- package/dist/esm/ion-datetime_3.entry.js +4 -28
- package/dist/esm/ion-loading.entry.js +4 -29
- package/dist/esm/ion-menu_3.entry.js +1 -1
- package/dist/esm/ion-modal.entry.js +80 -177
- package/dist/esm/ion-popover.entry.js +4 -90
- package/dist/esm/ion-range.entry.js +8 -5
- package/dist/esm/ion-select-modal.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +1 -1
- package/dist/esm/ion-tab-bar_2.entry.js +1 -1
- package/dist/esm/ion-toast.entry.js +4 -32
- package/dist/esm/{overlays-VA-4NWjf.js → overlays-CvFHfO3y.js} +5 -5
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-bae3ebe5.entry.js → p-2095969c.entry.js} +1 -1
- package/dist/ionic/p-3884bfa4.entry.js +4 -0
- package/dist/ionic/p-4b0f5ffd.entry.js +4 -0
- package/dist/ionic/p-57aeb097.entry.js +4 -0
- package/{components/p-CSexRbnt.js → dist/ionic/p-6be2b2d3.entry.js} +1 -1
- package/dist/ionic/p-6bffc700.entry.js +4 -0
- package/dist/ionic/{p-ba9f8cbb.entry.js → p-9acd3fd3.entry.js} +1 -1
- package/dist/ionic/p-BYtS2rae.js +4 -0
- package/dist/ionic/{p-0cb50208.entry.js → p-a283aa4d.entry.js} +1 -1
- package/dist/ionic/p-d954cd19.entry.js +4 -0
- package/dist/ionic/{p-1efe83c8.entry.js → p-db4f4eaf.entry.js} +1 -1
- package/dist/ionic/p-e9d6ce67.entry.js +4 -0
- package/dist/ionic/p-ef0c281a.entry.js +4 -0
- package/dist/types/components/modal/gestures/sheet.d.ts +1 -1
- package/dist/types/utils/overlays.d.ts +1 -1
- package/hydrate/index.js +110 -416
- package/hydrate/index.mjs +110 -416
- package/package.json +1 -1
- package/components/p-BDPU2685.js +0 -4
- package/components/p-BrNzoF1U.js +0 -4
- package/components/p-DNdBtsfu.js +0 -4
- package/components/p-Njik5v4C.js +0 -4
- package/dist/collection/components/action-sheet/animations/ionic.enter.js +0 -27
- package/dist/collection/components/action-sheet/animations/ionic.leave.js +0 -21
- package/dist/collection/components/alert/animations/ionic.enter.js +0 -28
- package/dist/collection/components/alert/animations/ionic.leave.js +0 -19
- package/dist/collection/components/loading/animations/ionic.enter.js +0 -28
- package/dist/collection/components/loading/animations/ionic.leave.js +0 -22
- package/dist/collection/components/modal/animations/ionic.enter.js +0 -40
- package/dist/collection/components/modal/animations/ionic.leave.js +0 -28
- package/dist/collection/components/picker-legacy/animations/ionic.enter.js +0 -27
- package/dist/collection/components/picker-legacy/animations/ionic.leave.js +0 -23
- package/dist/collection/components/popover/animations/ionic.enter.js +0 -91
- package/dist/collection/components/popover/animations/ionic.leave.js +0 -29
- package/dist/collection/components/toast/animations/ionic.enter.js +0 -33
- package/dist/collection/components/toast/animations/ionic.leave.js +0 -16
- package/dist/ionic/p-07b129d5.entry.js +0 -4
- package/dist/ionic/p-27edb91a.entry.js +0 -4
- package/dist/ionic/p-3d4c8528.entry.js +0 -4
- package/dist/ionic/p-6992d9d6.entry.js +0 -4
- package/dist/ionic/p-9dd4276b.entry.js +0 -4
- package/dist/ionic/p-BExfzy0B.js +0 -4
- package/dist/ionic/p-a3d794ba.entry.js +0 -4
- package/dist/ionic/p-cdfbe4cc.entry.js +0 -4
- package/dist/ionic/p-fa701753.entry.js +0 -4
- package/dist/types/components/action-sheet/animations/ionic.enter.d.ts +0 -5
- package/dist/types/components/action-sheet/animations/ionic.leave.d.ts +0 -5
- package/dist/types/components/alert/animations/ionic.enter.d.ts +0 -5
- package/dist/types/components/alert/animations/ionic.leave.d.ts +0 -5
- package/dist/types/components/loading/animations/ionic.enter.d.ts +0 -5
- package/dist/types/components/loading/animations/ionic.leave.d.ts +0 -5
- package/dist/types/components/modal/animations/ionic.enter.d.ts +0 -6
- package/dist/types/components/modal/animations/ionic.leave.d.ts +0 -6
- package/dist/types/components/picker-legacy/animations/ionic.enter.d.ts +0 -5
- package/dist/types/components/picker-legacy/animations/ionic.leave.d.ts +0 -5
- package/dist/types/components/popover/animations/ionic.enter.d.ts +0 -5
- package/dist/types/components/popover/animations/ionic.leave.d.ts +0 -5
- package/dist/types/components/toast/animations/ionic.enter.d.ts +0 -6
- package/dist/types/components/toast/animations/ionic.leave.d.ts +0 -5
|
@@ -6,7 +6,7 @@ import { c as caretLeftSvg } from './caret-left-fIOYmaqA.js';
|
|
|
6
6
|
import { c as caretRightSvg } from './caret-right-BYSs-jZz.js';
|
|
7
7
|
import { startFocusVisible } from './focus-visible-vXpMhGrs.js';
|
|
8
8
|
import { r as raf, g as getElementRoot, a as renderHiddenInput, e as clamp } from './helpers-Do7zwvM1.js';
|
|
9
|
-
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-
|
|
9
|
+
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-CvFHfO3y.js';
|
|
10
10
|
import { i as isRTL } from './dir-C53feagD.js';
|
|
11
11
|
import { c as createColorClasses, g as getClassMap } from './theme-DaJxRxSQ.js';
|
|
12
12
|
import { o as chevronForward, c as chevronBack, p as caretDownSharp, q as caretUpSharp, l as chevronDown } from './index-COG0_eom.js';
|
|
@@ -2043,30 +2043,6 @@ Datetime.style = {
|
|
|
2043
2043
|
md: datetimeMdCss()
|
|
2044
2044
|
};
|
|
2045
2045
|
|
|
2046
|
-
/**
|
|
2047
|
-
* Ionic Picker Enter Animation
|
|
2048
|
-
*/
|
|
2049
|
-
const ionicEnterAnimation = (baseEl) => {
|
|
2050
|
-
const baseAnimation = createAnimation();
|
|
2051
|
-
const backdropAnimation = createAnimation();
|
|
2052
|
-
const wrapperAnimation = createAnimation();
|
|
2053
|
-
backdropAnimation
|
|
2054
|
-
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
2055
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
2056
|
-
.beforeStyles({
|
|
2057
|
-
'pointer-events': 'none',
|
|
2058
|
-
})
|
|
2059
|
-
.afterClearStyles(['pointer-events']);
|
|
2060
|
-
wrapperAnimation
|
|
2061
|
-
.addElement(baseEl.querySelector('.picker-wrapper'))
|
|
2062
|
-
.fromTo('transform', 'translateY(100%)', 'translateY(0%)');
|
|
2063
|
-
return baseAnimation
|
|
2064
|
-
.addElement(baseEl)
|
|
2065
|
-
.easing('cubic-bezier(.36,.66,.04,1)')
|
|
2066
|
-
.duration(400)
|
|
2067
|
-
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
2068
|
-
};
|
|
2069
|
-
|
|
2070
2046
|
/**
|
|
2071
2047
|
* iOS Picker Enter Animation
|
|
2072
2048
|
*/
|
|
@@ -2232,7 +2208,7 @@ const Picker = class {
|
|
|
2232
2208
|
async present() {
|
|
2233
2209
|
const unlock = await this.lockController.lock();
|
|
2234
2210
|
await this.delegateController.attachViewToDom();
|
|
2235
|
-
await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation,
|
|
2211
|
+
await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
|
|
2236
2212
|
if (this.duration > 0) {
|
|
2237
2213
|
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
|
|
2238
2214
|
}
|
|
@@ -2317,11 +2293,11 @@ const Picker = class {
|
|
|
2317
2293
|
render() {
|
|
2318
2294
|
const { htmlAttributes } = this;
|
|
2319
2295
|
const theme = getIonTheme(this);
|
|
2320
|
-
return (h(Host, Object.assign({ key: '
|
|
2296
|
+
return (h(Host, Object.assign({ key: 'efcc823fad9cb37c1379bef4f4b84c6461f3a3a6', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
|
|
2321
2297
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2322
2298
|
}, class: Object.assign({ [theme]: true,
|
|
2323
2299
|
// Used internally for styling
|
|
2324
|
-
[`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '
|
|
2300
|
+
[`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '3f44bf34e039210ae149c590c393ee9f7fb85da0', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'c2a51a89c525b1a22cbc8583cd30f41c3c356d4f', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '23837ffe309d0aad9b8ea09d7ac94d21040ef0d7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '91ba7e553d570768142715ded4bcc27fceedbce4', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '22661cafeb555f1435ec1e0a122404a48136095b', class: "picker-columns" }, h("div", { key: '5f3db32468b8c60f63c70d81a27b18cce6f2e259', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '1bae6b170125b1671a480506ba73636b42b65909', class: "picker-below-highlight" }))), h("div", { key: '91beb94ce537122fbd6cd0c2bd3c00f908d0fefe', tabindex: "0", "aria-hidden": "true" })));
|
|
2325
2301
|
}
|
|
2326
2302
|
get el() { return getElement(this); }
|
|
2327
2303
|
static get watchers() { return {
|
|
@@ -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-BvDxfLa-.js';
|
|
6
6
|
import { r as raf } from './helpers-Do7zwvM1.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-CvFHfO3y.js';
|
|
9
9
|
import { g as getClassMap } from './theme-DaJxRxSQ.js';
|
|
10
10
|
import { c as getIonTheme } from './ionic-global-CAZb-5i-.js';
|
|
11
11
|
import { c as createAnimation } from './animation-Cqe2x-Pt.js';
|
|
@@ -13,31 +13,6 @@ import './focus-visible-vXpMhGrs.js';
|
|
|
13
13
|
import './framework-delegate-CjVwn_KZ.js';
|
|
14
14
|
import './gesture-controller-BTEOs1at.js';
|
|
15
15
|
|
|
16
|
-
/**
|
|
17
|
-
* Ionic Loading Enter Animation
|
|
18
|
-
*/
|
|
19
|
-
const ionicEnterAnimation = (baseEl) => {
|
|
20
|
-
const baseAnimation = createAnimation();
|
|
21
|
-
const backdropAnimation = createAnimation();
|
|
22
|
-
const wrapperAnimation = createAnimation();
|
|
23
|
-
backdropAnimation
|
|
24
|
-
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
25
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
26
|
-
.beforeStyles({
|
|
27
|
-
'pointer-events': 'none',
|
|
28
|
-
})
|
|
29
|
-
.afterClearStyles(['pointer-events']);
|
|
30
|
-
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')).keyframes([
|
|
31
|
-
{ offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
|
|
32
|
-
{ offset: 1, opacity: 1, transform: 'scale(1)' },
|
|
33
|
-
]);
|
|
34
|
-
return baseAnimation
|
|
35
|
-
.addElement(baseEl)
|
|
36
|
-
.easing('ease-in-out')
|
|
37
|
-
.duration(200)
|
|
38
|
-
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
39
|
-
};
|
|
40
|
-
|
|
41
16
|
/**
|
|
42
17
|
* iOS Loading Enter Animation
|
|
43
18
|
*/
|
|
@@ -244,7 +219,7 @@ const Loading = class {
|
|
|
244
219
|
async present() {
|
|
245
220
|
const unlock = await this.lockController.lock();
|
|
246
221
|
await this.delegateController.attachViewToDom();
|
|
247
|
-
await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation
|
|
222
|
+
await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
|
|
248
223
|
if (this.duration > 0) {
|
|
249
224
|
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
|
|
250
225
|
}
|
|
@@ -302,9 +277,9 @@ const Loading = class {
|
|
|
302
277
|
* Otherwise, don't set aria-labelledby.
|
|
303
278
|
*/
|
|
304
279
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
305
|
-
return (h(Host, Object.assign({ key: '
|
|
280
|
+
return (h(Host, Object.assign({ key: '0c475f8e28e680e28e09317557795fc56e0835d8', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
306
281
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
307
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '
|
|
282
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'd7e88feb6df8edbc326a84d07b294618f7ce6adc', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'f9622f45b2d9e913c325b228a1e6ed03cf2b98e8', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'f4dfdce70c4515878b247d0cc116b5cec2cf79a4', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '6d4475e00c444eb3d217813ae8cc1a02a97b969e', class: "loading-spinner" }, h("ion-spinner", { key: 'd9ad8dd56ec7677c18d06936c1a1b21a0a6a87a8', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'bd3159e18f33ec25d3480d47ce33fa7dfd1f1460', tabindex: "0", "aria-hidden": "true" })));
|
|
308
283
|
}
|
|
309
284
|
get el() { return getElement(this); }
|
|
310
285
|
static get watchers() { return {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, c as createEvent, e as config, j as printIonError, h, d as Host, g as getElement } from './index-Omi_TcwW.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-CvFHfO3y.js';
|
|
7
7
|
import { G as GESTURE_CONTROLLER } from './gesture-controller-BTEOs1at.js';
|
|
8
8
|
import { b as getIonMode, a as isPlatform, c as getIonTheme, s as shouldUseCloseWatcher } from './ionic-global-CAZb-5i-.js';
|
|
9
9
|
import { p as isEndSide, i as inheritAriaAttributes, l as assert, e as clamp } from './helpers-Do7zwvM1.js';
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
import { r as registerInstance, c as createEvent, f as printIonWarning, w as writeTask, e as config, h, d as Host, g as getElement } from './index-Omi_TcwW.js';
|
|
5
5
|
import { f as findClosestIonContent, i as isIonContent, d as disableContentScrollY, r as resetContentScrollY, a as findIonContent, p as printIonContentErrorMsg } from './index-BmkLokUL.js';
|
|
6
6
|
import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-CjVwn_KZ.js';
|
|
7
|
-
import {
|
|
7
|
+
import { e as clamp, g as getElementRoot, r as raf, b as inheritAttributes, h as hasLazyBuild } from './helpers-Do7zwvM1.js';
|
|
8
8
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
9
9
|
import { g as getCapacitor } from './capacitor-C4lYa1nV.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-CvFHfO3y.js';
|
|
11
11
|
import { g as getClassMap } from './theme-DaJxRxSQ.js';
|
|
12
12
|
import { e as deepReady, w as waitForMount } from './index-CGthURny.js';
|
|
13
13
|
import { w as win, b as getIonMode, c as getIonTheme } from './ionic-global-CAZb-5i-.js';
|
|
@@ -126,104 +126,6 @@ const setCardStatusBarDefault = (defaultStyle = Style.Default) => {
|
|
|
126
126
|
StatusBar.setStyle({ style: defaultStyle });
|
|
127
127
|
};
|
|
128
128
|
|
|
129
|
-
const createSheetEnterAnimation = (opts) => {
|
|
130
|
-
const { currentBreakpoint, backdropBreakpoint, expandToScroll, staticBackdropOpacity } = opts;
|
|
131
|
-
/**
|
|
132
|
-
* If the backdropBreakpoint is undefined, then the backdrop
|
|
133
|
-
* should always fade in. If the backdropBreakpoint came before the
|
|
134
|
-
* current breakpoint, then the backdrop should be fading in.
|
|
135
|
-
*/
|
|
136
|
-
const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
|
|
137
|
-
let initialBackdrop = '0';
|
|
138
|
-
if (staticBackdropOpacity) {
|
|
139
|
-
initialBackdrop = 'calc(var(--backdrop-opacity)';
|
|
140
|
-
}
|
|
141
|
-
else if (shouldShowBackdrop) {
|
|
142
|
-
initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint})`;
|
|
143
|
-
}
|
|
144
|
-
const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
|
|
145
|
-
if (shouldShowBackdrop) {
|
|
146
|
-
backdropAnimation
|
|
147
|
-
.beforeStyles({
|
|
148
|
-
'pointer-events': 'none',
|
|
149
|
-
})
|
|
150
|
-
.afterClearStyles(['pointer-events']);
|
|
151
|
-
}
|
|
152
|
-
const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
|
|
153
|
-
{ offset: 0, opacity: 1, transform: 'translateY(100%)' },
|
|
154
|
-
{ offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
155
|
-
]);
|
|
156
|
-
/**
|
|
157
|
-
* This allows the content to be scrollable at any breakpoint.
|
|
158
|
-
*/
|
|
159
|
-
const contentAnimation = !expandToScroll
|
|
160
|
-
? createAnimation('contentAnimation').keyframes([
|
|
161
|
-
{ offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
|
|
162
|
-
{ offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
|
|
163
|
-
])
|
|
164
|
-
: undefined;
|
|
165
|
-
return { wrapperAnimation, backdropAnimation, contentAnimation };
|
|
166
|
-
};
|
|
167
|
-
const createSheetLeaveAnimation = (opts) => {
|
|
168
|
-
const { currentBreakpoint, backdropBreakpoint } = opts;
|
|
169
|
-
/**
|
|
170
|
-
* Backdrop does not always fade in from 0 to 1 if backdropBreakpoint
|
|
171
|
-
* is defined, so we need to account for that offset by figuring out
|
|
172
|
-
* what the current backdrop value should be.
|
|
173
|
-
*/
|
|
174
|
-
const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint, backdropBreakpoint)})`;
|
|
175
|
-
const defaultBackdrop = [
|
|
176
|
-
{ offset: 0, opacity: backdropValue },
|
|
177
|
-
{ offset: 1, opacity: 0 },
|
|
178
|
-
];
|
|
179
|
-
const customBackdrop = [
|
|
180
|
-
{ offset: 0, opacity: backdropValue },
|
|
181
|
-
{ offset: backdropBreakpoint, opacity: 0 },
|
|
182
|
-
{ offset: 1, opacity: 0 },
|
|
183
|
-
];
|
|
184
|
-
const backdropAnimation = createAnimation('backdropAnimation').keyframes(backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop);
|
|
185
|
-
const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
|
|
186
|
-
{ offset: 0, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
187
|
-
{ offset: 1, opacity: 1, transform: `translateY(100%)` },
|
|
188
|
-
]);
|
|
189
|
-
return { wrapperAnimation, backdropAnimation };
|
|
190
|
-
};
|
|
191
|
-
|
|
192
|
-
const createEnterAnimation$2 = () => {
|
|
193
|
-
const backdropAnimation = createAnimation()
|
|
194
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
195
|
-
.beforeStyles({
|
|
196
|
-
'pointer-events': 'none',
|
|
197
|
-
})
|
|
198
|
-
.afterClearStyles(['pointer-events']);
|
|
199
|
-
const wrapperAnimation = createAnimation().keyframes([
|
|
200
|
-
{ offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
|
|
201
|
-
{ offset: 1, opacity: 1, transform: `translateY(0px)` },
|
|
202
|
-
]);
|
|
203
|
-
return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
|
|
204
|
-
};
|
|
205
|
-
/**
|
|
206
|
-
* Ionic Modal Enter Animation
|
|
207
|
-
*/
|
|
208
|
-
const ionicEnterAnimation = (baseEl, opts) => {
|
|
209
|
-
const { currentBreakpoint, expandToScroll } = opts;
|
|
210
|
-
const root = getElementRoot(baseEl);
|
|
211
|
-
const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$2();
|
|
212
|
-
backdropAnimation.addElement(root.querySelector('ion-backdrop'));
|
|
213
|
-
wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
|
|
214
|
-
// The content animation is only added if scrolling is enabled for
|
|
215
|
-
// all the breakpoints.
|
|
216
|
-
!expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
|
|
217
|
-
backdropAnimation.duration(300).easing('ease-out');
|
|
218
|
-
wrapperAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
|
|
219
|
-
contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
|
|
220
|
-
const baseAnimation = createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
|
|
221
|
-
if (contentAnimation) {
|
|
222
|
-
baseAnimation.addAnimation(contentAnimation);
|
|
223
|
-
}
|
|
224
|
-
return baseAnimation;
|
|
225
|
-
};
|
|
226
|
-
|
|
227
129
|
const handleCanDismiss = async (el, animation) => {
|
|
228
130
|
/**
|
|
229
131
|
* If canDismiss is not a function
|
|
@@ -650,6 +552,69 @@ const calculateProgress = (el, deltaY) => {
|
|
|
650
552
|
return Math.max(0, Math.min(1, roundedProgress));
|
|
651
553
|
};
|
|
652
554
|
|
|
555
|
+
const createSheetEnterAnimation = (opts) => {
|
|
556
|
+
const { currentBreakpoint, backdropBreakpoint, expandToScroll, staticBackdropOpacity } = opts;
|
|
557
|
+
/**
|
|
558
|
+
* If the backdropBreakpoint is undefined, then the backdrop
|
|
559
|
+
* should always fade in. If the backdropBreakpoint came before the
|
|
560
|
+
* current breakpoint, then the backdrop should be fading in.
|
|
561
|
+
*/
|
|
562
|
+
const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
|
|
563
|
+
let initialBackdrop = '0';
|
|
564
|
+
if (staticBackdropOpacity) {
|
|
565
|
+
initialBackdrop = 'calc(var(--backdrop-opacity)';
|
|
566
|
+
}
|
|
567
|
+
else if (shouldShowBackdrop) {
|
|
568
|
+
initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint})`;
|
|
569
|
+
}
|
|
570
|
+
const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
|
|
571
|
+
if (shouldShowBackdrop) {
|
|
572
|
+
backdropAnimation
|
|
573
|
+
.beforeStyles({
|
|
574
|
+
'pointer-events': 'none',
|
|
575
|
+
})
|
|
576
|
+
.afterClearStyles(['pointer-events']);
|
|
577
|
+
}
|
|
578
|
+
const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
|
|
579
|
+
{ offset: 0, opacity: 1, transform: 'translateY(100%)' },
|
|
580
|
+
{ offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
581
|
+
]);
|
|
582
|
+
/**
|
|
583
|
+
* This allows the content to be scrollable at any breakpoint.
|
|
584
|
+
*/
|
|
585
|
+
const contentAnimation = !expandToScroll
|
|
586
|
+
? createAnimation('contentAnimation').keyframes([
|
|
587
|
+
{ offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
|
|
588
|
+
{ offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
|
|
589
|
+
])
|
|
590
|
+
: undefined;
|
|
591
|
+
return { wrapperAnimation, backdropAnimation, contentAnimation };
|
|
592
|
+
};
|
|
593
|
+
const createSheetLeaveAnimation = (opts) => {
|
|
594
|
+
const { currentBreakpoint, backdropBreakpoint } = opts;
|
|
595
|
+
/**
|
|
596
|
+
* Backdrop does not always fade in from 0 to 1 if backdropBreakpoint
|
|
597
|
+
* is defined, so we need to account for that offset by figuring out
|
|
598
|
+
* what the current backdrop value should be.
|
|
599
|
+
*/
|
|
600
|
+
const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint, backdropBreakpoint)})`;
|
|
601
|
+
const defaultBackdrop = [
|
|
602
|
+
{ offset: 0, opacity: backdropValue },
|
|
603
|
+
{ offset: 1, opacity: 0 },
|
|
604
|
+
];
|
|
605
|
+
const customBackdrop = [
|
|
606
|
+
{ offset: 0, opacity: backdropValue },
|
|
607
|
+
{ offset: backdropBreakpoint, opacity: 0 },
|
|
608
|
+
{ offset: 1, opacity: 0 },
|
|
609
|
+
];
|
|
610
|
+
const backdropAnimation = createAnimation('backdropAnimation').keyframes(backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop);
|
|
611
|
+
const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
|
|
612
|
+
{ offset: 0, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
613
|
+
{ offset: 1, opacity: 1, transform: `translateY(100%)` },
|
|
614
|
+
]);
|
|
615
|
+
return { wrapperAnimation, backdropAnimation };
|
|
616
|
+
};
|
|
617
|
+
|
|
653
618
|
const createEnterAnimation$1 = () => {
|
|
654
619
|
const backdropAnimation = createAnimation()
|
|
655
620
|
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
@@ -1040,16 +1005,16 @@ const mdLeaveAnimation = (baseEl, opts) => {
|
|
|
1040
1005
|
return baseAnimation;
|
|
1041
1006
|
};
|
|
1042
1007
|
|
|
1043
|
-
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange,
|
|
1008
|
+
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, staticBackdropOpacity, onDragStart, onDragMove, onDragEnd) => {
|
|
1044
1009
|
// Defaults for the sheet swipe animation
|
|
1045
1010
|
const defaultBackdrop = [
|
|
1046
1011
|
{ offset: 0, opacity: 'var(--backdrop-opacity)' },
|
|
1047
|
-
{ offset: 1, opacity:
|
|
1012
|
+
{ offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0.01 },
|
|
1048
1013
|
];
|
|
1049
1014
|
const customBackdrop = [
|
|
1050
1015
|
{ offset: 0, opacity: 'var(--backdrop-opacity)' },
|
|
1051
|
-
{ offset: 1 - backdropBreakpoint, opacity:
|
|
1052
|
-
{ offset: 1, opacity:
|
|
1016
|
+
{ offset: 1 - backdropBreakpoint, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
|
|
1017
|
+
{ offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
|
|
1053
1018
|
];
|
|
1054
1019
|
const SheetDefaults = {
|
|
1055
1020
|
WRAPPER_KEYFRAMES: [
|
|
@@ -1372,9 +1337,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1372
1337
|
: step;
|
|
1373
1338
|
offset = clamp(0.0001, processedStep, maxStep);
|
|
1374
1339
|
animation.progressStep(offset);
|
|
1375
|
-
const snapBreakpoint =
|
|
1376
|
-
? calculateIonicSnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
|
|
1377
|
-
: calculateSnapBreakpoint(detail.deltaY);
|
|
1340
|
+
const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
|
|
1378
1341
|
const eventDetail = {
|
|
1379
1342
|
currentY: detail.currentY,
|
|
1380
1343
|
deltaY: detail.deltaY,
|
|
@@ -1385,9 +1348,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1385
1348
|
onDragMove(eventDetail);
|
|
1386
1349
|
};
|
|
1387
1350
|
const onEnd = (detail) => {
|
|
1388
|
-
const snapBreakpoint =
|
|
1389
|
-
? calculateIonicSnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
|
|
1390
|
-
: calculateSnapBreakpoint(detail.deltaY);
|
|
1351
|
+
const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
|
|
1391
1352
|
const eventDetail = {
|
|
1392
1353
|
currentY: detail.currentY,
|
|
1393
1354
|
deltaY: detail.deltaY,
|
|
@@ -1434,14 +1395,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1434
1395
|
*/
|
|
1435
1396
|
const shouldPreventDismiss = canDismiss && breakpoint === 0;
|
|
1436
1397
|
const snapToBreakpoint = shouldPreventDismiss ? currentBreakpoint : breakpoint;
|
|
1437
|
-
/**
|
|
1438
|
-
* Detect snap-back behavior: when the snap target is the same as the current breakpoint,
|
|
1439
|
-
* the user released before crossing the threshold to a new breakpoint.
|
|
1440
|
-
* Apply different timing and easing for snap-back vs. snap-to-new.
|
|
1441
|
-
*/
|
|
1442
|
-
const isSnapBack = snapToBreakpoint === currentBreakpoint;
|
|
1443
|
-
const duration = isIonicTheme ? (isSnapBack ? 300 : 400) : 500;
|
|
1444
|
-
const easing = isSnapBack ? 'cubic-bezier(0.34, 1.4, 0.64, 1)' : 'cubic-bezier(0.32, 0.68, 0, 1)';
|
|
1445
1398
|
const shouldRemainOpen = snapToBreakpoint !== 0;
|
|
1446
1399
|
currentBreakpoint = 0;
|
|
1447
1400
|
/**
|
|
@@ -1456,13 +1409,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1456
1409
|
backdropAnimation.keyframes([
|
|
1457
1410
|
{
|
|
1458
1411
|
offset: 0,
|
|
1459
|
-
opacity:
|
|
1412
|
+
opacity: staticBackdropOpacity
|
|
1460
1413
|
? 'var(--backdrop-opacity)'
|
|
1461
1414
|
: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(1 - breakpointOffset, backdropBreakpoint)})`,
|
|
1462
1415
|
},
|
|
1463
1416
|
{
|
|
1464
1417
|
offset: 1,
|
|
1465
|
-
opacity:
|
|
1418
|
+
opacity: staticBackdropOpacity
|
|
1466
1419
|
? 'var(--backdrop-opacity)'
|
|
1467
1420
|
: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
|
|
1468
1421
|
},
|
|
@@ -1482,12 +1435,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1482
1435
|
}
|
|
1483
1436
|
animation.progressStep(0);
|
|
1484
1437
|
}
|
|
1485
|
-
/**
|
|
1486
|
-
* Apply the appropriate easing curve for this snap behavior.
|
|
1487
|
-
*/
|
|
1488
|
-
if (isIonicTheme) {
|
|
1489
|
-
animation.easing(easing);
|
|
1490
|
-
}
|
|
1491
1438
|
/**
|
|
1492
1439
|
* Gesture should remain disabled until the
|
|
1493
1440
|
* snapping animation completes.
|
|
@@ -1577,7 +1524,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1577
1524
|
* be added every time onEnd runs.
|
|
1578
1525
|
*/
|
|
1579
1526
|
}, { oneTimeCallback: true })
|
|
1580
|
-
.progressEnd(1, 0, animated ?
|
|
1527
|
+
.progressEnd(1, 0, animated ? 500 : 0);
|
|
1581
1528
|
});
|
|
1582
1529
|
};
|
|
1583
1530
|
/**
|
|
@@ -1608,50 +1555,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1608
1555
|
});
|
|
1609
1556
|
return snapBreakpoint;
|
|
1610
1557
|
};
|
|
1611
|
-
/**
|
|
1612
|
-
* Calculates the Ionic-specific snap breakpoint using velocity-based logic.
|
|
1613
|
-
* This provides a more intuitive and responsive sheet behavior for the Ionic theme.
|
|
1614
|
-
*
|
|
1615
|
-
* Rules:
|
|
1616
|
-
* 1. Fast downward flick (> 500 px/s) always dismisses, regardless of position
|
|
1617
|
-
* 2. Fast upward flick (> 400 px/s) snaps to the next breakpoint above
|
|
1618
|
-
* 3. If dragged 40% below current snap point without fast upward flick, dismisses
|
|
1619
|
-
* 4. Otherwise, falls back to position-based snap (closest breakpoint)
|
|
1620
|
-
*
|
|
1621
|
-
* @param deltaY The change in Y position since gesture started
|
|
1622
|
-
* @param velocityY The velocity in pixels per millisecond
|
|
1623
|
-
* @param currentY The current Y position of the gesture
|
|
1624
|
-
* @returns The snap breakpoint value
|
|
1625
|
-
*/
|
|
1626
|
-
const calculateIonicSnapBreakpoint = (deltaY, velocityY, currentY) => {
|
|
1627
|
-
// Convert velocity from px/ms to px/s for easier threshold comparison
|
|
1628
|
-
const velocityYPerSecond = velocityY * 1000;
|
|
1629
|
-
// Calculate current progress (0 = fully closed, 1 = fully expanded)
|
|
1630
|
-
const currentProgress = calculateProgress(currentY);
|
|
1631
|
-
// Rule 1: Fast downward flick always dismisses
|
|
1632
|
-
if (velocityYPerSecond > 500) {
|
|
1633
|
-
return minBreakpoint;
|
|
1634
|
-
}
|
|
1635
|
-
// Rule 2: Fast upward flick moves to next breakpoint above
|
|
1636
|
-
if (velocityYPerSecond < -400) {
|
|
1637
|
-
// Find next breakpoint above current position
|
|
1638
|
-
const nextBreakpoint = breakpoints.find((bp) => bp > currentProgress);
|
|
1639
|
-
// If no breakpoint above, stay at max breakpoint
|
|
1640
|
-
return nextBreakpoint !== null && nextBreakpoint !== void 0 ? nextBreakpoint : maxBreakpoint;
|
|
1641
|
-
}
|
|
1642
|
-
// Rule 3: 40% dismissal rule (only if not flicking up and 0 breakpoint exists)
|
|
1643
|
-
if (minBreakpoint === 0 && currentBreakpoint > 0) {
|
|
1644
|
-
// Calculate how far we've moved below the current snap point
|
|
1645
|
-
const distanceBelowSnap = currentBreakpoint - currentProgress;
|
|
1646
|
-
const percentageBelowSnap = distanceBelowSnap / currentBreakpoint;
|
|
1647
|
-
// If dragged more than 40% below and not flicking up, dismiss
|
|
1648
|
-
if (percentageBelowSnap > 0.4 && velocityYPerSecond <= 400) {
|
|
1649
|
-
return 0;
|
|
1650
|
-
}
|
|
1651
|
-
}
|
|
1652
|
-
// Rule 4: Fallback to position-based snap (existing logic)
|
|
1653
|
-
return calculateSnapBreakpoint(deltaY);
|
|
1654
|
-
};
|
|
1655
1558
|
/**
|
|
1656
1559
|
* Calculates the progress of the swipe gesture.
|
|
1657
1560
|
*
|
|
@@ -1900,7 +1803,7 @@ const clearSafeAreaOverrides = (hostEl) => {
|
|
|
1900
1803
|
hostEl.style.removeProperty('--ion-safe-area-right');
|
|
1901
1804
|
};
|
|
1902
1805
|
|
|
1903
|
-
const modalIonicCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-width:0;--border-style:none;--border-color:transparent;--box-shadow:none;right:0;left: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;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}.modal-handle{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;cursor:pointer;z-index:11}.modal-handle::before{position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}: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{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--box-shadow:var(--token-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16));--backdrop-opacity:
|
|
1806
|
+
const modalIonicCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-width:0;--border-style:none;--border-color:transparent;--box-shadow:none;right:0;left: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;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}.modal-handle{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;cursor:pointer;z-index:11}.modal-handle::before{position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}: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{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--box-shadow:var(--token-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16));--backdrop-opacity:1;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424))}:host(.modal-round){--border-radius:var(--token-border-radius-1000, var(--token-scale-1000, 40px))}:host(.modal-soft){--border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}:host(.modal-rectangular){--border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}:host(.select-modal.modal-default){--max-height:45%;--max-width:calc(100% - (var(--token-space-400, var(--token-scale-400, 16px)) * 2));--min-height:340px}.modal-handle{right:0px;left:0px;top:var(--token-space-300, var(--token-scale-300, 12px));border-radius:var(--token-border-radius-100, var(--token-scale-100, 4px));width:var(--token-scale-1100, 44px);height:var(--token-scale-100, 4px);background-color:var(--token-primitives-neutral-300, #e0e0e0)}.modal-handle::before{-webkit-padding-start:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-padding-end:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-end:var(--token-space-100, var(--token-scale-100, 4px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}: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}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + var(--token-scale-250, 10px)))}`;
|
|
1904
1807
|
|
|
1905
1808
|
const modalIosCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-width:0;--border-style:none;--border-color:transparent;--box-shadow:none;right:0;left: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;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}.modal-handle{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;cursor:pointer;z-index:11}.modal-handle::before{position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}: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{--background:var(--ion-background-color, #fff);--border-radius:0;--backdrop-opacity:0;color:var(--ion-text-color, #000)}@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{right:0px;left:0px;top:5px;border-radius:8px;width:36px;height:5px;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be))}.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;width:36px;height:5px}:host(.modal-sheet){--height:calc(100% - (var(--ion-modal-offset-top, 0px) + 10px))}: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}`;
|
|
1906
1809
|
|
|
@@ -2340,7 +2243,7 @@ const Modal = class {
|
|
|
2340
2243
|
this.statusBarStyle = await StatusBar.getStyle();
|
|
2341
2244
|
setCardStatusBarDark();
|
|
2342
2245
|
}
|
|
2343
|
-
await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation,
|
|
2246
|
+
await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
|
|
2344
2247
|
presentingEl: presentingElement,
|
|
2345
2248
|
currentBreakpoint: this.initialBreakpoint,
|
|
2346
2249
|
backdropBreakpoint: this.backdropBreakpoint,
|
|
@@ -3027,20 +2930,20 @@ const Modal = class {
|
|
|
3027
2930
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
3028
2931
|
const shape = this.getShape();
|
|
3029
2932
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
3030
|
-
return (h(Host, Object.assign({ key: '
|
|
2933
|
+
return (h(Host, Object.assign({ key: '4b323edb66d28260c34b31fd2af8f4ae53a7ef90', "no-router": true,
|
|
3031
2934
|
// Allow the modal to be navigable when the handle is focusable
|
|
3032
2935
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
3033
2936
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
3034
|
-
}, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`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: '
|
|
2937
|
+
}, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`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: '6059e348dc3d020f995577dde1b7949bdb2c0f2f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && h("div", { key: '5a08a99dfc3de51ac7516fc76fdba3672f84db71', class: "modal-shadow" }), h("div", Object.assign({ key: 'a7a841a5b2f740fbf576b82b82782aa235b701ee',
|
|
3035
2938
|
/*
|
|
3036
2939
|
role and aria-modal must be used on the
|
|
3037
2940
|
same element. They must also be set inside the
|
|
3038
2941
|
shadow DOM otherwise ion-button will not be highlighted
|
|
3039
2942
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
3040
2943
|
*/
|
|
3041
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '
|
|
2944
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'ca5567e9ab3e9e80b41314d396106faf2da09ffe', class: "modal-handle",
|
|
3042
2945
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
3043
|
-
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: '
|
|
2946
|
+
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: 'da5471ea4292166798d3f949e79e7b3e55a0e83f', onSlotchange: this.onSlotChange }))));
|
|
3044
2947
|
}
|
|
3045
2948
|
get el() { return getElement(this); }
|
|
3046
2949
|
static get watchers() { return {
|