@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.mjs CHANGED
@@ -7537,16 +7537,15 @@ class ActionSheet {
7537
7537
  }
7538
7538
  /**
7539
7539
  * Dismiss the action sheet overlay after it has been presented.
7540
+ * This is a no-op if the overlay has not been presented yet. If you want
7541
+ * to remove an overlay from the DOM that was never presented, use the
7542
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
7540
7543
  *
7541
7544
  * @param data Any data to emit in the dismiss events.
7542
7545
  * @param role The role of the element that is dismissing the action sheet.
7543
7546
  * This can be useful in a button handler for determining which button was
7544
- * clicked to dismiss the action sheet.
7545
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
7546
- *
7547
- * This is a no-op if the overlay has not been presented yet. If you want
7548
- * to remove an overlay from the DOM that was never presented, use the
7549
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
7547
+ * clicked to dismiss the action sheet. Some examples include:
7548
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
7550
7549
  */
7551
7550
  async dismiss(data, role) {
7552
7551
  const unlock = await this.lockController.lock();
@@ -7658,12 +7657,12 @@ class ActionSheet {
7658
7657
  const cancelButton = allButtons.find((b) => b.role === 'cancel');
7659
7658
  const buttons = allButtons.filter((b) => b.role !== 'cancel');
7660
7659
  const headerID = `action-sheet-${overlayIndex}-header`;
7661
- return (hAsync(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
7660
+ return (hAsync(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
7662
7661
  zIndex: `${20000 + this.overlayIndex}`,
7663
- }, 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: {
7662
+ }, 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: {
7664
7663
  'action-sheet-title': true,
7665
7664
  'action-sheet-has-sub-title': this.subHeader !== undefined,
7666
- } }, 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" })));
7665
+ } }, 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" })));
7667
7666
  }
7668
7667
  get el() { return getElement(this); }
7669
7668
  static get watchers() { return {
@@ -8216,16 +8215,15 @@ class Alert {
8216
8215
  }
8217
8216
  /**
8218
8217
  * Dismiss the alert overlay after it has been presented.
8218
+ * This is a no-op if the overlay has not been presented yet. If you want
8219
+ * to remove an overlay from the DOM that was never presented, use the
8220
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
8219
8221
  *
8220
8222
  * @param data Any data to emit in the dismiss events.
8221
8223
  * @param role The role of the element that is dismissing the alert.
8222
8224
  * This can be useful in a button handler for determining which button was
8223
- * clicked to dismiss the alert.
8224
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
8225
- *
8226
- * This is a no-op if the overlay has not been presented yet. If you want
8227
- * to remove an overlay from the DOM that was never presented, use the
8228
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
8225
+ * clicked to dismiss the alert. Some examples include:
8226
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
8229
8227
  */
8230
8228
  async dismiss(data, role) {
8231
8229
  const unlock = await this.lockController.lock();
@@ -8393,9 +8391,9 @@ class Alert {
8393
8391
  * If neither are defined, do not set aria-labelledby.
8394
8392
  */
8395
8393
  const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
8396
- return (hAsync(Host, { key: 'f8ee04fe6a97a2585b302c8e1a9eea3b122e3479', tabindex: "-1", style: {
8394
+ return (hAsync(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
8397
8395
  zIndex: `${20000 + overlayIndex}`,
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: '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" })));
8396
+ }, 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" })));
8399
8397
  }
8400
8398
  get el() { return getElement(this); }
8401
8399
  static get watchers() { return {
@@ -8464,6 +8462,8 @@ class App {
8464
8462
  * a result of another user action. (Ex: We focus the first element
8465
8463
  * inside of a popover when the user presents it, but the popover is not always
8466
8464
  * presented as a result of keyboard action.)
8465
+ *
8466
+ * @param elements An array of HTML elements to set focus on.
8467
8467
  */
8468
8468
  async setFocus(elements) {
8469
8469
  if (this.focusVisible) {
@@ -8472,7 +8472,7 @@ class App {
8472
8472
  }
8473
8473
  render() {
8474
8474
  const mode = getIonMode$1(this);
8475
- return (hAsync(Host, { key: '03aa892f986330078d112b1e8b010df98fa7e39e', class: {
8475
+ return (hAsync(Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
8476
8476
  [mode]: true,
8477
8477
  'ion-page': true,
8478
8478
  'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
@@ -13092,6 +13092,8 @@ class Datetime {
13092
13092
  * Confirms the selected datetime value, updates the
13093
13093
  * `value` property, and optionally closes the popover
13094
13094
  * or modal that the datetime was presented in.
13095
+ *
13096
+ * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
13095
13097
  */
13096
13098
  async confirm(closeOverlay = false) {
13097
13099
  const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
@@ -13125,6 +13127,8 @@ class Datetime {
13125
13127
  * Resets the internal state of the datetime but does not update the value.
13126
13128
  * Passing a valid ISO-8601 string will reset the state of the component to the provided date.
13127
13129
  * If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
13130
+ *
13131
+ * @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.
13128
13132
  */
13129
13133
  async reset(startDate) {
13130
13134
  this.processValue(startDate);
@@ -13134,6 +13138,8 @@ class Datetime {
13134
13138
  * optionally closes the popover
13135
13139
  * or modal that the datetime was
13136
13140
  * presented in.
13141
+ *
13142
+ * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
13137
13143
  */
13138
13144
  async cancel(closeOverlay = false) {
13139
13145
  this.ionCancel.emit();
@@ -13947,7 +13953,7 @@ class Datetime {
13947
13953
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
13948
13954
  const hasWheelVariant = hasDatePresentation && preferWheel;
13949
13955
  renderHiddenInput(true, el, name, formatValue(value), disabled);
13950
- return (hAsync(Host, { key: '7ea46c27aa5fb01b748dd4d6eb2340ad13f65175', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
13956
+ return (hAsync(Host, { key: '79677f5bc0fb32fb68569636bd76e68238e62eb8', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
13951
13957
  [mode]: true,
13952
13958
  ['datetime-readonly']: readonly,
13953
13959
  ['datetime-disabled']: disabled,
@@ -13957,7 +13963,7 @@ class Datetime {
13957
13963
  [`datetime-size-${size}`]: true,
13958
13964
  [`datetime-prefer-wheel`]: hasWheelVariant,
13959
13965
  [`datetime-grid`]: isGridStyle,
13960
- })) }, hAsync("div", { key: '6964378424c58b053e23279d08eaedf28dfcc315', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
13966
+ })) }, hAsync("div", { key: 'bf07b1e3c64af6e837663ff470bea93787a6e86f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
13961
13967
  }
13962
13968
  get el() { return getElement(this); }
13963
13969
  static get watchers() { return {
@@ -19005,16 +19011,15 @@ class Loading {
19005
19011
  }
19006
19012
  /**
19007
19013
  * Dismiss the loading overlay after it has been presented.
19014
+ * This is a no-op if the overlay has not been presented yet. If you want
19015
+ * to remove an overlay from the DOM that was never presented, use the
19016
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
19008
19017
  *
19009
19018
  * @param data Any data to emit in the dismiss events.
19010
19019
  * @param role The role of the element that is dismissing the loading.
19011
19020
  * This can be useful in a button handler for determining which button was
19012
- * clicked to dismiss the loading.
19013
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
19014
- *
19015
- * This is a no-op if the overlay has not been presented yet. If you want
19016
- * to remove an overlay from the DOM that was never presented, use the
19017
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
19021
+ * clicked to dismiss the loading. Some examples include:
19022
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
19018
19023
  */
19019
19024
  async dismiss(data, role) {
19020
19025
  const unlock = await this.lockController.lock();
@@ -19056,9 +19061,9 @@ class Loading {
19056
19061
  * Otherwise, don't set aria-labelledby.
19057
19062
  */
19058
19063
  const ariaLabelledBy = message !== undefined ? msgId : null;
19059
- return (hAsync(Host, Object.assign({ key: '6369ed244c06c39aa338141bffacf7a861d7da1a', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
19064
+ return (hAsync(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
19060
19065
  zIndex: `${40000 + this.overlayIndex}`,
19061
- }, 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" })));
19066
+ }, 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" })));
19062
19067
  }
19063
19068
  get el() { return getElement(this); }
19064
19069
  static get watchers() { return {
@@ -19686,7 +19691,7 @@ class Menu {
19686
19691
  return Promise.resolve(this._isOpen);
19687
19692
  }
19688
19693
  /**
19689
- * Returns `true` is the menu is active.
19694
+ * Returns `true` if the menu is active.
19690
19695
  *
19691
19696
  * A menu is active when it can be opened or closed, meaning it's enabled
19692
19697
  * and it's not part of a `ion-split-pane`.
@@ -19697,6 +19702,10 @@ class Menu {
19697
19702
  /**
19698
19703
  * Opens the menu. If the menu is already open or it can't be opened,
19699
19704
  * it returns `false`.
19705
+ *
19706
+ * @param animated If `true`, the menu will animate when opening.
19707
+ * If `false`, the menu will open instantly without animation.
19708
+ * Defaults to `true`.
19700
19709
  */
19701
19710
  open(animated = true) {
19702
19711
  return this.setOpen(true, animated);
@@ -19704,20 +19713,38 @@ class Menu {
19704
19713
  /**
19705
19714
  * Closes the menu. If the menu is already closed or it can't be closed,
19706
19715
  * it returns `false`.
19716
+ *
19717
+ * @param animated If `true`, the menu will animate when closing. If `false`,
19718
+ * the menu will close instantly without animation. Defaults to `true`.
19719
+ * @param role The role of the element that is closing the menu.
19720
+ * This can be useful in a button handler for determining which button was
19721
+ * clicked to close the menu. Some examples include:
19722
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
19707
19723
  */
19708
19724
  close(animated = true, role) {
19709
19725
  return this.setOpen(false, animated, role);
19710
19726
  }
19711
19727
  /**
19712
- * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
19728
+ * Toggles the menu. If the menu is already open, it will try to close,
19729
+ * otherwise it will try to open it.
19713
19730
  * If the operation can't be completed successfully, it returns `false`.
19731
+ *
19732
+ * @param animated If `true`, the menu will animate when opening/closing.
19733
+ * If `false`, the menu will open/close instantly without animation.
19734
+ * Defaults to `true`.
19714
19735
  */
19715
19736
  toggle(animated = true) {
19716
19737
  return this.setOpen(!this._isOpen, animated);
19717
19738
  }
19718
19739
  /**
19719
- * Opens or closes the button.
19740
+ * Opens or closes the menu.
19720
19741
  * If the operation can't be completed successfully, it returns `false`.
19742
+ *
19743
+ * @param shouldOpen If `true`, the menu will open. If `false`, the menu
19744
+ * will close.
19745
+ * @param animated If `true`, the menu will animate when opening/closing.
19746
+ * If `false`, the menu will open/close instantly without animation.
19747
+ * @param role The role of the element that is closing the menu.
19721
19748
  */
19722
19749
  setOpen(shouldOpen, animated = true, role) {
19723
19750
  return menuController._setOpen(this, shouldOpen, animated, role);
@@ -20082,14 +20109,14 @@ class Menu {
20082
20109
  * the ionBackButton listener in the menu controller
20083
20110
  * will handle closing the menu when Escape is pressed.
20084
20111
  */
20085
- return (hAsync(Host, { key: '9e4ae9476a76781f1d228395c9af9e1c39ec82bb', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
20112
+ return (hAsync(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
20086
20113
  [mode]: true,
20087
20114
  [`menu-type-${type}`]: true,
20088
20115
  'menu-enabled': !disabled,
20089
20116
  [`menu-side-${side}`]: true,
20090
20117
  'menu-pane-visible': isPaneVisible,
20091
20118
  'split-pane-side': hostContext('ion-split-pane', el),
20092
- } }, 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" })));
20119
+ } }, 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" })));
20093
20120
  }
20094
20121
  get el() { return getElement(this); }
20095
20122
  static get watchers() { return {
@@ -21189,7 +21216,7 @@ const iosEnterAnimation$3 = (baseEl, opts) => {
21189
21216
  baseAnimation.addAnimation(contentAnimation);
21190
21217
  }
21191
21218
  if (presentingEl) {
21192
- const isMobile = window.innerWidth < 768;
21219
+ const isPortrait = window.innerWidth < 768;
21193
21220
  const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
21194
21221
  const presentingElRoot = getElementRoot(presentingEl);
21195
21222
  const presentingAnimation = createAnimation().beforeStyles({
@@ -21198,7 +21225,7 @@ const iosEnterAnimation$3 = (baseEl, opts) => {
21198
21225
  overflow: 'hidden',
21199
21226
  });
21200
21227
  const bodyEl = document.body;
21201
- if (isMobile) {
21228
+ if (isPortrait) {
21202
21229
  /**
21203
21230
  * Fallback for browsers that does not support `max()` (ex: Firefox)
21204
21231
  * No need to worry about statusbar padding since engines like Gecko
@@ -21276,7 +21303,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
21276
21303
  .duration(duration)
21277
21304
  .addAnimation(wrapperAnimation);
21278
21305
  if (presentingEl) {
21279
- const isMobile = window.innerWidth < 768;
21306
+ const isPortrait = window.innerWidth < 768;
21280
21307
  const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
21281
21308
  const presentingElRoot = getElementRoot(presentingEl);
21282
21309
  const presentingAnimation = createAnimation()
@@ -21294,7 +21321,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
21294
21321
  }
21295
21322
  });
21296
21323
  const bodyEl = document.body;
21297
- if (isMobile) {
21324
+ if (isPortrait) {
21298
21325
  const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
21299
21326
  const modalTransform = hasCardModal ? '-10px' : transformOffset;
21300
21327
  const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
@@ -21341,6 +21368,125 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
21341
21368
  return baseAnimation;
21342
21369
  };
21343
21370
 
21371
+ /**
21372
+ * Transition animation from portrait view to landscape view
21373
+ * This handles the case where a card modal is open in portrait view
21374
+ * and the user switches to landscape view
21375
+ */
21376
+ const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
21377
+ const { presentingEl } = opts;
21378
+ if (!presentingEl) {
21379
+ // No transition needed for non-card modals
21380
+ return createAnimation('portrait-to-landscape-transition');
21381
+ }
21382
+ const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
21383
+ const presentingElRoot = getElementRoot(presentingEl);
21384
+ const bodyEl = document.body;
21385
+ const baseAnimation = createAnimation('portrait-to-landscape-transition')
21386
+ .addElement(baseEl)
21387
+ .easing('cubic-bezier(0.32,0.72,0,1)')
21388
+ .duration(duration);
21389
+ const presentingAnimation = createAnimation();
21390
+ if (!hasCardModal) {
21391
+ // Non-card modal: transition from portrait state to landscape state
21392
+ // Portrait: presentingEl has transform and body has black background
21393
+ // Landscape: no transform, no body background, modal wrapper opacity changes
21394
+ const root = getElementRoot(baseEl);
21395
+ const wrapperAnimation = createAnimation()
21396
+ .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
21397
+ .fromTo('opacity', '1', '1'); // Keep wrapper visible in landscape
21398
+ const backdropAnimation = createAnimation()
21399
+ .addElement(root.querySelector('ion-backdrop'))
21400
+ .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
21401
+ // Animate presentingEl from portrait state back to normal
21402
+ const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
21403
+ const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
21404
+ const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
21405
+ presentingAnimation
21406
+ .addElement(presentingEl)
21407
+ .beforeAddWrite(() => bodyEl.style.setProperty('background-color', ''))
21408
+ .fromTo('transform', fromTransform, 'translateY(0px) scale(1)')
21409
+ .fromTo('filter', 'contrast(0.85)', 'contrast(1)')
21410
+ .fromTo('border-radius', '10px 10px 0 0', '0px');
21411
+ baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
21412
+ }
21413
+ else {
21414
+ // Card modal: transition from portrait card state to landscape card state
21415
+ const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
21416
+ const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
21417
+ const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
21418
+ const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
21419
+ presentingAnimation
21420
+ .addElement(presentingElRoot.querySelector('.modal-wrapper'))
21421
+ .fromTo('transform', fromTransform, toTransform)
21422
+ .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
21423
+ const shadowAnimation = createAnimation()
21424
+ .addElement(presentingElRoot.querySelector('.modal-shadow'))
21425
+ .fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
21426
+ .fromTo('transform', fromTransform, toTransform);
21427
+ baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
21428
+ }
21429
+ return baseAnimation;
21430
+ };
21431
+ /**
21432
+ * Transition animation from landscape view to portrait view
21433
+ * This handles the case where a card modal is open in landscape view
21434
+ * and the user switches to portrait view
21435
+ */
21436
+ const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
21437
+ const { presentingEl } = opts;
21438
+ if (!presentingEl) {
21439
+ // No transition needed for non-card modals
21440
+ return createAnimation('landscape-to-portrait-transition');
21441
+ }
21442
+ const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
21443
+ const presentingElRoot = getElementRoot(presentingEl);
21444
+ const bodyEl = document.body;
21445
+ const baseAnimation = createAnimation('landscape-to-portrait-transition')
21446
+ .addElement(baseEl)
21447
+ .easing('cubic-bezier(0.32,0.72,0,1)')
21448
+ .duration(duration);
21449
+ const presentingAnimation = createAnimation();
21450
+ if (!hasCardModal) {
21451
+ // Non-card modal: transition from landscape state to portrait state
21452
+ const root = getElementRoot(baseEl);
21453
+ const wrapperAnimation = createAnimation()
21454
+ .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
21455
+ .fromTo('opacity', '1', '1'); // Keep wrapper visible
21456
+ const backdropAnimation = createAnimation()
21457
+ .addElement(root.querySelector('ion-backdrop'))
21458
+ .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
21459
+ // Animate presentingEl from normal state to portrait state
21460
+ const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
21461
+ const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
21462
+ const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
21463
+ presentingAnimation
21464
+ .addElement(presentingEl)
21465
+ .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
21466
+ .fromTo('transform', 'translateY(0px) scale(1)', toTransform)
21467
+ .fromTo('filter', 'contrast(1)', 'contrast(0.85)')
21468
+ .fromTo('border-radius', '0px', '10px 10px 0 0');
21469
+ baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
21470
+ }
21471
+ else {
21472
+ // Card modal: transition from landscape card state to portrait card state
21473
+ const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
21474
+ const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
21475
+ const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
21476
+ const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
21477
+ presentingAnimation
21478
+ .addElement(presentingElRoot.querySelector('.modal-wrapper'))
21479
+ .fromTo('transform', fromTransform, toTransform)
21480
+ .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
21481
+ const shadowAnimation = createAnimation()
21482
+ .addElement(presentingElRoot.querySelector('.modal-shadow'))
21483
+ .fromTo('opacity', '0', '0') // Shadow stays hidden
21484
+ .fromTo('transform', fromTransform, toTransform);
21485
+ baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
21486
+ }
21487
+ return baseAnimation;
21488
+ };
21489
+
21344
21490
  const createEnterAnimation = () => {
21345
21491
  const backdropAnimation = createAnimation()
21346
21492
  .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
@@ -22094,6 +22240,17 @@ class Modal {
22094
22240
  el.dispatchEvent(ev);
22095
22241
  }
22096
22242
  };
22243
+ /**
22244
+ * When the modal receives focus directly, pass focus to the handle
22245
+ * if it exists and is focusable, otherwise let the focus trap handle it.
22246
+ */
22247
+ this.onModalFocus = (ev) => {
22248
+ const { dragHandleEl, el } = this;
22249
+ // Only handle focus if the modal itself was focused (not a child element)
22250
+ if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
22251
+ dragHandleEl.focus();
22252
+ }
22253
+ };
22097
22254
  }
22098
22255
  onIsOpenChange(newValue, oldValue) {
22099
22256
  if (newValue === true && oldValue === false) {
@@ -22121,6 +22278,7 @@ class Modal {
22121
22278
  }
22122
22279
  disconnectedCallback() {
22123
22280
  this.triggerController.removeClickListener();
22281
+ this.cleanupViewTransitionListener();
22124
22282
  }
22125
22283
  componentWillLoad() {
22126
22284
  var _a;
@@ -22331,6 +22489,8 @@ class Modal {
22331
22489
  else if (hasCardModal) {
22332
22490
  this.initSwipeToClose();
22333
22491
  }
22492
+ // Initialize view transition listener for iOS card modals
22493
+ this.initViewTransitionListener();
22334
22494
  unlock();
22335
22495
  }
22336
22496
  initSwipeToClose() {
@@ -22425,13 +22585,13 @@ class Modal {
22425
22585
  }
22426
22586
  /**
22427
22587
  * Dismiss the modal overlay after it has been presented.
22428
- *
22429
- * @param data Any data to emit in the dismiss events.
22430
- * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
22431
- *
22432
22588
  * This is a no-op if the overlay has not been presented yet. If you want
22433
22589
  * to remove an overlay from the DOM that was never presented, use the
22434
22590
  * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
22591
+ *
22592
+ * @param data Any data to emit in the dismiss events.
22593
+ * @param role The role of the element that is dismissing the modal.
22594
+ * For example, `cancel` or `backdrop`.
22435
22595
  */
22436
22596
  async dismiss(data, role) {
22437
22597
  var _a;
@@ -22484,6 +22644,7 @@ class Modal {
22484
22644
  if (this.gesture) {
22485
22645
  this.gesture.destroy();
22486
22646
  }
22647
+ this.cleanupViewTransitionListener();
22487
22648
  }
22488
22649
  this.currentBreakpoint = undefined;
22489
22650
  this.animation = undefined;
@@ -22503,8 +22664,10 @@ class Modal {
22503
22664
  return eventMethod(this.el, 'ionModalWillDismiss');
22504
22665
  }
22505
22666
  /**
22506
- * Move a sheet style modal to a specific breakpoint. The breakpoint value must
22507
- * be a value defined in your `breakpoints` array.
22667
+ * Move a sheet style modal to a specific breakpoint.
22668
+ *
22669
+ * @param breakpoint The breakpoint value to move the sheet modal to.
22670
+ * Must be a value defined in your `breakpoints` array.
22508
22671
  */
22509
22672
  async setCurrentBreakpoint(breakpoint) {
22510
22673
  if (!this.isSheetModal) {
@@ -22557,26 +22720,88 @@ class Modal {
22557
22720
  await this.setCurrentBreakpoint(nextBreakpoint);
22558
22721
  return true;
22559
22722
  }
22723
+ initViewTransitionListener() {
22724
+ // Only enable for iOS card modals when no custom animations are provided
22725
+ if (getIonMode$1(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
22726
+ return;
22727
+ }
22728
+ // Set initial view state
22729
+ this.currentViewIsPortrait = window.innerWidth < 768;
22730
+ // Create debounced resize handler
22731
+ let resizeTimeout;
22732
+ this.resizeListener = () => {
22733
+ clearTimeout(resizeTimeout);
22734
+ resizeTimeout = setTimeout(() => {
22735
+ this.handleViewTransition();
22736
+ }, 100); // Debounce for 100ms to avoid excessive calls
22737
+ };
22738
+ window.addEventListener('resize', this.resizeListener);
22739
+ }
22740
+ handleViewTransition() {
22741
+ const isPortrait = window.innerWidth < 768;
22742
+ // Only transition if view state actually changed
22743
+ if (this.currentViewIsPortrait === isPortrait) {
22744
+ return;
22745
+ }
22746
+ // Cancel any ongoing transition animation
22747
+ if (this.viewTransitionAnimation) {
22748
+ this.viewTransitionAnimation.destroy();
22749
+ this.viewTransitionAnimation = undefined;
22750
+ }
22751
+ const { presentingElement } = this;
22752
+ if (!presentingElement) {
22753
+ return;
22754
+ }
22755
+ // Create transition animation
22756
+ let transitionAnimation;
22757
+ if (this.currentViewIsPortrait && !isPortrait) {
22758
+ // Portrait to landscape transition
22759
+ transitionAnimation = portraitToLandscapeTransition(this.el, {
22760
+ presentingEl: presentingElement});
22761
+ }
22762
+ else {
22763
+ // Landscape to portrait transition
22764
+ transitionAnimation = landscapeToPortraitTransition(this.el, {
22765
+ presentingEl: presentingElement});
22766
+ }
22767
+ // Update state and play animation
22768
+ this.currentViewIsPortrait = isPortrait;
22769
+ this.viewTransitionAnimation = transitionAnimation;
22770
+ transitionAnimation.play().then(() => {
22771
+ this.viewTransitionAnimation = undefined;
22772
+ });
22773
+ }
22774
+ cleanupViewTransitionListener() {
22775
+ if (this.resizeListener) {
22776
+ window.removeEventListener('resize', this.resizeListener);
22777
+ this.resizeListener = undefined;
22778
+ }
22779
+ if (this.viewTransitionAnimation) {
22780
+ this.viewTransitionAnimation.destroy();
22781
+ this.viewTransitionAnimation = undefined;
22782
+ }
22783
+ }
22560
22784
  render() {
22561
22785
  const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
22562
22786
  const showHandle = handle !== false && isSheetModal;
22563
22787
  const mode = getIonMode$1(this);
22564
22788
  const isCardModal = presentingElement !== undefined && mode === 'ios';
22565
22789
  const isHandleCycle = handleBehavior === 'cycle';
22566
- return (hAsync(Host, Object.assign({ key: '04c094d52dcd7095fc08d74ab7f3e37b498ec480', "no-router": true,
22790
+ const isSheetModalWithHandle = isSheetModal && showHandle;
22791
+ return (hAsync(Host, Object.assign({ key: 'd5bcaa588471573e1bcbd99997b306c8ecdd124f', "no-router": true,
22567
22792
  // Allow the modal to be navigable when the handle is focusable
22568
- tabIndex: !isHandleCycle ? -1 : 0 }, htmlAttributes, { style: {
22793
+ tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
22569
22794
  zIndex: `${20000 + this.overlayIndex}`,
22570
- }, 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',
22795
+ }, 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',
22571
22796
  /*
22572
22797
  role and aria-modal must be used on the
22573
22798
  same element. They must also be set inside the
22574
22799
  shadow DOM otherwise ion-button will not be highlighted
22575
22800
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
22576
22801
  */
22577
- 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",
22802
+ 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",
22578
22803
  // Prevents the handle from receiving keyboard focus when it does not cycle
22579
- 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' }))));
22804
+ 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' }))));
22580
22805
  }
22581
22806
  get el() { return getElement(this); }
22582
22807
  static get watchers() { return {
@@ -26803,6 +27028,8 @@ class Popover {
26803
27028
  * Developers can pass a mouse, touch, or pointer event
26804
27029
  * to position the popover relative to where that event
26805
27030
  * was dispatched.
27031
+ *
27032
+ * @param event The event to position the popover relative to.
26806
27033
  */
26807
27034
  async present(event) {
26808
27035
  const unlock = await this.lockController.lock();
@@ -26866,15 +27093,14 @@ class Popover {
26866
27093
  }
26867
27094
  /**
26868
27095
  * Dismiss the popover overlay after it has been presented.
27096
+ * This is a no-op if the overlay has not been presented yet. If you want
27097
+ * to remove an overlay from the DOM that was never presented, use the
27098
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
26869
27099
  *
26870
27100
  * @param data Any data to emit in the dismiss events.
26871
- * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
27101
+ * @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
26872
27102
  * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
26873
27103
  * a parent popover if this popover is nested. Defaults to `true`.
26874
- *
26875
- * This is a no-op if the overlay has not been presented yet. If you want
26876
- * to remove an overlay from the DOM that was never presented, use the
26877
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
26878
27104
  */
26879
27105
  async dismiss(data, role, dismissParentPopover = true) {
26880
27106
  const unlock = await this.lockController.lock();
@@ -26926,9 +27152,9 @@ class Popover {
26926
27152
  const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
26927
27153
  const desktop = isPlatform('desktop');
26928
27154
  const enableArrow = arrow && !parentPopover;
26929
- return (hAsync(Host, Object.assign({ key: '1de4862099cfcb5035e78008e6dc7c1371846f9a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
27155
+ return (hAsync(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
26930
27156
  zIndex: `${20000 + this.overlayIndex}`,
26931
- }, 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' })))));
27157
+ }, 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' })))));
26932
27158
  }
26933
27159
  get el() { return getElement(this); }
26934
27160
  static get watchers() { return {
@@ -29508,7 +29734,6 @@ class ReorderGroup {
29508
29734
  }
29509
29735
  /**
29510
29736
  * Completes the reorder operation. Must be called by the `ionItemReorder` event.
29511
- *
29512
29737
  * If a list of items is passed, the list will be reordered and returned in the
29513
29738
  * proper order.
29514
29739
  *
@@ -29695,7 +29920,7 @@ class ReorderGroup {
29695
29920
  }
29696
29921
  render() {
29697
29922
  const mode = getIonMode$1(this);
29698
- return (hAsync(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
29923
+ return (hAsync(Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
29699
29924
  [mode]: true,
29700
29925
  'reorder-enabled': !this.disabled,
29701
29926
  'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -30534,6 +30759,7 @@ class Router {
30534
30759
  *
30535
30760
  * @param path The path to navigate to.
30536
30761
  * @param direction The direction of the animation. Defaults to `"forward"`.
30762
+ * @param animation A custom animation to use for the transition.
30537
30763
  */
30538
30764
  async push(path, direction = 'forward', animation) {
30539
30765
  var _a;
@@ -31263,10 +31489,8 @@ class Searchbar {
31263
31489
  /**
31264
31490
  * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
31265
31491
  * `input.focus()`.
31266
- *
31267
31492
  * Developers who wish to focus an input when a page enters
31268
31493
  * should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
31269
- *
31270
31494
  * Developers who wish to focus an input when an overlay is presented
31271
31495
  * should call `setFocus` after `didPresent` has resolved.
31272
31496
  *
@@ -31445,8 +31669,8 @@ class Searchbar {
31445
31669
  const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
31446
31670
  const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
31447
31671
  const shouldShowCancelButton = this.shouldShowCancelButton();
31448
- 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))));
31449
- return (hAsync(Host, { key: 'e1e30cdd79f9f54d5f2d27501012358bc46880e5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
31672
+ 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))));
31673
+ return (hAsync(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
31450
31674
  [mode]: true,
31451
31675
  'searchbar-animated': animated,
31452
31676
  'searchbar-disabled': this.disabled,
@@ -31456,14 +31680,14 @@ class Searchbar {
31456
31680
  'searchbar-has-focus': this.focused,
31457
31681
  'searchbar-should-show-clear': this.shouldShowClearButton(),
31458
31682
  'searchbar-should-show-cancel': this.shouldShowCancelButton(),
31459
- }) }, 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) => {
31683
+ }) }, 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) => {
31460
31684
  /**
31461
31685
  * This prevents mobile browsers from
31462
31686
  * blurring the input when the clear
31463
31687
  * button is activated.
31464
31688
  */
31465
31689
  ev.preventDefault();
31466
- }, 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));
31690
+ }, 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));
31467
31691
  }
31468
31692
  get el() { return getElement(this); }
31469
31693
  static get watchers() { return {
@@ -35340,16 +35564,15 @@ class Toast {
35340
35564
  }
35341
35565
  /**
35342
35566
  * Dismiss the toast overlay after it has been presented.
35567
+ * This is a no-op if the overlay has not been presented yet. If you want
35568
+ * to remove an overlay from the DOM that was never presented, use the
35569
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
35343
35570
  *
35344
35571
  * @param data Any data to emit in the dismiss events.
35345
35572
  * @param role The role of the element that is dismissing the toast.
35346
35573
  * This can be useful in a button handler for determining which button was
35347
35574
  * clicked to dismiss the toast.
35348
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
35349
- *
35350
- * This is a no-op if the overlay has not been presented yet. If you want
35351
- * to remove an overlay from the DOM that was never presented, use the
35352
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
35575
+ * Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
35353
35576
  */
35354
35577
  async dismiss(data, role) {
35355
35578
  var _a, _b;
@@ -35517,9 +35740,9 @@ class Toast {
35517
35740
  if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
35518
35741
  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);
35519
35742
  }
35520
- return (hAsync(Host, Object.assign({ key: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
35743
+ return (hAsync(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
35521
35744
  zIndex: `${60000 + this.overlayIndex}`,
35522
- }, 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')))));
35745
+ }, 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')))));
35523
35746
  }
35524
35747
  get el() { return getElement(this); }
35525
35748
  static get watchers() { return {