@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.mjs
CHANGED
|
@@ -7537,16 +7537,15 @@ class ActionSheet {
|
|
|
7537
7537
|
}
|
|
7538
7538
|
/**
|
|
7539
7539
|
* Dismiss the action sheet overlay after it has been presented.
|
|
7540
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
7541
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
7542
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
7540
7543
|
*
|
|
7541
7544
|
* @param data Any data to emit in the dismiss events.
|
|
7542
7545
|
* @param role The role of the element that is dismissing the action sheet.
|
|
7543
7546
|
* This can be useful in a button handler for determining which button was
|
|
7544
|
-
* clicked to dismiss the action sheet.
|
|
7545
|
-
*
|
|
7546
|
-
*
|
|
7547
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
7548
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
7549
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
7547
|
+
* clicked to dismiss the action sheet. Some examples include:
|
|
7548
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
7550
7549
|
*/
|
|
7551
7550
|
async dismiss(data, role) {
|
|
7552
7551
|
const unlock = await this.lockController.lock();
|
|
@@ -7658,12 +7657,12 @@ class ActionSheet {
|
|
|
7658
7657
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
7659
7658
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
7660
7659
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
7661
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
7660
|
+
return (hAsync(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
7662
7661
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
7663
|
-
}, 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: '
|
|
7662
|
+
}, 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: {
|
|
7664
7663
|
'action-sheet-title': true,
|
|
7665
7664
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
7666
|
-
} }, header, this.subHeader && hAsync("div", { key: '
|
|
7665
|
+
} }, 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" })));
|
|
7667
7666
|
}
|
|
7668
7667
|
get el() { return getElement(this); }
|
|
7669
7668
|
static get watchers() { return {
|
|
@@ -8216,16 +8215,15 @@ class Alert {
|
|
|
8216
8215
|
}
|
|
8217
8216
|
/**
|
|
8218
8217
|
* Dismiss the alert overlay after it has been presented.
|
|
8218
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
8219
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
8220
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
8219
8221
|
*
|
|
8220
8222
|
* @param data Any data to emit in the dismiss events.
|
|
8221
8223
|
* @param role The role of the element that is dismissing the alert.
|
|
8222
8224
|
* This can be useful in a button handler for determining which button was
|
|
8223
|
-
* clicked to dismiss the alert.
|
|
8224
|
-
*
|
|
8225
|
-
*
|
|
8226
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
8227
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
8228
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
8225
|
+
* clicked to dismiss the alert. Some examples include:
|
|
8226
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
8229
8227
|
*/
|
|
8230
8228
|
async dismiss(data, role) {
|
|
8231
8229
|
const unlock = await this.lockController.lock();
|
|
@@ -8393,9 +8391,9 @@ class Alert {
|
|
|
8393
8391
|
* If neither are defined, do not set aria-labelledby.
|
|
8394
8392
|
*/
|
|
8395
8393
|
const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
|
|
8396
|
-
return (hAsync(Host, { key: '
|
|
8394
|
+
return (hAsync(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
|
|
8397
8395
|
zIndex: `${20000 + overlayIndex}`,
|
|
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: '
|
|
8396
|
+
}, 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" })));
|
|
8399
8397
|
}
|
|
8400
8398
|
get el() { return getElement(this); }
|
|
8401
8399
|
static get watchers() { return {
|
|
@@ -8464,6 +8462,8 @@ class App {
|
|
|
8464
8462
|
* a result of another user action. (Ex: We focus the first element
|
|
8465
8463
|
* inside of a popover when the user presents it, but the popover is not always
|
|
8466
8464
|
* presented as a result of keyboard action.)
|
|
8465
|
+
*
|
|
8466
|
+
* @param elements An array of HTML elements to set focus on.
|
|
8467
8467
|
*/
|
|
8468
8468
|
async setFocus(elements) {
|
|
8469
8469
|
if (this.focusVisible) {
|
|
@@ -8472,7 +8472,7 @@ class App {
|
|
|
8472
8472
|
}
|
|
8473
8473
|
render() {
|
|
8474
8474
|
const mode = getIonMode$1(this);
|
|
8475
|
-
return (hAsync(Host, { key: '
|
|
8475
|
+
return (hAsync(Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
|
|
8476
8476
|
[mode]: true,
|
|
8477
8477
|
'ion-page': true,
|
|
8478
8478
|
'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
|
|
@@ -13092,6 +13092,8 @@ class Datetime {
|
|
|
13092
13092
|
* Confirms the selected datetime value, updates the
|
|
13093
13093
|
* `value` property, and optionally closes the popover
|
|
13094
13094
|
* or modal that the datetime was presented in.
|
|
13095
|
+
*
|
|
13096
|
+
* @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
|
|
13095
13097
|
*/
|
|
13096
13098
|
async confirm(closeOverlay = false) {
|
|
13097
13099
|
const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
|
|
@@ -13125,6 +13127,8 @@ class Datetime {
|
|
|
13125
13127
|
* Resets the internal state of the datetime but does not update the value.
|
|
13126
13128
|
* Passing a valid ISO-8601 string will reset the state of the component to the provided date.
|
|
13127
13129
|
* If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
|
|
13130
|
+
*
|
|
13131
|
+
* @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.
|
|
13128
13132
|
*/
|
|
13129
13133
|
async reset(startDate) {
|
|
13130
13134
|
this.processValue(startDate);
|
|
@@ -13134,6 +13138,8 @@ class Datetime {
|
|
|
13134
13138
|
* optionally closes the popover
|
|
13135
13139
|
* or modal that the datetime was
|
|
13136
13140
|
* presented in.
|
|
13141
|
+
*
|
|
13142
|
+
* @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
|
|
13137
13143
|
*/
|
|
13138
13144
|
async cancel(closeOverlay = false) {
|
|
13139
13145
|
this.ionCancel.emit();
|
|
@@ -13947,7 +13953,7 @@ class Datetime {
|
|
|
13947
13953
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
13948
13954
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
13949
13955
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
13950
|
-
return (hAsync(Host, { key: '
|
|
13956
|
+
return (hAsync(Host, { key: '79677f5bc0fb32fb68569636bd76e68238e62eb8', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
|
|
13951
13957
|
[mode]: true,
|
|
13952
13958
|
['datetime-readonly']: readonly,
|
|
13953
13959
|
['datetime-disabled']: disabled,
|
|
@@ -13957,7 +13963,7 @@ class Datetime {
|
|
|
13957
13963
|
[`datetime-size-${size}`]: true,
|
|
13958
13964
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
13959
13965
|
[`datetime-grid`]: isGridStyle,
|
|
13960
|
-
})) }, hAsync("div", { key: '
|
|
13966
|
+
})) }, hAsync("div", { key: 'bf07b1e3c64af6e837663ff470bea93787a6e86f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
13961
13967
|
}
|
|
13962
13968
|
get el() { return getElement(this); }
|
|
13963
13969
|
static get watchers() { return {
|
|
@@ -19005,16 +19011,15 @@ class Loading {
|
|
|
19005
19011
|
}
|
|
19006
19012
|
/**
|
|
19007
19013
|
* Dismiss the loading overlay after it has been presented.
|
|
19014
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
19015
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
19016
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
19008
19017
|
*
|
|
19009
19018
|
* @param data Any data to emit in the dismiss events.
|
|
19010
19019
|
* @param role The role of the element that is dismissing the loading.
|
|
19011
19020
|
* This can be useful in a button handler for determining which button was
|
|
19012
|
-
* clicked to dismiss the loading.
|
|
19013
|
-
*
|
|
19014
|
-
*
|
|
19015
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
19016
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
19017
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
19021
|
+
* clicked to dismiss the loading. Some examples include:
|
|
19022
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
19018
19023
|
*/
|
|
19019
19024
|
async dismiss(data, role) {
|
|
19020
19025
|
const unlock = await this.lockController.lock();
|
|
@@ -19056,9 +19061,9 @@ class Loading {
|
|
|
19056
19061
|
* Otherwise, don't set aria-labelledby.
|
|
19057
19062
|
*/
|
|
19058
19063
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
19059
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
19064
|
+
return (hAsync(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
19060
19065
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
19061
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '
|
|
19066
|
+
}, 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" })));
|
|
19062
19067
|
}
|
|
19063
19068
|
get el() { return getElement(this); }
|
|
19064
19069
|
static get watchers() { return {
|
|
@@ -19686,7 +19691,7 @@ class Menu {
|
|
|
19686
19691
|
return Promise.resolve(this._isOpen);
|
|
19687
19692
|
}
|
|
19688
19693
|
/**
|
|
19689
|
-
* Returns `true`
|
|
19694
|
+
* Returns `true` if the menu is active.
|
|
19690
19695
|
*
|
|
19691
19696
|
* A menu is active when it can be opened or closed, meaning it's enabled
|
|
19692
19697
|
* and it's not part of a `ion-split-pane`.
|
|
@@ -19697,6 +19702,10 @@ class Menu {
|
|
|
19697
19702
|
/**
|
|
19698
19703
|
* Opens the menu. If the menu is already open or it can't be opened,
|
|
19699
19704
|
* it returns `false`.
|
|
19705
|
+
*
|
|
19706
|
+
* @param animated If `true`, the menu will animate when opening.
|
|
19707
|
+
* If `false`, the menu will open instantly without animation.
|
|
19708
|
+
* Defaults to `true`.
|
|
19700
19709
|
*/
|
|
19701
19710
|
open(animated = true) {
|
|
19702
19711
|
return this.setOpen(true, animated);
|
|
@@ -19704,20 +19713,38 @@ class Menu {
|
|
|
19704
19713
|
/**
|
|
19705
19714
|
* Closes the menu. If the menu is already closed or it can't be closed,
|
|
19706
19715
|
* it returns `false`.
|
|
19716
|
+
*
|
|
19717
|
+
* @param animated If `true`, the menu will animate when closing. If `false`,
|
|
19718
|
+
* the menu will close instantly without animation. Defaults to `true`.
|
|
19719
|
+
* @param role The role of the element that is closing the menu.
|
|
19720
|
+
* This can be useful in a button handler for determining which button was
|
|
19721
|
+
* clicked to close the menu. Some examples include:
|
|
19722
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
19707
19723
|
*/
|
|
19708
19724
|
close(animated = true, role) {
|
|
19709
19725
|
return this.setOpen(false, animated, role);
|
|
19710
19726
|
}
|
|
19711
19727
|
/**
|
|
19712
|
-
* Toggles the menu. If the menu is already open, it will try to close,
|
|
19728
|
+
* Toggles the menu. If the menu is already open, it will try to close,
|
|
19729
|
+
* otherwise it will try to open it.
|
|
19713
19730
|
* If the operation can't be completed successfully, it returns `false`.
|
|
19731
|
+
*
|
|
19732
|
+
* @param animated If `true`, the menu will animate when opening/closing.
|
|
19733
|
+
* If `false`, the menu will open/close instantly without animation.
|
|
19734
|
+
* Defaults to `true`.
|
|
19714
19735
|
*/
|
|
19715
19736
|
toggle(animated = true) {
|
|
19716
19737
|
return this.setOpen(!this._isOpen, animated);
|
|
19717
19738
|
}
|
|
19718
19739
|
/**
|
|
19719
|
-
* Opens or closes the
|
|
19740
|
+
* Opens or closes the menu.
|
|
19720
19741
|
* If the operation can't be completed successfully, it returns `false`.
|
|
19742
|
+
*
|
|
19743
|
+
* @param shouldOpen If `true`, the menu will open. If `false`, the menu
|
|
19744
|
+
* will close.
|
|
19745
|
+
* @param animated If `true`, the menu will animate when opening/closing.
|
|
19746
|
+
* If `false`, the menu will open/close instantly without animation.
|
|
19747
|
+
* @param role The role of the element that is closing the menu.
|
|
19721
19748
|
*/
|
|
19722
19749
|
setOpen(shouldOpen, animated = true, role) {
|
|
19723
19750
|
return menuController._setOpen(this, shouldOpen, animated, role);
|
|
@@ -20082,14 +20109,14 @@ class Menu {
|
|
|
20082
20109
|
* the ionBackButton listener in the menu controller
|
|
20083
20110
|
* will handle closing the menu when Escape is pressed.
|
|
20084
20111
|
*/
|
|
20085
|
-
return (hAsync(Host, { key: '
|
|
20112
|
+
return (hAsync(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
20086
20113
|
[mode]: true,
|
|
20087
20114
|
[`menu-type-${type}`]: true,
|
|
20088
20115
|
'menu-enabled': !disabled,
|
|
20089
20116
|
[`menu-side-${side}`]: true,
|
|
20090
20117
|
'menu-pane-visible': isPaneVisible,
|
|
20091
20118
|
'split-pane-side': hostContext('ion-split-pane', el),
|
|
20092
|
-
} }, hAsync("div", { key: '
|
|
20119
|
+
} }, 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" })));
|
|
20093
20120
|
}
|
|
20094
20121
|
get el() { return getElement(this); }
|
|
20095
20122
|
static get watchers() { return {
|
|
@@ -21189,7 +21216,7 @@ const iosEnterAnimation$3 = (baseEl, opts) => {
|
|
|
21189
21216
|
baseAnimation.addAnimation(contentAnimation);
|
|
21190
21217
|
}
|
|
21191
21218
|
if (presentingEl) {
|
|
21192
|
-
const
|
|
21219
|
+
const isPortrait = window.innerWidth < 768;
|
|
21193
21220
|
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
21194
21221
|
const presentingElRoot = getElementRoot(presentingEl);
|
|
21195
21222
|
const presentingAnimation = createAnimation().beforeStyles({
|
|
@@ -21198,7 +21225,7 @@ const iosEnterAnimation$3 = (baseEl, opts) => {
|
|
|
21198
21225
|
overflow: 'hidden',
|
|
21199
21226
|
});
|
|
21200
21227
|
const bodyEl = document.body;
|
|
21201
|
-
if (
|
|
21228
|
+
if (isPortrait) {
|
|
21202
21229
|
/**
|
|
21203
21230
|
* Fallback for browsers that does not support `max()` (ex: Firefox)
|
|
21204
21231
|
* No need to worry about statusbar padding since engines like Gecko
|
|
@@ -21276,7 +21303,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
|
|
|
21276
21303
|
.duration(duration)
|
|
21277
21304
|
.addAnimation(wrapperAnimation);
|
|
21278
21305
|
if (presentingEl) {
|
|
21279
|
-
const
|
|
21306
|
+
const isPortrait = window.innerWidth < 768;
|
|
21280
21307
|
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
21281
21308
|
const presentingElRoot = getElementRoot(presentingEl);
|
|
21282
21309
|
const presentingAnimation = createAnimation()
|
|
@@ -21294,7 +21321,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
|
|
|
21294
21321
|
}
|
|
21295
21322
|
});
|
|
21296
21323
|
const bodyEl = document.body;
|
|
21297
|
-
if (
|
|
21324
|
+
if (isPortrait) {
|
|
21298
21325
|
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
21299
21326
|
const modalTransform = hasCardModal ? '-10px' : transformOffset;
|
|
21300
21327
|
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
@@ -21341,6 +21368,125 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
|
|
|
21341
21368
|
return baseAnimation;
|
|
21342
21369
|
};
|
|
21343
21370
|
|
|
21371
|
+
/**
|
|
21372
|
+
* Transition animation from portrait view to landscape view
|
|
21373
|
+
* This handles the case where a card modal is open in portrait view
|
|
21374
|
+
* and the user switches to landscape view
|
|
21375
|
+
*/
|
|
21376
|
+
const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
|
|
21377
|
+
const { presentingEl } = opts;
|
|
21378
|
+
if (!presentingEl) {
|
|
21379
|
+
// No transition needed for non-card modals
|
|
21380
|
+
return createAnimation('portrait-to-landscape-transition');
|
|
21381
|
+
}
|
|
21382
|
+
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
21383
|
+
const presentingElRoot = getElementRoot(presentingEl);
|
|
21384
|
+
const bodyEl = document.body;
|
|
21385
|
+
const baseAnimation = createAnimation('portrait-to-landscape-transition')
|
|
21386
|
+
.addElement(baseEl)
|
|
21387
|
+
.easing('cubic-bezier(0.32,0.72,0,1)')
|
|
21388
|
+
.duration(duration);
|
|
21389
|
+
const presentingAnimation = createAnimation();
|
|
21390
|
+
if (!hasCardModal) {
|
|
21391
|
+
// Non-card modal: transition from portrait state to landscape state
|
|
21392
|
+
// Portrait: presentingEl has transform and body has black background
|
|
21393
|
+
// Landscape: no transform, no body background, modal wrapper opacity changes
|
|
21394
|
+
const root = getElementRoot(baseEl);
|
|
21395
|
+
const wrapperAnimation = createAnimation()
|
|
21396
|
+
.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
|
|
21397
|
+
.fromTo('opacity', '1', '1'); // Keep wrapper visible in landscape
|
|
21398
|
+
const backdropAnimation = createAnimation()
|
|
21399
|
+
.addElement(root.querySelector('ion-backdrop'))
|
|
21400
|
+
.fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
|
|
21401
|
+
// Animate presentingEl from portrait state back to normal
|
|
21402
|
+
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
21403
|
+
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
21404
|
+
const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
|
|
21405
|
+
presentingAnimation
|
|
21406
|
+
.addElement(presentingEl)
|
|
21407
|
+
.beforeAddWrite(() => bodyEl.style.setProperty('background-color', ''))
|
|
21408
|
+
.fromTo('transform', fromTransform, 'translateY(0px) scale(1)')
|
|
21409
|
+
.fromTo('filter', 'contrast(0.85)', 'contrast(1)')
|
|
21410
|
+
.fromTo('border-radius', '10px 10px 0 0', '0px');
|
|
21411
|
+
baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
|
|
21412
|
+
}
|
|
21413
|
+
else {
|
|
21414
|
+
// Card modal: transition from portrait card state to landscape card state
|
|
21415
|
+
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
21416
|
+
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
21417
|
+
const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
|
|
21418
|
+
const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
|
|
21419
|
+
presentingAnimation
|
|
21420
|
+
.addElement(presentingElRoot.querySelector('.modal-wrapper'))
|
|
21421
|
+
.fromTo('transform', fromTransform, toTransform)
|
|
21422
|
+
.fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
|
|
21423
|
+
const shadowAnimation = createAnimation()
|
|
21424
|
+
.addElement(presentingElRoot.querySelector('.modal-shadow'))
|
|
21425
|
+
.fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
|
|
21426
|
+
.fromTo('transform', fromTransform, toTransform);
|
|
21427
|
+
baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
|
|
21428
|
+
}
|
|
21429
|
+
return baseAnimation;
|
|
21430
|
+
};
|
|
21431
|
+
/**
|
|
21432
|
+
* Transition animation from landscape view to portrait view
|
|
21433
|
+
* This handles the case where a card modal is open in landscape view
|
|
21434
|
+
* and the user switches to portrait view
|
|
21435
|
+
*/
|
|
21436
|
+
const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
|
|
21437
|
+
const { presentingEl } = opts;
|
|
21438
|
+
if (!presentingEl) {
|
|
21439
|
+
// No transition needed for non-card modals
|
|
21440
|
+
return createAnimation('landscape-to-portrait-transition');
|
|
21441
|
+
}
|
|
21442
|
+
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
21443
|
+
const presentingElRoot = getElementRoot(presentingEl);
|
|
21444
|
+
const bodyEl = document.body;
|
|
21445
|
+
const baseAnimation = createAnimation('landscape-to-portrait-transition')
|
|
21446
|
+
.addElement(baseEl)
|
|
21447
|
+
.easing('cubic-bezier(0.32,0.72,0,1)')
|
|
21448
|
+
.duration(duration);
|
|
21449
|
+
const presentingAnimation = createAnimation();
|
|
21450
|
+
if (!hasCardModal) {
|
|
21451
|
+
// Non-card modal: transition from landscape state to portrait state
|
|
21452
|
+
const root = getElementRoot(baseEl);
|
|
21453
|
+
const wrapperAnimation = createAnimation()
|
|
21454
|
+
.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
|
|
21455
|
+
.fromTo('opacity', '1', '1'); // Keep wrapper visible
|
|
21456
|
+
const backdropAnimation = createAnimation()
|
|
21457
|
+
.addElement(root.querySelector('ion-backdrop'))
|
|
21458
|
+
.fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
|
|
21459
|
+
// Animate presentingEl from normal state to portrait state
|
|
21460
|
+
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
21461
|
+
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
21462
|
+
const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
|
|
21463
|
+
presentingAnimation
|
|
21464
|
+
.addElement(presentingEl)
|
|
21465
|
+
.beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
|
|
21466
|
+
.fromTo('transform', 'translateY(0px) scale(1)', toTransform)
|
|
21467
|
+
.fromTo('filter', 'contrast(1)', 'contrast(0.85)')
|
|
21468
|
+
.fromTo('border-radius', '0px', '10px 10px 0 0');
|
|
21469
|
+
baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
|
|
21470
|
+
}
|
|
21471
|
+
else {
|
|
21472
|
+
// Card modal: transition from landscape card state to portrait card state
|
|
21473
|
+
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
21474
|
+
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
21475
|
+
const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
|
|
21476
|
+
const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
|
|
21477
|
+
presentingAnimation
|
|
21478
|
+
.addElement(presentingElRoot.querySelector('.modal-wrapper'))
|
|
21479
|
+
.fromTo('transform', fromTransform, toTransform)
|
|
21480
|
+
.fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
|
|
21481
|
+
const shadowAnimation = createAnimation()
|
|
21482
|
+
.addElement(presentingElRoot.querySelector('.modal-shadow'))
|
|
21483
|
+
.fromTo('opacity', '0', '0') // Shadow stays hidden
|
|
21484
|
+
.fromTo('transform', fromTransform, toTransform);
|
|
21485
|
+
baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
|
|
21486
|
+
}
|
|
21487
|
+
return baseAnimation;
|
|
21488
|
+
};
|
|
21489
|
+
|
|
21344
21490
|
const createEnterAnimation = () => {
|
|
21345
21491
|
const backdropAnimation = createAnimation()
|
|
21346
21492
|
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
@@ -22094,6 +22240,17 @@ class Modal {
|
|
|
22094
22240
|
el.dispatchEvent(ev);
|
|
22095
22241
|
}
|
|
22096
22242
|
};
|
|
22243
|
+
/**
|
|
22244
|
+
* When the modal receives focus directly, pass focus to the handle
|
|
22245
|
+
* if it exists and is focusable, otherwise let the focus trap handle it.
|
|
22246
|
+
*/
|
|
22247
|
+
this.onModalFocus = (ev) => {
|
|
22248
|
+
const { dragHandleEl, el } = this;
|
|
22249
|
+
// Only handle focus if the modal itself was focused (not a child element)
|
|
22250
|
+
if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
|
|
22251
|
+
dragHandleEl.focus();
|
|
22252
|
+
}
|
|
22253
|
+
};
|
|
22097
22254
|
}
|
|
22098
22255
|
onIsOpenChange(newValue, oldValue) {
|
|
22099
22256
|
if (newValue === true && oldValue === false) {
|
|
@@ -22121,6 +22278,7 @@ class Modal {
|
|
|
22121
22278
|
}
|
|
22122
22279
|
disconnectedCallback() {
|
|
22123
22280
|
this.triggerController.removeClickListener();
|
|
22281
|
+
this.cleanupViewTransitionListener();
|
|
22124
22282
|
}
|
|
22125
22283
|
componentWillLoad() {
|
|
22126
22284
|
var _a;
|
|
@@ -22331,6 +22489,8 @@ class Modal {
|
|
|
22331
22489
|
else if (hasCardModal) {
|
|
22332
22490
|
this.initSwipeToClose();
|
|
22333
22491
|
}
|
|
22492
|
+
// Initialize view transition listener for iOS card modals
|
|
22493
|
+
this.initViewTransitionListener();
|
|
22334
22494
|
unlock();
|
|
22335
22495
|
}
|
|
22336
22496
|
initSwipeToClose() {
|
|
@@ -22425,13 +22585,13 @@ class Modal {
|
|
|
22425
22585
|
}
|
|
22426
22586
|
/**
|
|
22427
22587
|
* Dismiss the modal overlay after it has been presented.
|
|
22428
|
-
*
|
|
22429
|
-
* @param data Any data to emit in the dismiss events.
|
|
22430
|
-
* @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
|
|
22431
|
-
*
|
|
22432
22588
|
* This is a no-op if the overlay has not been presented yet. If you want
|
|
22433
22589
|
* to remove an overlay from the DOM that was never presented, use the
|
|
22434
22590
|
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
22591
|
+
*
|
|
22592
|
+
* @param data Any data to emit in the dismiss events.
|
|
22593
|
+
* @param role The role of the element that is dismissing the modal.
|
|
22594
|
+
* For example, `cancel` or `backdrop`.
|
|
22435
22595
|
*/
|
|
22436
22596
|
async dismiss(data, role) {
|
|
22437
22597
|
var _a;
|
|
@@ -22484,6 +22644,7 @@ class Modal {
|
|
|
22484
22644
|
if (this.gesture) {
|
|
22485
22645
|
this.gesture.destroy();
|
|
22486
22646
|
}
|
|
22647
|
+
this.cleanupViewTransitionListener();
|
|
22487
22648
|
}
|
|
22488
22649
|
this.currentBreakpoint = undefined;
|
|
22489
22650
|
this.animation = undefined;
|
|
@@ -22503,8 +22664,10 @@ class Modal {
|
|
|
22503
22664
|
return eventMethod(this.el, 'ionModalWillDismiss');
|
|
22504
22665
|
}
|
|
22505
22666
|
/**
|
|
22506
|
-
* Move a sheet style modal to a specific breakpoint.
|
|
22507
|
-
*
|
|
22667
|
+
* Move a sheet style modal to a specific breakpoint.
|
|
22668
|
+
*
|
|
22669
|
+
* @param breakpoint The breakpoint value to move the sheet modal to.
|
|
22670
|
+
* Must be a value defined in your `breakpoints` array.
|
|
22508
22671
|
*/
|
|
22509
22672
|
async setCurrentBreakpoint(breakpoint) {
|
|
22510
22673
|
if (!this.isSheetModal) {
|
|
@@ -22557,26 +22720,88 @@ class Modal {
|
|
|
22557
22720
|
await this.setCurrentBreakpoint(nextBreakpoint);
|
|
22558
22721
|
return true;
|
|
22559
22722
|
}
|
|
22723
|
+
initViewTransitionListener() {
|
|
22724
|
+
// Only enable for iOS card modals when no custom animations are provided
|
|
22725
|
+
if (getIonMode$1(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
|
|
22726
|
+
return;
|
|
22727
|
+
}
|
|
22728
|
+
// Set initial view state
|
|
22729
|
+
this.currentViewIsPortrait = window.innerWidth < 768;
|
|
22730
|
+
// Create debounced resize handler
|
|
22731
|
+
let resizeTimeout;
|
|
22732
|
+
this.resizeListener = () => {
|
|
22733
|
+
clearTimeout(resizeTimeout);
|
|
22734
|
+
resizeTimeout = setTimeout(() => {
|
|
22735
|
+
this.handleViewTransition();
|
|
22736
|
+
}, 100); // Debounce for 100ms to avoid excessive calls
|
|
22737
|
+
};
|
|
22738
|
+
window.addEventListener('resize', this.resizeListener);
|
|
22739
|
+
}
|
|
22740
|
+
handleViewTransition() {
|
|
22741
|
+
const isPortrait = window.innerWidth < 768;
|
|
22742
|
+
// Only transition if view state actually changed
|
|
22743
|
+
if (this.currentViewIsPortrait === isPortrait) {
|
|
22744
|
+
return;
|
|
22745
|
+
}
|
|
22746
|
+
// Cancel any ongoing transition animation
|
|
22747
|
+
if (this.viewTransitionAnimation) {
|
|
22748
|
+
this.viewTransitionAnimation.destroy();
|
|
22749
|
+
this.viewTransitionAnimation = undefined;
|
|
22750
|
+
}
|
|
22751
|
+
const { presentingElement } = this;
|
|
22752
|
+
if (!presentingElement) {
|
|
22753
|
+
return;
|
|
22754
|
+
}
|
|
22755
|
+
// Create transition animation
|
|
22756
|
+
let transitionAnimation;
|
|
22757
|
+
if (this.currentViewIsPortrait && !isPortrait) {
|
|
22758
|
+
// Portrait to landscape transition
|
|
22759
|
+
transitionAnimation = portraitToLandscapeTransition(this.el, {
|
|
22760
|
+
presentingEl: presentingElement});
|
|
22761
|
+
}
|
|
22762
|
+
else {
|
|
22763
|
+
// Landscape to portrait transition
|
|
22764
|
+
transitionAnimation = landscapeToPortraitTransition(this.el, {
|
|
22765
|
+
presentingEl: presentingElement});
|
|
22766
|
+
}
|
|
22767
|
+
// Update state and play animation
|
|
22768
|
+
this.currentViewIsPortrait = isPortrait;
|
|
22769
|
+
this.viewTransitionAnimation = transitionAnimation;
|
|
22770
|
+
transitionAnimation.play().then(() => {
|
|
22771
|
+
this.viewTransitionAnimation = undefined;
|
|
22772
|
+
});
|
|
22773
|
+
}
|
|
22774
|
+
cleanupViewTransitionListener() {
|
|
22775
|
+
if (this.resizeListener) {
|
|
22776
|
+
window.removeEventListener('resize', this.resizeListener);
|
|
22777
|
+
this.resizeListener = undefined;
|
|
22778
|
+
}
|
|
22779
|
+
if (this.viewTransitionAnimation) {
|
|
22780
|
+
this.viewTransitionAnimation.destroy();
|
|
22781
|
+
this.viewTransitionAnimation = undefined;
|
|
22782
|
+
}
|
|
22783
|
+
}
|
|
22560
22784
|
render() {
|
|
22561
22785
|
const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
|
|
22562
22786
|
const showHandle = handle !== false && isSheetModal;
|
|
22563
22787
|
const mode = getIonMode$1(this);
|
|
22564
22788
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
22565
22789
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
22566
|
-
|
|
22790
|
+
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
22791
|
+
return (hAsync(Host, Object.assign({ key: 'd5bcaa588471573e1bcbd99997b306c8ecdd124f', "no-router": true,
|
|
22567
22792
|
// Allow the modal to be navigable when the handle is focusable
|
|
22568
|
-
tabIndex:
|
|
22793
|
+
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
22569
22794
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
22570
|
-
}, 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: '
|
|
22795
|
+
}, 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',
|
|
22571
22796
|
/*
|
|
22572
22797
|
role and aria-modal must be used on the
|
|
22573
22798
|
same element. They must also be set inside the
|
|
22574
22799
|
shadow DOM otherwise ion-button will not be highlighted
|
|
22575
22800
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
22576
22801
|
*/
|
|
22577
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '
|
|
22802
|
+
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",
|
|
22578
22803
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
22579
|
-
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: '
|
|
22804
|
+
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' }))));
|
|
22580
22805
|
}
|
|
22581
22806
|
get el() { return getElement(this); }
|
|
22582
22807
|
static get watchers() { return {
|
|
@@ -26803,6 +27028,8 @@ class Popover {
|
|
|
26803
27028
|
* Developers can pass a mouse, touch, or pointer event
|
|
26804
27029
|
* to position the popover relative to where that event
|
|
26805
27030
|
* was dispatched.
|
|
27031
|
+
*
|
|
27032
|
+
* @param event The event to position the popover relative to.
|
|
26806
27033
|
*/
|
|
26807
27034
|
async present(event) {
|
|
26808
27035
|
const unlock = await this.lockController.lock();
|
|
@@ -26866,15 +27093,14 @@ class Popover {
|
|
|
26866
27093
|
}
|
|
26867
27094
|
/**
|
|
26868
27095
|
* Dismiss the popover overlay after it has been presented.
|
|
27096
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
27097
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
27098
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
26869
27099
|
*
|
|
26870
27100
|
* @param data Any data to emit in the dismiss events.
|
|
26871
|
-
* @param role The role of the element that is dismissing the popover. For example,
|
|
27101
|
+
* @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
|
|
26872
27102
|
* @param dismissParentPopover If `true`, dismissing this popover will also dismiss
|
|
26873
27103
|
* a parent popover if this popover is nested. Defaults to `true`.
|
|
26874
|
-
*
|
|
26875
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
26876
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
26877
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
26878
27104
|
*/
|
|
26879
27105
|
async dismiss(data, role, dismissParentPopover = true) {
|
|
26880
27106
|
const unlock = await this.lockController.lock();
|
|
@@ -26926,9 +27152,9 @@ class Popover {
|
|
|
26926
27152
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
26927
27153
|
const desktop = isPlatform('desktop');
|
|
26928
27154
|
const enableArrow = arrow && !parentPopover;
|
|
26929
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
27155
|
+
return (hAsync(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
26930
27156
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
26931
|
-
}, 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: '
|
|
27157
|
+
}, 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' })))));
|
|
26932
27158
|
}
|
|
26933
27159
|
get el() { return getElement(this); }
|
|
26934
27160
|
static get watchers() { return {
|
|
@@ -29508,7 +29734,6 @@ class ReorderGroup {
|
|
|
29508
29734
|
}
|
|
29509
29735
|
/**
|
|
29510
29736
|
* Completes the reorder operation. Must be called by the `ionItemReorder` event.
|
|
29511
|
-
*
|
|
29512
29737
|
* If a list of items is passed, the list will be reordered and returned in the
|
|
29513
29738
|
* proper order.
|
|
29514
29739
|
*
|
|
@@ -29695,7 +29920,7 @@ class ReorderGroup {
|
|
|
29695
29920
|
}
|
|
29696
29921
|
render() {
|
|
29697
29922
|
const mode = getIonMode$1(this);
|
|
29698
|
-
return (hAsync(Host, { key: '
|
|
29923
|
+
return (hAsync(Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
|
|
29699
29924
|
[mode]: true,
|
|
29700
29925
|
'reorder-enabled': !this.disabled,
|
|
29701
29926
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
|
@@ -30534,6 +30759,7 @@ class Router {
|
|
|
30534
30759
|
*
|
|
30535
30760
|
* @param path The path to navigate to.
|
|
30536
30761
|
* @param direction The direction of the animation. Defaults to `"forward"`.
|
|
30762
|
+
* @param animation A custom animation to use for the transition.
|
|
30537
30763
|
*/
|
|
30538
30764
|
async push(path, direction = 'forward', animation) {
|
|
30539
30765
|
var _a;
|
|
@@ -31263,10 +31489,8 @@ class Searchbar {
|
|
|
31263
31489
|
/**
|
|
31264
31490
|
* Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
|
|
31265
31491
|
* `input.focus()`.
|
|
31266
|
-
*
|
|
31267
31492
|
* Developers who wish to focus an input when a page enters
|
|
31268
31493
|
* should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
|
|
31269
|
-
*
|
|
31270
31494
|
* Developers who wish to focus an input when an overlay is presented
|
|
31271
31495
|
* should call `setFocus` after `didPresent` has resolved.
|
|
31272
31496
|
*
|
|
@@ -31445,8 +31669,8 @@ class Searchbar {
|
|
|
31445
31669
|
const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
|
|
31446
31670
|
const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
|
|
31447
31671
|
const shouldShowCancelButton = this.shouldShowCancelButton();
|
|
31448
|
-
const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '
|
|
31449
|
-
return (hAsync(Host, { key: '
|
|
31672
|
+
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))));
|
|
31673
|
+
return (hAsync(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
|
|
31450
31674
|
[mode]: true,
|
|
31451
31675
|
'searchbar-animated': animated,
|
|
31452
31676
|
'searchbar-disabled': this.disabled,
|
|
@@ -31456,14 +31680,14 @@ class Searchbar {
|
|
|
31456
31680
|
'searchbar-has-focus': this.focused,
|
|
31457
31681
|
'searchbar-should-show-clear': this.shouldShowClearButton(),
|
|
31458
31682
|
'searchbar-should-show-cancel': this.shouldShowCancelButton(),
|
|
31459
|
-
}) }, hAsync("div", { key: '
|
|
31683
|
+
}) }, 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) => {
|
|
31460
31684
|
/**
|
|
31461
31685
|
* This prevents mobile browsers from
|
|
31462
31686
|
* blurring the input when the clear
|
|
31463
31687
|
* button is activated.
|
|
31464
31688
|
*/
|
|
31465
31689
|
ev.preventDefault();
|
|
31466
|
-
}, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '
|
|
31690
|
+
}, 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));
|
|
31467
31691
|
}
|
|
31468
31692
|
get el() { return getElement(this); }
|
|
31469
31693
|
static get watchers() { return {
|
|
@@ -35340,16 +35564,15 @@ class Toast {
|
|
|
35340
35564
|
}
|
|
35341
35565
|
/**
|
|
35342
35566
|
* Dismiss the toast overlay after it has been presented.
|
|
35567
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
35568
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
35569
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
35343
35570
|
*
|
|
35344
35571
|
* @param data Any data to emit in the dismiss events.
|
|
35345
35572
|
* @param role The role of the element that is dismissing the toast.
|
|
35346
35573
|
* This can be useful in a button handler for determining which button was
|
|
35347
35574
|
* clicked to dismiss the toast.
|
|
35348
|
-
* Some examples include:
|
|
35349
|
-
*
|
|
35350
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
35351
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
35352
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
35575
|
+
* Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
35353
35576
|
*/
|
|
35354
35577
|
async dismiss(data, role) {
|
|
35355
35578
|
var _a, _b;
|
|
@@ -35517,9 +35740,9 @@ class Toast {
|
|
|
35517
35740
|
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
|
|
35518
35741
|
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);
|
|
35519
35742
|
}
|
|
35520
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
35743
|
+
return (hAsync(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
|
|
35521
35744
|
zIndex: `${60000 + this.overlayIndex}`,
|
|
35522
|
-
}, 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: '
|
|
35745
|
+
}, 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')))));
|
|
35523
35746
|
}
|
|
35524
35747
|
get el() { return getElement(this); }
|
|
35525
35748
|
static get watchers() { return {
|