@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
|
@@ -8,7 +8,7 @@ var caretLeft = require('./caret-left-CxZXLRv5.js');
|
|
|
8
8
|
var caretRight = require('./caret-right-CRCgv98E.js');
|
|
9
9
|
var focusVisible = require('./focus-visible-BIj-I3-C.js');
|
|
10
10
|
var helpers = require('./helpers-DJYxKN5U.js');
|
|
11
|
-
var overlays = require('./overlays-
|
|
11
|
+
var overlays = require('./overlays-Dhoy6v_5.js');
|
|
12
12
|
var dir = require('./dir-Cn0z1rJH.js');
|
|
13
13
|
var theme = require('./theme-IlOsGAz7.js');
|
|
14
14
|
var index$1 = require('./index-DqmRDbxg.js');
|
|
@@ -2045,30 +2045,6 @@ Datetime.style = {
|
|
|
2045
2045
|
md: datetimeMdCss()
|
|
2046
2046
|
};
|
|
2047
2047
|
|
|
2048
|
-
/**
|
|
2049
|
-
* Ionic Picker Enter Animation
|
|
2050
|
-
*/
|
|
2051
|
-
const ionicEnterAnimation = (baseEl) => {
|
|
2052
|
-
const baseAnimation = animation.createAnimation();
|
|
2053
|
-
const backdropAnimation = animation.createAnimation();
|
|
2054
|
-
const wrapperAnimation = animation.createAnimation();
|
|
2055
|
-
backdropAnimation
|
|
2056
|
-
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
2057
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
2058
|
-
.beforeStyles({
|
|
2059
|
-
'pointer-events': 'none',
|
|
2060
|
-
})
|
|
2061
|
-
.afterClearStyles(['pointer-events']);
|
|
2062
|
-
wrapperAnimation
|
|
2063
|
-
.addElement(baseEl.querySelector('.picker-wrapper'))
|
|
2064
|
-
.fromTo('transform', 'translateY(100%)', 'translateY(0%)');
|
|
2065
|
-
return baseAnimation
|
|
2066
|
-
.addElement(baseEl)
|
|
2067
|
-
.easing('cubic-bezier(.36,.66,.04,1)')
|
|
2068
|
-
.duration(400)
|
|
2069
|
-
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
2070
|
-
};
|
|
2071
|
-
|
|
2072
2048
|
/**
|
|
2073
2049
|
* iOS Picker Enter Animation
|
|
2074
2050
|
*/
|
|
@@ -2234,7 +2210,7 @@ const Picker = class {
|
|
|
2234
2210
|
async present() {
|
|
2235
2211
|
const unlock = await this.lockController.lock();
|
|
2236
2212
|
await this.delegateController.attachViewToDom();
|
|
2237
|
-
await overlays.present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation,
|
|
2213
|
+
await overlays.present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
|
|
2238
2214
|
if (this.duration > 0) {
|
|
2239
2215
|
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
|
|
2240
2216
|
}
|
|
@@ -2319,11 +2295,11 @@ const Picker = class {
|
|
|
2319
2295
|
render() {
|
|
2320
2296
|
const { htmlAttributes } = this;
|
|
2321
2297
|
const theme$1 = ionicGlobal.getIonTheme(this);
|
|
2322
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
2298
|
+
return (index.h(index.Host, Object.assign({ key: 'efcc823fad9cb37c1379bef4f4b84c6461f3a3a6', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
|
|
2323
2299
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2324
2300
|
}, class: Object.assign({ [theme$1]: true,
|
|
2325
2301
|
// Used internally for styling
|
|
2326
|
-
[`picker-${theme$1}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index.h("ion-backdrop", { key: '
|
|
2302
|
+
[`picker-${theme$1}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index.h("ion-backdrop", { key: '3f44bf34e039210ae149c590c393ee9f7fb85da0', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: 'c2a51a89c525b1a22cbc8583cd30f41c3c356d4f', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: '23837ffe309d0aad9b8ea09d7ac94d21040ef0d7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index.h("div", { key: '91ba7e553d570768142715ded4bcc27fceedbce4', class: "picker-toolbar" }, this.buttons.map((b) => (index.h("div", { class: buttonWrapperClass(b) }, index.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index.h("div", { key: '22661cafeb555f1435ec1e0a122404a48136095b', class: "picker-columns" }, index.h("div", { key: '5f3db32468b8c60f63c70d81a27b18cce6f2e259', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index.h("ion-picker-legacy-column", { col: c })), index.h("div", { key: '1bae6b170125b1671a480506ba73636b42b65909', class: "picker-below-highlight" }))), index.h("div", { key: '91beb94ce537122fbd6cd0c2bd3c00f908d0fefe', tabindex: "0", "aria-hidden": "true" })));
|
|
2327
2303
|
}
|
|
2328
2304
|
get el() { return index.getElement(this); }
|
|
2329
2305
|
static get watchers() { return {
|
|
@@ -7,7 +7,7 @@ var index = require('./index-CzcLEdQ5.js');
|
|
|
7
7
|
var config = require('./config-B0utyWaD.js');
|
|
8
8
|
var helpers = require('./helpers-DJYxKN5U.js');
|
|
9
9
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
10
|
-
var overlays = require('./overlays-
|
|
10
|
+
var overlays = require('./overlays-Dhoy6v_5.js');
|
|
11
11
|
var theme = require('./theme-IlOsGAz7.js');
|
|
12
12
|
var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
|
|
13
13
|
var animation = require('./animation-DknMeJ3x.js');
|
|
@@ -15,31 +15,6 @@ require('./focus-visible-BIj-I3-C.js');
|
|
|
15
15
|
require('./framework-delegate-Dx9FrqAC.js');
|
|
16
16
|
require('./gesture-controller-dtqlP_q4.js');
|
|
17
17
|
|
|
18
|
-
/**
|
|
19
|
-
* Ionic Loading Enter Animation
|
|
20
|
-
*/
|
|
21
|
-
const ionicEnterAnimation = (baseEl) => {
|
|
22
|
-
const baseAnimation = animation.createAnimation();
|
|
23
|
-
const backdropAnimation = animation.createAnimation();
|
|
24
|
-
const wrapperAnimation = animation.createAnimation();
|
|
25
|
-
backdropAnimation
|
|
26
|
-
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
27
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
28
|
-
.beforeStyles({
|
|
29
|
-
'pointer-events': 'none',
|
|
30
|
-
})
|
|
31
|
-
.afterClearStyles(['pointer-events']);
|
|
32
|
-
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')).keyframes([
|
|
33
|
-
{ offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
|
|
34
|
-
{ offset: 1, opacity: 1, transform: 'scale(1)' },
|
|
35
|
-
]);
|
|
36
|
-
return baseAnimation
|
|
37
|
-
.addElement(baseEl)
|
|
38
|
-
.easing('ease-in-out')
|
|
39
|
-
.duration(200)
|
|
40
|
-
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
41
|
-
};
|
|
42
|
-
|
|
43
18
|
/**
|
|
44
19
|
* iOS Loading Enter Animation
|
|
45
20
|
*/
|
|
@@ -246,7 +221,7 @@ const Loading = class {
|
|
|
246
221
|
async present() {
|
|
247
222
|
const unlock = await this.lockController.lock();
|
|
248
223
|
await this.delegateController.attachViewToDom();
|
|
249
|
-
await overlays.present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation
|
|
224
|
+
await overlays.present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
|
|
250
225
|
if (this.duration > 0) {
|
|
251
226
|
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
|
|
252
227
|
}
|
|
@@ -304,9 +279,9 @@ const Loading = class {
|
|
|
304
279
|
* Otherwise, don't set aria-labelledby.
|
|
305
280
|
*/
|
|
306
281
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
307
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
282
|
+
return (index.h(index.Host, Object.assign({ key: '0c475f8e28e680e28e09317557795fc56e0835d8', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
308
283
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
309
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [theme$1]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), index.h("ion-backdrop", { key: '
|
|
284
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [theme$1]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), index.h("ion-backdrop", { key: 'd7e88feb6df8edbc326a84d07b294618f7ce6adc', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: 'f9622f45b2d9e913c325b228a1e6ed03cf2b98e8', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: 'f4dfdce70c4515878b247d0cc116b5cec2cf79a4', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (index.h("div", { key: '6d4475e00c444eb3d217813ae8cc1a02a97b969e', class: "loading-spinner" }, index.h("ion-spinner", { key: 'd9ad8dd56ec7677c18d06936c1a1b21a0a6a87a8', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), index.h("div", { key: 'bd3159e18f33ec25d3480d47ce33fa7dfd1f1460', tabindex: "0", "aria-hidden": "true" })));
|
|
310
285
|
}
|
|
311
286
|
get el() { return index.getElement(this); }
|
|
312
287
|
static get watchers() { return {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
var index = require('./index-CzcLEdQ5.js');
|
|
7
7
|
var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
|
|
8
|
-
var overlays = require('./overlays-
|
|
8
|
+
var overlays = require('./overlays-Dhoy6v_5.js');
|
|
9
9
|
var gestureController = require('./gesture-controller-dtqlP_q4.js');
|
|
10
10
|
var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
|
|
11
11
|
var helpers = require('./helpers-DJYxKN5U.js');
|
|
@@ -9,7 +9,7 @@ var frameworkDelegate = require('./framework-delegate-Dx9FrqAC.js');
|
|
|
9
9
|
var helpers = require('./helpers-DJYxKN5U.js');
|
|
10
10
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
11
11
|
var capacitor = require('./capacitor-BnRBm_ys.js');
|
|
12
|
-
var overlays = require('./overlays-
|
|
12
|
+
var overlays = require('./overlays-Dhoy6v_5.js');
|
|
13
13
|
var theme = require('./theme-IlOsGAz7.js');
|
|
14
14
|
var index$3 = require('./index-D_mPAIqF.js');
|
|
15
15
|
var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
|
|
@@ -128,104 +128,6 @@ const setCardStatusBarDefault = (defaultStyle = Style.Default) => {
|
|
|
128
128
|
StatusBar.setStyle({ style: defaultStyle });
|
|
129
129
|
};
|
|
130
130
|
|
|
131
|
-
const createSheetEnterAnimation = (opts) => {
|
|
132
|
-
const { currentBreakpoint, backdropBreakpoint, expandToScroll, staticBackdropOpacity } = opts;
|
|
133
|
-
/**
|
|
134
|
-
* If the backdropBreakpoint is undefined, then the backdrop
|
|
135
|
-
* should always fade in. If the backdropBreakpoint came before the
|
|
136
|
-
* current breakpoint, then the backdrop should be fading in.
|
|
137
|
-
*/
|
|
138
|
-
const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
|
|
139
|
-
let initialBackdrop = '0';
|
|
140
|
-
if (staticBackdropOpacity) {
|
|
141
|
-
initialBackdrop = 'calc(var(--backdrop-opacity)';
|
|
142
|
-
}
|
|
143
|
-
else if (shouldShowBackdrop) {
|
|
144
|
-
initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint})`;
|
|
145
|
-
}
|
|
146
|
-
const backdropAnimation = animation.createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
|
|
147
|
-
if (shouldShowBackdrop) {
|
|
148
|
-
backdropAnimation
|
|
149
|
-
.beforeStyles({
|
|
150
|
-
'pointer-events': 'none',
|
|
151
|
-
})
|
|
152
|
-
.afterClearStyles(['pointer-events']);
|
|
153
|
-
}
|
|
154
|
-
const wrapperAnimation = animation.createAnimation('wrapperAnimation').keyframes([
|
|
155
|
-
{ offset: 0, opacity: 1, transform: 'translateY(100%)' },
|
|
156
|
-
{ offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
157
|
-
]);
|
|
158
|
-
/**
|
|
159
|
-
* This allows the content to be scrollable at any breakpoint.
|
|
160
|
-
*/
|
|
161
|
-
const contentAnimation = !expandToScroll
|
|
162
|
-
? animation.createAnimation('contentAnimation').keyframes([
|
|
163
|
-
{ offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
|
|
164
|
-
{ offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
|
|
165
|
-
])
|
|
166
|
-
: undefined;
|
|
167
|
-
return { wrapperAnimation, backdropAnimation, contentAnimation };
|
|
168
|
-
};
|
|
169
|
-
const createSheetLeaveAnimation = (opts) => {
|
|
170
|
-
const { currentBreakpoint, backdropBreakpoint } = opts;
|
|
171
|
-
/**
|
|
172
|
-
* Backdrop does not always fade in from 0 to 1 if backdropBreakpoint
|
|
173
|
-
* is defined, so we need to account for that offset by figuring out
|
|
174
|
-
* what the current backdrop value should be.
|
|
175
|
-
*/
|
|
176
|
-
const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint, backdropBreakpoint)})`;
|
|
177
|
-
const defaultBackdrop = [
|
|
178
|
-
{ offset: 0, opacity: backdropValue },
|
|
179
|
-
{ offset: 1, opacity: 0 },
|
|
180
|
-
];
|
|
181
|
-
const customBackdrop = [
|
|
182
|
-
{ offset: 0, opacity: backdropValue },
|
|
183
|
-
{ offset: backdropBreakpoint, opacity: 0 },
|
|
184
|
-
{ offset: 1, opacity: 0 },
|
|
185
|
-
];
|
|
186
|
-
const backdropAnimation = animation.createAnimation('backdropAnimation').keyframes(backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop);
|
|
187
|
-
const wrapperAnimation = animation.createAnimation('wrapperAnimation').keyframes([
|
|
188
|
-
{ offset: 0, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
189
|
-
{ offset: 1, opacity: 1, transform: `translateY(100%)` },
|
|
190
|
-
]);
|
|
191
|
-
return { wrapperAnimation, backdropAnimation };
|
|
192
|
-
};
|
|
193
|
-
|
|
194
|
-
const createEnterAnimation$2 = () => {
|
|
195
|
-
const backdropAnimation = animation.createAnimation()
|
|
196
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
197
|
-
.beforeStyles({
|
|
198
|
-
'pointer-events': 'none',
|
|
199
|
-
})
|
|
200
|
-
.afterClearStyles(['pointer-events']);
|
|
201
|
-
const wrapperAnimation = animation.createAnimation().keyframes([
|
|
202
|
-
{ offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
|
|
203
|
-
{ offset: 1, opacity: 1, transform: `translateY(0px)` },
|
|
204
|
-
]);
|
|
205
|
-
return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
|
|
206
|
-
};
|
|
207
|
-
/**
|
|
208
|
-
* Ionic Modal Enter Animation
|
|
209
|
-
*/
|
|
210
|
-
const ionicEnterAnimation = (baseEl, opts) => {
|
|
211
|
-
const { currentBreakpoint, expandToScroll } = opts;
|
|
212
|
-
const root = helpers.getElementRoot(baseEl);
|
|
213
|
-
const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$2();
|
|
214
|
-
backdropAnimation.addElement(root.querySelector('ion-backdrop'));
|
|
215
|
-
wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
|
|
216
|
-
// The content animation is only added if scrolling is enabled for
|
|
217
|
-
// all the breakpoints.
|
|
218
|
-
!expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
|
|
219
|
-
backdropAnimation.duration(300).easing('ease-out');
|
|
220
|
-
wrapperAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
|
|
221
|
-
contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
|
|
222
|
-
const baseAnimation = animation.createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
|
|
223
|
-
if (contentAnimation) {
|
|
224
|
-
baseAnimation.addAnimation(contentAnimation);
|
|
225
|
-
}
|
|
226
|
-
return baseAnimation;
|
|
227
|
-
};
|
|
228
|
-
|
|
229
131
|
const handleCanDismiss = async (el, animation) => {
|
|
230
132
|
/**
|
|
231
133
|
* If canDismiss is not a function
|
|
@@ -652,6 +554,69 @@ const calculateProgress = (el, deltaY) => {
|
|
|
652
554
|
return Math.max(0, Math.min(1, roundedProgress));
|
|
653
555
|
};
|
|
654
556
|
|
|
557
|
+
const createSheetEnterAnimation = (opts) => {
|
|
558
|
+
const { currentBreakpoint, backdropBreakpoint, expandToScroll, staticBackdropOpacity } = opts;
|
|
559
|
+
/**
|
|
560
|
+
* If the backdropBreakpoint is undefined, then the backdrop
|
|
561
|
+
* should always fade in. If the backdropBreakpoint came before the
|
|
562
|
+
* current breakpoint, then the backdrop should be fading in.
|
|
563
|
+
*/
|
|
564
|
+
const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
|
|
565
|
+
let initialBackdrop = '0';
|
|
566
|
+
if (staticBackdropOpacity) {
|
|
567
|
+
initialBackdrop = 'calc(var(--backdrop-opacity)';
|
|
568
|
+
}
|
|
569
|
+
else if (shouldShowBackdrop) {
|
|
570
|
+
initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint})`;
|
|
571
|
+
}
|
|
572
|
+
const backdropAnimation = animation.createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
|
|
573
|
+
if (shouldShowBackdrop) {
|
|
574
|
+
backdropAnimation
|
|
575
|
+
.beforeStyles({
|
|
576
|
+
'pointer-events': 'none',
|
|
577
|
+
})
|
|
578
|
+
.afterClearStyles(['pointer-events']);
|
|
579
|
+
}
|
|
580
|
+
const wrapperAnimation = animation.createAnimation('wrapperAnimation').keyframes([
|
|
581
|
+
{ offset: 0, opacity: 1, transform: 'translateY(100%)' },
|
|
582
|
+
{ offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
583
|
+
]);
|
|
584
|
+
/**
|
|
585
|
+
* This allows the content to be scrollable at any breakpoint.
|
|
586
|
+
*/
|
|
587
|
+
const contentAnimation = !expandToScroll
|
|
588
|
+
? animation.createAnimation('contentAnimation').keyframes([
|
|
589
|
+
{ offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
|
|
590
|
+
{ offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
|
|
591
|
+
])
|
|
592
|
+
: undefined;
|
|
593
|
+
return { wrapperAnimation, backdropAnimation, contentAnimation };
|
|
594
|
+
};
|
|
595
|
+
const createSheetLeaveAnimation = (opts) => {
|
|
596
|
+
const { currentBreakpoint, backdropBreakpoint } = opts;
|
|
597
|
+
/**
|
|
598
|
+
* Backdrop does not always fade in from 0 to 1 if backdropBreakpoint
|
|
599
|
+
* is defined, so we need to account for that offset by figuring out
|
|
600
|
+
* what the current backdrop value should be.
|
|
601
|
+
*/
|
|
602
|
+
const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint, backdropBreakpoint)})`;
|
|
603
|
+
const defaultBackdrop = [
|
|
604
|
+
{ offset: 0, opacity: backdropValue },
|
|
605
|
+
{ offset: 1, opacity: 0 },
|
|
606
|
+
];
|
|
607
|
+
const customBackdrop = [
|
|
608
|
+
{ offset: 0, opacity: backdropValue },
|
|
609
|
+
{ offset: backdropBreakpoint, opacity: 0 },
|
|
610
|
+
{ offset: 1, opacity: 0 },
|
|
611
|
+
];
|
|
612
|
+
const backdropAnimation = animation.createAnimation('backdropAnimation').keyframes(backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop);
|
|
613
|
+
const wrapperAnimation = animation.createAnimation('wrapperAnimation').keyframes([
|
|
614
|
+
{ offset: 0, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
615
|
+
{ offset: 1, opacity: 1, transform: `translateY(100%)` },
|
|
616
|
+
]);
|
|
617
|
+
return { wrapperAnimation, backdropAnimation };
|
|
618
|
+
};
|
|
619
|
+
|
|
655
620
|
const createEnterAnimation$1 = () => {
|
|
656
621
|
const backdropAnimation = animation.createAnimation()
|
|
657
622
|
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
@@ -1042,16 +1007,16 @@ const mdLeaveAnimation = (baseEl, opts) => {
|
|
|
1042
1007
|
return baseAnimation;
|
|
1043
1008
|
};
|
|
1044
1009
|
|
|
1045
|
-
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange,
|
|
1010
|
+
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, staticBackdropOpacity, onDragStart, onDragMove, onDragEnd) => {
|
|
1046
1011
|
// Defaults for the sheet swipe animation
|
|
1047
1012
|
const defaultBackdrop = [
|
|
1048
1013
|
{ offset: 0, opacity: 'var(--backdrop-opacity)' },
|
|
1049
|
-
{ offset: 1, opacity:
|
|
1014
|
+
{ offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0.01 },
|
|
1050
1015
|
];
|
|
1051
1016
|
const customBackdrop = [
|
|
1052
1017
|
{ offset: 0, opacity: 'var(--backdrop-opacity)' },
|
|
1053
|
-
{ offset: 1 - backdropBreakpoint, opacity:
|
|
1054
|
-
{ offset: 1, opacity:
|
|
1018
|
+
{ offset: 1 - backdropBreakpoint, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
|
|
1019
|
+
{ offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
|
|
1055
1020
|
];
|
|
1056
1021
|
const SheetDefaults = {
|
|
1057
1022
|
WRAPPER_KEYFRAMES: [
|
|
@@ -1374,9 +1339,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1374
1339
|
: step;
|
|
1375
1340
|
offset = helpers.clamp(0.0001, processedStep, maxStep);
|
|
1376
1341
|
animation.progressStep(offset);
|
|
1377
|
-
const snapBreakpoint =
|
|
1378
|
-
? calculateIonicSnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
|
|
1379
|
-
: calculateSnapBreakpoint(detail.deltaY);
|
|
1342
|
+
const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
|
|
1380
1343
|
const eventDetail = {
|
|
1381
1344
|
currentY: detail.currentY,
|
|
1382
1345
|
deltaY: detail.deltaY,
|
|
@@ -1387,9 +1350,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1387
1350
|
onDragMove(eventDetail);
|
|
1388
1351
|
};
|
|
1389
1352
|
const onEnd = (detail) => {
|
|
1390
|
-
const snapBreakpoint =
|
|
1391
|
-
? calculateIonicSnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
|
|
1392
|
-
: calculateSnapBreakpoint(detail.deltaY);
|
|
1353
|
+
const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
|
|
1393
1354
|
const eventDetail = {
|
|
1394
1355
|
currentY: detail.currentY,
|
|
1395
1356
|
deltaY: detail.deltaY,
|
|
@@ -1436,14 +1397,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1436
1397
|
*/
|
|
1437
1398
|
const shouldPreventDismiss = canDismiss && breakpoint === 0;
|
|
1438
1399
|
const snapToBreakpoint = shouldPreventDismiss ? currentBreakpoint : breakpoint;
|
|
1439
|
-
/**
|
|
1440
|
-
* Detect snap-back behavior: when the snap target is the same as the current breakpoint,
|
|
1441
|
-
* the user released before crossing the threshold to a new breakpoint.
|
|
1442
|
-
* Apply different timing and easing for snap-back vs. snap-to-new.
|
|
1443
|
-
*/
|
|
1444
|
-
const isSnapBack = snapToBreakpoint === currentBreakpoint;
|
|
1445
|
-
const duration = isIonicTheme ? (isSnapBack ? 300 : 400) : 500;
|
|
1446
|
-
const easing = isSnapBack ? 'cubic-bezier(0.34, 1.4, 0.64, 1)' : 'cubic-bezier(0.32, 0.68, 0, 1)';
|
|
1447
1400
|
const shouldRemainOpen = snapToBreakpoint !== 0;
|
|
1448
1401
|
currentBreakpoint = 0;
|
|
1449
1402
|
/**
|
|
@@ -1458,13 +1411,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1458
1411
|
backdropAnimation.keyframes([
|
|
1459
1412
|
{
|
|
1460
1413
|
offset: 0,
|
|
1461
|
-
opacity:
|
|
1414
|
+
opacity: staticBackdropOpacity
|
|
1462
1415
|
? 'var(--backdrop-opacity)'
|
|
1463
1416
|
: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(1 - breakpointOffset, backdropBreakpoint)})`,
|
|
1464
1417
|
},
|
|
1465
1418
|
{
|
|
1466
1419
|
offset: 1,
|
|
1467
|
-
opacity:
|
|
1420
|
+
opacity: staticBackdropOpacity
|
|
1468
1421
|
? 'var(--backdrop-opacity)'
|
|
1469
1422
|
: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
|
|
1470
1423
|
},
|
|
@@ -1484,12 +1437,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1484
1437
|
}
|
|
1485
1438
|
animation.progressStep(0);
|
|
1486
1439
|
}
|
|
1487
|
-
/**
|
|
1488
|
-
* Apply the appropriate easing curve for this snap behavior.
|
|
1489
|
-
*/
|
|
1490
|
-
if (isIonicTheme) {
|
|
1491
|
-
animation.easing(easing);
|
|
1492
|
-
}
|
|
1493
1440
|
/**
|
|
1494
1441
|
* Gesture should remain disabled until the
|
|
1495
1442
|
* snapping animation completes.
|
|
@@ -1579,7 +1526,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1579
1526
|
* be added every time onEnd runs.
|
|
1580
1527
|
*/
|
|
1581
1528
|
}, { oneTimeCallback: true })
|
|
1582
|
-
.progressEnd(1, 0, animated ?
|
|
1529
|
+
.progressEnd(1, 0, animated ? 500 : 0);
|
|
1583
1530
|
});
|
|
1584
1531
|
};
|
|
1585
1532
|
/**
|
|
@@ -1610,50 +1557,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1610
1557
|
});
|
|
1611
1558
|
return snapBreakpoint;
|
|
1612
1559
|
};
|
|
1613
|
-
/**
|
|
1614
|
-
* Calculates the Ionic-specific snap breakpoint using velocity-based logic.
|
|
1615
|
-
* This provides a more intuitive and responsive sheet behavior for the Ionic theme.
|
|
1616
|
-
*
|
|
1617
|
-
* Rules:
|
|
1618
|
-
* 1. Fast downward flick (> 500 px/s) always dismisses, regardless of position
|
|
1619
|
-
* 2. Fast upward flick (> 400 px/s) snaps to the next breakpoint above
|
|
1620
|
-
* 3. If dragged 40% below current snap point without fast upward flick, dismisses
|
|
1621
|
-
* 4. Otherwise, falls back to position-based snap (closest breakpoint)
|
|
1622
|
-
*
|
|
1623
|
-
* @param deltaY The change in Y position since gesture started
|
|
1624
|
-
* @param velocityY The velocity in pixels per millisecond
|
|
1625
|
-
* @param currentY The current Y position of the gesture
|
|
1626
|
-
* @returns The snap breakpoint value
|
|
1627
|
-
*/
|
|
1628
|
-
const calculateIonicSnapBreakpoint = (deltaY, velocityY, currentY) => {
|
|
1629
|
-
// Convert velocity from px/ms to px/s for easier threshold comparison
|
|
1630
|
-
const velocityYPerSecond = velocityY * 1000;
|
|
1631
|
-
// Calculate current progress (0 = fully closed, 1 = fully expanded)
|
|
1632
|
-
const currentProgress = calculateProgress(currentY);
|
|
1633
|
-
// Rule 1: Fast downward flick always dismisses
|
|
1634
|
-
if (velocityYPerSecond > 500) {
|
|
1635
|
-
return minBreakpoint;
|
|
1636
|
-
}
|
|
1637
|
-
// Rule 2: Fast upward flick moves to next breakpoint above
|
|
1638
|
-
if (velocityYPerSecond < -400) {
|
|
1639
|
-
// Find next breakpoint above current position
|
|
1640
|
-
const nextBreakpoint = breakpoints.find((bp) => bp > currentProgress);
|
|
1641
|
-
// If no breakpoint above, stay at max breakpoint
|
|
1642
|
-
return nextBreakpoint !== null && nextBreakpoint !== void 0 ? nextBreakpoint : maxBreakpoint;
|
|
1643
|
-
}
|
|
1644
|
-
// Rule 3: 40% dismissal rule (only if not flicking up and 0 breakpoint exists)
|
|
1645
|
-
if (minBreakpoint === 0 && currentBreakpoint > 0) {
|
|
1646
|
-
// Calculate how far we've moved below the current snap point
|
|
1647
|
-
const distanceBelowSnap = currentBreakpoint - currentProgress;
|
|
1648
|
-
const percentageBelowSnap = distanceBelowSnap / currentBreakpoint;
|
|
1649
|
-
// If dragged more than 40% below and not flicking up, dismiss
|
|
1650
|
-
if (percentageBelowSnap > 0.4 && velocityYPerSecond <= 400) {
|
|
1651
|
-
return 0;
|
|
1652
|
-
}
|
|
1653
|
-
}
|
|
1654
|
-
// Rule 4: Fallback to position-based snap (existing logic)
|
|
1655
|
-
return calculateSnapBreakpoint(deltaY);
|
|
1656
|
-
};
|
|
1657
1560
|
/**
|
|
1658
1561
|
* Calculates the progress of the swipe gesture.
|
|
1659
1562
|
*
|
|
@@ -1902,7 +1805,7 @@ const clearSafeAreaOverrides = (hostEl) => {
|
|
|
1902
1805
|
hostEl.style.removeProperty('--ion-safe-area-right');
|
|
1903
1806
|
};
|
|
1904
1807
|
|
|
1905
|
-
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:
|
|
1808
|
+
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)))}`;
|
|
1906
1809
|
|
|
1907
1810
|
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}`;
|
|
1908
1811
|
|
|
@@ -2342,7 +2245,7 @@ const Modal = class {
|
|
|
2342
2245
|
this.statusBarStyle = await StatusBar.getStyle();
|
|
2343
2246
|
setCardStatusBarDark();
|
|
2344
2247
|
}
|
|
2345
|
-
await overlays.present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation,
|
|
2248
|
+
await overlays.present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
|
|
2346
2249
|
presentingEl: presentingElement,
|
|
2347
2250
|
currentBreakpoint: this.initialBreakpoint,
|
|
2348
2251
|
backdropBreakpoint: this.backdropBreakpoint,
|
|
@@ -3029,20 +2932,20 @@ const Modal = class {
|
|
|
3029
2932
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
3030
2933
|
const shape = this.getShape();
|
|
3031
2934
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
3032
|
-
return (index$2.h(index$2.Host, Object.assign({ key: '
|
|
2935
|
+
return (index$2.h(index$2.Host, Object.assign({ key: '4b323edb66d28260c34b31fd2af8f4ae53a7ef90', "no-router": true,
|
|
3033
2936
|
// Allow the modal to be navigable when the handle is focusable
|
|
3034
2937
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
3035
2938
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
3036
|
-
}, class: Object.assign({ [theme$1]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`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$2.h("ion-backdrop", { key: '
|
|
2939
|
+
}, class: Object.assign({ [theme$1]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`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$2.h("ion-backdrop", { key: '6059e348dc3d020f995577dde1b7949bdb2c0f2f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme$1 === 'ios' && index$2.h("div", { key: '5a08a99dfc3de51ac7516fc76fdba3672f84db71', class: "modal-shadow" }), index$2.h("div", Object.assign({ key: 'a7a841a5b2f740fbf576b82b82782aa235b701ee',
|
|
3037
2940
|
/*
|
|
3038
2941
|
role and aria-modal must be used on the
|
|
3039
2942
|
same element. They must also be set inside the
|
|
3040
2943
|
shadow DOM otherwise ion-button will not be highlighted
|
|
3041
2944
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
3042
2945
|
*/
|
|
3043
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$2.h("button", { key: '
|
|
2946
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$2.h("button", { key: 'ca5567e9ab3e9e80b41314d396106faf2da09ffe', class: "modal-handle",
|
|
3044
2947
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
3045
|
-
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$2.h("slot", { key: '
|
|
2948
|
+
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$2.h("slot", { key: 'da5471ea4292166798d3f949e79e7b3e55a0e83f', onSlotchange: this.onSlotChange }))));
|
|
3046
2949
|
}
|
|
3047
2950
|
get el() { return index$2.getElement(this); }
|
|
3048
2951
|
static get watchers() { return {
|