@ionic/core 8.6.3-dev.11750799190.186437ae → 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 +25 -11
- 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 +25 -11
- 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 +34 -17
- package/dist/collection/components/popover/popover.js +18 -14
- package/dist/collection/components/reorder-group/reorder-group.js +2 -3
- package/dist/collection/components/router/router.js +5 -1
- package/dist/collection/components/searchbar/searchbar.js +5 -7
- package/dist/collection/components/toast/toast.js +9 -10
- package/dist/docs.json +138 -72
- package/dist/esm/ion-action-sheet.entry.js +8 -9
- package/dist/esm/ion-alert.entry.js +7 -8
- package/dist/esm/ion-app_8.entry.js +3 -1
- package/dist/esm/ion-datetime_3.entry.js +8 -2
- package/dist/esm/ion-loading.entry.js +7 -8
- package/dist/esm/ion-menu_3.entry.js +27 -5
- package/dist/esm/ion-modal.entry.js +25 -11
- 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 +105 -66
- package/hydrate/index.mjs +105 -66
- package/package.json +1 -1
- package/dist/ionic/p-6dd2e493.entry.js +0 -4
- package/dist/ionic/p-7149db7e.entry.js +0 -4
- package/dist/ionic/p-bec79123.entry.js +0 -4
|
@@ -72,6 +72,8 @@ const App = class {
|
|
|
72
72
|
* a result of another user action. (Ex: We focus the first element
|
|
73
73
|
* inside of a popover when the user presents it, but the popover is not always
|
|
74
74
|
* presented as a result of keyboard action.)
|
|
75
|
+
*
|
|
76
|
+
* @param elements An array of HTML elements to set focus on.
|
|
75
77
|
*/
|
|
76
78
|
async setFocus(elements) {
|
|
77
79
|
if (this.focusVisible) {
|
|
@@ -80,7 +82,7 @@ const App = class {
|
|
|
80
82
|
}
|
|
81
83
|
render() {
|
|
82
84
|
const mode = index.getIonMode(this);
|
|
83
|
-
return (index.h(index.Host, { key: '
|
|
85
|
+
return (index.h(index.Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
|
|
84
86
|
[mode]: true,
|
|
85
87
|
'ion-page': true,
|
|
86
88
|
'force-statusbar-padding': index.config.getBoolean('_forceStatusbarPadding'),
|
|
@@ -994,6 +994,8 @@ const Datetime = class {
|
|
|
994
994
|
* Confirms the selected datetime value, updates the
|
|
995
995
|
* `value` property, and optionally closes the popover
|
|
996
996
|
* or modal that the datetime was presented in.
|
|
997
|
+
*
|
|
998
|
+
* @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
|
|
997
999
|
*/
|
|
998
1000
|
async confirm(closeOverlay = false) {
|
|
999
1001
|
const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
|
|
@@ -1027,6 +1029,8 @@ const Datetime = class {
|
|
|
1027
1029
|
* Resets the internal state of the datetime but does not update the value.
|
|
1028
1030
|
* Passing a valid ISO-8601 string will reset the state of the component to the provided date.
|
|
1029
1031
|
* If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
|
|
1032
|
+
*
|
|
1033
|
+
* @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.
|
|
1030
1034
|
*/
|
|
1031
1035
|
async reset(startDate) {
|
|
1032
1036
|
this.processValue(startDate);
|
|
@@ -1036,6 +1040,8 @@ const Datetime = class {
|
|
|
1036
1040
|
* optionally closes the popover
|
|
1037
1041
|
* or modal that the datetime was
|
|
1038
1042
|
* presented in.
|
|
1043
|
+
*
|
|
1044
|
+
* @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
|
|
1039
1045
|
*/
|
|
1040
1046
|
async cancel(closeOverlay = false) {
|
|
1041
1047
|
this.ionCancel.emit();
|
|
@@ -1849,7 +1855,7 @@ const Datetime = class {
|
|
|
1849
1855
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1850
1856
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1851
1857
|
helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
|
|
1852
|
-
return (index.h(index.Host, { key: '
|
|
1858
|
+
return (index.h(index.Host, { key: '79677f5bc0fb32fb68569636bd76e68238e62eb8', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
|
|
1853
1859
|
[mode]: true,
|
|
1854
1860
|
['datetime-readonly']: readonly,
|
|
1855
1861
|
['datetime-disabled']: disabled,
|
|
@@ -1859,7 +1865,7 @@ const Datetime = class {
|
|
|
1859
1865
|
[`datetime-size-${size}`]: true,
|
|
1860
1866
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1861
1867
|
[`datetime-grid`]: isGridStyle,
|
|
1862
|
-
})) }, index.h("div", { key: '
|
|
1868
|
+
})) }, index.h("div", { key: 'bf07b1e3c64af6e837663ff470bea93787a6e86f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
1863
1869
|
}
|
|
1864
1870
|
get el() { return index.getElement(this); }
|
|
1865
1871
|
static get watchers() { return {
|
|
@@ -227,16 +227,15 @@ const Loading = class {
|
|
|
227
227
|
}
|
|
228
228
|
/**
|
|
229
229
|
* Dismiss the loading overlay after it has been presented.
|
|
230
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
231
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
232
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
230
233
|
*
|
|
231
234
|
* @param data Any data to emit in the dismiss events.
|
|
232
235
|
* @param role The role of the element that is dismissing the loading.
|
|
233
236
|
* This can be useful in a button handler for determining which button was
|
|
234
|
-
* clicked to dismiss the loading.
|
|
235
|
-
*
|
|
236
|
-
*
|
|
237
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
238
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
239
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
237
|
+
* clicked to dismiss the loading. Some examples include:
|
|
238
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
240
239
|
*/
|
|
241
240
|
async dismiss(data, role) {
|
|
242
241
|
const unlock = await this.lockController.lock();
|
|
@@ -278,9 +277,9 @@ const Loading = class {
|
|
|
278
277
|
* Otherwise, don't set aria-labelledby.
|
|
279
278
|
*/
|
|
280
279
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
281
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
280
|
+
return (index.h(index.Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
282
281
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
283
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), index.h("ion-backdrop", { key: '
|
|
282
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), index.h("ion-backdrop", { key: '231dec84e424a2dc358ce95b84d6035cf43e4dea', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: 'c9af29b6e6bb49a217396a5c874bbfb8835a926c', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: 'a8659863743cdeccbe1ba810eaabfd3ebfcb86f3', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (index.h("div", { key: '3b346f39bc71691bd8686556a1e142198a7b12fa', class: "loading-spinner" }, index.h("ion-spinner", { key: '8dc2bf1556e5138e262827f1516c59ecd09f3520', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), index.h("div", { key: '054164c0dbae9a0e0973dd3c8e28f5b771820310', tabindex: "0", "aria-hidden": "true" })));
|
|
284
283
|
}
|
|
285
284
|
get el() { return index.getElement(this); }
|
|
286
285
|
static get watchers() { return {
|
|
@@ -242,7 +242,7 @@ const Menu = class {
|
|
|
242
242
|
return Promise.resolve(this._isOpen);
|
|
243
243
|
}
|
|
244
244
|
/**
|
|
245
|
-
* Returns `true`
|
|
245
|
+
* Returns `true` if the menu is active.
|
|
246
246
|
*
|
|
247
247
|
* A menu is active when it can be opened or closed, meaning it's enabled
|
|
248
248
|
* and it's not part of a `ion-split-pane`.
|
|
@@ -253,6 +253,10 @@ const Menu = class {
|
|
|
253
253
|
/**
|
|
254
254
|
* Opens the menu. If the menu is already open or it can't be opened,
|
|
255
255
|
* it returns `false`.
|
|
256
|
+
*
|
|
257
|
+
* @param animated If `true`, the menu will animate when opening.
|
|
258
|
+
* If `false`, the menu will open instantly without animation.
|
|
259
|
+
* Defaults to `true`.
|
|
256
260
|
*/
|
|
257
261
|
open(animated = true) {
|
|
258
262
|
return this.setOpen(true, animated);
|
|
@@ -260,20 +264,38 @@ const Menu = class {
|
|
|
260
264
|
/**
|
|
261
265
|
* Closes the menu. If the menu is already closed or it can't be closed,
|
|
262
266
|
* it returns `false`.
|
|
267
|
+
*
|
|
268
|
+
* @param animated If `true`, the menu will animate when closing. If `false`,
|
|
269
|
+
* the menu will close instantly without animation. Defaults to `true`.
|
|
270
|
+
* @param role The role of the element that is closing the menu.
|
|
271
|
+
* This can be useful in a button handler for determining which button was
|
|
272
|
+
* clicked to close the menu. Some examples include:
|
|
273
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
263
274
|
*/
|
|
264
275
|
close(animated = true, role) {
|
|
265
276
|
return this.setOpen(false, animated, role);
|
|
266
277
|
}
|
|
267
278
|
/**
|
|
268
|
-
* Toggles the menu. If the menu is already open, it will try to close,
|
|
279
|
+
* Toggles the menu. If the menu is already open, it will try to close,
|
|
280
|
+
* otherwise it will try to open it.
|
|
269
281
|
* If the operation can't be completed successfully, it returns `false`.
|
|
282
|
+
*
|
|
283
|
+
* @param animated If `true`, the menu will animate when opening/closing.
|
|
284
|
+
* If `false`, the menu will open/close instantly without animation.
|
|
285
|
+
* Defaults to `true`.
|
|
270
286
|
*/
|
|
271
287
|
toggle(animated = true) {
|
|
272
288
|
return this.setOpen(!this._isOpen, animated);
|
|
273
289
|
}
|
|
274
290
|
/**
|
|
275
|
-
* Opens or closes the
|
|
291
|
+
* Opens or closes the menu.
|
|
276
292
|
* If the operation can't be completed successfully, it returns `false`.
|
|
293
|
+
*
|
|
294
|
+
* @param shouldOpen If `true`, the menu will open. If `false`, the menu
|
|
295
|
+
* will close.
|
|
296
|
+
* @param animated If `true`, the menu will animate when opening/closing.
|
|
297
|
+
* If `false`, the menu will open/close instantly without animation.
|
|
298
|
+
* @param role The role of the element that is closing the menu.
|
|
277
299
|
*/
|
|
278
300
|
setOpen(shouldOpen, animated = true, role) {
|
|
279
301
|
return index$1.menuController._setOpen(this, shouldOpen, animated, role);
|
|
@@ -638,14 +660,14 @@ const Menu = class {
|
|
|
638
660
|
* the ionBackButton listener in the menu controller
|
|
639
661
|
* will handle closing the menu when Escape is pressed.
|
|
640
662
|
*/
|
|
641
|
-
return (index.h(index.Host, { key: '
|
|
663
|
+
return (index.h(index.Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: hardwareBackButton.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
642
664
|
[mode]: true,
|
|
643
665
|
[`menu-type-${type}`]: true,
|
|
644
666
|
'menu-enabled': !disabled,
|
|
645
667
|
[`menu-side-${side}`]: true,
|
|
646
668
|
'menu-pane-visible': isPaneVisible,
|
|
647
669
|
'split-pane-side': theme.hostContext('ion-split-pane', el),
|
|
648
|
-
} }, index.h("div", { key: '
|
|
670
|
+
} }, index.h("div", { key: '3f5f70acd4d3ed6bb445122f4f01d73db738a75f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: '3161326c9330e7f7441299c428b87a91b31a83e9' })), index.h("ion-backdrop", { key: '917b50f38489bdf03d0c642af8b4e4e172c7dc4c', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
649
671
|
}
|
|
650
672
|
get el() { return index.getElement(this); }
|
|
651
673
|
static get watchers() { return {
|
|
@@ -1484,6 +1484,17 @@ const Modal = class {
|
|
|
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 = class {
|
|
|
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 = class {
|
|
|
1893
1904
|
return overlays.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,20 +1966,21 @@ const Modal = class {
|
|
|
1953
1966
|
const mode = index$3.getIonMode(this);
|
|
1954
1967
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
1955
1968
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
1956
|
-
|
|
1969
|
+
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
1970
|
+
return (index$3.h(index$3.Host, Object.assign({ key: '8add05bb43a2cdb5e3cf180147d31eb85a018fe0', "no-router": true,
|
|
1957
1971
|
// Allow the modal to be navigable when the handle is focusable
|
|
1958
|
-
tabIndex:
|
|
1972
|
+
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
1959
1973
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1960
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), index$3.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, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), index$3.h("ion-backdrop", { key: '90a6605a9564a699d6f66cf71cf6b506796a2963', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'a97d071395333bf803c0a9347bda000cf7500d8d', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: 'e7b7985c7414a13e3ba8dcecf497b76e92edf53e',
|
|
1961
1975
|
/*
|
|
1962
1976
|
role and aria-modal must be used on the
|
|
1963
1977
|
same element. They must also be set inside the
|
|
1964
1978
|
shadow DOM otherwise ion-button will not be highlighted
|
|
1965
1979
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
1966
1980
|
*/
|
|
1967
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '
|
|
1981
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '8258b65570b11a8ee9c9df2537d6419cd2e34536', class: "modal-handle",
|
|
1968
1982
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
1969
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), index$3.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) })), index$3.h("slot", { key: '394370d0ed03ee03152f8f8abae7ff7664ca5c13' }))));
|
|
1970
1984
|
}
|
|
1971
1985
|
get el() { return index$3.getElement(this); }
|
|
1972
1986
|
static get watchers() { return {
|
|
@@ -1263,6 +1263,8 @@ const Popover = class {
|
|
|
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 = class {
|
|
|
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 = class {
|
|
|
1386
1387
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
1387
1388
|
const desktop = index.isPlatform('desktop');
|
|
1388
1389
|
const enableArrow = arrow && !parentPopover;
|
|
1389
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
1390
|
+
return (index.h(index.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({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '
|
|
1392
|
+
}, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, index.h("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
|
|
1392
1393
|
}
|
|
1393
1394
|
get el() { return index.getElement(this); }
|
|
1394
1395
|
static get watchers() { return {
|
|
@@ -92,7 +92,6 @@ const ReorderGroup = class {
|
|
|
92
92
|
}
|
|
93
93
|
/**
|
|
94
94
|
* Completes the reorder operation. Must be called by the `ionItemReorder` event.
|
|
95
|
-
*
|
|
96
95
|
* If a list of items is passed, the list will be reordered and returned in the
|
|
97
96
|
* proper order.
|
|
98
97
|
*
|
|
@@ -279,7 +278,7 @@ const ReorderGroup = class {
|
|
|
279
278
|
}
|
|
280
279
|
render() {
|
|
281
280
|
const mode = index.getIonMode(this);
|
|
282
|
-
return (index.h(index.Host, { key: '
|
|
281
|
+
return (index.h(index.Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
|
|
283
282
|
[mode]: true,
|
|
284
283
|
'reorder-enabled': !this.disabled,
|
|
285
284
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
|
@@ -676,6 +676,7 @@ const Router = class {
|
|
|
676
676
|
*
|
|
677
677
|
* @param path The path to navigate to.
|
|
678
678
|
* @param direction The direction of the animation. Defaults to `"forward"`.
|
|
679
|
+
* @param animation A custom animation to use for the transition.
|
|
679
680
|
*/
|
|
680
681
|
async push(path, direction = 'forward', animation) {
|
|
681
682
|
var _a;
|
|
@@ -257,10 +257,8 @@ const Searchbar = class {
|
|
|
257
257
|
/**
|
|
258
258
|
* Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
|
|
259
259
|
* `input.focus()`.
|
|
260
|
-
*
|
|
261
260
|
* Developers who wish to focus an input when a page enters
|
|
262
261
|
* should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
|
|
263
|
-
*
|
|
264
262
|
* Developers who wish to focus an input when an overlay is presented
|
|
265
263
|
* should call `setFocus` after `didPresent` has resolved.
|
|
266
264
|
*
|
|
@@ -439,8 +437,8 @@ const Searchbar = class {
|
|
|
439
437
|
const clearIcon = this.clearIcon || (mode === 'ios' ? index$1.closeCircle : index$1.closeSharp);
|
|
440
438
|
const searchIcon = this.searchIcon || (mode === 'ios' ? index$1.searchOutline : index$1.searchSharp);
|
|
441
439
|
const shouldShowCancelButton = this.shouldShowCancelButton();
|
|
442
|
-
const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '
|
|
443
|
-
return (index.h(index.Host, { key: '
|
|
440
|
+
const cancelButton = this.showCancelButton !== 'never' && (index.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" }, index.h("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
|
|
441
|
+
return (index.h(index.Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
|
|
444
442
|
[mode]: true,
|
|
445
443
|
'searchbar-animated': animated,
|
|
446
444
|
'searchbar-disabled': this.disabled,
|
|
@@ -450,14 +448,14 @@ const Searchbar = class {
|
|
|
450
448
|
'searchbar-has-focus': this.focused,
|
|
451
449
|
'searchbar-should-show-clear': this.shouldShowClearButton(),
|
|
452
450
|
'searchbar-should-show-cancel': this.shouldShowCancelButton(),
|
|
453
|
-
}) }, index.h("div", { key: '
|
|
451
|
+
}) }, index.h("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, index.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, index.h("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
|
|
454
452
|
/**
|
|
455
453
|
* This prevents mobile browsers from
|
|
456
454
|
* blurring the input when the clear
|
|
457
455
|
* button is activated.
|
|
458
456
|
*/
|
|
459
457
|
ev.preventDefault();
|
|
460
|
-
}, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: '
|
|
458
|
+
}, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
|
|
461
459
|
}
|
|
462
460
|
get el() { return index.getElement(this); }
|
|
463
461
|
static get watchers() { return {
|
|
@@ -674,16 +674,15 @@ const Toast = class {
|
|
|
674
674
|
}
|
|
675
675
|
/**
|
|
676
676
|
* Dismiss the toast overlay after it has been presented.
|
|
677
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
678
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
679
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
677
680
|
*
|
|
678
681
|
* @param data Any data to emit in the dismiss events.
|
|
679
682
|
* @param role The role of the element that is dismissing the toast.
|
|
680
683
|
* This can be useful in a button handler for determining which button was
|
|
681
684
|
* clicked to dismiss the toast.
|
|
682
|
-
* Some examples include:
|
|
683
|
-
*
|
|
684
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
685
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
686
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
685
|
+
* Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
687
686
|
*/
|
|
688
687
|
async dismiss(data, role) {
|
|
689
688
|
var _a, _b;
|
|
@@ -851,9 +850,9 @@ const Toast = class {
|
|
|
851
850
|
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
|
|
852
851
|
index$1.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);
|
|
853
852
|
}
|
|
854
|
-
return (index$1.h(index$1.Host, Object.assign({ key: '
|
|
853
|
+
return (index$1.h(index$1.Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
|
|
855
854
|
zIndex: `${60000 + this.overlayIndex}`,
|
|
856
|
-
}, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$1.h("div", { key: '
|
|
855
|
+
}, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$1.h("div", { key: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, index$1.h("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$1.h("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$1.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')))));
|
|
857
856
|
}
|
|
858
857
|
get el() { return index$1.getElement(this); }
|
|
859
858
|
static get watchers() { return {
|
|
@@ -89,16 +89,15 @@ export class ActionSheet {
|
|
|
89
89
|
}
|
|
90
90
|
/**
|
|
91
91
|
* Dismiss the action sheet overlay after it has been presented.
|
|
92
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
93
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
94
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
92
95
|
*
|
|
93
96
|
* @param data Any data to emit in the dismiss events.
|
|
94
97
|
* @param role The role of the element that is dismissing the action sheet.
|
|
95
98
|
* This can be useful in a button handler for determining which button was
|
|
96
|
-
* clicked to dismiss the action sheet.
|
|
97
|
-
*
|
|
98
|
-
*
|
|
99
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
100
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
101
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
99
|
+
* clicked to dismiss the action sheet. Some examples include:
|
|
100
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
102
101
|
*/
|
|
103
102
|
async dismiss(data, role) {
|
|
104
103
|
const unlock = await this.lockController.lock();
|
|
@@ -210,12 +209,12 @@ export class ActionSheet {
|
|
|
210
209
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
211
210
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
212
211
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
213
|
-
return (h(Host, Object.assign({ key: '
|
|
212
|
+
return (h(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
214
213
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
215
|
-
}, 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: '
|
|
214
|
+
}, 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: {
|
|
216
215
|
'action-sheet-title': true,
|
|
217
216
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
218
|
-
} }, header, this.subHeader && h("div", { key: '
|
|
217
|
+
} }, 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" })));
|
|
219
218
|
}
|
|
220
219
|
static get is() { return "ion-action-sheet"; }
|
|
221
220
|
static get encapsulation() { return "scoped"; }
|
|
@@ -750,7 +749,7 @@ export class ActionSheet {
|
|
|
750
749
|
}, {
|
|
751
750
|
"name": "role",
|
|
752
751
|
"type": "string | undefined",
|
|
753
|
-
"docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet
|
|
752
|
+
"docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet. Some examples include:\n`\"cancel\"`, `\"destructive\"`, `\"selected\"`, and `\"backdrop\"`."
|
|
754
753
|
}],
|
|
755
754
|
"references": {
|
|
756
755
|
"Promise": {
|
|
@@ -761,13 +760,13 @@ export class ActionSheet {
|
|
|
761
760
|
"return": "Promise<boolean>"
|
|
762
761
|
},
|
|
763
762
|
"docs": {
|
|
764
|
-
"text": "Dismiss the action sheet overlay after it has been presented.",
|
|
763
|
+
"text": "Dismiss the action sheet overlay after it has been presented.\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.",
|
|
765
764
|
"tags": [{
|
|
766
765
|
"name": "param",
|
|
767
766
|
"text": "data Any data to emit in the dismiss events."
|
|
768
767
|
}, {
|
|
769
768
|
"name": "param",
|
|
770
|
-
"text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet
|
|
769
|
+
"text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet. Some examples include:\n`\"cancel\"`, `\"destructive\"`, `\"selected\"`, and `\"backdrop\"`."
|
|
771
770
|
}]
|
|
772
771
|
}
|
|
773
772
|
},
|
|
@@ -262,16 +262,15 @@ export class Alert {
|
|
|
262
262
|
}
|
|
263
263
|
/**
|
|
264
264
|
* Dismiss the alert overlay after it has been presented.
|
|
265
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
266
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
267
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
265
268
|
*
|
|
266
269
|
* @param data Any data to emit in the dismiss events.
|
|
267
270
|
* @param role The role of the element that is dismissing the alert.
|
|
268
271
|
* This can be useful in a button handler for determining which button was
|
|
269
|
-
* clicked to dismiss the alert.
|
|
270
|
-
*
|
|
271
|
-
*
|
|
272
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
273
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
274
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
272
|
+
* clicked to dismiss the alert. Some examples include:
|
|
273
|
+
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
275
274
|
*/
|
|
276
275
|
async dismiss(data, role) {
|
|
277
276
|
const unlock = await this.lockController.lock();
|
|
@@ -441,9 +440,9 @@ export class Alert {
|
|
|
441
440
|
* If neither are defined, do not set aria-labelledby.
|
|
442
441
|
*/
|
|
443
442
|
const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
|
|
444
|
-
return (h(Host, { key: '
|
|
443
|
+
return (h(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
|
|
445
444
|
zIndex: `${20000 + overlayIndex}`,
|
|
446
|
-
}, 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: '
|
|
445
|
+
}, 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" })));
|
|
447
446
|
}
|
|
448
447
|
static get is() { return "ion-alert"; }
|
|
449
448
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1032,7 +1031,7 @@ export class Alert {
|
|
|
1032
1031
|
}, {
|
|
1033
1032
|
"name": "role",
|
|
1034
1033
|
"type": "string | undefined",
|
|
1035
|
-
"docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert
|
|
1034
|
+
"docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert. Some examples include:\n`\"cancel\"`, `\"destructive\"`, `\"selected\"`, and `\"backdrop\"`."
|
|
1036
1035
|
}],
|
|
1037
1036
|
"references": {
|
|
1038
1037
|
"Promise": {
|
|
@@ -1043,13 +1042,13 @@ export class Alert {
|
|
|
1043
1042
|
"return": "Promise<boolean>"
|
|
1044
1043
|
},
|
|
1045
1044
|
"docs": {
|
|
1046
|
-
"text": "Dismiss the alert overlay after it has been presented.",
|
|
1045
|
+
"text": "Dismiss the alert overlay after it has been presented.\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.",
|
|
1047
1046
|
"tags": [{
|
|
1048
1047
|
"name": "param",
|
|
1049
1048
|
"text": "data Any data to emit in the dismiss events."
|
|
1050
1049
|
}, {
|
|
1051
1050
|
"name": "param",
|
|
1052
|
-
"text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert
|
|
1051
|
+
"text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert. Some examples include:\n`\"cancel\"`, `\"destructive\"`, `\"selected\"`, and `\"backdrop\"`."
|
|
1053
1052
|
}]
|
|
1054
1053
|
}
|
|
1055
1054
|
},
|
|
@@ -56,6 +56,8 @@ export class App {
|
|
|
56
56
|
* a result of another user action. (Ex: We focus the first element
|
|
57
57
|
* inside of a popover when the user presents it, but the popover is not always
|
|
58
58
|
* presented as a result of keyboard action.)
|
|
59
|
+
*
|
|
60
|
+
* @param elements An array of HTML elements to set focus on.
|
|
59
61
|
*/
|
|
60
62
|
async setFocus(elements) {
|
|
61
63
|
if (this.focusVisible) {
|
|
@@ -64,7 +66,7 @@ export class App {
|
|
|
64
66
|
}
|
|
65
67
|
render() {
|
|
66
68
|
const mode = getIonMode(this);
|
|
67
|
-
return (h(Host, { key: '
|
|
69
|
+
return (h(Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
|
|
68
70
|
[mode]: true,
|
|
69
71
|
'ion-page': true,
|
|
70
72
|
'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
|
|
@@ -89,7 +91,7 @@ export class App {
|
|
|
89
91
|
"parameters": [{
|
|
90
92
|
"name": "elements",
|
|
91
93
|
"type": "HTMLElement[]",
|
|
92
|
-
"docs": ""
|
|
94
|
+
"docs": "An array of HTML elements to set focus on."
|
|
93
95
|
}],
|
|
94
96
|
"references": {
|
|
95
97
|
"Promise": {
|
|
@@ -105,7 +107,10 @@ export class App {
|
|
|
105
107
|
},
|
|
106
108
|
"docs": {
|
|
107
109
|
"text": "Used to set focus on an element that uses `ion-focusable`.\nDo not use this if focusing the element as a result of a keyboard\nevent as the focus utility should handle this for us. This method\nshould be used when we want to programmatically focus an element as\na result of another user action. (Ex: We focus the first element\ninside of a popover when the user presents it, but the popover is not always\npresented as a result of keyboard action.)",
|
|
108
|
-
"tags": [
|
|
110
|
+
"tags": [{
|
|
111
|
+
"name": "param",
|
|
112
|
+
"text": "elements An array of HTML elements to set focus on."
|
|
113
|
+
}]
|
|
109
114
|
}
|
|
110
115
|
}
|
|
111
116
|
};
|