@ionic/core 8.6.3-dev.11750799190.186437ae → 8.6.3-dev.11751305829.1112929c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/components/action-sheet.js +8 -9
  2. package/components/alert.js +7 -8
  3. package/components/ion-app.js +3 -1
  4. package/components/ion-datetime.js +8 -2
  5. package/components/ion-loading.js +7 -8
  6. package/components/ion-menu.js +27 -5
  7. package/components/ion-reorder-group.js +1 -2
  8. package/components/ion-router.js +1 -0
  9. package/components/ion-searchbar.js +4 -6
  10. package/components/ion-toast.js +6 -7
  11. package/components/modal.js +213 -15
  12. package/components/popover.js +8 -7
  13. package/dist/cjs/ion-action-sheet.cjs.entry.js +8 -9
  14. package/dist/cjs/ion-alert.cjs.entry.js +7 -8
  15. package/dist/cjs/ion-app_8.cjs.entry.js +3 -1
  16. package/dist/cjs/ion-datetime_3.cjs.entry.js +8 -2
  17. package/dist/cjs/ion-loading.cjs.entry.js +7 -8
  18. package/dist/cjs/ion-menu_3.cjs.entry.js +27 -5
  19. package/dist/cjs/ion-modal.cjs.entry.js +213 -15
  20. package/dist/cjs/ion-popover.cjs.entry.js +8 -7
  21. package/dist/cjs/ion-reorder_2.cjs.entry.js +1 -2
  22. package/dist/cjs/ion-route_4.cjs.entry.js +1 -0
  23. package/dist/cjs/ion-searchbar.cjs.entry.js +4 -6
  24. package/dist/cjs/ion-toast.cjs.entry.js +6 -7
  25. package/dist/collection/components/action-sheet/action-sheet.js +11 -12
  26. package/dist/collection/components/alert/alert.js +10 -11
  27. package/dist/collection/components/app/app.js +8 -3
  28. package/dist/collection/components/datetime/datetime.js +23 -8
  29. package/dist/collection/components/loading/loading.js +10 -11
  30. package/dist/collection/components/menu/menu.js +62 -19
  31. package/dist/collection/components/modal/animations/ios.enter.js +2 -2
  32. package/dist/collection/components/modal/animations/ios.leave.js +2 -2
  33. package/dist/collection/components/modal/animations/ios.transition.js +124 -0
  34. package/dist/collection/components/modal/modal.js +108 -17
  35. package/dist/collection/components/popover/popover.js +18 -14
  36. package/dist/collection/components/reorder-group/reorder-group.js +2 -3
  37. package/dist/collection/components/router/router.js +5 -1
  38. package/dist/collection/components/searchbar/searchbar.js +5 -7
  39. package/dist/collection/components/toast/toast.js +9 -10
  40. package/dist/docs.json +138 -72
  41. package/dist/esm/ion-action-sheet.entry.js +8 -9
  42. package/dist/esm/ion-alert.entry.js +7 -8
  43. package/dist/esm/ion-app_8.entry.js +3 -1
  44. package/dist/esm/ion-datetime_3.entry.js +8 -2
  45. package/dist/esm/ion-loading.entry.js +7 -8
  46. package/dist/esm/ion-menu_3.entry.js +27 -5
  47. package/dist/esm/ion-modal.entry.js +213 -15
  48. package/dist/esm/ion-popover.entry.js +8 -7
  49. package/dist/esm/ion-reorder_2.entry.js +1 -2
  50. package/dist/esm/ion-route_4.entry.js +1 -0
  51. package/dist/esm/ion-searchbar.entry.js +4 -6
  52. package/dist/esm/ion-toast.entry.js +6 -7
  53. package/dist/ionic/ionic.esm.js +1 -1
  54. package/dist/ionic/{p-96389029.entry.js → p-01123ecf.entry.js} +1 -1
  55. package/dist/ionic/{p-cb787a4b.entry.js → p-03d21728.entry.js} +1 -1
  56. package/dist/ionic/{p-9e699d4a.entry.js → p-0d131a02.entry.js} +1 -1
  57. package/dist/ionic/p-0df5b2a5.entry.js +4 -0
  58. package/dist/ionic/{p-6b666996.entry.js → p-2d0eccfb.entry.js} +1 -1
  59. package/dist/ionic/{p-ead42a37.entry.js → p-5f671887.entry.js} +1 -1
  60. package/dist/ionic/p-69f91268.entry.js +4 -0
  61. package/dist/ionic/{p-2020aa51.entry.js → p-b758a177.entry.js} +1 -1
  62. package/dist/ionic/p-b9ba04ca.entry.js +4 -0
  63. package/dist/ionic/{p-cd12ed1c.entry.js → p-d8429eb4.entry.js} +1 -1
  64. package/dist/ionic/{p-3a4feac2.entry.js → p-e37d6c67.entry.js} +1 -1
  65. package/dist/types/components/action-sheet/action-sheet.d.ts +5 -6
  66. package/dist/types/components/alert/alert.d.ts +5 -6
  67. package/dist/types/components/app/app.d.ts +2 -0
  68. package/dist/types/components/datetime/datetime.d.ts +6 -0
  69. package/dist/types/components/loading/loading.d.ts +5 -6
  70. package/dist/types/components/menu/menu.d.ts +25 -3
  71. package/dist/types/components/modal/animations/ios.transition.d.ts +14 -0
  72. package/dist/types/components/modal/modal.d.ts +20 -6
  73. package/dist/types/components/popover/popover.d.ts +6 -5
  74. package/dist/types/components/reorder-group/reorder-group.d.ts +0 -1
  75. package/dist/types/components/router/router.d.ts +1 -0
  76. package/dist/types/components/searchbar/searchbar.d.ts +0 -2
  77. package/dist/types/components/toast/toast.d.ts +4 -5
  78. package/dist/types/components.d.ts +32 -18
  79. package/hydrate/index.js +293 -70
  80. package/hydrate/index.mjs +293 -70
  81. package/package.json +2 -2
  82. package/dist/ionic/p-6dd2e493.entry.js +0 -4
  83. package/dist/ionic/p-7149db7e.entry.js +0 -4
  84. 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
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
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: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
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: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), h("div", { key: 'fbc2ba15549c2ab04e759e82df6e177fd80cc0a6', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '748ee5235d0b4cb26d6f1b7589f77af2e37ad28a', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '7ce5fa236cf75e9b1e49c4725c9a811078706554', class: "action-sheet-container" }, h("div", { key: 'dc2251f3bcee4a93e3449f09621cbd2b65d329e9', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '48d325c8a852f56ed57a9ada1a6709d05ba32ee2', id: headerID, class: {
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: '66093728052eb67f37a35f3232761ce4a08896f3', 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: 'f4eb8e3e2885b85af5080df18d0de0bdd1d719de', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '169f4eb09255aba85062baad49ceb151239fbfb7' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '25fb8a466dd67ea94c79cfb4f9965527e1ce6d42', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'eb5b071e120a2c86afdf967af6a763a43044d1ca', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '452ad7e1052b2c681e2d98de8193949755ad4d54' })))))), h("div", { key: 'e1cecf280c987c050d9445e2c458b903f153089b', tabindex: "0", "aria-hidden": "true" })));
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 {
@@ -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
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
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: 'f8ee04fe6a97a2585b302c8e1a9eea3b122e3479', tabindex: "-1", style: {
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: 'e9592e879f51c27ef20016beec12c986be632cf3', tappable: this.backdropDismiss }), h("div", { key: '5e9425c3c8acdea6f8006389689c73220e2ce423', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '615465703e357619681fc36ed7276591a6fe3787', 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: '934eba3759456cd4660e10f274edc7859f908461', class: "alert-head" }, header && (h("h2", { key: '7d5d98d71f81f59a2cba227121b6fa01e6cc53b6', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: 'e5f5d35748c58a98ee933eb15cb1dcaf8113e9a7', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'a5cb89ca02bfa9c4828e694cb0835493a9088b05', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'cacffc31c911882df73e6845d15c8bb2d4acab56', tabindex: "0", "aria-hidden": "true" })));
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 {
@@ -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: '03aa892f986330078d112b1e8b010df98fa7e39e', class: {
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: '7ea46c27aa5fb01b748dd4d6eb2340ad13f65175', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
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: '6964378424c58b053e23279d08eaedf28dfcc315', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
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
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
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: '6369ed244c06c39aa338141bffacf7a861d7da1a', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
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: '1fd5fd8581d59eec321e534f9116f3ec0501010a', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'b4028045b0c8fbb9946136d85d939d55120b867c', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'b045fb0e61cc28e8163d45be18b431918dc27c80', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '2cf9df796f987d1251b3599d10a48ed87a1d0eb9', class: "loading-spinner" }, h("ion-spinner", { key: '371cd41655402326adcb1e2fe1481009a83243b2', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '2a5e5e66d22ee4c1cef0c93815ef023d47e7a8eb', tabindex: "0", "aria-hidden": "true" })));
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 {
@@ -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` is the menu is active.
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, otherwise it will try to open it.
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 button.
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: '9e4ae9476a76781f1d228395c9af9e1c39ec82bb', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
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: 'c6153589d872ac7e3fdf5eedfdb858eb64ccd713', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '9994aac4b22f17db34c9b8b2aa56b8710b9df645' })), h("ion-backdrop", { key: 'f09ac30cc4dd2dcb10628965e659dae5a23baf98', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
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: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
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 */,
@@ -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: '5835c36fcb0b52aec956538202a783f6c194d853', "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: '85df41676bed611467bd4df0002b08baee4f539c', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
445
- return (h(Host, { key: 'e1e30cdd79f9f54d5f2d27501012358bc46880e5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
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: '7e9db147282a35bb1e3c9c6125b9a044e81ddde5', class: "searchbar-input-container" }, h("input", Object.assign({ key: '02f08da21326b78d6cd249d54deab96fd8472ba8', "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: '048b00348456bd827ae734491c46a67bfb146227', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '71f64339bbfd54ebd26a0946c8ee9d726cd89c04', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
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: '9b1a177b21951c1c95897a468b34bb7bbd63d137', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
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 {
@@ -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: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
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: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
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: '7c3ad1a8df9e21fc30fc179c7edebeabcf3c6874', class: wrapperClass }, h("div", { key: 'f950c21e8d7bf92653e0bd52e820ed6b84fa8cf5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '0266241927dbe16799adb57f9fc11bd5372877b2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '9ef4b87bad672af6a5b693af61375564daf1eeeb', 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')))));
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 {