@ionic/core 8.6.2 → 8.6.3-dev.11750971489.140836b0
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 +26 -10
- 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 +26 -10
- 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/modal.js +35 -16
- 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 +26 -10
- 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-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-9e32212d.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/modal.d.ts +14 -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 +106 -65
- package/hydrate/index.mjs +106 -65
- package/package.json +1 -1
- package/dist/ionic/p-29759454.entry.js +0 -4
- package/dist/ionic/p-7149db7e.entry.js +0 -4
- package/dist/ionic/p-bec79123.entry.js +0 -4
|
@@ -187,16 +187,15 @@ const ActionSheet = class {
|
|
|
187
187
|
}
|
|
188
188
|
/**
|
|
189
189
|
* Dismiss the action sheet overlay after it has been presented.
|
|
190
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
191
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
192
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
190
193
|
*
|
|
191
194
|
* @param data Any data to emit in the dismiss events.
|
|
192
195
|
* @param role The role of the element that is dismissing the action sheet.
|
|
193
196
|
* This can be useful in a button handler for determining which button was
|
|
194
|
-
* clicked to dismiss the action sheet.
|
|
195
|
-
*
|
|
196
|
-
*
|
|
197
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
198
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
199
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
197
|
+
* clicked to dismiss the action sheet. Some examples include:
|
|
198
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
200
199
|
*/
|
|
201
200
|
async dismiss(data, role) {
|
|
202
201
|
const unlock = await this.lockController.lock();
|
|
@@ -308,12 +307,12 @@ const ActionSheet = class {
|
|
|
308
307
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
309
308
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
310
309
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
311
|
-
return (h(Host, Object.assign({ key: '
|
|
310
|
+
return (h(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
312
311
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
313
|
-
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '
|
|
312
|
+
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '81cf3f7d19864e041813987b46d2d115b8466819', tappable: this.backdropDismiss }), h("div", { key: '791c6a976683646fc306a42c15c5078b6f06a45f', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a350b489ef7852eab9dc2227ce6d92da27dd9bf9', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '69ba51ee13510c1a411d87cb4845b11b7302a36f', class: "action-sheet-container" }, h("div", { key: 'bded15b8306c36591e526f0f99e1eeabcbab3915', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '06b5147c0f6d9180fe8f12e75c9b4a0310226adc', id: headerID, class: {
|
|
314
313
|
'action-sheet-title': true,
|
|
315
314
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
316
|
-
} }, header, this.subHeader && h("div", { key: '
|
|
315
|
+
} }, header, this.subHeader && h("div", { key: '54874362a75c679aba803bf4f8768f5404d2dd28', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '67b0de298eb424f3dea846a841b7a06d70e3930d', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'e7e3f9a5495eea9b97dbf885ef36944f2e420eff' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: 'f889d29ed6c3d14bbc1d805888351d87f5122377', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '7c05cf424b38c37fd40aaeb42a494387291571fb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'bed927b477dc2708a5123ef560274fca9819b3d6' })))))), h("div", { key: 'c5df1b11dc15a93892d57065d3dd5fbe02e43b39', tabindex: "0", "aria-hidden": "true" })));
|
|
317
316
|
}
|
|
318
317
|
get el() { return getElement(this); }
|
|
319
318
|
static get watchers() { return {
|
|
@@ -357,16 +357,15 @@ const Alert = class {
|
|
|
357
357
|
}
|
|
358
358
|
/**
|
|
359
359
|
* Dismiss the alert overlay after it has been presented.
|
|
360
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
361
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
362
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
360
363
|
*
|
|
361
364
|
* @param data Any data to emit in the dismiss events.
|
|
362
365
|
* @param role The role of the element that is dismissing the alert.
|
|
363
366
|
* This can be useful in a button handler for determining which button was
|
|
364
|
-
* clicked to dismiss the alert.
|
|
365
|
-
*
|
|
366
|
-
*
|
|
367
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
368
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
369
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
367
|
+
* clicked to dismiss the alert. Some examples include:
|
|
368
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
370
369
|
*/
|
|
371
370
|
async dismiss(data, role) {
|
|
372
371
|
const unlock = await this.lockController.lock();
|
|
@@ -536,9 +535,9 @@ const Alert = class {
|
|
|
536
535
|
* If neither are defined, do not set aria-labelledby.
|
|
537
536
|
*/
|
|
538
537
|
const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
|
|
539
|
-
return (h(Host, { key: '
|
|
538
|
+
return (h(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
|
|
540
539
|
zIndex: `${20000 + overlayIndex}`,
|
|
541
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '
|
|
540
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '3cd5ca8b99cb95b11dd22ab41a820d841142896f', tappable: this.backdropDismiss }), h("div", { key: '4cc62ae6e21424057d22aeef1e8fc77011e77cd5', tabindex: "0", "aria-hidden": "true" }), h("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), h("div", { key: '78694e3c0db2d408df3899fb1a90859bcc8d14cc', class: "alert-head" }, header && (h("h2", { key: 'ec88ff3e4e1ea871b5975133fdcf4cac38b05e0f', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '9b09bc8bb68af255ef8b7d22587acc946148e544', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '99abe815f75d2df7f1b77c0df9f3436724fea76f', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'a43d0c22c0e46b1ef911f92ffeb253d7911b85f7', tabindex: "0", "aria-hidden": "true" })));
|
|
542
541
|
}
|
|
543
542
|
get el() { return getElement(this); }
|
|
544
543
|
static get watchers() { return {
|
|
@@ -70,6 +70,8 @@ const App = class {
|
|
|
70
70
|
* a result of another user action. (Ex: We focus the first element
|
|
71
71
|
* inside of a popover when the user presents it, but the popover is not always
|
|
72
72
|
* presented as a result of keyboard action.)
|
|
73
|
+
*
|
|
74
|
+
* @param elements An array of HTML elements to set focus on.
|
|
73
75
|
*/
|
|
74
76
|
async setFocus(elements) {
|
|
75
77
|
if (this.focusVisible) {
|
|
@@ -78,7 +80,7 @@ const App = class {
|
|
|
78
80
|
}
|
|
79
81
|
render() {
|
|
80
82
|
const mode = getIonMode(this);
|
|
81
|
-
return (h(Host, { key: '
|
|
83
|
+
return (h(Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
|
|
82
84
|
[mode]: true,
|
|
83
85
|
'ion-page': true,
|
|
84
86
|
'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
|
|
@@ -992,6 +992,8 @@ const Datetime = class {
|
|
|
992
992
|
* Confirms the selected datetime value, updates the
|
|
993
993
|
* `value` property, and optionally closes the popover
|
|
994
994
|
* or modal that the datetime was presented in.
|
|
995
|
+
*
|
|
996
|
+
* @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
|
|
995
997
|
*/
|
|
996
998
|
async confirm(closeOverlay = false) {
|
|
997
999
|
const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
|
|
@@ -1025,6 +1027,8 @@ const Datetime = class {
|
|
|
1025
1027
|
* Resets the internal state of the datetime but does not update the value.
|
|
1026
1028
|
* Passing a valid ISO-8601 string will reset the state of the component to the provided date.
|
|
1027
1029
|
* If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
|
|
1030
|
+
*
|
|
1031
|
+
* @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.
|
|
1028
1032
|
*/
|
|
1029
1033
|
async reset(startDate) {
|
|
1030
1034
|
this.processValue(startDate);
|
|
@@ -1034,6 +1038,8 @@ const Datetime = class {
|
|
|
1034
1038
|
* optionally closes the popover
|
|
1035
1039
|
* or modal that the datetime was
|
|
1036
1040
|
* presented in.
|
|
1041
|
+
*
|
|
1042
|
+
* @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
|
|
1037
1043
|
*/
|
|
1038
1044
|
async cancel(closeOverlay = false) {
|
|
1039
1045
|
this.ionCancel.emit();
|
|
@@ -1847,7 +1853,7 @@ const Datetime = class {
|
|
|
1847
1853
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1848
1854
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1849
1855
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
1850
|
-
return (h(Host, { key: '
|
|
1856
|
+
return (h(Host, { key: '79677f5bc0fb32fb68569636bd76e68238e62eb8', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
|
|
1851
1857
|
[mode]: true,
|
|
1852
1858
|
['datetime-readonly']: readonly,
|
|
1853
1859
|
['datetime-disabled']: disabled,
|
|
@@ -1857,7 +1863,7 @@ const Datetime = class {
|
|
|
1857
1863
|
[`datetime-size-${size}`]: true,
|
|
1858
1864
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1859
1865
|
[`datetime-grid`]: isGridStyle,
|
|
1860
|
-
})) }, h("div", { key: '
|
|
1866
|
+
})) }, h("div", { key: 'bf07b1e3c64af6e837663ff470bea93787a6e86f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
1861
1867
|
}
|
|
1862
1868
|
get el() { return getElement(this); }
|
|
1863
1869
|
static get watchers() { return {
|
|
@@ -225,16 +225,15 @@ const Loading = class {
|
|
|
225
225
|
}
|
|
226
226
|
/**
|
|
227
227
|
* Dismiss the loading overlay after it has been presented.
|
|
228
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
229
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
230
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
228
231
|
*
|
|
229
232
|
* @param data Any data to emit in the dismiss events.
|
|
230
233
|
* @param role The role of the element that is dismissing the loading.
|
|
231
234
|
* This can be useful in a button handler for determining which button was
|
|
232
|
-
* clicked to dismiss the loading.
|
|
233
|
-
*
|
|
234
|
-
*
|
|
235
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
236
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
237
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
235
|
+
* clicked to dismiss the loading. Some examples include:
|
|
236
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
238
237
|
*/
|
|
239
238
|
async dismiss(data, role) {
|
|
240
239
|
const unlock = await this.lockController.lock();
|
|
@@ -276,9 +275,9 @@ const Loading = class {
|
|
|
276
275
|
* Otherwise, don't set aria-labelledby.
|
|
277
276
|
*/
|
|
278
277
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
279
|
-
return (h(Host, Object.assign({ key: '
|
|
278
|
+
return (h(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
280
279
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
281
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '
|
|
280
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '231dec84e424a2dc358ce95b84d6035cf43e4dea', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'c9af29b6e6bb49a217396a5c874bbfb8835a926c', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a8659863743cdeccbe1ba810eaabfd3ebfcb86f3', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '3b346f39bc71691bd8686556a1e142198a7b12fa', class: "loading-spinner" }, h("ion-spinner", { key: '8dc2bf1556e5138e262827f1516c59ecd09f3520', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '054164c0dbae9a0e0973dd3c8e28f5b771820310', tabindex: "0", "aria-hidden": "true" })));
|
|
282
281
|
}
|
|
283
282
|
get el() { return getElement(this); }
|
|
284
283
|
static get watchers() { return {
|
|
@@ -240,7 +240,7 @@ const Menu = class {
|
|
|
240
240
|
return Promise.resolve(this._isOpen);
|
|
241
241
|
}
|
|
242
242
|
/**
|
|
243
|
-
* Returns `true`
|
|
243
|
+
* Returns `true` if the menu is active.
|
|
244
244
|
*
|
|
245
245
|
* A menu is active when it can be opened or closed, meaning it's enabled
|
|
246
246
|
* and it's not part of a `ion-split-pane`.
|
|
@@ -251,6 +251,10 @@ const Menu = class {
|
|
|
251
251
|
/**
|
|
252
252
|
* Opens the menu. If the menu is already open or it can't be opened,
|
|
253
253
|
* it returns `false`.
|
|
254
|
+
*
|
|
255
|
+
* @param animated If `true`, the menu will animate when opening.
|
|
256
|
+
* If `false`, the menu will open instantly without animation.
|
|
257
|
+
* Defaults to `true`.
|
|
254
258
|
*/
|
|
255
259
|
open(animated = true) {
|
|
256
260
|
return this.setOpen(true, animated);
|
|
@@ -258,20 +262,38 @@ const Menu = class {
|
|
|
258
262
|
/**
|
|
259
263
|
* Closes the menu. If the menu is already closed or it can't be closed,
|
|
260
264
|
* it returns `false`.
|
|
265
|
+
*
|
|
266
|
+
* @param animated If `true`, the menu will animate when closing. If `false`,
|
|
267
|
+
* the menu will close instantly without animation. Defaults to `true`.
|
|
268
|
+
* @param role The role of the element that is closing the menu.
|
|
269
|
+
* This can be useful in a button handler for determining which button was
|
|
270
|
+
* clicked to close the menu. Some examples include:
|
|
271
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
261
272
|
*/
|
|
262
273
|
close(animated = true, role) {
|
|
263
274
|
return this.setOpen(false, animated, role);
|
|
264
275
|
}
|
|
265
276
|
/**
|
|
266
|
-
* Toggles the menu. If the menu is already open, it will try to close,
|
|
277
|
+
* Toggles the menu. If the menu is already open, it will try to close,
|
|
278
|
+
* otherwise it will try to open it.
|
|
267
279
|
* If the operation can't be completed successfully, it returns `false`.
|
|
280
|
+
*
|
|
281
|
+
* @param animated If `true`, the menu will animate when opening/closing.
|
|
282
|
+
* If `false`, the menu will open/close instantly without animation.
|
|
283
|
+
* Defaults to `true`.
|
|
268
284
|
*/
|
|
269
285
|
toggle(animated = true) {
|
|
270
286
|
return this.setOpen(!this._isOpen, animated);
|
|
271
287
|
}
|
|
272
288
|
/**
|
|
273
|
-
* Opens or closes the
|
|
289
|
+
* Opens or closes the menu.
|
|
274
290
|
* If the operation can't be completed successfully, it returns `false`.
|
|
291
|
+
*
|
|
292
|
+
* @param shouldOpen If `true`, the menu will open. If `false`, the menu
|
|
293
|
+
* will close.
|
|
294
|
+
* @param animated If `true`, the menu will animate when opening/closing.
|
|
295
|
+
* If `false`, the menu will open/close instantly without animation.
|
|
296
|
+
* @param role The role of the element that is closing the menu.
|
|
275
297
|
*/
|
|
276
298
|
setOpen(shouldOpen, animated = true, role) {
|
|
277
299
|
return menuController._setOpen(this, shouldOpen, animated, role);
|
|
@@ -636,14 +658,14 @@ const Menu = class {
|
|
|
636
658
|
* the ionBackButton listener in the menu controller
|
|
637
659
|
* will handle closing the menu when Escape is pressed.
|
|
638
660
|
*/
|
|
639
|
-
return (h(Host, { key: '
|
|
661
|
+
return (h(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
640
662
|
[mode]: true,
|
|
641
663
|
[`menu-type-${type}`]: true,
|
|
642
664
|
'menu-enabled': !disabled,
|
|
643
665
|
[`menu-side-${side}`]: true,
|
|
644
666
|
'menu-pane-visible': isPaneVisible,
|
|
645
667
|
'split-pane-side': hostContext('ion-split-pane', el),
|
|
646
|
-
} }, h("div", { key: '
|
|
668
|
+
} }, h("div", { key: '3f5f70acd4d3ed6bb445122f4f01d73db738a75f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '3161326c9330e7f7441299c428b87a91b31a83e9' })), h("ion-backdrop", { key: '917b50f38489bdf03d0c642af8b4e4e172c7dc4c', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
647
669
|
}
|
|
648
670
|
get el() { return getElement(this); }
|
|
649
671
|
static get watchers() { return {
|
|
@@ -1482,6 +1482,17 @@ const Modal = class {
|
|
|
1482
1482
|
el.dispatchEvent(ev);
|
|
1483
1483
|
}
|
|
1484
1484
|
};
|
|
1485
|
+
/**
|
|
1486
|
+
* When the modal receives focus directly, pass focus to the handle
|
|
1487
|
+
* if it exists and is focusable, otherwise let the focus trap handle it.
|
|
1488
|
+
*/
|
|
1489
|
+
this.onModalFocus = (ev) => {
|
|
1490
|
+
const { dragHandleEl, el } = this;
|
|
1491
|
+
// Only handle focus if the modal itself was focused (not a child element)
|
|
1492
|
+
if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
|
|
1493
|
+
dragHandleEl.focus();
|
|
1494
|
+
}
|
|
1495
|
+
};
|
|
1485
1496
|
}
|
|
1486
1497
|
onIsOpenChange(newValue, oldValue) {
|
|
1487
1498
|
if (newValue === true && oldValue === false) {
|
|
@@ -1813,13 +1824,13 @@ const Modal = class {
|
|
|
1813
1824
|
}
|
|
1814
1825
|
/**
|
|
1815
1826
|
* Dismiss the modal overlay after it has been presented.
|
|
1816
|
-
*
|
|
1817
|
-
* @param data Any data to emit in the dismiss events.
|
|
1818
|
-
* @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
|
|
1819
|
-
*
|
|
1820
1827
|
* This is a no-op if the overlay has not been presented yet. If you want
|
|
1821
1828
|
* to remove an overlay from the DOM that was never presented, use the
|
|
1822
1829
|
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
1830
|
+
*
|
|
1831
|
+
* @param data Any data to emit in the dismiss events.
|
|
1832
|
+
* @param role The role of the element that is dismissing the modal.
|
|
1833
|
+
* For example, `cancel` or `backdrop`.
|
|
1823
1834
|
*/
|
|
1824
1835
|
async dismiss(data, role) {
|
|
1825
1836
|
var _a;
|
|
@@ -1891,8 +1902,10 @@ const Modal = class {
|
|
|
1891
1902
|
return eventMethod(this.el, 'ionModalWillDismiss');
|
|
1892
1903
|
}
|
|
1893
1904
|
/**
|
|
1894
|
-
* Move a sheet style modal to a specific breakpoint.
|
|
1895
|
-
*
|
|
1905
|
+
* Move a sheet style modal to a specific breakpoint.
|
|
1906
|
+
*
|
|
1907
|
+
* @param breakpoint The breakpoint value to move the sheet modal to.
|
|
1908
|
+
* Must be a value defined in your `breakpoints` array.
|
|
1896
1909
|
*/
|
|
1897
1910
|
async setCurrentBreakpoint(breakpoint) {
|
|
1898
1911
|
if (!this.isSheetModal) {
|
|
@@ -1951,18 +1964,21 @@ const Modal = class {
|
|
|
1951
1964
|
const mode = getIonMode(this);
|
|
1952
1965
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
1953
1966
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
1954
|
-
|
|
1967
|
+
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
1968
|
+
return (h(Host, Object.assign({ key: '8add05bb43a2cdb5e3cf180147d31eb85a018fe0', "no-router": true,
|
|
1969
|
+
// Allow the modal to be navigable when the handle is focusable
|
|
1970
|
+
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
1955
1971
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1956
|
-
}, 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 }), h("ion-backdrop", { key: '
|
|
1972
|
+
}, 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 }), h("ion-backdrop", { key: '90a6605a9564a699d6f66cf71cf6b506796a2963', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a97d071395333bf803c0a9347bda000cf7500d8d', class: "modal-shadow" }), h("div", Object.assign({ key: 'e7b7985c7414a13e3ba8dcecf497b76e92edf53e',
|
|
1957
1973
|
/*
|
|
1958
1974
|
role and aria-modal must be used on the
|
|
1959
1975
|
same element. They must also be set inside the
|
|
1960
1976
|
shadow DOM otherwise ion-button will not be highlighted
|
|
1961
1977
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
1962
1978
|
*/
|
|
1963
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '
|
|
1979
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '8258b65570b11a8ee9c9df2537d6419cd2e34536', class: "modal-handle",
|
|
1964
1980
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
1965
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '
|
|
1981
|
+
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '394370d0ed03ee03152f8f8abae7ff7664ca5c13' }))));
|
|
1966
1982
|
}
|
|
1967
1983
|
get el() { return getElement(this); }
|
|
1968
1984
|
static get watchers() { return {
|
|
@@ -1261,6 +1261,8 @@ const Popover = class {
|
|
|
1261
1261
|
* Developers can pass a mouse, touch, or pointer event
|
|
1262
1262
|
* to position the popover relative to where that event
|
|
1263
1263
|
* was dispatched.
|
|
1264
|
+
*
|
|
1265
|
+
* @param event The event to position the popover relative to.
|
|
1264
1266
|
*/
|
|
1265
1267
|
async present(event) {
|
|
1266
1268
|
const unlock = await this.lockController.lock();
|
|
@@ -1324,15 +1326,14 @@ const Popover = class {
|
|
|
1324
1326
|
}
|
|
1325
1327
|
/**
|
|
1326
1328
|
* Dismiss the popover overlay after it has been presented.
|
|
1329
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
1330
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
1331
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
1327
1332
|
*
|
|
1328
1333
|
* @param data Any data to emit in the dismiss events.
|
|
1329
|
-
* @param role The role of the element that is dismissing the popover. For example,
|
|
1334
|
+
* @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
|
|
1330
1335
|
* @param dismissParentPopover If `true`, dismissing this popover will also dismiss
|
|
1331
1336
|
* a parent popover if this popover is nested. Defaults to `true`.
|
|
1332
|
-
*
|
|
1333
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
1334
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
1335
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
1336
1337
|
*/
|
|
1337
1338
|
async dismiss(data, role, dismissParentPopover = true) {
|
|
1338
1339
|
const unlock = await this.lockController.lock();
|
|
@@ -1384,9 +1385,9 @@ const Popover = class {
|
|
|
1384
1385
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
1385
1386
|
const desktop = isPlatform('desktop');
|
|
1386
1387
|
const enableArrow = arrow && !parentPopover;
|
|
1387
|
-
return (h(Host, Object.assign({ key: '
|
|
1388
|
+
return (h(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
1388
1389
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1389
|
-
}, 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 && h("ion-backdrop", { key: '
|
|
1390
|
+
}, 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 && h("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), h("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, h("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
|
|
1390
1391
|
}
|
|
1391
1392
|
get el() { return getElement(this); }
|
|
1392
1393
|
static get watchers() { return {
|
|
@@ -90,7 +90,6 @@ const ReorderGroup = class {
|
|
|
90
90
|
}
|
|
91
91
|
/**
|
|
92
92
|
* Completes the reorder operation. Must be called by the `ionItemReorder` event.
|
|
93
|
-
*
|
|
94
93
|
* If a list of items is passed, the list will be reordered and returned in the
|
|
95
94
|
* proper order.
|
|
96
95
|
*
|
|
@@ -277,7 +276,7 @@ const ReorderGroup = class {
|
|
|
277
276
|
}
|
|
278
277
|
render() {
|
|
279
278
|
const mode = getIonMode(this);
|
|
280
|
-
return (h(Host, { key: '
|
|
279
|
+
return (h(Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
|
|
281
280
|
[mode]: true,
|
|
282
281
|
'reorder-enabled': !this.disabled,
|
|
283
282
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
|
@@ -674,6 +674,7 @@ const Router = class {
|
|
|
674
674
|
*
|
|
675
675
|
* @param path The path to navigate to.
|
|
676
676
|
* @param direction The direction of the animation. Defaults to `"forward"`.
|
|
677
|
+
* @param animation A custom animation to use for the transition.
|
|
677
678
|
*/
|
|
678
679
|
async push(path, direction = 'forward', animation) {
|
|
679
680
|
var _a;
|
|
@@ -255,10 +255,8 @@ const Searchbar = class {
|
|
|
255
255
|
/**
|
|
256
256
|
* Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
|
|
257
257
|
* `input.focus()`.
|
|
258
|
-
*
|
|
259
258
|
* Developers who wish to focus an input when a page enters
|
|
260
259
|
* should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
|
|
261
|
-
*
|
|
262
260
|
* Developers who wish to focus an input when an overlay is presented
|
|
263
261
|
* should call `setFocus` after `didPresent` has resolved.
|
|
264
262
|
*
|
|
@@ -437,8 +435,8 @@ const Searchbar = class {
|
|
|
437
435
|
const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
|
|
438
436
|
const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
|
|
439
437
|
const shouldShowCancelButton = this.shouldShowCancelButton();
|
|
440
|
-
const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '
|
|
441
|
-
return (h(Host, { key: '
|
|
438
|
+
const cancelButton = this.showCancelButton !== 'never' && (h("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" }, h("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
|
|
439
|
+
return (h(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
|
|
442
440
|
[mode]: true,
|
|
443
441
|
'searchbar-animated': animated,
|
|
444
442
|
'searchbar-disabled': this.disabled,
|
|
@@ -448,14 +446,14 @@ const Searchbar = class {
|
|
|
448
446
|
'searchbar-has-focus': this.focused,
|
|
449
447
|
'searchbar-should-show-clear': this.shouldShowClearButton(),
|
|
450
448
|
'searchbar-should-show-cancel': this.shouldShowCancelButton(),
|
|
451
|
-
}) }, h("div", { key: '
|
|
449
|
+
}) }, h("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, h("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, h("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
|
|
452
450
|
/**
|
|
453
451
|
* This prevents mobile browsers from
|
|
454
452
|
* blurring the input when the clear
|
|
455
453
|
* button is activated.
|
|
456
454
|
*/
|
|
457
455
|
ev.preventDefault();
|
|
458
|
-
}, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '
|
|
456
|
+
}, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
|
|
459
457
|
}
|
|
460
458
|
get el() { return getElement(this); }
|
|
461
459
|
static get watchers() { return {
|
|
@@ -672,16 +672,15 @@ const Toast = class {
|
|
|
672
672
|
}
|
|
673
673
|
/**
|
|
674
674
|
* Dismiss the toast overlay after it has been presented.
|
|
675
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
676
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
677
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
675
678
|
*
|
|
676
679
|
* @param data Any data to emit in the dismiss events.
|
|
677
680
|
* @param role The role of the element that is dismissing the toast.
|
|
678
681
|
* This can be useful in a button handler for determining which button was
|
|
679
682
|
* clicked to dismiss the toast.
|
|
680
|
-
* Some examples include:
|
|
681
|
-
*
|
|
682
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
683
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
684
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
683
|
+
* Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
685
684
|
*/
|
|
686
685
|
async dismiss(data, role) {
|
|
687
686
|
var _a, _b;
|
|
@@ -849,9 +848,9 @@ const Toast = class {
|
|
|
849
848
|
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
|
|
850
849
|
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);
|
|
851
850
|
}
|
|
852
|
-
return (h(Host, Object.assign({ key: '
|
|
851
|
+
return (h(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
|
|
853
852
|
zIndex: `${60000 + this.overlayIndex}`,
|
|
854
|
-
}, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '
|
|
853
|
+
}, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, h("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("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')))));
|
|
855
854
|
}
|
|
856
855
|
get el() { return getElement(this); }
|
|
857
856
|
static get watchers() { return {
|