@ionic/core 8.6.3-dev.11750799190.186437ae → 8.6.3-dev.11751305829.1112929c
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/action-sheet.js +8 -9
- package/components/alert.js +7 -8
- package/components/ion-app.js +3 -1
- package/components/ion-datetime.js +8 -2
- package/components/ion-loading.js +7 -8
- package/components/ion-menu.js +27 -5
- package/components/ion-reorder-group.js +1 -2
- package/components/ion-router.js +1 -0
- package/components/ion-searchbar.js +4 -6
- package/components/ion-toast.js +6 -7
- package/components/modal.js +213 -15
- package/components/popover.js +8 -7
- package/dist/cjs/ion-action-sheet.cjs.entry.js +8 -9
- package/dist/cjs/ion-alert.cjs.entry.js +7 -8
- package/dist/cjs/ion-app_8.cjs.entry.js +3 -1
- package/dist/cjs/ion-datetime_3.cjs.entry.js +8 -2
- package/dist/cjs/ion-loading.cjs.entry.js +7 -8
- package/dist/cjs/ion-menu_3.cjs.entry.js +27 -5
- package/dist/cjs/ion-modal.cjs.entry.js +213 -15
- package/dist/cjs/ion-popover.cjs.entry.js +8 -7
- package/dist/cjs/ion-reorder_2.cjs.entry.js +1 -2
- package/dist/cjs/ion-route_4.cjs.entry.js +1 -0
- package/dist/cjs/ion-searchbar.cjs.entry.js +4 -6
- package/dist/cjs/ion-toast.cjs.entry.js +6 -7
- package/dist/collection/components/action-sheet/action-sheet.js +11 -12
- package/dist/collection/components/alert/alert.js +10 -11
- package/dist/collection/components/app/app.js +8 -3
- package/dist/collection/components/datetime/datetime.js +23 -8
- package/dist/collection/components/loading/loading.js +10 -11
- package/dist/collection/components/menu/menu.js +62 -19
- package/dist/collection/components/modal/animations/ios.enter.js +2 -2
- package/dist/collection/components/modal/animations/ios.leave.js +2 -2
- package/dist/collection/components/modal/animations/ios.transition.js +124 -0
- package/dist/collection/components/modal/modal.js +108 -17
- package/dist/collection/components/popover/popover.js +18 -14
- package/dist/collection/components/reorder-group/reorder-group.js +2 -3
- package/dist/collection/components/router/router.js +5 -1
- package/dist/collection/components/searchbar/searchbar.js +5 -7
- package/dist/collection/components/toast/toast.js +9 -10
- package/dist/docs.json +138 -72
- package/dist/esm/ion-action-sheet.entry.js +8 -9
- package/dist/esm/ion-alert.entry.js +7 -8
- package/dist/esm/ion-app_8.entry.js +3 -1
- package/dist/esm/ion-datetime_3.entry.js +8 -2
- package/dist/esm/ion-loading.entry.js +7 -8
- package/dist/esm/ion-menu_3.entry.js +27 -5
- package/dist/esm/ion-modal.entry.js +213 -15
- package/dist/esm/ion-popover.entry.js +8 -7
- package/dist/esm/ion-reorder_2.entry.js +1 -2
- package/dist/esm/ion-route_4.entry.js +1 -0
- package/dist/esm/ion-searchbar.entry.js +4 -6
- package/dist/esm/ion-toast.entry.js +6 -7
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-96389029.entry.js → p-01123ecf.entry.js} +1 -1
- package/dist/ionic/{p-cb787a4b.entry.js → p-03d21728.entry.js} +1 -1
- package/dist/ionic/{p-9e699d4a.entry.js → p-0d131a02.entry.js} +1 -1
- package/dist/ionic/p-0df5b2a5.entry.js +4 -0
- package/dist/ionic/{p-6b666996.entry.js → p-2d0eccfb.entry.js} +1 -1
- package/dist/ionic/{p-ead42a37.entry.js → p-5f671887.entry.js} +1 -1
- package/dist/ionic/p-69f91268.entry.js +4 -0
- package/dist/ionic/{p-2020aa51.entry.js → p-b758a177.entry.js} +1 -1
- package/dist/ionic/p-b9ba04ca.entry.js +4 -0
- package/dist/ionic/{p-cd12ed1c.entry.js → p-d8429eb4.entry.js} +1 -1
- package/dist/ionic/{p-3a4feac2.entry.js → p-e37d6c67.entry.js} +1 -1
- package/dist/types/components/action-sheet/action-sheet.d.ts +5 -6
- package/dist/types/components/alert/alert.d.ts +5 -6
- package/dist/types/components/app/app.d.ts +2 -0
- package/dist/types/components/datetime/datetime.d.ts +6 -0
- package/dist/types/components/loading/loading.d.ts +5 -6
- package/dist/types/components/menu/menu.d.ts +25 -3
- package/dist/types/components/modal/animations/ios.transition.d.ts +14 -0
- package/dist/types/components/modal/modal.d.ts +20 -6
- package/dist/types/components/popover/popover.d.ts +6 -5
- package/dist/types/components/reorder-group/reorder-group.d.ts +0 -1
- package/dist/types/components/router/router.d.ts +1 -0
- package/dist/types/components/searchbar/searchbar.d.ts +0 -2
- package/dist/types/components/toast/toast.d.ts +4 -5
- package/dist/types/components.d.ts +32 -18
- package/hydrate/index.js +293 -70
- package/hydrate/index.mjs +293 -70
- package/package.json +2 -2
- package/dist/ionic/p-6dd2e493.entry.js +0 -4
- package/dist/ionic/p-7149db7e.entry.js +0 -4
- package/dist/ionic/p-bec79123.entry.js +0 -4
package/hydrate/index.js
CHANGED
|
@@ -7539,16 +7539,15 @@ class ActionSheet {
|
|
|
7539
7539
|
}
|
|
7540
7540
|
/**
|
|
7541
7541
|
* Dismiss the action sheet overlay after it has been presented.
|
|
7542
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
7543
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
7544
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
7542
7545
|
*
|
|
7543
7546
|
* @param data Any data to emit in the dismiss events.
|
|
7544
7547
|
* @param role The role of the element that is dismissing the action sheet.
|
|
7545
7548
|
* This can be useful in a button handler for determining which button was
|
|
7546
|
-
* clicked to dismiss the action sheet.
|
|
7547
|
-
*
|
|
7548
|
-
*
|
|
7549
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
7550
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
7551
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
7549
|
+
* clicked to dismiss the action sheet. Some examples include:
|
|
7550
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
7552
7551
|
*/
|
|
7553
7552
|
async dismiss(data, role) {
|
|
7554
7553
|
const unlock = await this.lockController.lock();
|
|
@@ -7660,12 +7659,12 @@ class ActionSheet {
|
|
|
7660
7659
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
7661
7660
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
7662
7661
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
7663
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
7662
|
+
return (hAsync(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
7664
7663
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
7665
|
-
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '
|
|
7664
|
+
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '81cf3f7d19864e041813987b46d2d115b8466819', tappable: this.backdropDismiss }), hAsync("div", { key: '791c6a976683646fc306a42c15c5078b6f06a45f', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a350b489ef7852eab9dc2227ce6d92da27dd9bf9', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '69ba51ee13510c1a411d87cb4845b11b7302a36f', class: "action-sheet-container" }, hAsync("div", { key: 'bded15b8306c36591e526f0f99e1eeabcbab3915', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (hAsync("div", { key: '06b5147c0f6d9180fe8f12e75c9b4a0310226adc', id: headerID, class: {
|
|
7666
7665
|
'action-sheet-title': true,
|
|
7667
7666
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
7668
|
-
} }, header, this.subHeader && hAsync("div", { key: '
|
|
7667
|
+
} }, header, this.subHeader && hAsync("div", { key: '54874362a75c679aba803bf4f8768f5404d2dd28', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (hAsync("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass$3(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), hAsync("span", { class: "action-sheet-button-inner" }, b.icon && hAsync("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && hAsync("ion-ripple-effect", null))))), cancelButton && (hAsync("div", { key: '67b0de298eb424f3dea846a841b7a06d70e3930d', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'e7e3f9a5495eea9b97dbf885ef36944f2e420eff' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: 'f889d29ed6c3d14bbc1d805888351d87f5122377', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '7c05cf424b38c37fd40aaeb42a494387291571fb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: 'bed927b477dc2708a5123ef560274fca9819b3d6' })))))), hAsync("div", { key: 'c5df1b11dc15a93892d57065d3dd5fbe02e43b39', tabindex: "0", "aria-hidden": "true" })));
|
|
7669
7668
|
}
|
|
7670
7669
|
get el() { return getElement(this); }
|
|
7671
7670
|
static get watchers() { return {
|
|
@@ -8218,16 +8217,15 @@ class Alert {
|
|
|
8218
8217
|
}
|
|
8219
8218
|
/**
|
|
8220
8219
|
* Dismiss the alert overlay after it has been presented.
|
|
8220
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
8221
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
8222
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
8221
8223
|
*
|
|
8222
8224
|
* @param data Any data to emit in the dismiss events.
|
|
8223
8225
|
* @param role The role of the element that is dismissing the alert.
|
|
8224
8226
|
* This can be useful in a button handler for determining which button was
|
|
8225
|
-
* clicked to dismiss the alert.
|
|
8226
|
-
*
|
|
8227
|
-
*
|
|
8228
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
8229
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
8230
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
8227
|
+
* clicked to dismiss the alert. Some examples include:
|
|
8228
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
8231
8229
|
*/
|
|
8232
8230
|
async dismiss(data, role) {
|
|
8233
8231
|
const unlock = await this.lockController.lock();
|
|
@@ -8395,9 +8393,9 @@ class Alert {
|
|
|
8395
8393
|
* If neither are defined, do not set aria-labelledby.
|
|
8396
8394
|
*/
|
|
8397
8395
|
const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
|
|
8398
|
-
return (hAsync(Host, { key: '
|
|
8396
|
+
return (hAsync(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
|
|
8399
8397
|
zIndex: `${20000 + overlayIndex}`,
|
|
8400
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '
|
|
8398
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '3cd5ca8b99cb95b11dd22ab41a820d841142896f', tappable: this.backdropDismiss }), hAsync("div", { key: '4cc62ae6e21424057d22aeef1e8fc77011e77cd5', tabindex: "0", "aria-hidden": "true" }), hAsync("div", Object.assign({ key: '364057a69f25aa88904df17bdcf7e5bf714e7830', 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: '78694e3c0db2d408df3899fb1a90859bcc8d14cc', class: "alert-head" }, header && (hAsync("h2", { key: 'ec88ff3e4e1ea871b5975133fdcf4cac38b05e0f', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '9b09bc8bb68af255ef8b7d22587acc946148e544', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '99abe815f75d2df7f1b77c0df9f3436724fea76f', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'a43d0c22c0e46b1ef911f92ffeb253d7911b85f7', tabindex: "0", "aria-hidden": "true" })));
|
|
8401
8399
|
}
|
|
8402
8400
|
get el() { return getElement(this); }
|
|
8403
8401
|
static get watchers() { return {
|
|
@@ -8466,6 +8464,8 @@ class App {
|
|
|
8466
8464
|
* a result of another user action. (Ex: We focus the first element
|
|
8467
8465
|
* inside of a popover when the user presents it, but the popover is not always
|
|
8468
8466
|
* presented as a result of keyboard action.)
|
|
8467
|
+
*
|
|
8468
|
+
* @param elements An array of HTML elements to set focus on.
|
|
8469
8469
|
*/
|
|
8470
8470
|
async setFocus(elements) {
|
|
8471
8471
|
if (this.focusVisible) {
|
|
@@ -8474,7 +8474,7 @@ class App {
|
|
|
8474
8474
|
}
|
|
8475
8475
|
render() {
|
|
8476
8476
|
const mode = getIonMode$1(this);
|
|
8477
|
-
return (hAsync(Host, { key: '
|
|
8477
|
+
return (hAsync(Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
|
|
8478
8478
|
[mode]: true,
|
|
8479
8479
|
'ion-page': true,
|
|
8480
8480
|
'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
|
|
@@ -13094,6 +13094,8 @@ class Datetime {
|
|
|
13094
13094
|
* Confirms the selected datetime value, updates the
|
|
13095
13095
|
* `value` property, and optionally closes the popover
|
|
13096
13096
|
* or modal that the datetime was presented in.
|
|
13097
|
+
*
|
|
13098
|
+
* @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
|
|
13097
13099
|
*/
|
|
13098
13100
|
async confirm(closeOverlay = false) {
|
|
13099
13101
|
const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
|
|
@@ -13127,6 +13129,8 @@ class Datetime {
|
|
|
13127
13129
|
* Resets the internal state of the datetime but does not update the value.
|
|
13128
13130
|
* Passing a valid ISO-8601 string will reset the state of the component to the provided date.
|
|
13129
13131
|
* If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
|
|
13132
|
+
*
|
|
13133
|
+
* @param startDate A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to.
|
|
13130
13134
|
*/
|
|
13131
13135
|
async reset(startDate) {
|
|
13132
13136
|
this.processValue(startDate);
|
|
@@ -13136,6 +13140,8 @@ class Datetime {
|
|
|
13136
13140
|
* optionally closes the popover
|
|
13137
13141
|
* or modal that the datetime was
|
|
13138
13142
|
* presented in.
|
|
13143
|
+
*
|
|
13144
|
+
* @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
|
|
13139
13145
|
*/
|
|
13140
13146
|
async cancel(closeOverlay = false) {
|
|
13141
13147
|
this.ionCancel.emit();
|
|
@@ -13949,7 +13955,7 @@ class Datetime {
|
|
|
13949
13955
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
13950
13956
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
13951
13957
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
13952
|
-
return (hAsync(Host, { key: '
|
|
13958
|
+
return (hAsync(Host, { key: '79677f5bc0fb32fb68569636bd76e68238e62eb8', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
|
|
13953
13959
|
[mode]: true,
|
|
13954
13960
|
['datetime-readonly']: readonly,
|
|
13955
13961
|
['datetime-disabled']: disabled,
|
|
@@ -13959,7 +13965,7 @@ class Datetime {
|
|
|
13959
13965
|
[`datetime-size-${size}`]: true,
|
|
13960
13966
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
13961
13967
|
[`datetime-grid`]: isGridStyle,
|
|
13962
|
-
})) }, hAsync("div", { key: '
|
|
13968
|
+
})) }, hAsync("div", { key: 'bf07b1e3c64af6e837663ff470bea93787a6e86f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
13963
13969
|
}
|
|
13964
13970
|
get el() { return getElement(this); }
|
|
13965
13971
|
static get watchers() { return {
|
|
@@ -19007,16 +19013,15 @@ class Loading {
|
|
|
19007
19013
|
}
|
|
19008
19014
|
/**
|
|
19009
19015
|
* Dismiss the loading overlay after it has been presented.
|
|
19016
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
19017
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
19018
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
19010
19019
|
*
|
|
19011
19020
|
* @param data Any data to emit in the dismiss events.
|
|
19012
19021
|
* @param role The role of the element that is dismissing the loading.
|
|
19013
19022
|
* This can be useful in a button handler for determining which button was
|
|
19014
|
-
* clicked to dismiss the loading.
|
|
19015
|
-
*
|
|
19016
|
-
*
|
|
19017
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
19018
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
19019
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
19023
|
+
* clicked to dismiss the loading. Some examples include:
|
|
19024
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
19020
19025
|
*/
|
|
19021
19026
|
async dismiss(data, role) {
|
|
19022
19027
|
const unlock = await this.lockController.lock();
|
|
@@ -19058,9 +19063,9 @@ class Loading {
|
|
|
19058
19063
|
* Otherwise, don't set aria-labelledby.
|
|
19059
19064
|
*/
|
|
19060
19065
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
19061
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
19066
|
+
return (hAsync(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
19062
19067
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
19063
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '
|
|
19068
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '231dec84e424a2dc358ce95b84d6035cf43e4dea', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'c9af29b6e6bb49a217396a5c874bbfb8835a926c', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a8659863743cdeccbe1ba810eaabfd3ebfcb86f3', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '3b346f39bc71691bd8686556a1e142198a7b12fa', class: "loading-spinner" }, hAsync("ion-spinner", { key: '8dc2bf1556e5138e262827f1516c59ecd09f3520', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '054164c0dbae9a0e0973dd3c8e28f5b771820310', tabindex: "0", "aria-hidden": "true" })));
|
|
19064
19069
|
}
|
|
19065
19070
|
get el() { return getElement(this); }
|
|
19066
19071
|
static get watchers() { return {
|
|
@@ -19688,7 +19693,7 @@ class Menu {
|
|
|
19688
19693
|
return Promise.resolve(this._isOpen);
|
|
19689
19694
|
}
|
|
19690
19695
|
/**
|
|
19691
|
-
* Returns `true`
|
|
19696
|
+
* Returns `true` if the menu is active.
|
|
19692
19697
|
*
|
|
19693
19698
|
* A menu is active when it can be opened or closed, meaning it's enabled
|
|
19694
19699
|
* and it's not part of a `ion-split-pane`.
|
|
@@ -19699,6 +19704,10 @@ class Menu {
|
|
|
19699
19704
|
/**
|
|
19700
19705
|
* Opens the menu. If the menu is already open or it can't be opened,
|
|
19701
19706
|
* it returns `false`.
|
|
19707
|
+
*
|
|
19708
|
+
* @param animated If `true`, the menu will animate when opening.
|
|
19709
|
+
* If `false`, the menu will open instantly without animation.
|
|
19710
|
+
* Defaults to `true`.
|
|
19702
19711
|
*/
|
|
19703
19712
|
open(animated = true) {
|
|
19704
19713
|
return this.setOpen(true, animated);
|
|
@@ -19706,20 +19715,38 @@ class Menu {
|
|
|
19706
19715
|
/**
|
|
19707
19716
|
* Closes the menu. If the menu is already closed or it can't be closed,
|
|
19708
19717
|
* it returns `false`.
|
|
19718
|
+
*
|
|
19719
|
+
* @param animated If `true`, the menu will animate when closing. If `false`,
|
|
19720
|
+
* the menu will close instantly without animation. Defaults to `true`.
|
|
19721
|
+
* @param role The role of the element that is closing the menu.
|
|
19722
|
+
* This can be useful in a button handler for determining which button was
|
|
19723
|
+
* clicked to close the menu. Some examples include:
|
|
19724
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
19709
19725
|
*/
|
|
19710
19726
|
close(animated = true, role) {
|
|
19711
19727
|
return this.setOpen(false, animated, role);
|
|
19712
19728
|
}
|
|
19713
19729
|
/**
|
|
19714
|
-
* Toggles the menu. If the menu is already open, it will try to close,
|
|
19730
|
+
* Toggles the menu. If the menu is already open, it will try to close,
|
|
19731
|
+
* otherwise it will try to open it.
|
|
19715
19732
|
* If the operation can't be completed successfully, it returns `false`.
|
|
19733
|
+
*
|
|
19734
|
+
* @param animated If `true`, the menu will animate when opening/closing.
|
|
19735
|
+
* If `false`, the menu will open/close instantly without animation.
|
|
19736
|
+
* Defaults to `true`.
|
|
19716
19737
|
*/
|
|
19717
19738
|
toggle(animated = true) {
|
|
19718
19739
|
return this.setOpen(!this._isOpen, animated);
|
|
19719
19740
|
}
|
|
19720
19741
|
/**
|
|
19721
|
-
* Opens or closes the
|
|
19742
|
+
* Opens or closes the menu.
|
|
19722
19743
|
* If the operation can't be completed successfully, it returns `false`.
|
|
19744
|
+
*
|
|
19745
|
+
* @param shouldOpen If `true`, the menu will open. If `false`, the menu
|
|
19746
|
+
* will close.
|
|
19747
|
+
* @param animated If `true`, the menu will animate when opening/closing.
|
|
19748
|
+
* If `false`, the menu will open/close instantly without animation.
|
|
19749
|
+
* @param role The role of the element that is closing the menu.
|
|
19723
19750
|
*/
|
|
19724
19751
|
setOpen(shouldOpen, animated = true, role) {
|
|
19725
19752
|
return menuController._setOpen(this, shouldOpen, animated, role);
|
|
@@ -20084,14 +20111,14 @@ class Menu {
|
|
|
20084
20111
|
* the ionBackButton listener in the menu controller
|
|
20085
20112
|
* will handle closing the menu when Escape is pressed.
|
|
20086
20113
|
*/
|
|
20087
|
-
return (hAsync(Host, { key: '
|
|
20114
|
+
return (hAsync(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
20088
20115
|
[mode]: true,
|
|
20089
20116
|
[`menu-type-${type}`]: true,
|
|
20090
20117
|
'menu-enabled': !disabled,
|
|
20091
20118
|
[`menu-side-${side}`]: true,
|
|
20092
20119
|
'menu-pane-visible': isPaneVisible,
|
|
20093
20120
|
'split-pane-side': hostContext('ion-split-pane', el),
|
|
20094
|
-
} }, hAsync("div", { key: '
|
|
20121
|
+
} }, hAsync("div", { key: '3f5f70acd4d3ed6bb445122f4f01d73db738a75f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '3161326c9330e7f7441299c428b87a91b31a83e9' })), hAsync("ion-backdrop", { key: '917b50f38489bdf03d0c642af8b4e4e172c7dc4c', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
20095
20122
|
}
|
|
20096
20123
|
get el() { return getElement(this); }
|
|
20097
20124
|
static get watchers() { return {
|
|
@@ -21191,7 +21218,7 @@ const iosEnterAnimation$3 = (baseEl, opts) => {
|
|
|
21191
21218
|
baseAnimation.addAnimation(contentAnimation);
|
|
21192
21219
|
}
|
|
21193
21220
|
if (presentingEl) {
|
|
21194
|
-
const
|
|
21221
|
+
const isPortrait = window.innerWidth < 768;
|
|
21195
21222
|
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
21196
21223
|
const presentingElRoot = getElementRoot(presentingEl);
|
|
21197
21224
|
const presentingAnimation = createAnimation().beforeStyles({
|
|
@@ -21200,7 +21227,7 @@ const iosEnterAnimation$3 = (baseEl, opts) => {
|
|
|
21200
21227
|
overflow: 'hidden',
|
|
21201
21228
|
});
|
|
21202
21229
|
const bodyEl = document.body;
|
|
21203
|
-
if (
|
|
21230
|
+
if (isPortrait) {
|
|
21204
21231
|
/**
|
|
21205
21232
|
* Fallback for browsers that does not support `max()` (ex: Firefox)
|
|
21206
21233
|
* No need to worry about statusbar padding since engines like Gecko
|
|
@@ -21278,7 +21305,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
|
|
|
21278
21305
|
.duration(duration)
|
|
21279
21306
|
.addAnimation(wrapperAnimation);
|
|
21280
21307
|
if (presentingEl) {
|
|
21281
|
-
const
|
|
21308
|
+
const isPortrait = window.innerWidth < 768;
|
|
21282
21309
|
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
21283
21310
|
const presentingElRoot = getElementRoot(presentingEl);
|
|
21284
21311
|
const presentingAnimation = createAnimation()
|
|
@@ -21296,7 +21323,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
|
|
|
21296
21323
|
}
|
|
21297
21324
|
});
|
|
21298
21325
|
const bodyEl = document.body;
|
|
21299
|
-
if (
|
|
21326
|
+
if (isPortrait) {
|
|
21300
21327
|
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
21301
21328
|
const modalTransform = hasCardModal ? '-10px' : transformOffset;
|
|
21302
21329
|
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
@@ -21343,6 +21370,125 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
|
|
|
21343
21370
|
return baseAnimation;
|
|
21344
21371
|
};
|
|
21345
21372
|
|
|
21373
|
+
/**
|
|
21374
|
+
* Transition animation from portrait view to landscape view
|
|
21375
|
+
* This handles the case where a card modal is open in portrait view
|
|
21376
|
+
* and the user switches to landscape view
|
|
21377
|
+
*/
|
|
21378
|
+
const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
|
|
21379
|
+
const { presentingEl } = opts;
|
|
21380
|
+
if (!presentingEl) {
|
|
21381
|
+
// No transition needed for non-card modals
|
|
21382
|
+
return createAnimation('portrait-to-landscape-transition');
|
|
21383
|
+
}
|
|
21384
|
+
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
21385
|
+
const presentingElRoot = getElementRoot(presentingEl);
|
|
21386
|
+
const bodyEl = document.body;
|
|
21387
|
+
const baseAnimation = createAnimation('portrait-to-landscape-transition')
|
|
21388
|
+
.addElement(baseEl)
|
|
21389
|
+
.easing('cubic-bezier(0.32,0.72,0,1)')
|
|
21390
|
+
.duration(duration);
|
|
21391
|
+
const presentingAnimation = createAnimation();
|
|
21392
|
+
if (!hasCardModal) {
|
|
21393
|
+
// Non-card modal: transition from portrait state to landscape state
|
|
21394
|
+
// Portrait: presentingEl has transform and body has black background
|
|
21395
|
+
// Landscape: no transform, no body background, modal wrapper opacity changes
|
|
21396
|
+
const root = getElementRoot(baseEl);
|
|
21397
|
+
const wrapperAnimation = createAnimation()
|
|
21398
|
+
.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
|
|
21399
|
+
.fromTo('opacity', '1', '1'); // Keep wrapper visible in landscape
|
|
21400
|
+
const backdropAnimation = createAnimation()
|
|
21401
|
+
.addElement(root.querySelector('ion-backdrop'))
|
|
21402
|
+
.fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
|
|
21403
|
+
// Animate presentingEl from portrait state back to normal
|
|
21404
|
+
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
21405
|
+
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
21406
|
+
const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
|
|
21407
|
+
presentingAnimation
|
|
21408
|
+
.addElement(presentingEl)
|
|
21409
|
+
.beforeAddWrite(() => bodyEl.style.setProperty('background-color', ''))
|
|
21410
|
+
.fromTo('transform', fromTransform, 'translateY(0px) scale(1)')
|
|
21411
|
+
.fromTo('filter', 'contrast(0.85)', 'contrast(1)')
|
|
21412
|
+
.fromTo('border-radius', '10px 10px 0 0', '0px');
|
|
21413
|
+
baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
|
|
21414
|
+
}
|
|
21415
|
+
else {
|
|
21416
|
+
// Card modal: transition from portrait card state to landscape card state
|
|
21417
|
+
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
21418
|
+
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
21419
|
+
const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
|
|
21420
|
+
const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
|
|
21421
|
+
presentingAnimation
|
|
21422
|
+
.addElement(presentingElRoot.querySelector('.modal-wrapper'))
|
|
21423
|
+
.fromTo('transform', fromTransform, toTransform)
|
|
21424
|
+
.fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
|
|
21425
|
+
const shadowAnimation = createAnimation()
|
|
21426
|
+
.addElement(presentingElRoot.querySelector('.modal-shadow'))
|
|
21427
|
+
.fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
|
|
21428
|
+
.fromTo('transform', fromTransform, toTransform);
|
|
21429
|
+
baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
|
|
21430
|
+
}
|
|
21431
|
+
return baseAnimation;
|
|
21432
|
+
};
|
|
21433
|
+
/**
|
|
21434
|
+
* Transition animation from landscape view to portrait view
|
|
21435
|
+
* This handles the case where a card modal is open in landscape view
|
|
21436
|
+
* and the user switches to portrait view
|
|
21437
|
+
*/
|
|
21438
|
+
const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
|
|
21439
|
+
const { presentingEl } = opts;
|
|
21440
|
+
if (!presentingEl) {
|
|
21441
|
+
// No transition needed for non-card modals
|
|
21442
|
+
return createAnimation('landscape-to-portrait-transition');
|
|
21443
|
+
}
|
|
21444
|
+
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
21445
|
+
const presentingElRoot = getElementRoot(presentingEl);
|
|
21446
|
+
const bodyEl = document.body;
|
|
21447
|
+
const baseAnimation = createAnimation('landscape-to-portrait-transition')
|
|
21448
|
+
.addElement(baseEl)
|
|
21449
|
+
.easing('cubic-bezier(0.32,0.72,0,1)')
|
|
21450
|
+
.duration(duration);
|
|
21451
|
+
const presentingAnimation = createAnimation();
|
|
21452
|
+
if (!hasCardModal) {
|
|
21453
|
+
// Non-card modal: transition from landscape state to portrait state
|
|
21454
|
+
const root = getElementRoot(baseEl);
|
|
21455
|
+
const wrapperAnimation = createAnimation()
|
|
21456
|
+
.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
|
|
21457
|
+
.fromTo('opacity', '1', '1'); // Keep wrapper visible
|
|
21458
|
+
const backdropAnimation = createAnimation()
|
|
21459
|
+
.addElement(root.querySelector('ion-backdrop'))
|
|
21460
|
+
.fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
|
|
21461
|
+
// Animate presentingEl from normal state to portrait state
|
|
21462
|
+
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
21463
|
+
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
21464
|
+
const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
|
|
21465
|
+
presentingAnimation
|
|
21466
|
+
.addElement(presentingEl)
|
|
21467
|
+
.beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
|
|
21468
|
+
.fromTo('transform', 'translateY(0px) scale(1)', toTransform)
|
|
21469
|
+
.fromTo('filter', 'contrast(1)', 'contrast(0.85)')
|
|
21470
|
+
.fromTo('border-radius', '0px', '10px 10px 0 0');
|
|
21471
|
+
baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
|
|
21472
|
+
}
|
|
21473
|
+
else {
|
|
21474
|
+
// Card modal: transition from landscape card state to portrait card state
|
|
21475
|
+
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
21476
|
+
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
21477
|
+
const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
|
|
21478
|
+
const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
|
|
21479
|
+
presentingAnimation
|
|
21480
|
+
.addElement(presentingElRoot.querySelector('.modal-wrapper'))
|
|
21481
|
+
.fromTo('transform', fromTransform, toTransform)
|
|
21482
|
+
.fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
|
|
21483
|
+
const shadowAnimation = createAnimation()
|
|
21484
|
+
.addElement(presentingElRoot.querySelector('.modal-shadow'))
|
|
21485
|
+
.fromTo('opacity', '0', '0') // Shadow stays hidden
|
|
21486
|
+
.fromTo('transform', fromTransform, toTransform);
|
|
21487
|
+
baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
|
|
21488
|
+
}
|
|
21489
|
+
return baseAnimation;
|
|
21490
|
+
};
|
|
21491
|
+
|
|
21346
21492
|
const createEnterAnimation = () => {
|
|
21347
21493
|
const backdropAnimation = createAnimation()
|
|
21348
21494
|
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
@@ -22096,6 +22242,17 @@ class Modal {
|
|
|
22096
22242
|
el.dispatchEvent(ev);
|
|
22097
22243
|
}
|
|
22098
22244
|
};
|
|
22245
|
+
/**
|
|
22246
|
+
* When the modal receives focus directly, pass focus to the handle
|
|
22247
|
+
* if it exists and is focusable, otherwise let the focus trap handle it.
|
|
22248
|
+
*/
|
|
22249
|
+
this.onModalFocus = (ev) => {
|
|
22250
|
+
const { dragHandleEl, el } = this;
|
|
22251
|
+
// Only handle focus if the modal itself was focused (not a child element)
|
|
22252
|
+
if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
|
|
22253
|
+
dragHandleEl.focus();
|
|
22254
|
+
}
|
|
22255
|
+
};
|
|
22099
22256
|
}
|
|
22100
22257
|
onIsOpenChange(newValue, oldValue) {
|
|
22101
22258
|
if (newValue === true && oldValue === false) {
|
|
@@ -22123,6 +22280,7 @@ class Modal {
|
|
|
22123
22280
|
}
|
|
22124
22281
|
disconnectedCallback() {
|
|
22125
22282
|
this.triggerController.removeClickListener();
|
|
22283
|
+
this.cleanupViewTransitionListener();
|
|
22126
22284
|
}
|
|
22127
22285
|
componentWillLoad() {
|
|
22128
22286
|
var _a;
|
|
@@ -22333,6 +22491,8 @@ class Modal {
|
|
|
22333
22491
|
else if (hasCardModal) {
|
|
22334
22492
|
this.initSwipeToClose();
|
|
22335
22493
|
}
|
|
22494
|
+
// Initialize view transition listener for iOS card modals
|
|
22495
|
+
this.initViewTransitionListener();
|
|
22336
22496
|
unlock();
|
|
22337
22497
|
}
|
|
22338
22498
|
initSwipeToClose() {
|
|
@@ -22427,13 +22587,13 @@ class Modal {
|
|
|
22427
22587
|
}
|
|
22428
22588
|
/**
|
|
22429
22589
|
* Dismiss the modal overlay after it has been presented.
|
|
22430
|
-
*
|
|
22431
|
-
* @param data Any data to emit in the dismiss events.
|
|
22432
|
-
* @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
|
|
22433
|
-
*
|
|
22434
22590
|
* This is a no-op if the overlay has not been presented yet. If you want
|
|
22435
22591
|
* to remove an overlay from the DOM that was never presented, use the
|
|
22436
22592
|
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
22593
|
+
*
|
|
22594
|
+
* @param data Any data to emit in the dismiss events.
|
|
22595
|
+
* @param role The role of the element that is dismissing the modal.
|
|
22596
|
+
* For example, `cancel` or `backdrop`.
|
|
22437
22597
|
*/
|
|
22438
22598
|
async dismiss(data, role) {
|
|
22439
22599
|
var _a;
|
|
@@ -22486,6 +22646,7 @@ class Modal {
|
|
|
22486
22646
|
if (this.gesture) {
|
|
22487
22647
|
this.gesture.destroy();
|
|
22488
22648
|
}
|
|
22649
|
+
this.cleanupViewTransitionListener();
|
|
22489
22650
|
}
|
|
22490
22651
|
this.currentBreakpoint = undefined;
|
|
22491
22652
|
this.animation = undefined;
|
|
@@ -22505,8 +22666,10 @@ class Modal {
|
|
|
22505
22666
|
return eventMethod(this.el, 'ionModalWillDismiss');
|
|
22506
22667
|
}
|
|
22507
22668
|
/**
|
|
22508
|
-
* Move a sheet style modal to a specific breakpoint.
|
|
22509
|
-
*
|
|
22669
|
+
* Move a sheet style modal to a specific breakpoint.
|
|
22670
|
+
*
|
|
22671
|
+
* @param breakpoint The breakpoint value to move the sheet modal to.
|
|
22672
|
+
* Must be a value defined in your `breakpoints` array.
|
|
22510
22673
|
*/
|
|
22511
22674
|
async setCurrentBreakpoint(breakpoint) {
|
|
22512
22675
|
if (!this.isSheetModal) {
|
|
@@ -22559,26 +22722,88 @@ class Modal {
|
|
|
22559
22722
|
await this.setCurrentBreakpoint(nextBreakpoint);
|
|
22560
22723
|
return true;
|
|
22561
22724
|
}
|
|
22725
|
+
initViewTransitionListener() {
|
|
22726
|
+
// Only enable for iOS card modals when no custom animations are provided
|
|
22727
|
+
if (getIonMode$1(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
|
|
22728
|
+
return;
|
|
22729
|
+
}
|
|
22730
|
+
// Set initial view state
|
|
22731
|
+
this.currentViewIsPortrait = window.innerWidth < 768;
|
|
22732
|
+
// Create debounced resize handler
|
|
22733
|
+
let resizeTimeout;
|
|
22734
|
+
this.resizeListener = () => {
|
|
22735
|
+
clearTimeout(resizeTimeout);
|
|
22736
|
+
resizeTimeout = setTimeout(() => {
|
|
22737
|
+
this.handleViewTransition();
|
|
22738
|
+
}, 100); // Debounce for 100ms to avoid excessive calls
|
|
22739
|
+
};
|
|
22740
|
+
window.addEventListener('resize', this.resizeListener);
|
|
22741
|
+
}
|
|
22742
|
+
handleViewTransition() {
|
|
22743
|
+
const isPortrait = window.innerWidth < 768;
|
|
22744
|
+
// Only transition if view state actually changed
|
|
22745
|
+
if (this.currentViewIsPortrait === isPortrait) {
|
|
22746
|
+
return;
|
|
22747
|
+
}
|
|
22748
|
+
// Cancel any ongoing transition animation
|
|
22749
|
+
if (this.viewTransitionAnimation) {
|
|
22750
|
+
this.viewTransitionAnimation.destroy();
|
|
22751
|
+
this.viewTransitionAnimation = undefined;
|
|
22752
|
+
}
|
|
22753
|
+
const { presentingElement } = this;
|
|
22754
|
+
if (!presentingElement) {
|
|
22755
|
+
return;
|
|
22756
|
+
}
|
|
22757
|
+
// Create transition animation
|
|
22758
|
+
let transitionAnimation;
|
|
22759
|
+
if (this.currentViewIsPortrait && !isPortrait) {
|
|
22760
|
+
// Portrait to landscape transition
|
|
22761
|
+
transitionAnimation = portraitToLandscapeTransition(this.el, {
|
|
22762
|
+
presentingEl: presentingElement});
|
|
22763
|
+
}
|
|
22764
|
+
else {
|
|
22765
|
+
// Landscape to portrait transition
|
|
22766
|
+
transitionAnimation = landscapeToPortraitTransition(this.el, {
|
|
22767
|
+
presentingEl: presentingElement});
|
|
22768
|
+
}
|
|
22769
|
+
// Update state and play animation
|
|
22770
|
+
this.currentViewIsPortrait = isPortrait;
|
|
22771
|
+
this.viewTransitionAnimation = transitionAnimation;
|
|
22772
|
+
transitionAnimation.play().then(() => {
|
|
22773
|
+
this.viewTransitionAnimation = undefined;
|
|
22774
|
+
});
|
|
22775
|
+
}
|
|
22776
|
+
cleanupViewTransitionListener() {
|
|
22777
|
+
if (this.resizeListener) {
|
|
22778
|
+
window.removeEventListener('resize', this.resizeListener);
|
|
22779
|
+
this.resizeListener = undefined;
|
|
22780
|
+
}
|
|
22781
|
+
if (this.viewTransitionAnimation) {
|
|
22782
|
+
this.viewTransitionAnimation.destroy();
|
|
22783
|
+
this.viewTransitionAnimation = undefined;
|
|
22784
|
+
}
|
|
22785
|
+
}
|
|
22562
22786
|
render() {
|
|
22563
22787
|
const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
|
|
22564
22788
|
const showHandle = handle !== false && isSheetModal;
|
|
22565
22789
|
const mode = getIonMode$1(this);
|
|
22566
22790
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
22567
22791
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
22568
|
-
|
|
22792
|
+
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
22793
|
+
return (hAsync(Host, Object.assign({ key: 'd5bcaa588471573e1bcbd99997b306c8ecdd124f', "no-router": true,
|
|
22569
22794
|
// Allow the modal to be navigable when the handle is focusable
|
|
22570
|
-
tabIndex:
|
|
22795
|
+
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
22571
22796
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
22572
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: '
|
|
22797
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: '78b954a1c50a0325eb51db04314e86701c66d840', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '21887227c272f5eba1b3d164be3572bd710d415c', class: "modal-shadow" }), hAsync("div", Object.assign({ key: 'a40472a9065c04ad12fb7b2b2a05e5021f077ad5',
|
|
22573
22798
|
/*
|
|
22574
22799
|
role and aria-modal must be used on the
|
|
22575
22800
|
same element. They must also be set inside the
|
|
22576
22801
|
shadow DOM otherwise ion-button will not be highlighted
|
|
22577
22802
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
22578
22803
|
*/
|
|
22579
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '
|
|
22804
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: 'a4973f66587546031d1cc0197e1ba7c2521a3fbc', class: "modal-handle",
|
|
22580
22805
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
22581
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: '
|
|
22806
|
+
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: 'ee5e007e3a4e592d98f1b5a5d31ad55e6faa3bdb' }))));
|
|
22582
22807
|
}
|
|
22583
22808
|
get el() { return getElement(this); }
|
|
22584
22809
|
static get watchers() { return {
|
|
@@ -26805,6 +27030,8 @@ class Popover {
|
|
|
26805
27030
|
* Developers can pass a mouse, touch, or pointer event
|
|
26806
27031
|
* to position the popover relative to where that event
|
|
26807
27032
|
* was dispatched.
|
|
27033
|
+
*
|
|
27034
|
+
* @param event The event to position the popover relative to.
|
|
26808
27035
|
*/
|
|
26809
27036
|
async present(event) {
|
|
26810
27037
|
const unlock = await this.lockController.lock();
|
|
@@ -26868,15 +27095,14 @@ class Popover {
|
|
|
26868
27095
|
}
|
|
26869
27096
|
/**
|
|
26870
27097
|
* Dismiss the popover overlay after it has been presented.
|
|
27098
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
27099
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
27100
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
26871
27101
|
*
|
|
26872
27102
|
* @param data Any data to emit in the dismiss events.
|
|
26873
|
-
* @param role The role of the element that is dismissing the popover. For example,
|
|
27103
|
+
* @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
|
|
26874
27104
|
* @param dismissParentPopover If `true`, dismissing this popover will also dismiss
|
|
26875
27105
|
* a parent popover if this popover is nested. Defaults to `true`.
|
|
26876
|
-
*
|
|
26877
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
26878
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
26879
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
26880
27106
|
*/
|
|
26881
27107
|
async dismiss(data, role, dismissParentPopover = true) {
|
|
26882
27108
|
const unlock = await this.lockController.lock();
|
|
@@ -26928,9 +27154,9 @@ class Popover {
|
|
|
26928
27154
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
26929
27155
|
const desktop = isPlatform('desktop');
|
|
26930
27156
|
const enableArrow = arrow && !parentPopover;
|
|
26931
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
27157
|
+
return (hAsync(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
26932
27158
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
26933
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: 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: '
|
|
27159
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: 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: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, hAsync("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
|
|
26934
27160
|
}
|
|
26935
27161
|
get el() { return getElement(this); }
|
|
26936
27162
|
static get watchers() { return {
|
|
@@ -29510,7 +29736,6 @@ class ReorderGroup {
|
|
|
29510
29736
|
}
|
|
29511
29737
|
/**
|
|
29512
29738
|
* Completes the reorder operation. Must be called by the `ionItemReorder` event.
|
|
29513
|
-
*
|
|
29514
29739
|
* If a list of items is passed, the list will be reordered and returned in the
|
|
29515
29740
|
* proper order.
|
|
29516
29741
|
*
|
|
@@ -29697,7 +29922,7 @@ class ReorderGroup {
|
|
|
29697
29922
|
}
|
|
29698
29923
|
render() {
|
|
29699
29924
|
const mode = getIonMode$1(this);
|
|
29700
|
-
return (hAsync(Host, { key: '
|
|
29925
|
+
return (hAsync(Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
|
|
29701
29926
|
[mode]: true,
|
|
29702
29927
|
'reorder-enabled': !this.disabled,
|
|
29703
29928
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
|
@@ -30536,6 +30761,7 @@ class Router {
|
|
|
30536
30761
|
*
|
|
30537
30762
|
* @param path The path to navigate to.
|
|
30538
30763
|
* @param direction The direction of the animation. Defaults to `"forward"`.
|
|
30764
|
+
* @param animation A custom animation to use for the transition.
|
|
30539
30765
|
*/
|
|
30540
30766
|
async push(path, direction = 'forward', animation) {
|
|
30541
30767
|
var _a;
|
|
@@ -31265,10 +31491,8 @@ class Searchbar {
|
|
|
31265
31491
|
/**
|
|
31266
31492
|
* Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
|
|
31267
31493
|
* `input.focus()`.
|
|
31268
|
-
*
|
|
31269
31494
|
* Developers who wish to focus an input when a page enters
|
|
31270
31495
|
* should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
|
|
31271
|
-
*
|
|
31272
31496
|
* Developers who wish to focus an input when an overlay is presented
|
|
31273
31497
|
* should call `setFocus` after `didPresent` has resolved.
|
|
31274
31498
|
*
|
|
@@ -31447,8 +31671,8 @@ class Searchbar {
|
|
|
31447
31671
|
const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
|
|
31448
31672
|
const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
|
|
31449
31673
|
const shouldShowCancelButton = this.shouldShowCancelButton();
|
|
31450
|
-
const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '
|
|
31451
|
-
return (hAsync(Host, { key: '
|
|
31674
|
+
const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '19e18775856db87daeb4b9e3d7bca0461915a0df', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
|
|
31675
|
+
return (hAsync(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
|
|
31452
31676
|
[mode]: true,
|
|
31453
31677
|
'searchbar-animated': animated,
|
|
31454
31678
|
'searchbar-disabled': this.disabled,
|
|
@@ -31458,14 +31682,14 @@ class Searchbar {
|
|
|
31458
31682
|
'searchbar-has-focus': this.focused,
|
|
31459
31683
|
'searchbar-should-show-clear': this.shouldShowClearButton(),
|
|
31460
31684
|
'searchbar-should-show-cancel': this.shouldShowCancelButton(),
|
|
31461
|
-
}) }, hAsync("div", { key: '
|
|
31685
|
+
}) }, hAsync("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'f991a37fcf54d26b7ad10d89084764e03d97b9de', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
|
|
31462
31686
|
/**
|
|
31463
31687
|
* This prevents mobile browsers from
|
|
31464
31688
|
* blurring the input when the clear
|
|
31465
31689
|
* button is activated.
|
|
31466
31690
|
*/
|
|
31467
31691
|
ev.preventDefault();
|
|
31468
|
-
}, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '
|
|
31692
|
+
}, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
|
|
31469
31693
|
}
|
|
31470
31694
|
get el() { return getElement(this); }
|
|
31471
31695
|
static get watchers() { return {
|
|
@@ -35342,16 +35566,15 @@ class Toast {
|
|
|
35342
35566
|
}
|
|
35343
35567
|
/**
|
|
35344
35568
|
* Dismiss the toast overlay after it has been presented.
|
|
35569
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
35570
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
35571
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
35345
35572
|
*
|
|
35346
35573
|
* @param data Any data to emit in the dismiss events.
|
|
35347
35574
|
* @param role The role of the element that is dismissing the toast.
|
|
35348
35575
|
* This can be useful in a button handler for determining which button was
|
|
35349
35576
|
* clicked to dismiss the toast.
|
|
35350
|
-
* Some examples include:
|
|
35351
|
-
*
|
|
35352
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
35353
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
35354
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
35577
|
+
* Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
35355
35578
|
*/
|
|
35356
35579
|
async dismiss(data, role) {
|
|
35357
35580
|
var _a, _b;
|
|
@@ -35519,9 +35742,9 @@ class Toast {
|
|
|
35519
35742
|
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
|
|
35520
35743
|
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);
|
|
35521
35744
|
}
|
|
35522
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
35745
|
+
return (hAsync(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
|
|
35523
35746
|
zIndex: `${60000 + this.overlayIndex}`,
|
|
35524
|
-
}, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '
|
|
35747
|
+
}, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, hAsync("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '54b500348a9c37660c3aff37436d9188e4374947', class: "toast-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')))));
|
|
35525
35748
|
}
|
|
35526
35749
|
get el() { return getElement(this); }
|
|
35527
35750
|
static get watchers() { return {
|