@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
|
@@ -185,16 +185,15 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
|
|
|
185
185
|
}
|
|
186
186
|
/**
|
|
187
187
|
* Dismiss the action sheet overlay after it has been presented.
|
|
188
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
189
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
190
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
188
191
|
*
|
|
189
192
|
* @param data Any data to emit in the dismiss events.
|
|
190
193
|
* @param role The role of the element that is dismissing the action sheet.
|
|
191
194
|
* This can be useful in a button handler for determining which button was
|
|
192
|
-
* clicked to dismiss the action sheet.
|
|
193
|
-
*
|
|
194
|
-
*
|
|
195
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
196
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
197
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
195
|
+
* clicked to dismiss the action sheet. Some examples include:
|
|
196
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
198
197
|
*/
|
|
199
198
|
async dismiss(data, role) {
|
|
200
199
|
const unlock = await this.lockController.lock();
|
|
@@ -306,12 +305,12 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
|
|
|
306
305
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
307
306
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
308
307
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
309
|
-
return (h(Host, Object.assign({ key: '
|
|
308
|
+
return (h(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
310
309
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
311
|
-
}, 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: '
|
|
310
|
+
}, 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: {
|
|
312
311
|
'action-sheet-title': true,
|
|
313
312
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
314
|
-
} }, header, this.subHeader && h("div", { key: '
|
|
313
|
+
} }, 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" })));
|
|
315
314
|
}
|
|
316
315
|
get el() { return this; }
|
|
317
316
|
static get watchers() { return {
|
package/components/alert.js
CHANGED
|
@@ -355,16 +355,15 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
|
|
|
355
355
|
}
|
|
356
356
|
/**
|
|
357
357
|
* Dismiss the alert overlay after it has been presented.
|
|
358
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
359
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
360
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
358
361
|
*
|
|
359
362
|
* @param data Any data to emit in the dismiss events.
|
|
360
363
|
* @param role The role of the element that is dismissing the alert.
|
|
361
364
|
* This can be useful in a button handler for determining which button was
|
|
362
|
-
* clicked to dismiss the alert.
|
|
363
|
-
*
|
|
364
|
-
*
|
|
365
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
366
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
367
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
365
|
+
* clicked to dismiss the alert. Some examples include:
|
|
366
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
368
367
|
*/
|
|
369
368
|
async dismiss(data, role) {
|
|
370
369
|
const unlock = await this.lockController.lock();
|
|
@@ -534,9 +533,9 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
|
|
|
534
533
|
* If neither are defined, do not set aria-labelledby.
|
|
535
534
|
*/
|
|
536
535
|
const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
|
|
537
|
-
return (h(Host, { key: '
|
|
536
|
+
return (h(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
|
|
538
537
|
zIndex: `${20000 + overlayIndex}`,
|
|
539
|
-
}, 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: '
|
|
538
|
+
}, 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" })));
|
|
540
539
|
}
|
|
541
540
|
get el() { return this; }
|
|
542
541
|
static get watchers() { return {
|
package/components/ion-app.js
CHANGED
|
@@ -61,6 +61,8 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
|
|
|
61
61
|
* a result of another user action. (Ex: We focus the first element
|
|
62
62
|
* inside of a popover when the user presents it, but the popover is not always
|
|
63
63
|
* presented as a result of keyboard action.)
|
|
64
|
+
*
|
|
65
|
+
* @param elements An array of HTML elements to set focus on.
|
|
64
66
|
*/
|
|
65
67
|
async setFocus(elements) {
|
|
66
68
|
if (this.focusVisible) {
|
|
@@ -69,7 +71,7 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
|
|
|
69
71
|
}
|
|
70
72
|
render() {
|
|
71
73
|
const mode = getIonMode(this);
|
|
72
|
-
return (h(Host, { key: '
|
|
74
|
+
return (h(Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
|
|
73
75
|
[mode]: true,
|
|
74
76
|
'ion-page': true,
|
|
75
77
|
'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
|
|
@@ -996,6 +996,8 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
996
996
|
* Confirms the selected datetime value, updates the
|
|
997
997
|
* `value` property, and optionally closes the popover
|
|
998
998
|
* or modal that the datetime was presented in.
|
|
999
|
+
*
|
|
1000
|
+
* @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
|
|
999
1001
|
*/
|
|
1000
1002
|
async confirm(closeOverlay = false) {
|
|
1001
1003
|
const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
|
|
@@ -1029,6 +1031,8 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1029
1031
|
* Resets the internal state of the datetime but does not update the value.
|
|
1030
1032
|
* Passing a valid ISO-8601 string will reset the state of the component to the provided date.
|
|
1031
1033
|
* If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
|
|
1034
|
+
*
|
|
1035
|
+
* @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.
|
|
1032
1036
|
*/
|
|
1033
1037
|
async reset(startDate) {
|
|
1034
1038
|
this.processValue(startDate);
|
|
@@ -1038,6 +1042,8 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1038
1042
|
* optionally closes the popover
|
|
1039
1043
|
* or modal that the datetime was
|
|
1040
1044
|
* presented in.
|
|
1045
|
+
*
|
|
1046
|
+
* @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
|
|
1041
1047
|
*/
|
|
1042
1048
|
async cancel(closeOverlay = false) {
|
|
1043
1049
|
this.ionCancel.emit();
|
|
@@ -1851,7 +1857,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1851
1857
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1852
1858
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1853
1859
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
1854
|
-
return (h(Host, { key: '
|
|
1860
|
+
return (h(Host, { key: '79677f5bc0fb32fb68569636bd76e68238e62eb8', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
|
|
1855
1861
|
[mode]: true,
|
|
1856
1862
|
['datetime-readonly']: readonly,
|
|
1857
1863
|
['datetime-disabled']: disabled,
|
|
@@ -1861,7 +1867,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1861
1867
|
[`datetime-size-${size}`]: true,
|
|
1862
1868
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1863
1869
|
[`datetime-grid`]: isGridStyle,
|
|
1864
|
-
})) }, h("div", { key: '
|
|
1870
|
+
})) }, h("div", { key: 'bf07b1e3c64af6e837663ff470bea93787a6e86f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
1865
1871
|
}
|
|
1866
1872
|
get el() { return this; }
|
|
1867
1873
|
static get watchers() { return {
|
|
@@ -226,16 +226,15 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
|
|
|
226
226
|
}
|
|
227
227
|
/**
|
|
228
228
|
* Dismiss the loading overlay after it has been presented.
|
|
229
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
230
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
231
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
229
232
|
*
|
|
230
233
|
* @param data Any data to emit in the dismiss events.
|
|
231
234
|
* @param role The role of the element that is dismissing the loading.
|
|
232
235
|
* This can be useful in a button handler for determining which button was
|
|
233
|
-
* clicked to dismiss the loading.
|
|
234
|
-
*
|
|
235
|
-
*
|
|
236
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
237
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
238
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
236
|
+
* clicked to dismiss the loading. Some examples include:
|
|
237
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
239
238
|
*/
|
|
240
239
|
async dismiss(data, role) {
|
|
241
240
|
const unlock = await this.lockController.lock();
|
|
@@ -277,9 +276,9 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
|
|
|
277
276
|
* Otherwise, don't set aria-labelledby.
|
|
278
277
|
*/
|
|
279
278
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
280
|
-
return (h(Host, Object.assign({ key: '
|
|
279
|
+
return (h(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
281
280
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
282
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '
|
|
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: '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" })));
|
|
283
282
|
}
|
|
284
283
|
get el() { return this; }
|
|
285
284
|
static get watchers() { return {
|
package/components/ion-menu.js
CHANGED
|
@@ -244,7 +244,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
244
244
|
return Promise.resolve(this._isOpen);
|
|
245
245
|
}
|
|
246
246
|
/**
|
|
247
|
-
* Returns `true`
|
|
247
|
+
* Returns `true` if the menu is active.
|
|
248
248
|
*
|
|
249
249
|
* A menu is active when it can be opened or closed, meaning it's enabled
|
|
250
250
|
* and it's not part of a `ion-split-pane`.
|
|
@@ -255,6 +255,10 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
255
255
|
/**
|
|
256
256
|
* Opens the menu. If the menu is already open or it can't be opened,
|
|
257
257
|
* it returns `false`.
|
|
258
|
+
*
|
|
259
|
+
* @param animated If `true`, the menu will animate when opening.
|
|
260
|
+
* If `false`, the menu will open instantly without animation.
|
|
261
|
+
* Defaults to `true`.
|
|
258
262
|
*/
|
|
259
263
|
open(animated = true) {
|
|
260
264
|
return this.setOpen(true, animated);
|
|
@@ -262,20 +266,38 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
262
266
|
/**
|
|
263
267
|
* Closes the menu. If the menu is already closed or it can't be closed,
|
|
264
268
|
* it returns `false`.
|
|
269
|
+
*
|
|
270
|
+
* @param animated If `true`, the menu will animate when closing. If `false`,
|
|
271
|
+
* the menu will close instantly without animation. Defaults to `true`.
|
|
272
|
+
* @param role The role of the element that is closing the menu.
|
|
273
|
+
* This can be useful in a button handler for determining which button was
|
|
274
|
+
* clicked to close the menu. Some examples include:
|
|
275
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
265
276
|
*/
|
|
266
277
|
close(animated = true, role) {
|
|
267
278
|
return this.setOpen(false, animated, role);
|
|
268
279
|
}
|
|
269
280
|
/**
|
|
270
|
-
* Toggles the menu. If the menu is already open, it will try to close,
|
|
281
|
+
* Toggles the menu. If the menu is already open, it will try to close,
|
|
282
|
+
* otherwise it will try to open it.
|
|
271
283
|
* If the operation can't be completed successfully, it returns `false`.
|
|
284
|
+
*
|
|
285
|
+
* @param animated If `true`, the menu will animate when opening/closing.
|
|
286
|
+
* If `false`, the menu will open/close instantly without animation.
|
|
287
|
+
* Defaults to `true`.
|
|
272
288
|
*/
|
|
273
289
|
toggle(animated = true) {
|
|
274
290
|
return this.setOpen(!this._isOpen, animated);
|
|
275
291
|
}
|
|
276
292
|
/**
|
|
277
|
-
* Opens or closes the
|
|
293
|
+
* Opens or closes the menu.
|
|
278
294
|
* If the operation can't be completed successfully, it returns `false`.
|
|
295
|
+
*
|
|
296
|
+
* @param shouldOpen If `true`, the menu will open. If `false`, the menu
|
|
297
|
+
* will close.
|
|
298
|
+
* @param animated If `true`, the menu will animate when opening/closing.
|
|
299
|
+
* If `false`, the menu will open/close instantly without animation.
|
|
300
|
+
* @param role The role of the element that is closing the menu.
|
|
279
301
|
*/
|
|
280
302
|
setOpen(shouldOpen, animated = true, role) {
|
|
281
303
|
return menuController._setOpen(this, shouldOpen, animated, role);
|
|
@@ -640,14 +662,14 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
640
662
|
* the ionBackButton listener in the menu controller
|
|
641
663
|
* will handle closing the menu when Escape is pressed.
|
|
642
664
|
*/
|
|
643
|
-
return (h(Host, { key: '
|
|
665
|
+
return (h(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
644
666
|
[mode]: true,
|
|
645
667
|
[`menu-type-${type}`]: true,
|
|
646
668
|
'menu-enabled': !disabled,
|
|
647
669
|
[`menu-side-${side}`]: true,
|
|
648
670
|
'menu-pane-visible': isPaneVisible,
|
|
649
671
|
'split-pane-side': hostContext('ion-split-pane', el),
|
|
650
|
-
} }, h("div", { key: '
|
|
672
|
+
} }, 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" })));
|
|
651
673
|
}
|
|
652
674
|
get el() { return this; }
|
|
653
675
|
static get watchers() { return {
|
|
@@ -60,7 +60,6 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
60
60
|
}
|
|
61
61
|
/**
|
|
62
62
|
* Completes the reorder operation. Must be called by the `ionItemReorder` event.
|
|
63
|
-
*
|
|
64
63
|
* If a list of items is passed, the list will be reordered and returned in the
|
|
65
64
|
* proper order.
|
|
66
65
|
*
|
|
@@ -247,7 +246,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
247
246
|
}
|
|
248
247
|
render() {
|
|
249
248
|
const mode = getIonMode(this);
|
|
250
|
-
return (h(Host, { key: '
|
|
249
|
+
return (h(Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
|
|
251
250
|
[mode]: true,
|
|
252
251
|
'reorder-enabled': !this.disabled,
|
|
253
252
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
package/components/ion-router.js
CHANGED
|
@@ -616,6 +616,7 @@ const Router = /*@__PURE__*/ proxyCustomElement(class Router extends HTMLElement
|
|
|
616
616
|
*
|
|
617
617
|
* @param path The path to navigate to.
|
|
618
618
|
* @param direction The direction of the animation. Defaults to `"forward"`.
|
|
619
|
+
* @param animation A custom animation to use for the transition.
|
|
619
620
|
*/
|
|
620
621
|
async push(path, direction = 'forward', animation) {
|
|
621
622
|
var _a;
|
|
@@ -259,10 +259,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
|
|
|
259
259
|
/**
|
|
260
260
|
* Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
|
|
261
261
|
* `input.focus()`.
|
|
262
|
-
*
|
|
263
262
|
* Developers who wish to focus an input when a page enters
|
|
264
263
|
* should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
|
|
265
|
-
*
|
|
266
264
|
* Developers who wish to focus an input when an overlay is presented
|
|
267
265
|
* should call `setFocus` after `didPresent` has resolved.
|
|
268
266
|
*
|
|
@@ -441,8 +439,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
|
|
|
441
439
|
const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
|
|
442
440
|
const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
|
|
443
441
|
const shouldShowCancelButton = this.shouldShowCancelButton();
|
|
444
|
-
const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '
|
|
445
|
-
return (h(Host, { key: '
|
|
442
|
+
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))));
|
|
443
|
+
return (h(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
|
|
446
444
|
[mode]: true,
|
|
447
445
|
'searchbar-animated': animated,
|
|
448
446
|
'searchbar-disabled': this.disabled,
|
|
@@ -452,14 +450,14 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
|
|
|
452
450
|
'searchbar-has-focus': this.focused,
|
|
453
451
|
'searchbar-should-show-clear': this.shouldShowClearButton(),
|
|
454
452
|
'searchbar-should-show-cancel': this.shouldShowCancelButton(),
|
|
455
|
-
}) }, h("div", { key: '
|
|
453
|
+
}) }, 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) => {
|
|
456
454
|
/**
|
|
457
455
|
* This prevents mobile browsers from
|
|
458
456
|
* blurring the input when the clear
|
|
459
457
|
* button is activated.
|
|
460
458
|
*/
|
|
461
459
|
ev.preventDefault();
|
|
462
|
-
}, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '
|
|
460
|
+
}, 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));
|
|
463
461
|
}
|
|
464
462
|
get el() { return this; }
|
|
465
463
|
static get watchers() { return {
|
package/components/ion-toast.js
CHANGED
|
@@ -677,16 +677,15 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
|
|
|
677
677
|
}
|
|
678
678
|
/**
|
|
679
679
|
* Dismiss the toast overlay after it has been presented.
|
|
680
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
681
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
682
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
680
683
|
*
|
|
681
684
|
* @param data Any data to emit in the dismiss events.
|
|
682
685
|
* @param role The role of the element that is dismissing the toast.
|
|
683
686
|
* This can be useful in a button handler for determining which button was
|
|
684
687
|
* clicked to dismiss the toast.
|
|
685
|
-
* Some examples include:
|
|
686
|
-
*
|
|
687
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
688
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
689
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
688
|
+
* Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
690
689
|
*/
|
|
691
690
|
async dismiss(data, role) {
|
|
692
691
|
var _a, _b;
|
|
@@ -854,9 +853,9 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
|
|
|
854
853
|
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
|
|
855
854
|
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);
|
|
856
855
|
}
|
|
857
|
-
return (h(Host, Object.assign({ key: '
|
|
856
|
+
return (h(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
|
|
858
857
|
zIndex: `${60000 + this.overlayIndex}`,
|
|
859
|
-
}, 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: '
|
|
858
|
+
}, 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')))));
|
|
860
859
|
}
|
|
861
860
|
get el() { return this; }
|
|
862
861
|
static get watchers() { return {
|
package/components/modal.js
CHANGED
|
@@ -1484,6 +1484,17 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
1484
1484
|
el.dispatchEvent(ev);
|
|
1485
1485
|
}
|
|
1486
1486
|
};
|
|
1487
|
+
/**
|
|
1488
|
+
* When the modal receives focus directly, pass focus to the handle
|
|
1489
|
+
* if it exists and is focusable, otherwise let the focus trap handle it.
|
|
1490
|
+
*/
|
|
1491
|
+
this.onModalFocus = (ev) => {
|
|
1492
|
+
const { dragHandleEl, el } = this;
|
|
1493
|
+
// Only handle focus if the modal itself was focused (not a child element)
|
|
1494
|
+
if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
|
|
1495
|
+
dragHandleEl.focus();
|
|
1496
|
+
}
|
|
1497
|
+
};
|
|
1487
1498
|
}
|
|
1488
1499
|
onIsOpenChange(newValue, oldValue) {
|
|
1489
1500
|
if (newValue === true && oldValue === false) {
|
|
@@ -1815,13 +1826,13 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
1815
1826
|
}
|
|
1816
1827
|
/**
|
|
1817
1828
|
* Dismiss the modal overlay after it has been presented.
|
|
1818
|
-
*
|
|
1819
|
-
* @param data Any data to emit in the dismiss events.
|
|
1820
|
-
* @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
|
|
1821
|
-
*
|
|
1822
1829
|
* This is a no-op if the overlay has not been presented yet. If you want
|
|
1823
1830
|
* to remove an overlay from the DOM that was never presented, use the
|
|
1824
1831
|
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
1832
|
+
*
|
|
1833
|
+
* @param data Any data to emit in the dismiss events.
|
|
1834
|
+
* @param role The role of the element that is dismissing the modal.
|
|
1835
|
+
* For example, `cancel` or `backdrop`.
|
|
1825
1836
|
*/
|
|
1826
1837
|
async dismiss(data, role) {
|
|
1827
1838
|
var _a;
|
|
@@ -1893,8 +1904,10 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
1893
1904
|
return eventMethod(this.el, 'ionModalWillDismiss');
|
|
1894
1905
|
}
|
|
1895
1906
|
/**
|
|
1896
|
-
* Move a sheet style modal to a specific breakpoint.
|
|
1897
|
-
*
|
|
1907
|
+
* Move a sheet style modal to a specific breakpoint.
|
|
1908
|
+
*
|
|
1909
|
+
* @param breakpoint The breakpoint value to move the sheet modal to.
|
|
1910
|
+
* Must be a value defined in your `breakpoints` array.
|
|
1898
1911
|
*/
|
|
1899
1912
|
async setCurrentBreakpoint(breakpoint) {
|
|
1900
1913
|
if (!this.isSheetModal) {
|
|
@@ -1953,18 +1966,21 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
1953
1966
|
const mode = getIonMode(this);
|
|
1954
1967
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
1955
1968
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
1956
|
-
|
|
1969
|
+
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
1970
|
+
return (h(Host, Object.assign({ key: '8add05bb43a2cdb5e3cf180147d31eb85a018fe0', "no-router": true,
|
|
1971
|
+
// Allow the modal to be navigable when the handle is focusable
|
|
1972
|
+
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
1957
1973
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1958
|
-
}, 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: '
|
|
1974
|
+
}, 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',
|
|
1959
1975
|
/*
|
|
1960
1976
|
role and aria-modal must be used on the
|
|
1961
1977
|
same element. They must also be set inside the
|
|
1962
1978
|
shadow DOM otherwise ion-button will not be highlighted
|
|
1963
1979
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
1964
1980
|
*/
|
|
1965
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '
|
|
1981
|
+
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",
|
|
1966
1982
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
1967
|
-
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: '
|
|
1983
|
+
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' }))));
|
|
1968
1984
|
}
|
|
1969
1985
|
get el() { return this; }
|
|
1970
1986
|
static get watchers() { return {
|
package/components/popover.js
CHANGED
|
@@ -1263,6 +1263,8 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
|
|
|
1263
1263
|
* Developers can pass a mouse, touch, or pointer event
|
|
1264
1264
|
* to position the popover relative to where that event
|
|
1265
1265
|
* was dispatched.
|
|
1266
|
+
*
|
|
1267
|
+
* @param event The event to position the popover relative to.
|
|
1266
1268
|
*/
|
|
1267
1269
|
async present(event) {
|
|
1268
1270
|
const unlock = await this.lockController.lock();
|
|
@@ -1326,15 +1328,14 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
|
|
|
1326
1328
|
}
|
|
1327
1329
|
/**
|
|
1328
1330
|
* Dismiss the popover overlay after it has been presented.
|
|
1331
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
1332
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
1333
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
1329
1334
|
*
|
|
1330
1335
|
* @param data Any data to emit in the dismiss events.
|
|
1331
|
-
* @param role The role of the element that is dismissing the popover. For example,
|
|
1336
|
+
* @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
|
|
1332
1337
|
* @param dismissParentPopover If `true`, dismissing this popover will also dismiss
|
|
1333
1338
|
* a parent popover if this popover is nested. Defaults to `true`.
|
|
1334
|
-
*
|
|
1335
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
1336
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
1337
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
1338
1339
|
*/
|
|
1339
1340
|
async dismiss(data, role, dismissParentPopover = true) {
|
|
1340
1341
|
const unlock = await this.lockController.lock();
|
|
@@ -1386,9 +1387,9 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
|
|
|
1386
1387
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
1387
1388
|
const desktop = isPlatform('desktop');
|
|
1388
1389
|
const enableArrow = arrow && !parentPopover;
|
|
1389
|
-
return (h(Host, Object.assign({ key: '
|
|
1390
|
+
return (h(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
1390
1391
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1391
|
-
}, 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: '
|
|
1392
|
+
}, 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' })))));
|
|
1392
1393
|
}
|
|
1393
1394
|
get el() { return this; }
|
|
1394
1395
|
static get watchers() { return {
|
|
@@ -189,16 +189,15 @@ const ActionSheet = class {
|
|
|
189
189
|
}
|
|
190
190
|
/**
|
|
191
191
|
* Dismiss the action sheet overlay after it has been presented.
|
|
192
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
193
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
194
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
192
195
|
*
|
|
193
196
|
* @param data Any data to emit in the dismiss events.
|
|
194
197
|
* @param role The role of the element that is dismissing the action sheet.
|
|
195
198
|
* This can be useful in a button handler for determining which button was
|
|
196
|
-
* clicked to dismiss the action sheet.
|
|
197
|
-
*
|
|
198
|
-
*
|
|
199
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
200
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
201
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
199
|
+
* clicked to dismiss the action sheet. Some examples include:
|
|
200
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
202
201
|
*/
|
|
203
202
|
async dismiss(data, role) {
|
|
204
203
|
const unlock = await this.lockController.lock();
|
|
@@ -310,12 +309,12 @@ const ActionSheet = class {
|
|
|
310
309
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
311
310
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
312
311
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
313
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
312
|
+
return (index.h(index.Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
314
313
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
315
|
-
}, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '
|
|
314
|
+
}, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '81cf3f7d19864e041813987b46d2d115b8466819', tappable: this.backdropDismiss }), index.h("div", { key: '791c6a976683646fc306a42c15c5078b6f06a45f', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: 'a350b489ef7852eab9dc2227ce6d92da27dd9bf9', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: '69ba51ee13510c1a411d87cb4845b11b7302a36f', class: "action-sheet-container" }, index.h("div", { key: 'bded15b8306c36591e526f0f99e1eeabcbab3915', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (index.h("div", { key: '06b5147c0f6d9180fe8f12e75c9b4a0310226adc', id: headerID, class: {
|
|
316
315
|
'action-sheet-title': true,
|
|
317
316
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
318
|
-
} }, header, this.subHeader && index.h("div", { key: '
|
|
317
|
+
} }, header, this.subHeader && index.h("div", { key: '54874362a75c679aba803bf4f8768f5404d2dd28', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (index.h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), index.h("span", { class: "action-sheet-button-inner" }, b.icon && index.h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index.h("ion-ripple-effect", null))))), cancelButton && (index.h("div", { key: '67b0de298eb424f3dea846a841b7a06d70e3930d', class: "action-sheet-group action-sheet-group-cancel" }, index.h("button", Object.assign({ key: 'e7e3f9a5495eea9b97dbf885ef36944f2e420eff' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), index.h("span", { key: 'f889d29ed6c3d14bbc1d805888351d87f5122377', class: "action-sheet-button-inner" }, cancelButton.icon && (index.h("ion-icon", { key: '7c05cf424b38c37fd40aaeb42a494387291571fb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && index.h("ion-ripple-effect", { key: 'bed927b477dc2708a5123ef560274fca9819b3d6' })))))), index.h("div", { key: 'c5df1b11dc15a93892d57065d3dd5fbe02e43b39', tabindex: "0", "aria-hidden": "true" })));
|
|
319
318
|
}
|
|
320
319
|
get el() { return index.getElement(this); }
|
|
321
320
|
static get watchers() { return {
|
|
@@ -359,16 +359,15 @@ const Alert = class {
|
|
|
359
359
|
}
|
|
360
360
|
/**
|
|
361
361
|
* Dismiss the alert overlay after it has been presented.
|
|
362
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
363
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
364
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
362
365
|
*
|
|
363
366
|
* @param data Any data to emit in the dismiss events.
|
|
364
367
|
* @param role The role of the element that is dismissing the alert.
|
|
365
368
|
* This can be useful in a button handler for determining which button was
|
|
366
|
-
* clicked to dismiss the alert.
|
|
367
|
-
*
|
|
368
|
-
*
|
|
369
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
370
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
371
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
369
|
+
* clicked to dismiss the alert. Some examples include:
|
|
370
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
372
371
|
*/
|
|
373
372
|
async dismiss(data, role) {
|
|
374
373
|
const unlock = await this.lockController.lock();
|
|
@@ -538,9 +537,9 @@ const Alert = class {
|
|
|
538
537
|
* If neither are defined, do not set aria-labelledby.
|
|
539
538
|
*/
|
|
540
539
|
const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
|
|
541
|
-
return (index.h(index.Host, { key: '
|
|
540
|
+
return (index.h(index.Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
|
|
542
541
|
zIndex: `${20000 + overlayIndex}`,
|
|
543
|
-
}, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, index.h("ion-backdrop", { key: '
|
|
542
|
+
}, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, index.h("ion-backdrop", { key: '3cd5ca8b99cb95b11dd22ab41a820d841142896f', tappable: this.backdropDismiss }), index.h("div", { key: '4cc62ae6e21424057d22aeef1e8fc77011e77cd5', tabindex: "0", "aria-hidden": "true" }), index.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), index.h("div", { key: '78694e3c0db2d408df3899fb1a90859bcc8d14cc', class: "alert-head" }, header && (index.h("h2", { key: 'ec88ff3e4e1ea871b5975133fdcf4cac38b05e0f', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (index.h("h2", { key: '9b09bc8bb68af255ef8b7d22587acc946148e544', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (index.h("h3", { key: '99abe815f75d2df7f1b77c0df9f3436724fea76f', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), index.h("div", { key: 'a43d0c22c0e46b1ef911f92ffeb253d7911b85f7', tabindex: "0", "aria-hidden": "true" })));
|
|
544
543
|
}
|
|
545
544
|
get el() { return index.getElement(this); }
|
|
546
545
|
static get watchers() { return {
|