@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
package/hydrate/index.js CHANGED
@@ -7539,16 +7539,15 @@ class ActionSheet {
7539
7539
  }
7540
7540
  /**
7541
7541
  * Dismiss the action sheet overlay after it has been presented.
7542
+ * This is a no-op if the overlay has not been presented yet. If you want
7543
+ * to remove an overlay from the DOM that was never presented, use the
7544
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
7542
7545
  *
7543
7546
  * @param data Any data to emit in the dismiss events.
7544
7547
  * @param role The role of the element that is dismissing the action sheet.
7545
7548
  * This can be useful in a button handler for determining which button was
7546
- * clicked to dismiss the action sheet.
7547
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
7548
- *
7549
- * This is a no-op if the overlay has not been presented yet. If you want
7550
- * to remove an overlay from the DOM that was never presented, use the
7551
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
7549
+ * clicked to dismiss the action sheet. Some examples include:
7550
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
7552
7551
  */
7553
7552
  async dismiss(data, role) {
7554
7553
  const unlock = await this.lockController.lock();
@@ -7660,12 +7659,12 @@ class ActionSheet {
7660
7659
  const cancelButton = allButtons.find((b) => b.role === 'cancel');
7661
7660
  const buttons = allButtons.filter((b) => b.role !== 'cancel');
7662
7661
  const headerID = `action-sheet-${overlayIndex}-header`;
7663
- return (hAsync(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
7662
+ return (hAsync(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
7664
7663
  zIndex: `${20000 + this.overlayIndex}`,
7665
- }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), hAsync("div", { key: 'fbc2ba15549c2ab04e759e82df6e177fd80cc0a6', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '748ee5235d0b4cb26d6f1b7589f77af2e37ad28a', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '7ce5fa236cf75e9b1e49c4725c9a811078706554', class: "action-sheet-container" }, hAsync("div", { key: 'dc2251f3bcee4a93e3449f09621cbd2b65d329e9', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (hAsync("div", { key: '48d325c8a852f56ed57a9ada1a6709d05ba32ee2', id: headerID, class: {
7664
+ }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '81cf3f7d19864e041813987b46d2d115b8466819', tappable: this.backdropDismiss }), hAsync("div", { key: '791c6a976683646fc306a42c15c5078b6f06a45f', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a350b489ef7852eab9dc2227ce6d92da27dd9bf9', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '69ba51ee13510c1a411d87cb4845b11b7302a36f', class: "action-sheet-container" }, hAsync("div", { key: 'bded15b8306c36591e526f0f99e1eeabcbab3915', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (hAsync("div", { key: '06b5147c0f6d9180fe8f12e75c9b4a0310226adc', id: headerID, class: {
7666
7665
  'action-sheet-title': true,
7667
7666
  'action-sheet-has-sub-title': this.subHeader !== undefined,
7668
- } }, header, this.subHeader && hAsync("div", { key: '66093728052eb67f37a35f3232761ce4a08896f3', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (hAsync("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass$3(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), hAsync("span", { class: "action-sheet-button-inner" }, b.icon && hAsync("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && hAsync("ion-ripple-effect", null))))), cancelButton && (hAsync("div", { key: 'f4eb8e3e2885b85af5080df18d0de0bdd1d719de', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: '169f4eb09255aba85062baad49ceb151239fbfb7' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: '25fb8a466dd67ea94c79cfb4f9965527e1ce6d42', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: 'eb5b071e120a2c86afdf967af6a763a43044d1ca', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: '452ad7e1052b2c681e2d98de8193949755ad4d54' })))))), hAsync("div", { key: 'e1cecf280c987c050d9445e2c458b903f153089b', tabindex: "0", "aria-hidden": "true" })));
7667
+ } }, header, this.subHeader && hAsync("div", { key: '54874362a75c679aba803bf4f8768f5404d2dd28', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (hAsync("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass$3(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), hAsync("span", { class: "action-sheet-button-inner" }, b.icon && hAsync("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && hAsync("ion-ripple-effect", null))))), cancelButton && (hAsync("div", { key: '67b0de298eb424f3dea846a841b7a06d70e3930d', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'e7e3f9a5495eea9b97dbf885ef36944f2e420eff' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: 'f889d29ed6c3d14bbc1d805888351d87f5122377', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '7c05cf424b38c37fd40aaeb42a494387291571fb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: 'bed927b477dc2708a5123ef560274fca9819b3d6' })))))), hAsync("div", { key: 'c5df1b11dc15a93892d57065d3dd5fbe02e43b39', tabindex: "0", "aria-hidden": "true" })));
7669
7668
  }
7670
7669
  get el() { return getElement(this); }
7671
7670
  static get watchers() { return {
@@ -8218,16 +8217,15 @@ class Alert {
8218
8217
  }
8219
8218
  /**
8220
8219
  * Dismiss the alert overlay after it has been presented.
8220
+ * This is a no-op if the overlay has not been presented yet. If you want
8221
+ * to remove an overlay from the DOM that was never presented, use the
8222
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
8221
8223
  *
8222
8224
  * @param data Any data to emit in the dismiss events.
8223
8225
  * @param role The role of the element that is dismissing the alert.
8224
8226
  * This can be useful in a button handler for determining which button was
8225
- * clicked to dismiss the alert.
8226
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
8227
- *
8228
- * This is a no-op if the overlay has not been presented yet. If you want
8229
- * to remove an overlay from the DOM that was never presented, use the
8230
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
8227
+ * clicked to dismiss the alert. Some examples include:
8228
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
8231
8229
  */
8232
8230
  async dismiss(data, role) {
8233
8231
  const unlock = await this.lockController.lock();
@@ -8395,9 +8393,9 @@ class Alert {
8395
8393
  * If neither are defined, do not set aria-labelledby.
8396
8394
  */
8397
8395
  const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
8398
- return (hAsync(Host, { key: 'f8ee04fe6a97a2585b302c8e1a9eea3b122e3479', tabindex: "-1", style: {
8396
+ return (hAsync(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
8399
8397
  zIndex: `${20000 + overlayIndex}`,
8400
- }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: 'e9592e879f51c27ef20016beec12c986be632cf3', tappable: this.backdropDismiss }), hAsync("div", { key: '5e9425c3c8acdea6f8006389689c73220e2ce423', tabindex: "0", "aria-hidden": "true" }), hAsync("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), hAsync("div", { key: '934eba3759456cd4660e10f274edc7859f908461', class: "alert-head" }, header && (hAsync("h2", { key: '7d5d98d71f81f59a2cba227121b6fa01e6cc53b6', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: 'e5f5d35748c58a98ee933eb15cb1dcaf8113e9a7', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: 'a5cb89ca02bfa9c4828e694cb0835493a9088b05', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'cacffc31c911882df73e6845d15c8bb2d4acab56', tabindex: "0", "aria-hidden": "true" })));
8398
+ }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '3cd5ca8b99cb95b11dd22ab41a820d841142896f', tappable: this.backdropDismiss }), hAsync("div", { key: '4cc62ae6e21424057d22aeef1e8fc77011e77cd5', tabindex: "0", "aria-hidden": "true" }), hAsync("div", Object.assign({ key: '364057a69f25aa88904df17bdcf7e5bf714e7830', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), hAsync("div", { key: '78694e3c0db2d408df3899fb1a90859bcc8d14cc', class: "alert-head" }, header && (hAsync("h2", { key: 'ec88ff3e4e1ea871b5975133fdcf4cac38b05e0f', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '9b09bc8bb68af255ef8b7d22587acc946148e544', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '99abe815f75d2df7f1b77c0df9f3436724fea76f', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'a43d0c22c0e46b1ef911f92ffeb253d7911b85f7', tabindex: "0", "aria-hidden": "true" })));
8401
8399
  }
8402
8400
  get el() { return getElement(this); }
8403
8401
  static get watchers() { return {
@@ -8466,6 +8464,8 @@ class App {
8466
8464
  * a result of another user action. (Ex: We focus the first element
8467
8465
  * inside of a popover when the user presents it, but the popover is not always
8468
8466
  * presented as a result of keyboard action.)
8467
+ *
8468
+ * @param elements An array of HTML elements to set focus on.
8469
8469
  */
8470
8470
  async setFocus(elements) {
8471
8471
  if (this.focusVisible) {
@@ -8474,7 +8474,7 @@ class App {
8474
8474
  }
8475
8475
  render() {
8476
8476
  const mode = getIonMode$1(this);
8477
- return (hAsync(Host, { key: '03aa892f986330078d112b1e8b010df98fa7e39e', class: {
8477
+ return (hAsync(Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
8478
8478
  [mode]: true,
8479
8479
  'ion-page': true,
8480
8480
  'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
@@ -13094,6 +13094,8 @@ class Datetime {
13094
13094
  * Confirms the selected datetime value, updates the
13095
13095
  * `value` property, and optionally closes the popover
13096
13096
  * or modal that the datetime was presented in.
13097
+ *
13098
+ * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
13097
13099
  */
13098
13100
  async confirm(closeOverlay = false) {
13099
13101
  const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
@@ -13127,6 +13129,8 @@ class Datetime {
13127
13129
  * Resets the internal state of the datetime but does not update the value.
13128
13130
  * Passing a valid ISO-8601 string will reset the state of the component to the provided date.
13129
13131
  * If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
13132
+ *
13133
+ * @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.
13130
13134
  */
13131
13135
  async reset(startDate) {
13132
13136
  this.processValue(startDate);
@@ -13136,6 +13140,8 @@ class Datetime {
13136
13140
  * optionally closes the popover
13137
13141
  * or modal that the datetime was
13138
13142
  * presented in.
13143
+ *
13144
+ * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
13139
13145
  */
13140
13146
  async cancel(closeOverlay = false) {
13141
13147
  this.ionCancel.emit();
@@ -13949,7 +13955,7 @@ class Datetime {
13949
13955
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
13950
13956
  const hasWheelVariant = hasDatePresentation && preferWheel;
13951
13957
  renderHiddenInput(true, el, name, formatValue(value), disabled);
13952
- return (hAsync(Host, { key: '7ea46c27aa5fb01b748dd4d6eb2340ad13f65175', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
13958
+ return (hAsync(Host, { key: '79677f5bc0fb32fb68569636bd76e68238e62eb8', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
13953
13959
  [mode]: true,
13954
13960
  ['datetime-readonly']: readonly,
13955
13961
  ['datetime-disabled']: disabled,
@@ -13959,7 +13965,7 @@ class Datetime {
13959
13965
  [`datetime-size-${size}`]: true,
13960
13966
  [`datetime-prefer-wheel`]: hasWheelVariant,
13961
13967
  [`datetime-grid`]: isGridStyle,
13962
- })) }, hAsync("div", { key: '6964378424c58b053e23279d08eaedf28dfcc315', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
13968
+ })) }, hAsync("div", { key: 'bf07b1e3c64af6e837663ff470bea93787a6e86f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
13963
13969
  }
13964
13970
  get el() { return getElement(this); }
13965
13971
  static get watchers() { return {
@@ -19007,16 +19013,15 @@ class Loading {
19007
19013
  }
19008
19014
  /**
19009
19015
  * Dismiss the loading overlay after it has been presented.
19016
+ * This is a no-op if the overlay has not been presented yet. If you want
19017
+ * to remove an overlay from the DOM that was never presented, use the
19018
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
19010
19019
  *
19011
19020
  * @param data Any data to emit in the dismiss events.
19012
19021
  * @param role The role of the element that is dismissing the loading.
19013
19022
  * This can be useful in a button handler for determining which button was
19014
- * clicked to dismiss the loading.
19015
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
19016
- *
19017
- * This is a no-op if the overlay has not been presented yet. If you want
19018
- * to remove an overlay from the DOM that was never presented, use the
19019
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
19023
+ * clicked to dismiss the loading. Some examples include:
19024
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
19020
19025
  */
19021
19026
  async dismiss(data, role) {
19022
19027
  const unlock = await this.lockController.lock();
@@ -19058,9 +19063,9 @@ class Loading {
19058
19063
  * Otherwise, don't set aria-labelledby.
19059
19064
  */
19060
19065
  const ariaLabelledBy = message !== undefined ? msgId : null;
19061
- return (hAsync(Host, Object.assign({ key: '6369ed244c06c39aa338141bffacf7a861d7da1a', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
19066
+ return (hAsync(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
19062
19067
  zIndex: `${40000 + this.overlayIndex}`,
19063
- }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '1fd5fd8581d59eec321e534f9116f3ec0501010a', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'b4028045b0c8fbb9946136d85d939d55120b867c', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'b045fb0e61cc28e8163d45be18b431918dc27c80', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '2cf9df796f987d1251b3599d10a48ed87a1d0eb9', class: "loading-spinner" }, hAsync("ion-spinner", { key: '371cd41655402326adcb1e2fe1481009a83243b2', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '2a5e5e66d22ee4c1cef0c93815ef023d47e7a8eb', tabindex: "0", "aria-hidden": "true" })));
19068
+ }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '231dec84e424a2dc358ce95b84d6035cf43e4dea', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'c9af29b6e6bb49a217396a5c874bbfb8835a926c', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a8659863743cdeccbe1ba810eaabfd3ebfcb86f3', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '3b346f39bc71691bd8686556a1e142198a7b12fa', class: "loading-spinner" }, hAsync("ion-spinner", { key: '8dc2bf1556e5138e262827f1516c59ecd09f3520', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '054164c0dbae9a0e0973dd3c8e28f5b771820310', tabindex: "0", "aria-hidden": "true" })));
19064
19069
  }
19065
19070
  get el() { return getElement(this); }
19066
19071
  static get watchers() { return {
@@ -19688,7 +19693,7 @@ class Menu {
19688
19693
  return Promise.resolve(this._isOpen);
19689
19694
  }
19690
19695
  /**
19691
- * Returns `true` is the menu is active.
19696
+ * Returns `true` if the menu is active.
19692
19697
  *
19693
19698
  * A menu is active when it can be opened or closed, meaning it's enabled
19694
19699
  * and it's not part of a `ion-split-pane`.
@@ -19699,6 +19704,10 @@ class Menu {
19699
19704
  /**
19700
19705
  * Opens the menu. If the menu is already open or it can't be opened,
19701
19706
  * it returns `false`.
19707
+ *
19708
+ * @param animated If `true`, the menu will animate when opening.
19709
+ * If `false`, the menu will open instantly without animation.
19710
+ * Defaults to `true`.
19702
19711
  */
19703
19712
  open(animated = true) {
19704
19713
  return this.setOpen(true, animated);
@@ -19706,20 +19715,38 @@ class Menu {
19706
19715
  /**
19707
19716
  * Closes the menu. If the menu is already closed or it can't be closed,
19708
19717
  * it returns `false`.
19718
+ *
19719
+ * @param animated If `true`, the menu will animate when closing. If `false`,
19720
+ * the menu will close instantly without animation. Defaults to `true`.
19721
+ * @param role The role of the element that is closing the menu.
19722
+ * This can be useful in a button handler for determining which button was
19723
+ * clicked to close the menu. Some examples include:
19724
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
19709
19725
  */
19710
19726
  close(animated = true, role) {
19711
19727
  return this.setOpen(false, animated, role);
19712
19728
  }
19713
19729
  /**
19714
- * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
19730
+ * Toggles the menu. If the menu is already open, it will try to close,
19731
+ * otherwise it will try to open it.
19715
19732
  * If the operation can't be completed successfully, it returns `false`.
19733
+ *
19734
+ * @param animated If `true`, the menu will animate when opening/closing.
19735
+ * If `false`, the menu will open/close instantly without animation.
19736
+ * Defaults to `true`.
19716
19737
  */
19717
19738
  toggle(animated = true) {
19718
19739
  return this.setOpen(!this._isOpen, animated);
19719
19740
  }
19720
19741
  /**
19721
- * Opens or closes the button.
19742
+ * Opens or closes the menu.
19722
19743
  * If the operation can't be completed successfully, it returns `false`.
19744
+ *
19745
+ * @param shouldOpen If `true`, the menu will open. If `false`, the menu
19746
+ * will close.
19747
+ * @param animated If `true`, the menu will animate when opening/closing.
19748
+ * If `false`, the menu will open/close instantly without animation.
19749
+ * @param role The role of the element that is closing the menu.
19723
19750
  */
19724
19751
  setOpen(shouldOpen, animated = true, role) {
19725
19752
  return menuController._setOpen(this, shouldOpen, animated, role);
@@ -20084,14 +20111,14 @@ class Menu {
20084
20111
  * the ionBackButton listener in the menu controller
20085
20112
  * will handle closing the menu when Escape is pressed.
20086
20113
  */
20087
- return (hAsync(Host, { key: '9e4ae9476a76781f1d228395c9af9e1c39ec82bb', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
20114
+ return (hAsync(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
20088
20115
  [mode]: true,
20089
20116
  [`menu-type-${type}`]: true,
20090
20117
  'menu-enabled': !disabled,
20091
20118
  [`menu-side-${side}`]: true,
20092
20119
  'menu-pane-visible': isPaneVisible,
20093
20120
  'split-pane-side': hostContext('ion-split-pane', el),
20094
- } }, hAsync("div", { key: 'c6153589d872ac7e3fdf5eedfdb858eb64ccd713', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '9994aac4b22f17db34c9b8b2aa56b8710b9df645' })), hAsync("ion-backdrop", { key: 'f09ac30cc4dd2dcb10628965e659dae5a23baf98', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
20121
+ } }, hAsync("div", { key: '3f5f70acd4d3ed6bb445122f4f01d73db738a75f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '3161326c9330e7f7441299c428b87a91b31a83e9' })), hAsync("ion-backdrop", { key: '917b50f38489bdf03d0c642af8b4e4e172c7dc4c', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
20095
20122
  }
20096
20123
  get el() { return getElement(this); }
20097
20124
  static get watchers() { return {
@@ -21191,7 +21218,7 @@ const iosEnterAnimation$3 = (baseEl, opts) => {
21191
21218
  baseAnimation.addAnimation(contentAnimation);
21192
21219
  }
21193
21220
  if (presentingEl) {
21194
- const isMobile = window.innerWidth < 768;
21221
+ const isPortrait = window.innerWidth < 768;
21195
21222
  const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
21196
21223
  const presentingElRoot = getElementRoot(presentingEl);
21197
21224
  const presentingAnimation = createAnimation().beforeStyles({
@@ -21200,7 +21227,7 @@ const iosEnterAnimation$3 = (baseEl, opts) => {
21200
21227
  overflow: 'hidden',
21201
21228
  });
21202
21229
  const bodyEl = document.body;
21203
- if (isMobile) {
21230
+ if (isPortrait) {
21204
21231
  /**
21205
21232
  * Fallback for browsers that does not support `max()` (ex: Firefox)
21206
21233
  * No need to worry about statusbar padding since engines like Gecko
@@ -21278,7 +21305,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
21278
21305
  .duration(duration)
21279
21306
  .addAnimation(wrapperAnimation);
21280
21307
  if (presentingEl) {
21281
- const isMobile = window.innerWidth < 768;
21308
+ const isPortrait = window.innerWidth < 768;
21282
21309
  const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
21283
21310
  const presentingElRoot = getElementRoot(presentingEl);
21284
21311
  const presentingAnimation = createAnimation()
@@ -21296,7 +21323,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
21296
21323
  }
21297
21324
  });
21298
21325
  const bodyEl = document.body;
21299
- if (isMobile) {
21326
+ if (isPortrait) {
21300
21327
  const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
21301
21328
  const modalTransform = hasCardModal ? '-10px' : transformOffset;
21302
21329
  const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
@@ -21343,6 +21370,125 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
21343
21370
  return baseAnimation;
21344
21371
  };
21345
21372
 
21373
+ /**
21374
+ * Transition animation from portrait view to landscape view
21375
+ * This handles the case where a card modal is open in portrait view
21376
+ * and the user switches to landscape view
21377
+ */
21378
+ const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
21379
+ const { presentingEl } = opts;
21380
+ if (!presentingEl) {
21381
+ // No transition needed for non-card modals
21382
+ return createAnimation('portrait-to-landscape-transition');
21383
+ }
21384
+ const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
21385
+ const presentingElRoot = getElementRoot(presentingEl);
21386
+ const bodyEl = document.body;
21387
+ const baseAnimation = createAnimation('portrait-to-landscape-transition')
21388
+ .addElement(baseEl)
21389
+ .easing('cubic-bezier(0.32,0.72,0,1)')
21390
+ .duration(duration);
21391
+ const presentingAnimation = createAnimation();
21392
+ if (!hasCardModal) {
21393
+ // Non-card modal: transition from portrait state to landscape state
21394
+ // Portrait: presentingEl has transform and body has black background
21395
+ // Landscape: no transform, no body background, modal wrapper opacity changes
21396
+ const root = getElementRoot(baseEl);
21397
+ const wrapperAnimation = createAnimation()
21398
+ .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
21399
+ .fromTo('opacity', '1', '1'); // Keep wrapper visible in landscape
21400
+ const backdropAnimation = createAnimation()
21401
+ .addElement(root.querySelector('ion-backdrop'))
21402
+ .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
21403
+ // Animate presentingEl from portrait state back to normal
21404
+ const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
21405
+ const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
21406
+ const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
21407
+ presentingAnimation
21408
+ .addElement(presentingEl)
21409
+ .beforeAddWrite(() => bodyEl.style.setProperty('background-color', ''))
21410
+ .fromTo('transform', fromTransform, 'translateY(0px) scale(1)')
21411
+ .fromTo('filter', 'contrast(0.85)', 'contrast(1)')
21412
+ .fromTo('border-radius', '10px 10px 0 0', '0px');
21413
+ baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
21414
+ }
21415
+ else {
21416
+ // Card modal: transition from portrait card state to landscape card state
21417
+ const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
21418
+ const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
21419
+ const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
21420
+ const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
21421
+ presentingAnimation
21422
+ .addElement(presentingElRoot.querySelector('.modal-wrapper'))
21423
+ .fromTo('transform', fromTransform, toTransform)
21424
+ .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
21425
+ const shadowAnimation = createAnimation()
21426
+ .addElement(presentingElRoot.querySelector('.modal-shadow'))
21427
+ .fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
21428
+ .fromTo('transform', fromTransform, toTransform);
21429
+ baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
21430
+ }
21431
+ return baseAnimation;
21432
+ };
21433
+ /**
21434
+ * Transition animation from landscape view to portrait view
21435
+ * This handles the case where a card modal is open in landscape view
21436
+ * and the user switches to portrait view
21437
+ */
21438
+ const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
21439
+ const { presentingEl } = opts;
21440
+ if (!presentingEl) {
21441
+ // No transition needed for non-card modals
21442
+ return createAnimation('landscape-to-portrait-transition');
21443
+ }
21444
+ const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
21445
+ const presentingElRoot = getElementRoot(presentingEl);
21446
+ const bodyEl = document.body;
21447
+ const baseAnimation = createAnimation('landscape-to-portrait-transition')
21448
+ .addElement(baseEl)
21449
+ .easing('cubic-bezier(0.32,0.72,0,1)')
21450
+ .duration(duration);
21451
+ const presentingAnimation = createAnimation();
21452
+ if (!hasCardModal) {
21453
+ // Non-card modal: transition from landscape state to portrait state
21454
+ const root = getElementRoot(baseEl);
21455
+ const wrapperAnimation = createAnimation()
21456
+ .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
21457
+ .fromTo('opacity', '1', '1'); // Keep wrapper visible
21458
+ const backdropAnimation = createAnimation()
21459
+ .addElement(root.querySelector('ion-backdrop'))
21460
+ .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
21461
+ // Animate presentingEl from normal state to portrait state
21462
+ const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
21463
+ const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
21464
+ const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
21465
+ presentingAnimation
21466
+ .addElement(presentingEl)
21467
+ .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
21468
+ .fromTo('transform', 'translateY(0px) scale(1)', toTransform)
21469
+ .fromTo('filter', 'contrast(1)', 'contrast(0.85)')
21470
+ .fromTo('border-radius', '0px', '10px 10px 0 0');
21471
+ baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
21472
+ }
21473
+ else {
21474
+ // Card modal: transition from landscape card state to portrait card state
21475
+ const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
21476
+ const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
21477
+ const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
21478
+ const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
21479
+ presentingAnimation
21480
+ .addElement(presentingElRoot.querySelector('.modal-wrapper'))
21481
+ .fromTo('transform', fromTransform, toTransform)
21482
+ .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
21483
+ const shadowAnimation = createAnimation()
21484
+ .addElement(presentingElRoot.querySelector('.modal-shadow'))
21485
+ .fromTo('opacity', '0', '0') // Shadow stays hidden
21486
+ .fromTo('transform', fromTransform, toTransform);
21487
+ baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
21488
+ }
21489
+ return baseAnimation;
21490
+ };
21491
+
21346
21492
  const createEnterAnimation = () => {
21347
21493
  const backdropAnimation = createAnimation()
21348
21494
  .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
@@ -22096,6 +22242,17 @@ class Modal {
22096
22242
  el.dispatchEvent(ev);
22097
22243
  }
22098
22244
  };
22245
+ /**
22246
+ * When the modal receives focus directly, pass focus to the handle
22247
+ * if it exists and is focusable, otherwise let the focus trap handle it.
22248
+ */
22249
+ this.onModalFocus = (ev) => {
22250
+ const { dragHandleEl, el } = this;
22251
+ // Only handle focus if the modal itself was focused (not a child element)
22252
+ if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
22253
+ dragHandleEl.focus();
22254
+ }
22255
+ };
22099
22256
  }
22100
22257
  onIsOpenChange(newValue, oldValue) {
22101
22258
  if (newValue === true && oldValue === false) {
@@ -22123,6 +22280,7 @@ class Modal {
22123
22280
  }
22124
22281
  disconnectedCallback() {
22125
22282
  this.triggerController.removeClickListener();
22283
+ this.cleanupViewTransitionListener();
22126
22284
  }
22127
22285
  componentWillLoad() {
22128
22286
  var _a;
@@ -22333,6 +22491,8 @@ class Modal {
22333
22491
  else if (hasCardModal) {
22334
22492
  this.initSwipeToClose();
22335
22493
  }
22494
+ // Initialize view transition listener for iOS card modals
22495
+ this.initViewTransitionListener();
22336
22496
  unlock();
22337
22497
  }
22338
22498
  initSwipeToClose() {
@@ -22427,13 +22587,13 @@ class Modal {
22427
22587
  }
22428
22588
  /**
22429
22589
  * Dismiss the modal overlay after it has been presented.
22430
- *
22431
- * @param data Any data to emit in the dismiss events.
22432
- * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
22433
- *
22434
22590
  * This is a no-op if the overlay has not been presented yet. If you want
22435
22591
  * to remove an overlay from the DOM that was never presented, use the
22436
22592
  * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
22593
+ *
22594
+ * @param data Any data to emit in the dismiss events.
22595
+ * @param role The role of the element that is dismissing the modal.
22596
+ * For example, `cancel` or `backdrop`.
22437
22597
  */
22438
22598
  async dismiss(data, role) {
22439
22599
  var _a;
@@ -22486,6 +22646,7 @@ class Modal {
22486
22646
  if (this.gesture) {
22487
22647
  this.gesture.destroy();
22488
22648
  }
22649
+ this.cleanupViewTransitionListener();
22489
22650
  }
22490
22651
  this.currentBreakpoint = undefined;
22491
22652
  this.animation = undefined;
@@ -22505,8 +22666,10 @@ class Modal {
22505
22666
  return eventMethod(this.el, 'ionModalWillDismiss');
22506
22667
  }
22507
22668
  /**
22508
- * Move a sheet style modal to a specific breakpoint. The breakpoint value must
22509
- * be a value defined in your `breakpoints` array.
22669
+ * Move a sheet style modal to a specific breakpoint.
22670
+ *
22671
+ * @param breakpoint The breakpoint value to move the sheet modal to.
22672
+ * Must be a value defined in your `breakpoints` array.
22510
22673
  */
22511
22674
  async setCurrentBreakpoint(breakpoint) {
22512
22675
  if (!this.isSheetModal) {
@@ -22559,26 +22722,88 @@ class Modal {
22559
22722
  await this.setCurrentBreakpoint(nextBreakpoint);
22560
22723
  return true;
22561
22724
  }
22725
+ initViewTransitionListener() {
22726
+ // Only enable for iOS card modals when no custom animations are provided
22727
+ if (getIonMode$1(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
22728
+ return;
22729
+ }
22730
+ // Set initial view state
22731
+ this.currentViewIsPortrait = window.innerWidth < 768;
22732
+ // Create debounced resize handler
22733
+ let resizeTimeout;
22734
+ this.resizeListener = () => {
22735
+ clearTimeout(resizeTimeout);
22736
+ resizeTimeout = setTimeout(() => {
22737
+ this.handleViewTransition();
22738
+ }, 100); // Debounce for 100ms to avoid excessive calls
22739
+ };
22740
+ window.addEventListener('resize', this.resizeListener);
22741
+ }
22742
+ handleViewTransition() {
22743
+ const isPortrait = window.innerWidth < 768;
22744
+ // Only transition if view state actually changed
22745
+ if (this.currentViewIsPortrait === isPortrait) {
22746
+ return;
22747
+ }
22748
+ // Cancel any ongoing transition animation
22749
+ if (this.viewTransitionAnimation) {
22750
+ this.viewTransitionAnimation.destroy();
22751
+ this.viewTransitionAnimation = undefined;
22752
+ }
22753
+ const { presentingElement } = this;
22754
+ if (!presentingElement) {
22755
+ return;
22756
+ }
22757
+ // Create transition animation
22758
+ let transitionAnimation;
22759
+ if (this.currentViewIsPortrait && !isPortrait) {
22760
+ // Portrait to landscape transition
22761
+ transitionAnimation = portraitToLandscapeTransition(this.el, {
22762
+ presentingEl: presentingElement});
22763
+ }
22764
+ else {
22765
+ // Landscape to portrait transition
22766
+ transitionAnimation = landscapeToPortraitTransition(this.el, {
22767
+ presentingEl: presentingElement});
22768
+ }
22769
+ // Update state and play animation
22770
+ this.currentViewIsPortrait = isPortrait;
22771
+ this.viewTransitionAnimation = transitionAnimation;
22772
+ transitionAnimation.play().then(() => {
22773
+ this.viewTransitionAnimation = undefined;
22774
+ });
22775
+ }
22776
+ cleanupViewTransitionListener() {
22777
+ if (this.resizeListener) {
22778
+ window.removeEventListener('resize', this.resizeListener);
22779
+ this.resizeListener = undefined;
22780
+ }
22781
+ if (this.viewTransitionAnimation) {
22782
+ this.viewTransitionAnimation.destroy();
22783
+ this.viewTransitionAnimation = undefined;
22784
+ }
22785
+ }
22562
22786
  render() {
22563
22787
  const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
22564
22788
  const showHandle = handle !== false && isSheetModal;
22565
22789
  const mode = getIonMode$1(this);
22566
22790
  const isCardModal = presentingElement !== undefined && mode === 'ios';
22567
22791
  const isHandleCycle = handleBehavior === 'cycle';
22568
- return (hAsync(Host, Object.assign({ key: '04c094d52dcd7095fc08d74ab7f3e37b498ec480', "no-router": true,
22792
+ const isSheetModalWithHandle = isSheetModal && showHandle;
22793
+ return (hAsync(Host, Object.assign({ key: 'd5bcaa588471573e1bcbd99997b306c8ecdd124f', "no-router": true,
22569
22794
  // Allow the modal to be navigable when the handle is focusable
22570
- tabIndex: !isHandleCycle ? -1 : 0 }, htmlAttributes, { style: {
22795
+ tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
22571
22796
  zIndex: `${20000 + this.overlayIndex}`,
22572
- }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: '20e56317fbf12a75fbcfd4abb394146de1764b9b', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'cb87817485a204ee7bc117aaa9472de8acaebfd6', class: "modal-shadow" }), hAsync("div", Object.assign({ key: 'b5e88cd83782a5d09fe2caf298aaaf67d226f699',
22797
+ }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: '78b954a1c50a0325eb51db04314e86701c66d840', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '21887227c272f5eba1b3d164be3572bd710d415c', class: "modal-shadow" }), hAsync("div", Object.assign({ key: 'a40472a9065c04ad12fb7b2b2a05e5021f077ad5',
22573
22798
  /*
22574
22799
  role and aria-modal must be used on the
22575
22800
  same element. They must also be set inside the
22576
22801
  shadow DOM otherwise ion-button will not be highlighted
22577
22802
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
22578
22803
  */
22579
- role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '90340f02007b74da70ace1d5035d7b49573fad2b', class: "modal-handle",
22804
+ role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: 'a4973f66587546031d1cc0197e1ba7c2521a3fbc', class: "modal-handle",
22580
22805
  // Prevents the handle from receiving keyboard focus when it does not cycle
22581
- tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: 'c7db14c97e2a80b0b9680635ea9d4361e8f4b77e' }))));
22806
+ tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: 'ee5e007e3a4e592d98f1b5a5d31ad55e6faa3bdb' }))));
22582
22807
  }
22583
22808
  get el() { return getElement(this); }
22584
22809
  static get watchers() { return {
@@ -26805,6 +27030,8 @@ class Popover {
26805
27030
  * Developers can pass a mouse, touch, or pointer event
26806
27031
  * to position the popover relative to where that event
26807
27032
  * was dispatched.
27033
+ *
27034
+ * @param event The event to position the popover relative to.
26808
27035
  */
26809
27036
  async present(event) {
26810
27037
  const unlock = await this.lockController.lock();
@@ -26868,15 +27095,14 @@ class Popover {
26868
27095
  }
26869
27096
  /**
26870
27097
  * Dismiss the popover overlay after it has been presented.
27098
+ * This is a no-op if the overlay has not been presented yet. If you want
27099
+ * to remove an overlay from the DOM that was never presented, use the
27100
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
26871
27101
  *
26872
27102
  * @param data Any data to emit in the dismiss events.
26873
- * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
27103
+ * @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
26874
27104
  * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
26875
27105
  * a parent popover if this popover is nested. Defaults to `true`.
26876
- *
26877
- * This is a no-op if the overlay has not been presented yet. If you want
26878
- * to remove an overlay from the DOM that was never presented, use the
26879
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
26880
27106
  */
26881
27107
  async dismiss(data, role, dismissParentPopover = true) {
26882
27108
  const unlock = await this.lockController.lock();
@@ -26928,9 +27154,9 @@ class Popover {
26928
27154
  const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
26929
27155
  const desktop = isPlatform('desktop');
26930
27156
  const enableArrow = arrow && !parentPopover;
26931
- return (hAsync(Host, Object.assign({ key: '1de4862099cfcb5035e78008e6dc7c1371846f9a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
27157
+ return (hAsync(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
26932
27158
  zIndex: `${20000 + this.overlayIndex}`,
26933
- }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '981aa4e0102cb93312ffbd8243cdf2a0cdc60469', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '1a28ed55e9d34ef78cf0eb0178643301fd2dd75d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '1c206ea5eb3c0b5883a3d45c34cd22dd5ffe4b65', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '5ba561486a328c0c7ab825995fdbfb7a196429a4', class: "popover-content", part: "content" }, hAsync("slot", { key: '00fc244ce9dcc2dfc677e6c34b7c8e7a330b2b03' })))));
27159
+ }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, hAsync("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
26934
27160
  }
26935
27161
  get el() { return getElement(this); }
26936
27162
  static get watchers() { return {
@@ -29510,7 +29736,6 @@ class ReorderGroup {
29510
29736
  }
29511
29737
  /**
29512
29738
  * Completes the reorder operation. Must be called by the `ionItemReorder` event.
29513
- *
29514
29739
  * If a list of items is passed, the list will be reordered and returned in the
29515
29740
  * proper order.
29516
29741
  *
@@ -29697,7 +29922,7 @@ class ReorderGroup {
29697
29922
  }
29698
29923
  render() {
29699
29924
  const mode = getIonMode$1(this);
29700
- return (hAsync(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
29925
+ return (hAsync(Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
29701
29926
  [mode]: true,
29702
29927
  'reorder-enabled': !this.disabled,
29703
29928
  'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -30536,6 +30761,7 @@ class Router {
30536
30761
  *
30537
30762
  * @param path The path to navigate to.
30538
30763
  * @param direction The direction of the animation. Defaults to `"forward"`.
30764
+ * @param animation A custom animation to use for the transition.
30539
30765
  */
30540
30766
  async push(path, direction = 'forward', animation) {
30541
30767
  var _a;
@@ -31265,10 +31491,8 @@ class Searchbar {
31265
31491
  /**
31266
31492
  * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
31267
31493
  * `input.focus()`.
31268
- *
31269
31494
  * Developers who wish to focus an input when a page enters
31270
31495
  * should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
31271
- *
31272
31496
  * Developers who wish to focus an input when an overlay is presented
31273
31497
  * should call `setFocus` after `didPresent` has resolved.
31274
31498
  *
@@ -31447,8 +31671,8 @@ class Searchbar {
31447
31671
  const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
31448
31672
  const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
31449
31673
  const shouldShowCancelButton = this.shouldShowCancelButton();
31450
- const cancelButton = this.showCancelButton !== 'never' && (hAsync("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" }, hAsync("div", { key: '85df41676bed611467bd4df0002b08baee4f539c', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
31451
- return (hAsync(Host, { key: 'e1e30cdd79f9f54d5f2d27501012358bc46880e5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
31674
+ const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '19e18775856db87daeb4b9e3d7bca0461915a0df', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
31675
+ return (hAsync(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
31452
31676
  [mode]: true,
31453
31677
  'searchbar-animated': animated,
31454
31678
  'searchbar-disabled': this.disabled,
@@ -31458,14 +31682,14 @@ class Searchbar {
31458
31682
  'searchbar-has-focus': this.focused,
31459
31683
  'searchbar-should-show-clear': this.shouldShowClearButton(),
31460
31684
  'searchbar-should-show-cancel': this.shouldShowCancelButton(),
31461
- }) }, hAsync("div", { key: '7e9db147282a35bb1e3c9c6125b9a044e81ddde5', class: "searchbar-input-container" }, hAsync("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, hAsync("ion-icon", { key: '048b00348456bd827ae734491c46a67bfb146227', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '71f64339bbfd54ebd26a0946c8ee9d726cd89c04', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
31685
+ }) }, hAsync("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'f991a37fcf54d26b7ad10d89084764e03d97b9de', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
31462
31686
  /**
31463
31687
  * This prevents mobile browsers from
31464
31688
  * blurring the input when the clear
31465
31689
  * button is activated.
31466
31690
  */
31467
31691
  ev.preventDefault();
31468
- }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '9b1a177b21951c1c95897a468b34bb7bbd63d137', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
31692
+ }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
31469
31693
  }
31470
31694
  get el() { return getElement(this); }
31471
31695
  static get watchers() { return {
@@ -35342,16 +35566,15 @@ class Toast {
35342
35566
  }
35343
35567
  /**
35344
35568
  * Dismiss the toast overlay after it has been presented.
35569
+ * This is a no-op if the overlay has not been presented yet. If you want
35570
+ * to remove an overlay from the DOM that was never presented, use the
35571
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
35345
35572
  *
35346
35573
  * @param data Any data to emit in the dismiss events.
35347
35574
  * @param role The role of the element that is dismissing the toast.
35348
35575
  * This can be useful in a button handler for determining which button was
35349
35576
  * clicked to dismiss the toast.
35350
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
35351
- *
35352
- * This is a no-op if the overlay has not been presented yet. If you want
35353
- * to remove an overlay from the DOM that was never presented, use the
35354
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
35577
+ * Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
35355
35578
  */
35356
35579
  async dismiss(data, role) {
35357
35580
  var _a, _b;
@@ -35519,9 +35742,9 @@ class Toast {
35519
35742
  if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
35520
35743
  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);
35521
35744
  }
35522
- return (hAsync(Host, Object.assign({ key: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
35745
+ return (hAsync(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
35523
35746
  zIndex: `${60000 + this.overlayIndex}`,
35524
- }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '7c3ad1a8df9e21fc30fc179c7edebeabcf3c6874', class: wrapperClass }, hAsync("div", { key: 'f950c21e8d7bf92653e0bd52e820ed6b84fa8cf5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '0266241927dbe16799adb57f9fc11bd5372877b2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("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')))));
35747
+ }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, hAsync("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '54b500348a9c37660c3aff37436d9188e4374947', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
35525
35748
  }
35526
35749
  get el() { return getElement(this); }
35527
35750
  static get watchers() { return {