@ionic/core 8.8.4-dev.11776246162.138c2737 → 8.8.4-dev.11776357045.1da75baf
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/css/ionic/bundle.ionic.css +1 -1
- package/css/ionic/bundle.ionic.css.map +1 -1
- package/css/ionic/core.ionic.css +1 -1
- package/css/ionic/core.ionic.css.map +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
package/hydrate/index.mjs
CHANGED
|
@@ -8574,7 +8574,7 @@ const setRootAriaHidden = (hidden = false) => {
|
|
|
8574
8574
|
viewContainer.removeAttribute('aria-hidden');
|
|
8575
8575
|
}
|
|
8576
8576
|
};
|
|
8577
|
-
const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation,
|
|
8577
|
+
const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
|
|
8578
8578
|
var _a, _b;
|
|
8579
8579
|
if (overlay.presented) {
|
|
8580
8580
|
return;
|
|
@@ -8622,11 +8622,11 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, ionic
|
|
|
8622
8622
|
document.body.classList.add(BACKDROP_NO_SCROLL);
|
|
8623
8623
|
}
|
|
8624
8624
|
(_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
|
|
8625
|
-
const theme = getIonTheme(overlay);
|
|
8626
8625
|
const mode = getIonMode$1(overlay);
|
|
8627
|
-
const selectedAnimation = mode === 'ios' ? iosEnterAnimation : theme === 'ionic' ? ionicEnterAnimation : mdEnterAnimation;
|
|
8628
8626
|
// get the user's animation fn if one was provided
|
|
8629
|
-
const animationBuilder = overlay.enterAnimation
|
|
8627
|
+
const animationBuilder = overlay.enterAnimation
|
|
8628
|
+
? overlay.enterAnimation
|
|
8629
|
+
: config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
|
|
8630
8630
|
const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
|
|
8631
8631
|
if (completed) {
|
|
8632
8632
|
overlay.didPresent.emit();
|
|
@@ -9789,30 +9789,6 @@ const createAnimation = (animationId) => {
|
|
|
9789
9789
|
});
|
|
9790
9790
|
};
|
|
9791
9791
|
|
|
9792
|
-
/**
|
|
9793
|
-
* MD Action Sheet Enter Animation
|
|
9794
|
-
*/
|
|
9795
|
-
const ionicEnterAnimation$6 = (baseEl) => {
|
|
9796
|
-
const baseAnimation = createAnimation();
|
|
9797
|
-
const backdropAnimation = createAnimation();
|
|
9798
|
-
const wrapperAnimation = createAnimation();
|
|
9799
|
-
backdropAnimation
|
|
9800
|
-
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
9801
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
9802
|
-
.beforeStyles({
|
|
9803
|
-
'pointer-events': 'none',
|
|
9804
|
-
})
|
|
9805
|
-
.afterClearStyles(['pointer-events']);
|
|
9806
|
-
wrapperAnimation
|
|
9807
|
-
.addElement(baseEl.querySelector('.action-sheet-wrapper'))
|
|
9808
|
-
.fromTo('transform', 'translateY(100%)', 'translateY(0%)');
|
|
9809
|
-
return baseAnimation
|
|
9810
|
-
.addElement(baseEl)
|
|
9811
|
-
.easing('cubic-bezier(.36,.66,.04,1)')
|
|
9812
|
-
.duration(400)
|
|
9813
|
-
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
9814
|
-
};
|
|
9815
|
-
|
|
9816
9792
|
/**
|
|
9817
9793
|
* iOS Action Sheet Enter Animation
|
|
9818
9794
|
*/
|
|
@@ -9999,7 +9975,7 @@ class ActionSheet {
|
|
|
9999
9975
|
async present() {
|
|
10000
9976
|
const unlock = await this.lockController.lock();
|
|
10001
9977
|
await this.delegateController.attachViewToDom();
|
|
10002
|
-
await present(this, 'actionSheetEnter', iosEnterAnimation$6, mdEnterAnimation$5
|
|
9978
|
+
await present(this, 'actionSheetEnter', iosEnterAnimation$6, mdEnterAnimation$5);
|
|
10003
9979
|
unlock();
|
|
10004
9980
|
}
|
|
10005
9981
|
/**
|
|
@@ -10289,12 +10265,12 @@ class ActionSheet {
|
|
|
10289
10265
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
10290
10266
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
10291
10267
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
10292
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
10268
|
+
return (hAsync(Host, Object.assign({ key: '3ef5b086f7a4ac4f361de8dcff5255ed1d2bcbdf', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
10293
10269
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
10294
|
-
}, class: Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '
|
|
10270
|
+
}, class: Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: 'd98bb285f8a09a4207f35f930da77548bcdf529a', tappable: this.backdropDismiss }), hAsync("div", { key: '6cd6aba45144244a51d76bfe0b606c3fb9a882ea', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'e6a007bcde062bd2ea7c094394aa0024ee595c9e', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '31948475a84d28488fd53e7fde16cb1deff14a2f', class: "action-sheet-container" }, hAsync("div", { key: '4f2bbc00d36792cf6e24c402f5396546653f1e00', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("div", { key: '68bcafe38b49be0fe21e3e4820ee3f05f6abffad', id: headerID, class: {
|
|
10295
10271
|
'action-sheet-title': true,
|
|
10296
10272
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
10297
|
-
} }, header, this.subHeader && hAsync("div", { key: '
|
|
10273
|
+
} }, header, this.subHeader && hAsync("div", { key: 'd253c010d0bba4a38836b6319b2d8073e1a526b9', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: 'b30f50a64b425a992e26673bf072332d7c3b3409', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'e35087c05c7c8f04ca9aef322917f8172c0c4f8f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: '1f7a50fac729e19d0ee12d54bc67e071ff7b3f08', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '452641544297efc017529b674235e269285c4100', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && hAsync("ion-ripple-effect", { key: '15795e15d27297e6e87f7fe39386bb8581993dfa' })))))), hAsync("div", { key: '301fef1a45d1c523221ec2312276dd3a62f3134d', tabindex: "0", "aria-hidden": "true" })));
|
|
10298
10274
|
}
|
|
10299
10275
|
get el() { return getElement(this); }
|
|
10300
10276
|
static get watchers() { return {
|
|
@@ -10512,31 +10488,6 @@ class IonicSafeString {
|
|
|
10512
10488
|
}
|
|
10513
10489
|
}
|
|
10514
10490
|
|
|
10515
|
-
/**
|
|
10516
|
-
* Ionic Alert Enter Animation
|
|
10517
|
-
*/
|
|
10518
|
-
const ionicEnterAnimation$5 = (baseEl) => {
|
|
10519
|
-
const baseAnimation = createAnimation();
|
|
10520
|
-
const backdropAnimation = createAnimation();
|
|
10521
|
-
const wrapperAnimation = createAnimation();
|
|
10522
|
-
backdropAnimation
|
|
10523
|
-
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
10524
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
10525
|
-
.beforeStyles({
|
|
10526
|
-
'pointer-events': 'none',
|
|
10527
|
-
})
|
|
10528
|
-
.afterClearStyles(['pointer-events']);
|
|
10529
|
-
wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper')).keyframes([
|
|
10530
|
-
{ offset: 0, opacity: '0.01', transform: 'scale(0.9)' },
|
|
10531
|
-
{ offset: 1, opacity: '1', transform: 'scale(1)' },
|
|
10532
|
-
]);
|
|
10533
|
-
return baseAnimation
|
|
10534
|
-
.addElement(baseEl)
|
|
10535
|
-
.easing('ease-in-out')
|
|
10536
|
-
.duration(150)
|
|
10537
|
-
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
10538
|
-
};
|
|
10539
|
-
|
|
10540
10491
|
/**
|
|
10541
10492
|
* iOS Alert Enter Animation
|
|
10542
10493
|
*/
|
|
@@ -10865,7 +10816,7 @@ class Alert {
|
|
|
10865
10816
|
async present() {
|
|
10866
10817
|
const unlock = await this.lockController.lock();
|
|
10867
10818
|
await this.delegateController.attachViewToDom();
|
|
10868
|
-
await present(this, 'alertEnter', iosEnterAnimation$5, mdEnterAnimation$4
|
|
10819
|
+
await present(this, 'alertEnter', iosEnterAnimation$5, mdEnterAnimation$4).then(() => {
|
|
10869
10820
|
var _a, _b;
|
|
10870
10821
|
/**
|
|
10871
10822
|
* Check if alert has only one button and no inputs.
|
|
@@ -11060,9 +11011,9 @@ class Alert {
|
|
|
11060
11011
|
* If neither are defined, do not set aria-labelledby.
|
|
11061
11012
|
*/
|
|
11062
11013
|
const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
|
|
11063
|
-
return (hAsync(Host, { key: '
|
|
11014
|
+
return (hAsync(Host, { key: '53f8b0e1035ca965ba44f8e1314c59a227b08173', tabindex: "-1", style: {
|
|
11064
11015
|
zIndex: `${20000 + overlayIndex}`,
|
|
11065
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '
|
|
11016
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '39499a198543709f538fa0328214d742754543ab', tappable: this.backdropDismiss }), hAsync("div", { key: '16417758e5ac05cfa049db5086c1ffde81fc6156', tabindex: "0", "aria-hidden": "true" }), hAsync("div", Object.assign({ key: 'cc7dde0877f70be21019cd2e8e6c843815ec9682', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), hAsync("div", { key: '525d28d77b6467b441ff9d357049aec7565e6f6a', class: "alert-head" }, header && (hAsync("h2", { key: '974fc725163da00216c3c8b7b6c72c005628e0fc', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: 'eedf04dbe331917c7b1348f8020d959119cc9f0f', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '80dbbd75184a3857172eca25f30dee950c08709b', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: '0d83a74b7ae595d0593edadfe6b812435534abea', tabindex: "0", "aria-hidden": "true" })));
|
|
11066
11017
|
}
|
|
11067
11018
|
get el() { return getElement(this); }
|
|
11068
11019
|
static get watchers() { return {
|
|
@@ -22938,31 +22889,6 @@ class ListHeader {
|
|
|
22938
22889
|
}; }
|
|
22939
22890
|
}
|
|
22940
22891
|
|
|
22941
|
-
/**
|
|
22942
|
-
* Ionic Loading Enter Animation
|
|
22943
|
-
*/
|
|
22944
|
-
const ionicEnterAnimation$4 = (baseEl) => {
|
|
22945
|
-
const baseAnimation = createAnimation();
|
|
22946
|
-
const backdropAnimation = createAnimation();
|
|
22947
|
-
const wrapperAnimation = createAnimation();
|
|
22948
|
-
backdropAnimation
|
|
22949
|
-
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
22950
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
22951
|
-
.beforeStyles({
|
|
22952
|
-
'pointer-events': 'none',
|
|
22953
|
-
})
|
|
22954
|
-
.afterClearStyles(['pointer-events']);
|
|
22955
|
-
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')).keyframes([
|
|
22956
|
-
{ offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
|
|
22957
|
-
{ offset: 1, opacity: 1, transform: 'scale(1)' },
|
|
22958
|
-
]);
|
|
22959
|
-
return baseAnimation
|
|
22960
|
-
.addElement(baseEl)
|
|
22961
|
-
.easing('ease-in-out')
|
|
22962
|
-
.duration(200)
|
|
22963
|
-
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
22964
|
-
};
|
|
22965
|
-
|
|
22966
22892
|
/**
|
|
22967
22893
|
* iOS Loading Enter Animation
|
|
22968
22894
|
*/
|
|
@@ -23174,7 +23100,7 @@ class Loading {
|
|
|
23174
23100
|
async present() {
|
|
23175
23101
|
const unlock = await this.lockController.lock();
|
|
23176
23102
|
await this.delegateController.attachViewToDom();
|
|
23177
|
-
await present(this, 'loadingEnter', iosEnterAnimation$4, mdEnterAnimation$3
|
|
23103
|
+
await present(this, 'loadingEnter', iosEnterAnimation$4, mdEnterAnimation$3);
|
|
23178
23104
|
if (this.duration > 0) {
|
|
23179
23105
|
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
|
|
23180
23106
|
}
|
|
@@ -23232,9 +23158,9 @@ class Loading {
|
|
|
23232
23158
|
* Otherwise, don't set aria-labelledby.
|
|
23233
23159
|
*/
|
|
23234
23160
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
23235
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
23161
|
+
return (hAsync(Host, Object.assign({ key: '0c475f8e28e680e28e09317557795fc56e0835d8', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
23236
23162
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
23237
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '
|
|
23163
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: 'd7e88feb6df8edbc326a84d07b294618f7ce6adc', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'f9622f45b2d9e913c325b228a1e6ed03cf2b98e8', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'f4dfdce70c4515878b247d0cc116b5cec2cf79a4', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '6d4475e00c444eb3d217813ae8cc1a02a97b969e', class: "loading-spinner" }, hAsync("ion-spinner", { key: 'd9ad8dd56ec7677c18d06936c1a1b21a0a6a87a8', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: 'bd3159e18f33ec25d3480d47ce33fa7dfd1f1460', tabindex: "0", "aria-hidden": "true" })));
|
|
23238
23164
|
}
|
|
23239
23165
|
get el() { return getElement(this); }
|
|
23240
23166
|
static get watchers() { return {
|
|
@@ -25042,104 +24968,6 @@ const setCardStatusBarDefault = (defaultStyle = Style.Default) => {
|
|
|
25042
24968
|
StatusBar.setStyle({ style: defaultStyle });
|
|
25043
24969
|
};
|
|
25044
24970
|
|
|
25045
|
-
const createSheetEnterAnimation = (opts) => {
|
|
25046
|
-
const { currentBreakpoint, backdropBreakpoint, expandToScroll, staticBackdropOpacity } = opts;
|
|
25047
|
-
/**
|
|
25048
|
-
* If the backdropBreakpoint is undefined, then the backdrop
|
|
25049
|
-
* should always fade in. If the backdropBreakpoint came before the
|
|
25050
|
-
* current breakpoint, then the backdrop should be fading in.
|
|
25051
|
-
*/
|
|
25052
|
-
const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
|
|
25053
|
-
let initialBackdrop = '0';
|
|
25054
|
-
if (staticBackdropOpacity) {
|
|
25055
|
-
initialBackdrop = 'calc(var(--backdrop-opacity)';
|
|
25056
|
-
}
|
|
25057
|
-
else if (shouldShowBackdrop) {
|
|
25058
|
-
initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint})`;
|
|
25059
|
-
}
|
|
25060
|
-
const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
|
|
25061
|
-
if (shouldShowBackdrop) {
|
|
25062
|
-
backdropAnimation
|
|
25063
|
-
.beforeStyles({
|
|
25064
|
-
'pointer-events': 'none',
|
|
25065
|
-
})
|
|
25066
|
-
.afterClearStyles(['pointer-events']);
|
|
25067
|
-
}
|
|
25068
|
-
const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
|
|
25069
|
-
{ offset: 0, opacity: 1, transform: 'translateY(100%)' },
|
|
25070
|
-
{ offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
25071
|
-
]);
|
|
25072
|
-
/**
|
|
25073
|
-
* This allows the content to be scrollable at any breakpoint.
|
|
25074
|
-
*/
|
|
25075
|
-
const contentAnimation = !expandToScroll
|
|
25076
|
-
? createAnimation('contentAnimation').keyframes([
|
|
25077
|
-
{ offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
|
|
25078
|
-
{ offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
|
|
25079
|
-
])
|
|
25080
|
-
: undefined;
|
|
25081
|
-
return { wrapperAnimation, backdropAnimation, contentAnimation };
|
|
25082
|
-
};
|
|
25083
|
-
const createSheetLeaveAnimation = (opts) => {
|
|
25084
|
-
const { currentBreakpoint, backdropBreakpoint } = opts;
|
|
25085
|
-
/**
|
|
25086
|
-
* Backdrop does not always fade in from 0 to 1 if backdropBreakpoint
|
|
25087
|
-
* is defined, so we need to account for that offset by figuring out
|
|
25088
|
-
* what the current backdrop value should be.
|
|
25089
|
-
*/
|
|
25090
|
-
const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint, backdropBreakpoint)})`;
|
|
25091
|
-
const defaultBackdrop = [
|
|
25092
|
-
{ offset: 0, opacity: backdropValue },
|
|
25093
|
-
{ offset: 1, opacity: 0 },
|
|
25094
|
-
];
|
|
25095
|
-
const customBackdrop = [
|
|
25096
|
-
{ offset: 0, opacity: backdropValue },
|
|
25097
|
-
{ offset: backdropBreakpoint, opacity: 0 },
|
|
25098
|
-
{ offset: 1, opacity: 0 },
|
|
25099
|
-
];
|
|
25100
|
-
const backdropAnimation = createAnimation('backdropAnimation').keyframes(backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop);
|
|
25101
|
-
const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
|
|
25102
|
-
{ offset: 0, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
25103
|
-
{ offset: 1, opacity: 1, transform: `translateY(100%)` },
|
|
25104
|
-
]);
|
|
25105
|
-
return { wrapperAnimation, backdropAnimation };
|
|
25106
|
-
};
|
|
25107
|
-
|
|
25108
|
-
const createEnterAnimation$2 = () => {
|
|
25109
|
-
const backdropAnimation = createAnimation()
|
|
25110
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
25111
|
-
.beforeStyles({
|
|
25112
|
-
'pointer-events': 'none',
|
|
25113
|
-
})
|
|
25114
|
-
.afterClearStyles(['pointer-events']);
|
|
25115
|
-
const wrapperAnimation = createAnimation().keyframes([
|
|
25116
|
-
{ offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
|
|
25117
|
-
{ offset: 1, opacity: 1, transform: `translateY(0px)` },
|
|
25118
|
-
]);
|
|
25119
|
-
return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
|
|
25120
|
-
};
|
|
25121
|
-
/**
|
|
25122
|
-
* Ionic Modal Enter Animation
|
|
25123
|
-
*/
|
|
25124
|
-
const ionicEnterAnimation$3 = (baseEl, opts) => {
|
|
25125
|
-
const { currentBreakpoint, expandToScroll } = opts;
|
|
25126
|
-
const root = getElementRoot(baseEl);
|
|
25127
|
-
const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$2();
|
|
25128
|
-
backdropAnimation.addElement(root.querySelector('ion-backdrop'));
|
|
25129
|
-
wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
|
|
25130
|
-
// The content animation is only added if scrolling is enabled for
|
|
25131
|
-
// all the breakpoints.
|
|
25132
|
-
!expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
|
|
25133
|
-
backdropAnimation.duration(300).easing('ease-out');
|
|
25134
|
-
wrapperAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
|
|
25135
|
-
contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
|
|
25136
|
-
const baseAnimation = createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
|
|
25137
|
-
if (contentAnimation) {
|
|
25138
|
-
baseAnimation.addAnimation(contentAnimation);
|
|
25139
|
-
}
|
|
25140
|
-
return baseAnimation;
|
|
25141
|
-
};
|
|
25142
|
-
|
|
25143
24971
|
const handleCanDismiss = async (el, animation) => {
|
|
25144
24972
|
/**
|
|
25145
24973
|
* If canDismiss is not a function
|
|
@@ -25566,6 +25394,69 @@ const calculateProgress = (el, deltaY) => {
|
|
|
25566
25394
|
return Math.max(0, Math.min(1, roundedProgress));
|
|
25567
25395
|
};
|
|
25568
25396
|
|
|
25397
|
+
const createSheetEnterAnimation = (opts) => {
|
|
25398
|
+
const { currentBreakpoint, backdropBreakpoint, expandToScroll, staticBackdropOpacity } = opts;
|
|
25399
|
+
/**
|
|
25400
|
+
* If the backdropBreakpoint is undefined, then the backdrop
|
|
25401
|
+
* should always fade in. If the backdropBreakpoint came before the
|
|
25402
|
+
* current breakpoint, then the backdrop should be fading in.
|
|
25403
|
+
*/
|
|
25404
|
+
const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
|
|
25405
|
+
let initialBackdrop = '0';
|
|
25406
|
+
if (staticBackdropOpacity) {
|
|
25407
|
+
initialBackdrop = 'calc(var(--backdrop-opacity)';
|
|
25408
|
+
}
|
|
25409
|
+
else if (shouldShowBackdrop) {
|
|
25410
|
+
initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint})`;
|
|
25411
|
+
}
|
|
25412
|
+
const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
|
|
25413
|
+
if (shouldShowBackdrop) {
|
|
25414
|
+
backdropAnimation
|
|
25415
|
+
.beforeStyles({
|
|
25416
|
+
'pointer-events': 'none',
|
|
25417
|
+
})
|
|
25418
|
+
.afterClearStyles(['pointer-events']);
|
|
25419
|
+
}
|
|
25420
|
+
const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
|
|
25421
|
+
{ offset: 0, opacity: 1, transform: 'translateY(100%)' },
|
|
25422
|
+
{ offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
25423
|
+
]);
|
|
25424
|
+
/**
|
|
25425
|
+
* This allows the content to be scrollable at any breakpoint.
|
|
25426
|
+
*/
|
|
25427
|
+
const contentAnimation = !expandToScroll
|
|
25428
|
+
? createAnimation('contentAnimation').keyframes([
|
|
25429
|
+
{ offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
|
|
25430
|
+
{ offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
|
|
25431
|
+
])
|
|
25432
|
+
: undefined;
|
|
25433
|
+
return { wrapperAnimation, backdropAnimation, contentAnimation };
|
|
25434
|
+
};
|
|
25435
|
+
const createSheetLeaveAnimation = (opts) => {
|
|
25436
|
+
const { currentBreakpoint, backdropBreakpoint } = opts;
|
|
25437
|
+
/**
|
|
25438
|
+
* Backdrop does not always fade in from 0 to 1 if backdropBreakpoint
|
|
25439
|
+
* is defined, so we need to account for that offset by figuring out
|
|
25440
|
+
* what the current backdrop value should be.
|
|
25441
|
+
*/
|
|
25442
|
+
const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint, backdropBreakpoint)})`;
|
|
25443
|
+
const defaultBackdrop = [
|
|
25444
|
+
{ offset: 0, opacity: backdropValue },
|
|
25445
|
+
{ offset: 1, opacity: 0 },
|
|
25446
|
+
];
|
|
25447
|
+
const customBackdrop = [
|
|
25448
|
+
{ offset: 0, opacity: backdropValue },
|
|
25449
|
+
{ offset: backdropBreakpoint, opacity: 0 },
|
|
25450
|
+
{ offset: 1, opacity: 0 },
|
|
25451
|
+
];
|
|
25452
|
+
const backdropAnimation = createAnimation('backdropAnimation').keyframes(backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop);
|
|
25453
|
+
const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
|
|
25454
|
+
{ offset: 0, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
25455
|
+
{ offset: 1, opacity: 1, transform: `translateY(100%)` },
|
|
25456
|
+
]);
|
|
25457
|
+
return { wrapperAnimation, backdropAnimation };
|
|
25458
|
+
};
|
|
25459
|
+
|
|
25569
25460
|
const createEnterAnimation$1 = () => {
|
|
25570
25461
|
const backdropAnimation = createAnimation()
|
|
25571
25462
|
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
@@ -25956,16 +25847,16 @@ const mdLeaveAnimation$2 = (baseEl, opts) => {
|
|
|
25956
25847
|
return baseAnimation;
|
|
25957
25848
|
};
|
|
25958
25849
|
|
|
25959
|
-
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange,
|
|
25850
|
+
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, staticBackdropOpacity, onDragStart, onDragMove, onDragEnd) => {
|
|
25960
25851
|
// Defaults for the sheet swipe animation
|
|
25961
25852
|
const defaultBackdrop = [
|
|
25962
25853
|
{ offset: 0, opacity: 'var(--backdrop-opacity)' },
|
|
25963
|
-
{ offset: 1, opacity:
|
|
25854
|
+
{ offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0.01 },
|
|
25964
25855
|
];
|
|
25965
25856
|
const customBackdrop = [
|
|
25966
25857
|
{ offset: 0, opacity: 'var(--backdrop-opacity)' },
|
|
25967
|
-
{ offset: 1 - backdropBreakpoint, opacity:
|
|
25968
|
-
{ offset: 1, opacity:
|
|
25858
|
+
{ offset: 1 - backdropBreakpoint, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
|
|
25859
|
+
{ offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
|
|
25969
25860
|
];
|
|
25970
25861
|
const SheetDefaults = {
|
|
25971
25862
|
WRAPPER_KEYFRAMES: [
|
|
@@ -26288,9 +26179,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
26288
26179
|
: step;
|
|
26289
26180
|
offset = clamp(0.0001, processedStep, maxStep);
|
|
26290
26181
|
animation.progressStep(offset);
|
|
26291
|
-
const snapBreakpoint =
|
|
26292
|
-
? calculateIonicSnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
|
|
26293
|
-
: calculateSnapBreakpoint(detail.deltaY);
|
|
26182
|
+
const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
|
|
26294
26183
|
const eventDetail = {
|
|
26295
26184
|
currentY: detail.currentY,
|
|
26296
26185
|
deltaY: detail.deltaY,
|
|
@@ -26301,9 +26190,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
26301
26190
|
onDragMove(eventDetail);
|
|
26302
26191
|
};
|
|
26303
26192
|
const onEnd = (detail) => {
|
|
26304
|
-
const snapBreakpoint =
|
|
26305
|
-
? calculateIonicSnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
|
|
26306
|
-
: calculateSnapBreakpoint(detail.deltaY);
|
|
26193
|
+
const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
|
|
26307
26194
|
const eventDetail = {
|
|
26308
26195
|
currentY: detail.currentY,
|
|
26309
26196
|
deltaY: detail.deltaY,
|
|
@@ -26350,14 +26237,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
26350
26237
|
*/
|
|
26351
26238
|
const shouldPreventDismiss = canDismiss && breakpoint === 0;
|
|
26352
26239
|
const snapToBreakpoint = shouldPreventDismiss ? currentBreakpoint : breakpoint;
|
|
26353
|
-
/**
|
|
26354
|
-
* Detect snap-back behavior: when the snap target is the same as the current breakpoint,
|
|
26355
|
-
* the user released before crossing the threshold to a new breakpoint.
|
|
26356
|
-
* Apply different timing and easing for snap-back vs. snap-to-new.
|
|
26357
|
-
*/
|
|
26358
|
-
const isSnapBack = snapToBreakpoint === currentBreakpoint;
|
|
26359
|
-
const duration = isIonicTheme ? (isSnapBack ? 300 : 400) : 500;
|
|
26360
|
-
const easing = isSnapBack ? 'cubic-bezier(0.34, 1.4, 0.64, 1)' : 'cubic-bezier(0.32, 0.68, 0, 1)';
|
|
26361
26240
|
const shouldRemainOpen = snapToBreakpoint !== 0;
|
|
26362
26241
|
currentBreakpoint = 0;
|
|
26363
26242
|
/**
|
|
@@ -26372,13 +26251,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
26372
26251
|
backdropAnimation.keyframes([
|
|
26373
26252
|
{
|
|
26374
26253
|
offset: 0,
|
|
26375
|
-
opacity:
|
|
26254
|
+
opacity: staticBackdropOpacity
|
|
26376
26255
|
? 'var(--backdrop-opacity)'
|
|
26377
26256
|
: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(1 - breakpointOffset, backdropBreakpoint)})`,
|
|
26378
26257
|
},
|
|
26379
26258
|
{
|
|
26380
26259
|
offset: 1,
|
|
26381
|
-
opacity:
|
|
26260
|
+
opacity: staticBackdropOpacity
|
|
26382
26261
|
? 'var(--backdrop-opacity)'
|
|
26383
26262
|
: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
|
|
26384
26263
|
},
|
|
@@ -26398,12 +26277,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
26398
26277
|
}
|
|
26399
26278
|
animation.progressStep(0);
|
|
26400
26279
|
}
|
|
26401
|
-
/**
|
|
26402
|
-
* Apply the appropriate easing curve for this snap behavior.
|
|
26403
|
-
*/
|
|
26404
|
-
if (isIonicTheme) {
|
|
26405
|
-
animation.easing(easing);
|
|
26406
|
-
}
|
|
26407
26280
|
/**
|
|
26408
26281
|
* Gesture should remain disabled until the
|
|
26409
26282
|
* snapping animation completes.
|
|
@@ -26493,7 +26366,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
26493
26366
|
* be added every time onEnd runs.
|
|
26494
26367
|
*/
|
|
26495
26368
|
}, { oneTimeCallback: true })
|
|
26496
|
-
.progressEnd(1, 0, animated ?
|
|
26369
|
+
.progressEnd(1, 0, animated ? 500 : 0);
|
|
26497
26370
|
});
|
|
26498
26371
|
};
|
|
26499
26372
|
/**
|
|
@@ -26524,50 +26397,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
26524
26397
|
});
|
|
26525
26398
|
return snapBreakpoint;
|
|
26526
26399
|
};
|
|
26527
|
-
/**
|
|
26528
|
-
* Calculates the Ionic-specific snap breakpoint using velocity-based logic.
|
|
26529
|
-
* This provides a more intuitive and responsive sheet behavior for the Ionic theme.
|
|
26530
|
-
*
|
|
26531
|
-
* Rules:
|
|
26532
|
-
* 1. Fast downward flick (> 500 px/s) always dismisses, regardless of position
|
|
26533
|
-
* 2. Fast upward flick (> 400 px/s) snaps to the next breakpoint above
|
|
26534
|
-
* 3. If dragged 40% below current snap point without fast upward flick, dismisses
|
|
26535
|
-
* 4. Otherwise, falls back to position-based snap (closest breakpoint)
|
|
26536
|
-
*
|
|
26537
|
-
* @param deltaY The change in Y position since gesture started
|
|
26538
|
-
* @param velocityY The velocity in pixels per millisecond
|
|
26539
|
-
* @param currentY The current Y position of the gesture
|
|
26540
|
-
* @returns The snap breakpoint value
|
|
26541
|
-
*/
|
|
26542
|
-
const calculateIonicSnapBreakpoint = (deltaY, velocityY, currentY) => {
|
|
26543
|
-
// Convert velocity from px/ms to px/s for easier threshold comparison
|
|
26544
|
-
const velocityYPerSecond = velocityY * 1000;
|
|
26545
|
-
// Calculate current progress (0 = fully closed, 1 = fully expanded)
|
|
26546
|
-
const currentProgress = calculateProgress(currentY);
|
|
26547
|
-
// Rule 1: Fast downward flick always dismisses
|
|
26548
|
-
if (velocityYPerSecond > 500) {
|
|
26549
|
-
return minBreakpoint;
|
|
26550
|
-
}
|
|
26551
|
-
// Rule 2: Fast upward flick moves to next breakpoint above
|
|
26552
|
-
if (velocityYPerSecond < -400) {
|
|
26553
|
-
// Find next breakpoint above current position
|
|
26554
|
-
const nextBreakpoint = breakpoints.find((bp) => bp > currentProgress);
|
|
26555
|
-
// If no breakpoint above, stay at max breakpoint
|
|
26556
|
-
return nextBreakpoint !== null && nextBreakpoint !== void 0 ? nextBreakpoint : maxBreakpoint;
|
|
26557
|
-
}
|
|
26558
|
-
// Rule 3: 40% dismissal rule (only if not flicking up and 0 breakpoint exists)
|
|
26559
|
-
if (minBreakpoint === 0 && currentBreakpoint > 0) {
|
|
26560
|
-
// Calculate how far we've moved below the current snap point
|
|
26561
|
-
const distanceBelowSnap = currentBreakpoint - currentProgress;
|
|
26562
|
-
const percentageBelowSnap = distanceBelowSnap / currentBreakpoint;
|
|
26563
|
-
// If dragged more than 40% below and not flicking up, dismiss
|
|
26564
|
-
if (percentageBelowSnap > 0.4 && velocityYPerSecond <= 400) {
|
|
26565
|
-
return 0;
|
|
26566
|
-
}
|
|
26567
|
-
}
|
|
26568
|
-
// Rule 4: Fallback to position-based snap (existing logic)
|
|
26569
|
-
return calculateSnapBreakpoint(deltaY);
|
|
26570
|
-
};
|
|
26571
26400
|
/**
|
|
26572
26401
|
* Calculates the progress of the swipe gesture.
|
|
26573
26402
|
*
|
|
@@ -26816,7 +26645,7 @@ const clearSafeAreaOverrides = (hostEl) => {
|
|
|
26816
26645
|
hostEl.style.removeProperty('--ion-safe-area-right');
|
|
26817
26646
|
};
|
|
26818
26647
|
|
|
26819
|
-
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:
|
|
26648
|
+
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)))}`;
|
|
26820
26649
|
|
|
26821
26650
|
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}`;
|
|
26822
26651
|
|
|
@@ -27267,7 +27096,7 @@ class Modal {
|
|
|
27267
27096
|
this.statusBarStyle = await StatusBar.getStyle();
|
|
27268
27097
|
setCardStatusBarDark();
|
|
27269
27098
|
}
|
|
27270
|
-
await present(this, 'modalEnter', iosEnterAnimation$3, mdEnterAnimation$2,
|
|
27099
|
+
await present(this, 'modalEnter', iosEnterAnimation$3, mdEnterAnimation$2, {
|
|
27271
27100
|
presentingEl: presentingElement,
|
|
27272
27101
|
currentBreakpoint: this.initialBreakpoint,
|
|
27273
27102
|
backdropBreakpoint: this.backdropBreakpoint,
|
|
@@ -27954,20 +27783,20 @@ class Modal {
|
|
|
27954
27783
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
27955
27784
|
const shape = this.getShape();
|
|
27956
27785
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
27957
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
27786
|
+
return (hAsync(Host, Object.assign({ key: '4b323edb66d28260c34b31fd2af8f4ae53a7ef90', "no-router": true,
|
|
27958
27787
|
// Allow the modal to be navigable when the handle is focusable
|
|
27959
27788
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
27960
27789
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
27961
|
-
}, 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 }), hAsync("ion-backdrop", { key: '
|
|
27790
|
+
}, 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 }), hAsync("ion-backdrop", { key: '6059e348dc3d020f995577dde1b7949bdb2c0f2f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && hAsync("div", { key: '5a08a99dfc3de51ac7516fc76fdba3672f84db71', class: "modal-shadow" }), hAsync("div", Object.assign({ key: 'a7a841a5b2f740fbf576b82b82782aa235b701ee',
|
|
27962
27791
|
/*
|
|
27963
27792
|
role and aria-modal must be used on the
|
|
27964
27793
|
same element. They must also be set inside the
|
|
27965
27794
|
shadow DOM otherwise ion-button will not be highlighted
|
|
27966
27795
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
27967
27796
|
*/
|
|
27968
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '
|
|
27797
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: 'ca5567e9ab3e9e80b41314d396106faf2da09ffe', class: "modal-handle",
|
|
27969
27798
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
27970
|
-
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) })), hAsync("slot", { key: '
|
|
27799
|
+
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) })), hAsync("slot", { key: 'da5471ea4292166798d3f949e79e7b3e55a0e83f', onSlotchange: this.onSlotChange }))));
|
|
27971
27800
|
}
|
|
27972
27801
|
get el() { return getElement(this); }
|
|
27973
27802
|
static get watchers() { return {
|
|
@@ -29555,30 +29384,6 @@ let Picker$1 = class Picker {
|
|
|
29555
29384
|
}; }
|
|
29556
29385
|
};
|
|
29557
29386
|
|
|
29558
|
-
/**
|
|
29559
|
-
* Ionic Picker Enter Animation
|
|
29560
|
-
*/
|
|
29561
|
-
const ionicEnterAnimation$2 = (baseEl) => {
|
|
29562
|
-
const baseAnimation = createAnimation();
|
|
29563
|
-
const backdropAnimation = createAnimation();
|
|
29564
|
-
const wrapperAnimation = createAnimation();
|
|
29565
|
-
backdropAnimation
|
|
29566
|
-
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
29567
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
29568
|
-
.beforeStyles({
|
|
29569
|
-
'pointer-events': 'none',
|
|
29570
|
-
})
|
|
29571
|
-
.afterClearStyles(['pointer-events']);
|
|
29572
|
-
wrapperAnimation
|
|
29573
|
-
.addElement(baseEl.querySelector('.picker-wrapper'))
|
|
29574
|
-
.fromTo('transform', 'translateY(100%)', 'translateY(0%)');
|
|
29575
|
-
return baseAnimation
|
|
29576
|
-
.addElement(baseEl)
|
|
29577
|
-
.easing('cubic-bezier(.36,.66,.04,1)')
|
|
29578
|
-
.duration(400)
|
|
29579
|
-
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
29580
|
-
};
|
|
29581
|
-
|
|
29582
29387
|
/**
|
|
29583
29388
|
* iOS Picker Enter Animation
|
|
29584
29389
|
*/
|
|
@@ -29749,7 +29554,7 @@ class Picker {
|
|
|
29749
29554
|
async present() {
|
|
29750
29555
|
const unlock = await this.lockController.lock();
|
|
29751
29556
|
await this.delegateController.attachViewToDom();
|
|
29752
|
-
await present(this, 'pickerEnter', iosEnterAnimation$2, iosEnterAnimation$2,
|
|
29557
|
+
await present(this, 'pickerEnter', iosEnterAnimation$2, iosEnterAnimation$2, undefined);
|
|
29753
29558
|
if (this.duration > 0) {
|
|
29754
29559
|
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
|
|
29755
29560
|
}
|
|
@@ -29834,11 +29639,11 @@ class Picker {
|
|
|
29834
29639
|
render() {
|
|
29835
29640
|
const { htmlAttributes } = this;
|
|
29836
29641
|
const theme = getIonTheme(this);
|
|
29837
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
29642
|
+
return (hAsync(Host, Object.assign({ key: 'efcc823fad9cb37c1379bef4f4b84c6461f3a3a6', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
|
|
29838
29643
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
29839
29644
|
}, class: Object.assign({ [theme]: true,
|
|
29840
29645
|
// Used internally for styling
|
|
29841
|
-
[`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '
|
|
29646
|
+
[`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '3f44bf34e039210ae149c590c393ee9f7fb85da0', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'c2a51a89c525b1a22cbc8583cd30f41c3c356d4f', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '23837ffe309d0aad9b8ea09d7ac94d21040ef0d7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '91ba7e553d570768142715ded4bcc27fceedbce4', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: '22661cafeb555f1435ec1e0a122404a48136095b', class: "picker-columns" }, hAsync("div", { key: '5f3db32468b8c60f63c70d81a27b18cce6f2e259', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '1bae6b170125b1671a480506ba73636b42b65909', class: "picker-below-highlight" }))), hAsync("div", { key: '91beb94ce537122fbd6cd0c2bd3c00f908d0fefe', tabindex: "0", "aria-hidden": "true" })));
|
|
29842
29647
|
}
|
|
29843
29648
|
get el() { return getElement(this); }
|
|
29844
29649
|
static get watchers() { return {
|
|
@@ -31791,92 +31596,6 @@ const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
|
|
|
31791
31596
|
return true;
|
|
31792
31597
|
};
|
|
31793
31598
|
|
|
31794
|
-
const POPOVER_MD_BODY_PADDING$1 = 12;
|
|
31795
|
-
/**
|
|
31796
|
-
* Ionic Popover Enter Animation
|
|
31797
|
-
*/
|
|
31798
|
-
// TODO(FW-2832): types
|
|
31799
|
-
const ionicEnterAnimation$1 = (baseEl, opts) => {
|
|
31800
|
-
var _a;
|
|
31801
|
-
const { event: ev, size, trigger, reference, side, align } = opts;
|
|
31802
|
-
const doc = baseEl.ownerDocument;
|
|
31803
|
-
const isRTL = doc.dir === 'rtl';
|
|
31804
|
-
const bodyWidth = doc.defaultView.innerWidth;
|
|
31805
|
-
const bodyHeight = doc.defaultView.innerHeight;
|
|
31806
|
-
const root = getElementRoot(baseEl);
|
|
31807
|
-
const contentEl = root.querySelector('.popover-content');
|
|
31808
|
-
const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
|
|
31809
|
-
const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
|
|
31810
|
-
const defaultPosition = {
|
|
31811
|
-
top: bodyHeight / 2 - contentHeight / 2,
|
|
31812
|
-
left: bodyWidth / 2 - contentWidth / 2,
|
|
31813
|
-
originX: isRTL ? 'right' : 'left',
|
|
31814
|
-
originY: 'top',
|
|
31815
|
-
};
|
|
31816
|
-
const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
|
|
31817
|
-
const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING$1;
|
|
31818
|
-
// MD mode now applies safe-area insets (previously passed 0, ignoring all safe areas).
|
|
31819
|
-
// This is needed for Android edge-to-edge (API 36+) where system bars overlap content.
|
|
31820
|
-
const safeArea = size === 'cover' ? { top: 0, bottom: 0, left: 0, right: 0 } : getSafeAreaInsets(doc);
|
|
31821
|
-
const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, checkSafeAreaTop, checkSafeAreaBottom, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, results.originX, results.originY, results.referenceCoordinates);
|
|
31822
|
-
const safeAreaLeftCalc = ' + var(--ion-safe-area-left, 0px)';
|
|
31823
|
-
const safeAreaRightCalc = ' - var(--ion-safe-area-right, 0px)';
|
|
31824
|
-
let leftValue = `${left}px`;
|
|
31825
|
-
if (checkSafeAreaLeft) {
|
|
31826
|
-
leftValue = `${left}px${safeAreaLeftCalc}`;
|
|
31827
|
-
}
|
|
31828
|
-
if (checkSafeAreaRight) {
|
|
31829
|
-
leftValue = `${left}px${safeAreaRightCalc}`;
|
|
31830
|
-
}
|
|
31831
|
-
let topValue = `${top}px`;
|
|
31832
|
-
if (checkSafeAreaTop) {
|
|
31833
|
-
topValue = `${top}px + var(--ion-safe-area-top, 0px)`;
|
|
31834
|
-
}
|
|
31835
|
-
const baseAnimation = createAnimation();
|
|
31836
|
-
const backdropAnimation = createAnimation();
|
|
31837
|
-
const wrapperAnimation = createAnimation();
|
|
31838
|
-
const contentAnimation = createAnimation();
|
|
31839
|
-
const viewportAnimation = createAnimation();
|
|
31840
|
-
backdropAnimation
|
|
31841
|
-
.addElement(root.querySelector('ion-backdrop'))
|
|
31842
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
31843
|
-
.beforeStyles({
|
|
31844
|
-
'pointer-events': 'none',
|
|
31845
|
-
})
|
|
31846
|
-
.afterClearStyles(['pointer-events']);
|
|
31847
|
-
wrapperAnimation.addElement(root.querySelector('.popover-wrapper')).duration(150).fromTo('opacity', 0.01, 1);
|
|
31848
|
-
contentAnimation
|
|
31849
|
-
.addElement(contentEl)
|
|
31850
|
-
.beforeStyles({
|
|
31851
|
-
top: `calc(${topValue} + var(--offset-y, 0px))`,
|
|
31852
|
-
left: `calc(${leftValue} + var(--offset-x, 0px))`,
|
|
31853
|
-
'transform-origin': `${originY} ${originX}`,
|
|
31854
|
-
})
|
|
31855
|
-
.beforeAddWrite(() => {
|
|
31856
|
-
if (bottom !== undefined) {
|
|
31857
|
-
let bottomValue = `${bottom}px`;
|
|
31858
|
-
if (checkSafeAreaBottom) {
|
|
31859
|
-
bottomValue = `${bottom}px + var(--ion-safe-area-bottom, 0px)`;
|
|
31860
|
-
}
|
|
31861
|
-
contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
|
|
31862
|
-
}
|
|
31863
|
-
})
|
|
31864
|
-
.fromTo('transform', 'scale(0.8)', 'scale(1)');
|
|
31865
|
-
viewportAnimation.addElement(root.querySelector('.popover-viewport')).fromTo('opacity', 0.01, 1);
|
|
31866
|
-
return baseAnimation
|
|
31867
|
-
.easing('cubic-bezier(0.36,0.66,0.04,1)')
|
|
31868
|
-
.duration(300)
|
|
31869
|
-
.beforeAddWrite(() => {
|
|
31870
|
-
if (size === 'cover') {
|
|
31871
|
-
baseEl.style.setProperty('--width', `${contentWidth}px`);
|
|
31872
|
-
}
|
|
31873
|
-
if (addPopoverBottomClass) {
|
|
31874
|
-
baseEl.classList.add('popover-bottom');
|
|
31875
|
-
}
|
|
31876
|
-
})
|
|
31877
|
-
.addAnimation([backdropAnimation, wrapperAnimation, contentAnimation, viewportAnimation]);
|
|
31878
|
-
};
|
|
31879
|
-
|
|
31880
31599
|
const POPOVER_IOS_BODY_PADDING = 5;
|
|
31881
31600
|
/**
|
|
31882
31601
|
* Minimum edge margin for iOS popovers ensures visual spacing from screen
|
|
@@ -32492,7 +32211,7 @@ class Popover {
|
|
|
32492
32211
|
else if (!this.keepContentsMounted) {
|
|
32493
32212
|
await waitForMount();
|
|
32494
32213
|
}
|
|
32495
|
-
await present(this, 'popoverEnter', iosEnterAnimation$1, mdEnterAnimation$1,
|
|
32214
|
+
await present(this, 'popoverEnter', iosEnterAnimation$1, mdEnterAnimation$1, {
|
|
32496
32215
|
event: event || this.event,
|
|
32497
32216
|
size: this.size,
|
|
32498
32217
|
trigger: this.triggerEl,
|
|
@@ -32601,9 +32320,9 @@ class Popover {
|
|
|
32601
32320
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
32602
32321
|
const desktop = isPlatform('desktop');
|
|
32603
32322
|
const enableArrow = arrow && !parentPopover;
|
|
32604
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
32323
|
+
return (hAsync(Host, Object.assign({ key: 'cc70f9b037b16ea78b999916106a1062ceb74cb6', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
32605
32324
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
32606
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '
|
|
32325
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: 'e641e7ee28cbd54911ec3f8c0bfd9d7e3f2e85cd', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '750494585c3524b27e42d79f02e729f3eff9e660', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '2e49b4ad1287e31a3cdbfebc91120405a998dc95', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '306586776e74acab787b2a96433553005bca580d', class: "popover-content", part: "content" }, hAsync("slot", { key: '0273c0975cd7dc37db5cfa0b91d418867a77c4d8' })))));
|
|
32607
32326
|
}
|
|
32608
32327
|
get el() { return getElement(this); }
|
|
32609
32328
|
static get watchers() { return {
|
|
@@ -33280,7 +32999,7 @@ function roundToMaxDecimalPlaces(n, ...references) {
|
|
|
33280
32999
|
return Number(n.toFixed(maxPlaces));
|
|
33281
33000
|
}
|
|
33282
33001
|
|
|
33283
|
-
const rangeIonicCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.range-disabled){pointer-events:none}::slotted(ion-label){-ms-flex:initial;flex:initial}.range-slider{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:-webkit-grabbing;cursor:grabbing}.range-pin{position:absolute;background:current-color(base);color:current-color(contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.range-knob-handle{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}.range-knob-handle{inset-inline-start:0}:host-context([dir=rtl]) .range-knob-handle{left:unset}[dir=rtl] .range-knob-handle{left:unset}@supports selector(:dir(rtl)){.range-knob-handle:dir(rtl){left:unset}}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar-container{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}.range-bar-container{inset-inline-start:0}:host-context([dir=rtl]) .range-bar-container{left:unset}[dir=rtl] .range-bar-container{left:unset}@supports selector(:dir(rtl)){.range-bar-container:dir(rtl){left:unset}}.range-bar{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-knob{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}.range-knob{inset-inline-start:calc(50% - var(--knob-size) / 2)}:host-context([dir=rtl]) .range-knob{left:unset}[dir=rtl] .range-knob{left:unset}@supports selector(:dir(rtl)){.range-knob:dir(rtl){left:unset}}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host([slot=start]),:host([slot=end]){width:auto}:host(.in-item) ::slotted(ion-label){-ms-flex-item-align:center;align-self:center}.range-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}:host(.range-label-placement-start) .range-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.range-label-placement-end) .range-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.range-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.range-label-placement-stacked) .range-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}:host(.range-label-placement-stacked) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host{--knob-border-radius:var(--token-border-radius-full, 999px);--knob-background:var(--token-bg-input-default, var(--token-primitives-base-white, #ffffff));--knob-box-shadow:none;--knob-size:var(--token-scale-600, 24px);--knob-handle-size:var(--token-scale-1100, 44px);--bar-height:var(--token-scale-200, 8px);--bar-background:var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));--bar-background-active:var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));--bar-border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px));--height:var(--token-scale-1100, 44px);font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none;z-index:var(--token-z-index-100, 100)}:host(.range-item-start-adjustment){-webkit-padding-start:var(--token-space-600, var(--token-scale-600, 24px));padding-inline-start:var(--token-space-600, var(--token-scale-600, 24px))}:host(.range-item-end-adjustment){-webkit-padding-end:var(--token-space-600, var(--token-scale-600, 24px));padding-inline-end:var(--token-space-600, var(--token-scale-600, 24px))}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-tick-active{background:var(--ion-color-base)}::slotted(ion-icon[slot]){font-size:var(--token-font-size-600, 1.5rem)}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}::slotted([slot=label]){max-width:var(--token-scale-5000, 200px)}:host(.range-has-pin:not(.range-label-placement-stacked)){padding-top:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--token-scale-600, 24px))}:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper{margin-bottom:calc(var(--token-space-200, var(--token-scale-200, 8px)) + var(--token-font-size-300, 0.75rem))}.range-bar.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-bar.range-bar-active.has-ticks{border-radius:0;-webkit-margin-start:calc(-1 * var(--token-scale-100, 4px) * 0.5);margin-inline-start:calc(-1 * var(--token-scale-100, 4px) * 0.5);-webkit-margin-end:calc(-1 * var(--token-scale-100, 4px) * 0.5);margin-inline-end:calc(-1 * var(--token-scale-100, 4px) * 0.5)}.range-tick{-webkit-margin-start:calc(var(--token-scale-100, 4px) * -0.5);margin-inline-start:calc(var(--token-scale-100, 4px) * -0.5);border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px));position:absolute;top:calc(var(--height) * 0.5 - var(--token-scale-300, 12px) * 0.5);width:var(--token-scale-100, 4px);height:var(--token-scale-300, 12px);background:var(--token-primitives-neutral-100, #f3f3f3);pointer-events:none}.range-tick-active{background:var(--bar-background-active)}.range-pin{padding-bottom:var(--token-space-100, var(--token-scale-100, 4px));min-width:var(--token-scale-700, 28px);-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);background:transparent;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));font-size:var(--token-font-size-300, 0.75rem);text-align:center}.range-knob{border-width:var(--token-border-size-025, var(--token-scale-025, 1px));border-style:var(--token-border-style-solid, solid);border-color:var(--token-border-primary, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));-webkit-box-sizing:border-box;box-sizing:border-box}:host(.range-disabled){--bar-background:var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9))}:host(.range-disabled) .range-knob{border-color:var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));background:var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f3f3f3))}:host(.range-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));margin-top:0;margin-bottom:0}:host(.range-label-placement-end) .label-text-wrapper{-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));margin-top:0;margin-bottom:0}:host(.range-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:var(--token-space-400, var(--token-scale-400, 16px));max-width:133.3333333333%}:host(.in-item.range-label-placement-stacked) .label-text-wrapper{margin-top:var(--token-space-250, var(--token-scale-250, 10px));margin-bottom:var(--token-space-400, var(--token-scale-400, 16px))}:host(.in-item.range-label-placement-stacked) .native-wrapper{margin-bottom:var(--token-space-0, var(--token-scale-0, 0px))}.range-knob-handle.ion-focused .range-knob{outline-offset:var(--token-border-size-050, var(--token-scale-050, 2px));outline:var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7))}.range-knob-handle.ion-activated .range-knob,.range-knob-handle.range-knob-pressed .range-knob{background:var(--token-bg-input-press, var(--token-primitives-neutral-200, #eae9e9))}`;
|
|
33002
|
+
const rangeIonicCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.range-disabled){pointer-events:none}::slotted(ion-label){-ms-flex:initial;flex:initial}.range-slider{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:-webkit-grabbing;cursor:grabbing}.range-pin{position:absolute;background:current-color(base);color:current-color(contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.range-knob-handle{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}.range-knob-handle{inset-inline-start:0}:host-context([dir=rtl]) .range-knob-handle{left:unset}[dir=rtl] .range-knob-handle{left:unset}@supports selector(:dir(rtl)){.range-knob-handle:dir(rtl){left:unset}}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar-container{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}.range-bar-container{inset-inline-start:0}:host-context([dir=rtl]) .range-bar-container{left:unset}[dir=rtl] .range-bar-container{left:unset}@supports selector(:dir(rtl)){.range-bar-container:dir(rtl){left:unset}}.range-bar{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-knob{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}.range-knob{inset-inline-start:calc(50% - var(--knob-size) / 2)}:host-context([dir=rtl]) .range-knob{left:unset}[dir=rtl] .range-knob{left:unset}@supports selector(:dir(rtl)){.range-knob:dir(rtl){left:unset}}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host([slot=start]),:host([slot=end]){width:auto}:host(.in-item) ::slotted(ion-label){-ms-flex-item-align:center;align-self:center}.range-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}:host(.range-label-placement-start) .range-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.range-label-placement-end) .range-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.range-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.range-label-placement-stacked) .range-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}:host(.range-label-placement-stacked) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host{--knob-border-radius:var(--token-border-radius-full, 999px);--knob-background:var(--token-bg-input-default, var(--token-primitives-base-white, #ffffff));--knob-box-shadow:none;--knob-size:var(--token-scale-600, 24px);--knob-handle-size:var(--token-scale-1100, 44px);--bar-height:var(--token-scale-200, 8px);--bar-background:var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));--bar-background-active:var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));--bar-border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px));--height:var(--token-scale-1100, 44px);font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none;z-index:var(--token-z-index-100, 100)}:host(.range-item-start-adjustment){-webkit-padding-start:var(--token-space-600, var(--token-scale-600, 24px));padding-inline-start:var(--token-space-600, var(--token-scale-600, 24px))}:host(.range-item-end-adjustment){-webkit-padding-end:var(--token-space-600, var(--token-scale-600, 24px));padding-inline-end:var(--token-space-600, var(--token-scale-600, 24px))}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-tick-active{background:var(--ion-color-base)}::slotted(ion-icon[slot]){font-size:var(--token-font-size-600, 1.5rem)}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}::slotted([slot=label]){max-width:var(--token-scale-5000, 200px)}:host(.range-has-pin:not(.range-label-placement-stacked)){padding-top:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--token-scale-600, 24px))}:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper{margin-bottom:calc(var(--token-space-200, var(--token-scale-200, 8px)) + var(--token-font-size-300, 0.75rem))}.range-bar.has-ticks{border-radius:0}.range-bar.range-bar-active.has-ticks{-webkit-margin-start:calc(-1 * var(--token-scale-100, 4px) * 0.5);margin-inline-start:calc(-1 * var(--token-scale-100, 4px) * 0.5);-webkit-margin-end:calc(-1 * var(--token-scale-100, 4px) * 0.5);margin-inline-end:calc(-1 * var(--token-scale-100, 4px) * 0.5)}.range-bar.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-tick{-webkit-margin-start:calc(var(--token-scale-100, 4px) * -0.5);margin-inline-start:calc(var(--token-scale-100, 4px) * -0.5);border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px));position:absolute;top:calc(var(--height) * 0.5 - var(--token-scale-400, 16px) * 0.5);width:var(--token-scale-050, 2px);height:var(--token-scale-400, 16px);background:var(--bar-background);pointer-events:none}.range-tick-active{background:var(--bar-background-active)}.range-pin{padding-bottom:var(--token-space-100, var(--token-scale-100, 4px));min-width:var(--token-scale-700, 28px);-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);background:transparent;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));font-size:var(--token-font-size-300, 0.75rem);text-align:center}.range-knob{border-width:var(--token-border-size-025, var(--token-scale-025, 1px));border-style:var(--token-border-style-solid, solid);border-color:var(--token-border-primary, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));-webkit-box-sizing:border-box;box-sizing:border-box}:host(.range-disabled){--bar-background:var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9))}:host(.range-disabled) .range-knob{border-color:var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));background:var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f3f3f3))}:host(.range-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));margin-top:0;margin-bottom:0}:host(.range-label-placement-end) .label-text-wrapper{-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));margin-top:0;margin-bottom:0}:host(.range-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:var(--token-space-400, var(--token-scale-400, 16px));max-width:133.3333333333%}:host(.in-item.range-label-placement-stacked) .label-text-wrapper{margin-top:var(--token-space-250, var(--token-scale-250, 10px));margin-bottom:var(--token-space-400, var(--token-scale-400, 16px))}:host(.in-item.range-label-placement-stacked) .native-wrapper{margin-bottom:var(--token-space-0, var(--token-scale-0, 0px))}.range-knob-handle.ion-focused .range-knob{outline-offset:var(--token-border-size-050, var(--token-scale-050, 2px));outline:var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7))}.range-knob-handle.ion-activated .range-knob,.range-knob-handle.range-knob-pressed .range-knob{background:var(--token-bg-input-press, var(--token-primitives-neutral-200, #eae9e9))}`;
|
|
33284
33003
|
|
|
33285
33004
|
const rangeIosCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.range-disabled){pointer-events:none}::slotted(ion-label){-ms-flex:initial;flex:initial}.range-slider{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:-webkit-grabbing;cursor:grabbing}.range-pin{position:absolute;background:current-color(base);color:current-color(contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.range-knob-handle{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}.range-knob-handle{inset-inline-start:0}:host-context([dir=rtl]) .range-knob-handle{left:unset}[dir=rtl] .range-knob-handle{left:unset}@supports selector(:dir(rtl)){.range-knob-handle:dir(rtl){left:unset}}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar-container{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}.range-bar-container{inset-inline-start:0}:host-context([dir=rtl]) .range-bar-container{left:unset}[dir=rtl] .range-bar-container{left:unset}@supports selector(:dir(rtl)){.range-bar-container:dir(rtl){left:unset}}.range-bar{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-knob{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}.range-knob{inset-inline-start:calc(50% - var(--knob-size) / 2)}:host-context([dir=rtl]) .range-knob{left:unset}[dir=rtl] .range-knob{left:unset}@supports selector(:dir(rtl)){.range-knob:dir(rtl){left:unset}}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host([slot=start]),:host([slot=end]){width:auto}:host(.in-item) ::slotted(ion-label){-ms-flex-item-align:center;align-self:center}.range-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}:host(.range-label-placement-start) .range-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.range-label-placement-end) .range-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.range-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.range-label-placement-stacked) .range-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}:host(.range-label-placement-stacked) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host{--knob-handle-size:calc(var(--knob-size) * 2);font-family:var(--ion-font-family, inherit);z-index:2}::slotted(ion-icon[slot]){font-size:24px}::slotted([slot=label]){max-width:200px}:host(.range-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.in-item.range-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.range-label-placement-stacked) .native-wrapper{margin-bottom:0px}:host{--knob-border-radius:50%;--knob-background:#ffffff;--knob-box-shadow:0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);--knob-size:26px;--bar-height:4px;--bar-background:var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));--bar-background-active:var(--ion-color-primary, #0054e9);--bar-border-radius:2px;--height:42px}:host(.range-item-start-adjustment){-webkit-padding-start:24px;padding-inline-start:24px}:host(.range-item-end-adjustment){-webkit-padding-end:24px;padding-inline-end:24px}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-tick-active{background:var(--ion-color-base)}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-has-pin:not(.range-label-placement-stacked)){padding-top:calc(8px + 0.75rem)}:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper{margin-bottom:calc(8px + 0.75rem)}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-bar-active.has-ticks{border-radius:0;-webkit-margin-start:-2px;margin-inline-start:-2px;-webkit-margin-end:-2px;margin-inline-end:-2px}.range-tick{-webkit-margin-start:-2px;margin-inline-start:-2px;border-radius:0;position:absolute;top:17px;width:4px;height:8px;background:var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));pointer-events:none}.range-tick-active{background:var(--bar-background-active)}.range-pin{-webkit-transform:translate3d(0, 100%, 0) scale(0.01);transform:translate3d(0, 100%, 0) scale(0.01);-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;min-width:28px;-webkit-transition:-webkit-transform 120ms ease;transition:-webkit-transform 120ms ease;transition:transform 120ms ease;transition:transform 120ms ease, -webkit-transform 120ms ease;background:transparent;color:var(--ion-text-color, #000);font-size:0.75rem;text-align:center}.range-knob-pressed .range-pin,.range-knob-handle.ion-focused .range-pin{-webkit-transform:translate3d(0, calc(-100% + 11px), 0) scale(1);transform:translate3d(0, calc(-100% + 11px), 0) scale(1)}:host(.range-disabled){opacity:0.3}`;
|
|
33286
33005
|
|
|
@@ -33968,7 +33687,10 @@ class Range {
|
|
|
33968
33687
|
} }, ticks.map((tick) => (hAsync("div", { style: tickStyle(tick), role: "presentation", class: {
|
|
33969
33688
|
'range-tick': true,
|
|
33970
33689
|
'range-tick-active': tick.active,
|
|
33971
|
-
}, part: tick.active ? 'tick-active' : 'tick' }))), hAsync("div", { class: "range-bar-container" }, hAsync("div", { class:
|
|
33690
|
+
}, part: tick.active ? 'tick-active' : 'tick' }))), hAsync("div", { class: "range-bar-container" }, hAsync("div", { class: {
|
|
33691
|
+
'range-bar': true,
|
|
33692
|
+
'has-ticks': ticks.length > 0,
|
|
33693
|
+
}, role: "presentation", part: "bar" }), hAsync("div", { class: {
|
|
33972
33694
|
'range-bar': true,
|
|
33973
33695
|
'range-bar-active': true,
|
|
33974
33696
|
'has-ticks': ticks.length > 0,
|
|
@@ -34046,7 +33768,7 @@ class Range {
|
|
|
34046
33768
|
const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
|
|
34047
33769
|
const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
|
|
34048
33770
|
renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
|
|
34049
|
-
return (hAsync(Host, { key: '
|
|
33771
|
+
return (hAsync(Host, { key: '1b8ca217fa6965fc038fb4ca8f0bc9142b3893ad', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
|
|
34050
33772
|
[theme]: true,
|
|
34051
33773
|
'in-item': inItem,
|
|
34052
33774
|
'range-disabled': disabled,
|
|
@@ -34060,10 +33782,10 @@ class Range {
|
|
|
34060
33782
|
'range-item-end-adjustment': needsEndAdjustment,
|
|
34061
33783
|
'range-value-min': valueAtMin,
|
|
34062
33784
|
'range-value-max': valueAtMax,
|
|
34063
|
-
}) }, hAsync("label", { key: '
|
|
33785
|
+
}) }, hAsync("label", { key: '98b02130c9bb5a9ba6557be28f1ac09be0d10806', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '570083103b51b335c805672918d69e997dc30e66', class: {
|
|
34064
33786
|
'label-text-wrapper': true,
|
|
34065
33787
|
'label-text-wrapper-hidden': !hasLabel,
|
|
34066
|
-
}, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '
|
|
33788
|
+
}, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '1e3233a747d0adca6611234d0675ce049ef979cf', class: "native-wrapper" }, hAsync("slot", { key: '4f06a217592a98d889420468eb282ba8652ef1cc', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '4286279dbadf0e92bffbd5e98d5e36cba095be3c', name: "end" })))));
|
|
34067
33789
|
}
|
|
34068
33790
|
get el() { return getElement(this); }
|
|
34069
33791
|
static get watchers() { return {
|
|
@@ -40187,7 +39909,7 @@ class Tab {
|
|
|
40187
39909
|
}; }
|
|
40188
39910
|
}
|
|
40189
39911
|
|
|
40190
|
-
const tabBarIonicCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-top:var(--border);background:var(--background);color:var(--color);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host(.tab-bar-full){width:auto;contain:strict;padding-bottom:var(--ion-safe-area-bottom, 0);padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);}:host([slot=top].tab-bar-full){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0}:host{--background:var(--ion-tab-bar-background, var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff)));--background-activated:var(--ion-tab-bar-background-activated, var(--token-bg-select-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));--background-focused:var(--ion-tab-bar-background-focused, transparent);--border:var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);--color:var(--ion-tab-bar-color, var(--token-primitives-neutral-800, #626262));--color-selected:var(--ion-tab-bar-color-selected, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));-ms-flex-pack:unset;justify-content:unset;max-width:100%;min-height:calc(var(--token-scale-1400, 56px) - var(--token-space-100, var(--token-scale-100, 4px)) * 2);gap:var(--token-space-300, var(--token-scale-300, 12px));-webkit-box-shadow:var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));box-shadow:var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));overflow:auto hidden;z-index:10}:host(.tab-bar-full){padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));padding-right:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0));padding-left:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-left, 0));}:host([slot=top].tab-bar-full){padding-top:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-top, 0));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host(.tab-bar-compact){-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px));position:absolute;-ms-flex-item-align:center;align-self:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;contain:content}:host([slot=top].tab-bar-compact){top:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-top, 0))}:host([slot=bottom].tab-bar-compact){bottom:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-bottom, 0))}:host(.tab-bar-soft){border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}:host(.tab-bar-round){border-radius:var(--token-border-radius-full, 999px)}:host(.tab-bar-rectangular){border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}`;
|
|
39912
|
+
const tabBarIonicCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-top:var(--border);background:var(--background);color:var(--color);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host(.tab-bar-full){width:auto;contain:strict;padding-bottom:var(--ion-safe-area-bottom, 0);padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);}:host([slot=top].tab-bar-full){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0}:host{--background:var(--ion-tab-bar-background, var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff)));--background-activated:var(--ion-tab-bar-background-activated, var(--token-bg-select-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));--background-focused:var(--ion-tab-bar-background-focused, transparent);--border:var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);--color:var(--ion-tab-bar-color, var(--token-primitives-neutral-800, #626262));--color-selected:var(--ion-tab-bar-color-selected, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));-ms-flex-pack:unset;justify-content:unset;max-width:100%;min-height:calc(var(--token-scale-1400, 56px) - var(--token-space-100, var(--token-scale-100, 4px)) * 2);gap:var(--token-space-300, var(--token-scale-300, 12px));-webkit-box-shadow:var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));box-shadow:var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));overflow:auto hidden;z-index:10}:host(.tab-bar-full){padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));padding-right:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0));padding-left:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-left, 0));}:host([slot=top].tab-bar-full){padding-top:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-top, 0));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host(.tab-bar-compact){-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px));position:absolute;-ms-flex-item-align:center;align-self:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;contain:content}:host([slot=top].tab-bar-compact){top:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-top, 0))}:host([slot=bottom].tab-bar-compact){bottom:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-bottom, 0))}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.tab-bar-translucent){--background:rgba(255, 255, 255, 0.6);-webkit-backdrop-filter:var(--tab-bar-backdrop-filter, blur(12px));backdrop-filter:var(--tab-bar-backdrop-filter, blur(12px))}:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){--background:transparent}}:host(.tab-bar-soft){border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}:host(.tab-bar-round){border-radius:var(--token-border-radius-full, 999px)}:host(.tab-bar-rectangular){border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}`;
|
|
40191
39913
|
|
|
40192
39914
|
const tabBarIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-top:var(--border);background:var(--background);color:var(--color);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host(.tab-bar-full){width:auto;contain:strict;padding-bottom:var(--ion-safe-area-bottom, 0);padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);}:host([slot=top].tab-bar-full){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0}:host{z-index:10}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){background:var(--ion-color-base)}:host{--background:var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));--background-focused:var(--ion-tab-bar-background-focused, #e0e0e0);--border:0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));--color:var(--ion-tab-bar-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666)));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));height:50px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.tab-bar-translucent){--background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(210%) blur(20px);backdrop-filter:saturate(210%) blur(20px)}:host(.ion-color.tab-bar-translucent){background:rgba(var(--ion-color-base-rgb), 0.8)}:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.6)}}`;
|
|
40193
39915
|
|
|
@@ -41458,34 +41180,6 @@ const getOffsetForMiddlePosition = (toastHeight, wrapperHeight) => {
|
|
|
41458
41180
|
return Math.floor(toastHeight / 2 - wrapperHeight / 2);
|
|
41459
41181
|
};
|
|
41460
41182
|
|
|
41461
|
-
/**
|
|
41462
|
-
* Ionic Toast Enter Animation
|
|
41463
|
-
*/
|
|
41464
|
-
const ionicEnterAnimation = (baseEl, opts) => {
|
|
41465
|
-
const baseAnimation = createAnimation();
|
|
41466
|
-
const wrapperAnimation = createAnimation();
|
|
41467
|
-
const { position, top, bottom } = opts;
|
|
41468
|
-
const root = getElementRoot(baseEl);
|
|
41469
|
-
const wrapperEl = root.querySelector('.toast-wrapper');
|
|
41470
|
-
wrapperAnimation.addElement(wrapperEl);
|
|
41471
|
-
switch (position) {
|
|
41472
|
-
case 'top':
|
|
41473
|
-
wrapperEl.style.setProperty('transform', `translateY(${top})`);
|
|
41474
|
-
wrapperAnimation.fromTo('opacity', 0.01, 1);
|
|
41475
|
-
break;
|
|
41476
|
-
case 'middle':
|
|
41477
|
-
const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
|
|
41478
|
-
wrapperEl.style.top = `${topPosition}px`;
|
|
41479
|
-
wrapperAnimation.fromTo('opacity', 0.01, 1);
|
|
41480
|
-
break;
|
|
41481
|
-
default:
|
|
41482
|
-
wrapperEl.style.setProperty('transform', `translateY(${bottom})`);
|
|
41483
|
-
wrapperAnimation.fromTo('opacity', 0.01, 1);
|
|
41484
|
-
break;
|
|
41485
|
-
}
|
|
41486
|
-
return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(400).addAnimation(wrapperAnimation);
|
|
41487
|
-
};
|
|
41488
|
-
|
|
41489
41183
|
/**
|
|
41490
41184
|
* iOS Toast Enter Animation
|
|
41491
41185
|
*/
|
|
@@ -42055,7 +41749,7 @@ class Toast {
|
|
|
42055
41749
|
* in the dismiss animation.
|
|
42056
41750
|
*/
|
|
42057
41751
|
this.lastPresentedPosition = animationPosition;
|
|
42058
|
-
await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation,
|
|
41752
|
+
await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, {
|
|
42059
41753
|
position,
|
|
42060
41754
|
top: animationPosition.top,
|
|
42061
41755
|
bottom: animationPosition.bottom,
|
|
@@ -42270,9 +41964,9 @@ class Toast {
|
|
|
42270
41964
|
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
|
|
42271
41965
|
printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
|
|
42272
41966
|
}
|
|
42273
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
41967
|
+
return (hAsync(Host, Object.assign({ key: '3507eaa18a5559a9052d34db180e176952dc466f', tabindex: "-1" }, this.htmlAttributes, { style: {
|
|
42274
41968
|
zIndex: `${60000 + this.overlayIndex}`,
|
|
42275
|
-
}, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '
|
|
41969
|
+
}, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '195eb90ccd82a13254e843b80be0f380325accb4', class: wrapperClass, part: "wrapper" }, hAsync("div", { key: 'd6072aa4a4848d72e68e04a7842d3f769f844ffc', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '02a1d72aaf401d27671906c8b84abd823def6da8', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '1f133c27927ad840f58ea2e9112719ef880bf9a5', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
|
|
42276
41970
|
}
|
|
42277
41971
|
get el() { return getElement(this); }
|
|
42278
41972
|
static get watchers() { return {
|