@ionic/core 8.4.4-dev.11738863153.1dafb0b9 → 8.4.4-dev.11739906326.1989484f

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 (104) hide show
  1. package/components/checkbox.js +4 -6
  2. package/components/content.js +4 -4
  3. package/components/ion-select.js +4 -6
  4. package/components/ion-tab-button.js +1 -1
  5. package/components/ion-tab.js +2 -2
  6. package/components/ion-tabs.js +1 -2
  7. package/components/ion-toggle.js +4 -6
  8. package/components/modal.js +35 -259
  9. package/components/radio.js +37 -5
  10. package/css/core.css.map +1 -1
  11. package/css/ionic.bundle.css.map +1 -1
  12. package/dist/cjs/ion-app_8.cjs.entry.js +4 -4
  13. package/dist/cjs/ion-checkbox.cjs.entry.js +4 -5
  14. package/dist/cjs/ion-modal.cjs.entry.js +35 -258
  15. package/dist/cjs/ion-radio_2.cjs.entry.js +35 -5
  16. package/dist/cjs/ion-select_3.cjs.entry.js +4 -5
  17. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +1 -1
  18. package/dist/cjs/ion-tab_2.cjs.entry.js +3 -4
  19. package/dist/cjs/ion-toggle.cjs.entry.js +4 -5
  20. package/dist/cjs/ionic.cjs.js +1 -1
  21. package/dist/cjs/loader.cjs.js +1 -1
  22. package/dist/collection/components/checkbox/checkbox.js +4 -23
  23. package/dist/collection/components/content/content.js +4 -4
  24. package/dist/collection/components/modal/animations/ios.enter.js +4 -50
  25. package/dist/collection/components/modal/animations/ios.leave.js +2 -24
  26. package/dist/collection/components/modal/animations/md.enter.js +5 -52
  27. package/dist/collection/components/modal/animations/md.leave.js +3 -26
  28. package/dist/collection/components/modal/animations/sheet.js +2 -11
  29. package/dist/collection/components/modal/gestures/sheet.js +10 -79
  30. package/dist/collection/components/modal/modal.ios.css +0 -16
  31. package/dist/collection/components/modal/modal.js +7 -32
  32. package/dist/collection/components/modal/modal.md.css +0 -6
  33. package/dist/collection/components/radio/radio.ios.css +52 -15
  34. package/dist/collection/components/radio/radio.js +70 -3
  35. package/dist/collection/components/radio/radio.md.css +52 -15
  36. package/dist/collection/components/select/select.js +4 -23
  37. package/dist/collection/components/tab/tab.js +2 -2
  38. package/dist/collection/components/tab-button/tab-button.js +1 -1
  39. package/dist/collection/components/tabs/tabs.js +1 -2
  40. package/dist/collection/components/toggle/toggle.js +4 -23
  41. package/dist/docs.json +73 -89
  42. package/dist/esm/ion-app_8.entry.js +4 -4
  43. package/dist/esm/ion-checkbox.entry.js +4 -5
  44. package/dist/esm/ion-modal.entry.js +35 -258
  45. package/dist/esm/ion-radio_2.entry.js +35 -5
  46. package/dist/esm/ion-select_3.entry.js +4 -5
  47. package/dist/esm/ion-tab-bar_2.entry.js +1 -1
  48. package/dist/esm/ion-tab_2.entry.js +3 -4
  49. package/dist/esm/ion-toggle.entry.js +4 -5
  50. package/dist/esm/ionic.js +1 -1
  51. package/dist/esm/loader.js +1 -1
  52. package/dist/esm-es5/ion-app_8.entry.js +1 -1
  53. package/dist/esm-es5/ion-checkbox.entry.js +1 -1
  54. package/dist/esm-es5/ion-modal.entry.js +1 -1
  55. package/dist/esm-es5/ion-radio_2.entry.js +1 -1
  56. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  57. package/dist/esm-es5/ion-tab-bar_2.entry.js +1 -1
  58. package/dist/esm-es5/ion-tab_2.entry.js +1 -1
  59. package/dist/esm-es5/ion-toggle.entry.js +1 -1
  60. package/dist/esm-es5/ionic.js +1 -1
  61. package/dist/esm-es5/loader.js +1 -1
  62. package/dist/html.html-data.json +8 -16
  63. package/dist/ionic/ionic.esm.js +1 -1
  64. package/dist/ionic/p-1a11f49f.entry.js +4 -0
  65. package/dist/ionic/p-1b1af767.system.entry.js +4 -0
  66. package/dist/ionic/p-2172893e.system.entry.js +4 -0
  67. package/dist/ionic/p-322c5fb4.system.js +1 -1
  68. package/dist/ionic/p-4ec778aa.entry.js +4 -0
  69. package/dist/ionic/p-5ab1b709.entry.js +4 -0
  70. package/dist/ionic/{p-8ac07653.system.entry.js → p-69666e8a.system.entry.js} +2 -2
  71. package/dist/ionic/{p-1199e388.system.entry.js → p-797eeea8.system.entry.js} +1 -1
  72. package/dist/ionic/p-908d6080.entry.js +4 -0
  73. package/dist/ionic/p-92a0f863.entry.js +4 -0
  74. package/dist/ionic/p-98ff6b32.entry.js +4 -0
  75. package/dist/ionic/p-a0eb506c.system.entry.js +4 -0
  76. package/dist/ionic/p-bc64bd27.system.entry.js +4 -0
  77. package/dist/ionic/p-e06057c9.entry.js +4 -0
  78. package/dist/ionic/{p-bdf2cb2e.system.entry.js → p-ebf042e0.system.entry.js} +1 -1
  79. package/dist/ionic/p-f55baa37.entry.js +4 -0
  80. package/dist/ionic/{p-9f364443.system.entry.js → p-fd1c40cc.system.entry.js} +1 -1
  81. package/dist/types/components/checkbox/checkbox.d.ts +0 -6
  82. package/dist/types/components/modal/animations/sheet.d.ts +0 -1
  83. package/dist/types/components/modal/gestures/sheet.d.ts +1 -1
  84. package/dist/types/components/modal/modal-interface.d.ts +0 -1
  85. package/dist/types/components/modal/modal.d.ts +0 -11
  86. package/dist/types/components/radio/radio.d.ts +19 -0
  87. package/dist/types/components/select/select.d.ts +0 -6
  88. package/dist/types/components/toggle/toggle.d.ts +0 -6
  89. package/dist/types/components.d.ts +16 -32
  90. package/hydrate/index.js +95 -291
  91. package/hydrate/index.mjs +95 -291
  92. package/package.json +1 -1
  93. package/dist/ionic/p-0430c2e0.entry.js +0 -4
  94. package/dist/ionic/p-126be614.system.entry.js +0 -4
  95. package/dist/ionic/p-6c95736e.entry.js +0 -4
  96. package/dist/ionic/p-6d6cedc5.entry.js +0 -4
  97. package/dist/ionic/p-722ec9c7.entry.js +0 -4
  98. package/dist/ionic/p-783411f1.entry.js +0 -4
  99. package/dist/ionic/p-7ddc46c3.system.entry.js +0 -4
  100. package/dist/ionic/p-98e41e4f.system.entry.js +0 -4
  101. package/dist/ionic/p-d57a57d6.entry.js +0 -4
  102. package/dist/ionic/p-d7dd8fb1.entry.js +0 -4
  103. package/dist/ionic/p-e3171ff3.entry.js +0 -4
  104. package/dist/ionic/p-e6376b93.system.entry.js +0 -4
package/hydrate/index.js CHANGED
@@ -8497,7 +8497,6 @@ class Checkbox {
8497
8497
  this.labelPlacement = 'start';
8498
8498
  this.justify = undefined;
8499
8499
  this.alignment = undefined;
8500
- this.required = false;
8501
8500
  }
8502
8501
  componentWillLoad() {
8503
8502
  this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
@@ -8509,11 +8508,11 @@ class Checkbox {
8509
8508
  }
8510
8509
  }
8511
8510
  render() {
8512
- const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
8511
+ const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
8513
8512
  const mode = getIonMode$1(this);
8514
8513
  const path = getSVGPath(mode, indeterminate);
8515
8514
  renderHiddenInput(true, el, name, checked ? value : '', disabled);
8516
- return (hAsync(Host, { key: '07a5884062dd256b570e856270c74a5a09d2f2a5', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses$1(color, {
8515
+ return (hAsync(Host, { key: '6dc787e1100521d08c4900104e1a3e2f594e919f', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses$1(color, {
8517
8516
  [mode]: true,
8518
8517
  'in-item': hostContext('ion-item', el),
8519
8518
  'checkbox-checked': checked,
@@ -8523,10 +8522,10 @@ class Checkbox {
8523
8522
  [`checkbox-justify-${justify}`]: justify !== undefined,
8524
8523
  [`checkbox-alignment-${alignment}`]: alignment !== undefined,
8525
8524
  [`checkbox-label-placement-${labelPlacement}`]: true,
8526
- }), onClick: this.onClick }, hAsync("label", { key: '3439d546e8b60187421db698eab63a0bdd31c973', class: "checkbox-wrapper" }, hAsync("input", Object.assign({ key: '9f45cf7dbdedcf01ec132c11e16979adb1aa102f', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), hAsync("div", { key: '4e882f98939cc4b7c7ab7459c751d3f4bb2023fe', class: {
8525
+ }), onClick: this.onClick }, hAsync("label", { key: '68222fb736a5ec3f2e488649b0e2ce0417dcb224', class: "checkbox-wrapper" }, hAsync("input", Object.assign({ key: 'f12962d7e9b19c744cfdbdeccc67ae7f5d080281', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), hAsync("div", { key: 'c72df2699414b1e5a41a1bc267bc634f0c93dcff', class: {
8527
8526
  'label-text-wrapper': true,
8528
8527
  'label-text-wrapper-hidden': el.textContent === '',
8529
- }, part: "label" }, hAsync("slot", { key: '0abda81297a086d02c4a56af75005547971dfcfe' })), hAsync("div", { key: '36489ea3f48a7d0ec46b77c243f9f253ef5c2b3b', class: "native-wrapper" }, hAsync("svg", { key: '4c53b52f5e93752672a34eb6f180b75fa9af9046', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
8528
+ }, part: "label" }, hAsync("slot", { key: 'a2a80285178a7e0e3b536fc9ca26b8b444aa4307' })), hAsync("div", { key: 'c2b05e0d1fe8df5dcd72858220b5ff51ecaee4cc', class: "native-wrapper" }, hAsync("svg", { key: 'ee24913fded72258ebd9713654a6dba92a18fcf7', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
8530
8529
  }
8531
8530
  getSVGPath(mode, indeterminate) {
8532
8531
  let path = indeterminate ? (hAsync("path", { d: "M6 12L18 12", part: "mark" })) : (hAsync("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
@@ -8553,7 +8552,6 @@ class Checkbox {
8553
8552
  "labelPlacement": [1, "label-placement"],
8554
8553
  "justify": [1],
8555
8554
  "alignment": [1],
8556
- "required": [4],
8557
8555
  "setFocus": [64]
8558
8556
  },
8559
8557
  "$listeners$": undefined,
@@ -9113,20 +9111,20 @@ class Content {
9113
9111
  const forceOverscroll = this.shouldForceOverscroll();
9114
9112
  const transitionShadow = mode === 'ios';
9115
9113
  this.resize();
9116
- return (hAsync(Host, Object.assign({ key: 'e3241b81c97aa6187c43397006fd1136e8c7a1b5', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
9114
+ return (hAsync(Host, Object.assign({ key: 'f2a24aa66dbf5c76f9d4b06f708eb73cadc239df', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
9117
9115
  [mode]: true,
9118
9116
  'content-sizing': hostContext('ion-popover', this.el),
9119
9117
  overscroll: forceOverscroll,
9120
9118
  [`content-${rtl}`]: true,
9121
- }), tabIndex: '0', style: {
9119
+ }), style: {
9122
9120
  '--offset-top': `${this.cTop}px`,
9123
9121
  '--offset-bottom': `${this.cBottom}px`,
9124
- } }, inheritedAttributes), hAsync("div", { key: 'b2e0837fd5cb59de4306bf1ea7b115f4fd43f6f9', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: 'b66cfe79487ba5a6b06da1580514c7406f2293c9', class: {
9122
+ } }, inheritedAttributes), hAsync("div", { key: '6480ca7648b278abb36477b3838bccbcd4995e2a', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: '29a23b663f5f0215bb000820c01e1814c0d55985', class: {
9125
9123
  'inner-scroll': true,
9126
9124
  'scroll-x': scrollX,
9127
9125
  'scroll-y': scrollY,
9128
9126
  overscroll: (scrollX || scrollY) && forceOverscroll,
9129
- }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '30ae38ae7d5dc407af5cd432e577a8013996e523' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
9127
+ }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '0fe1bd05609a4b88ae2ce9addf5d5dc5dc1806f0' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
9130
9128
  }
9131
9129
  get el() { return getElement(this); }
9132
9130
  static get style() { return IonContentStyle0; }
@@ -19029,7 +19027,7 @@ const computeDuration = (remaining, velocity) => {
19029
19027
  };
19030
19028
 
19031
19029
  const createSheetEnterAnimation = (opts) => {
19032
- const { currentBreakpoint, backdropBreakpoint, expandToScroll } = opts;
19030
+ const { currentBreakpoint, backdropBreakpoint } = opts;
19033
19031
  /**
19034
19032
  * If the backdropBreakpoint is undefined, then the backdrop
19035
19033
  * should always fade in. If the backdropBreakpoint came before the
@@ -19049,16 +19047,7 @@ const createSheetEnterAnimation = (opts) => {
19049
19047
  { offset: 0, opacity: 1, transform: 'translateY(100%)' },
19050
19048
  { offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
19051
19049
  ]);
19052
- /**
19053
- * This allows the content to be scrollable at any breakpoint.
19054
- */
19055
- const contentAnimation = !expandToScroll
19056
- ? createAnimation('contentAnimation').keyframes([
19057
- { offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
19058
- { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
19059
- ])
19060
- : undefined;
19061
- return { wrapperAnimation, backdropAnimation, contentAnimation };
19050
+ return { wrapperAnimation, backdropAnimation };
19062
19051
  };
19063
19052
  const createSheetLeaveAnimation = (opts) => {
19064
19053
  const { currentBreakpoint, backdropBreakpoint } = opts;
@@ -19093,68 +19082,22 @@ const createEnterAnimation$1 = () => {
19093
19082
  })
19094
19083
  .afterClearStyles(['pointer-events']);
19095
19084
  const wrapperAnimation = createAnimation().fromTo('transform', 'translateY(100vh)', 'translateY(0vh)');
19096
- return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
19085
+ return { backdropAnimation, wrapperAnimation };
19097
19086
  };
19098
19087
  /**
19099
19088
  * iOS Modal Enter Animation for the Card presentation style
19100
19089
  */
19101
19090
  const iosEnterAnimation$3 = (baseEl, opts) => {
19102
- const { presentingEl, currentBreakpoint, expandToScroll } = opts;
19091
+ const { presentingEl, currentBreakpoint } = opts;
19103
19092
  const root = getElementRoot(baseEl);
19104
- const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$1();
19093
+ const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$1();
19105
19094
  backdropAnimation.addElement(root.querySelector('ion-backdrop'));
19106
19095
  wrapperAnimation.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow')).beforeStyles({ opacity: 1 });
19107
- // The content animation is only added if scrolling is enabled for
19108
- // all the breakpoints.
19109
- !expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
19110
19096
  const baseAnimation = createAnimation('entering-base')
19111
19097
  .addElement(baseEl)
19112
19098
  .easing('cubic-bezier(0.32,0.72,0,1)')
19113
19099
  .duration(500)
19114
- .addAnimation([wrapperAnimation])
19115
- .beforeAddWrite(() => {
19116
- if (expandToScroll) {
19117
- // Scroll can only be done when the modal is fully expanded.
19118
- return;
19119
- }
19120
- /**
19121
- * There are some browsers that causes flickering when
19122
- * dragging the content when scroll is enabled at every
19123
- * breakpoint. This is due to the wrapper element being
19124
- * transformed off the screen and having a snap animation.
19125
- *
19126
- * A workaround is to clone the footer element and append
19127
- * it outside of the wrapper element. This way, the footer
19128
- * is still visible and the drag can be done without
19129
- * flickering. The original footer is hidden until the modal
19130
- * is dismissed. This maintains the animation of the footer
19131
- * when the modal is dismissed.
19132
- *
19133
- * The workaround needs to be done before the animation starts
19134
- * so there are no flickering issues.
19135
- */
19136
- const ionFooter = baseEl.querySelector('ion-footer');
19137
- /**
19138
- * This check is needed to prevent more than one footer
19139
- * from being appended to the shadow root.
19140
- * Otherwise, iOS and MD enter animations would append
19141
- * the footer twice.
19142
- */
19143
- const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
19144
- if (ionFooter && !ionFooterAlreadyAppended) {
19145
- const footerHeight = ionFooter.clientHeight;
19146
- const clonedFooter = ionFooter.cloneNode(true);
19147
- baseEl.shadowRoot.appendChild(clonedFooter);
19148
- ionFooter.style.setProperty('display', 'none');
19149
- ionFooter.setAttribute('aria-hidden', 'true');
19150
- // Padding is added to prevent some content from being hidden.
19151
- const page = baseEl.querySelector('.ion-page');
19152
- page.style.setProperty('padding-bottom', `${footerHeight}px`);
19153
- }
19154
- });
19155
- if (contentAnimation) {
19156
- baseAnimation.addAnimation(contentAnimation);
19157
- }
19100
+ .addAnimation(wrapperAnimation);
19158
19101
  if (presentingEl) {
19159
19102
  const isMobile = window.innerWidth < 768;
19160
19103
  const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
@@ -19232,7 +19175,7 @@ const createLeaveAnimation$1 = () => {
19232
19175
  * iOS Modal Leave Animation
19233
19176
  */
19234
19177
  const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
19235
- const { presentingEl, currentBreakpoint, expandToScroll } = opts;
19178
+ const { presentingEl, currentBreakpoint } = opts;
19236
19179
  const root = getElementRoot(baseEl);
19237
19180
  const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation$1();
19238
19181
  backdropAnimation.addElement(root.querySelector('ion-backdrop'));
@@ -19241,29 +19184,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
19241
19184
  .addElement(baseEl)
19242
19185
  .easing('cubic-bezier(0.32,0.72,0,1)')
19243
19186
  .duration(duration)
19244
- .addAnimation(wrapperAnimation)
19245
- .beforeAddWrite(() => {
19246
- if (expandToScroll) {
19247
- // Scroll can only be done when the modal is fully expanded.
19248
- return;
19249
- }
19250
- /**
19251
- * If expandToScroll is disabled, we need to swap
19252
- * the visibility to the original, so the footer
19253
- * dismisses with the modal and doesn't stay
19254
- * until the modal is removed from the DOM.
19255
- */
19256
- const ionFooter = baseEl.querySelector('ion-footer');
19257
- if (ionFooter) {
19258
- const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
19259
- ionFooter.style.removeProperty('display');
19260
- ionFooter.removeAttribute('aria-hidden');
19261
- clonedFooter.style.setProperty('display', 'none');
19262
- clonedFooter.setAttribute('aria-hidden', 'true');
19263
- const page = baseEl.querySelector('.ion-page');
19264
- page.style.removeProperty('padding-bottom');
19265
- }
19266
- });
19187
+ .addAnimation(wrapperAnimation);
19267
19188
  if (presentingEl) {
19268
19189
  const isMobile = window.innerWidth < 768;
19269
19190
  const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
@@ -19341,69 +19262,22 @@ const createEnterAnimation = () => {
19341
19262
  { offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
19342
19263
  { offset: 1, opacity: 1, transform: `translateY(0px)` },
19343
19264
  ]);
19344
- return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
19265
+ return { backdropAnimation, wrapperAnimation };
19345
19266
  };
19346
19267
  /**
19347
19268
  * Md Modal Enter Animation
19348
19269
  */
19349
19270
  const mdEnterAnimation$2 = (baseEl, opts) => {
19350
- const { currentBreakpoint, expandToScroll } = opts;
19271
+ const { currentBreakpoint } = opts;
19351
19272
  const root = getElementRoot(baseEl);
19352
- const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
19273
+ const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
19353
19274
  backdropAnimation.addElement(root.querySelector('ion-backdrop'));
19354
19275
  wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
19355
- // The content animation is only added if scrolling is enabled for
19356
- // all the breakpoints.
19357
- expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
19358
- const baseAnimation = createAnimation()
19276
+ return createAnimation()
19359
19277
  .addElement(baseEl)
19360
19278
  .easing('cubic-bezier(0.36,0.66,0.04,1)')
19361
19279
  .duration(280)
19362
- .addAnimation([backdropAnimation, wrapperAnimation])
19363
- .beforeAddWrite(() => {
19364
- if (expandToScroll) {
19365
- // Scroll can only be done when the modal is fully expanded.
19366
- return;
19367
- }
19368
- /**
19369
- * There are some browsers that causes flickering when
19370
- * dragging the content when scroll is enabled at every
19371
- * breakpoint. This is due to the wrapper element being
19372
- * transformed off the screen and having a snap animation.
19373
- *
19374
- * A workaround is to clone the footer element and append
19375
- * it outside of the wrapper element. This way, the footer
19376
- * is still visible and the drag can be done without
19377
- * flickering. The original footer is hidden until the modal
19378
- * is dismissed. This maintains the animation of the footer
19379
- * when the modal is dismissed.
19380
- *
19381
- * The workaround needs to be done before the animation starts
19382
- * so there are no flickering issues.
19383
- */
19384
- const ionFooter = baseEl.querySelector('ion-footer');
19385
- /**
19386
- * This check is needed to prevent more than one footer
19387
- * from being appended to the shadow root.
19388
- * Otherwise, iOS and MD enter animations would append
19389
- * the footer twice.
19390
- */
19391
- const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
19392
- if (ionFooter && !ionFooterAlreadyAppended) {
19393
- const footerHeight = ionFooter.clientHeight;
19394
- const clonedFooter = ionFooter.cloneNode(true);
19395
- baseEl.shadowRoot.appendChild(clonedFooter);
19396
- ionFooter.style.setProperty('display', 'none');
19397
- ionFooter.setAttribute('aria-hidden', 'true');
19398
- // Padding is added to prevent some content from being hidden.
19399
- const page = baseEl.querySelector('.ion-page');
19400
- page.style.setProperty('padding-bottom', `${footerHeight}px`);
19401
- }
19402
- });
19403
- if (contentAnimation) {
19404
- baseAnimation.addAnimation(contentAnimation);
19405
- }
19406
- return baseAnimation;
19280
+ .addAnimation([backdropAnimation, wrapperAnimation]);
19407
19281
  };
19408
19282
 
19409
19283
  const createLeaveAnimation = () => {
@@ -19418,41 +19292,18 @@ const createLeaveAnimation = () => {
19418
19292
  * Md Modal Leave Animation
19419
19293
  */
19420
19294
  const mdLeaveAnimation$2 = (baseEl, opts) => {
19421
- const { currentBreakpoint, expandToScroll } = opts;
19295
+ const { currentBreakpoint } = opts;
19422
19296
  const root = getElementRoot(baseEl);
19423
19297
  const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
19424
19298
  backdropAnimation.addElement(root.querySelector('ion-backdrop'));
19425
19299
  wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
19426
- const baseAnimation = createAnimation()
19300
+ return createAnimation()
19427
19301
  .easing('cubic-bezier(0.47,0,0.745,0.715)')
19428
19302
  .duration(200)
19429
- .addAnimation([backdropAnimation, wrapperAnimation])
19430
- .beforeAddWrite(() => {
19431
- if (expandToScroll) {
19432
- // Scroll can only be done when the modal is fully expanded.
19433
- return;
19434
- }
19435
- /**
19436
- * If expandToScroll is disabled, we need to swap
19437
- * the visibility to the original, so the footer
19438
- * dismisses with the modal and doesn't stay
19439
- * until the modal is removed from the DOM.
19440
- */
19441
- const ionFooter = baseEl.querySelector('ion-footer');
19442
- if (ionFooter) {
19443
- const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
19444
- ionFooter.style.removeProperty('display');
19445
- ionFooter.removeAttribute('aria-hidden');
19446
- clonedFooter.style.setProperty('display', 'none');
19447
- clonedFooter.setAttribute('aria-hidden', 'true');
19448
- const page = baseEl.querySelector('.ion-page');
19449
- page.style.removeProperty('padding-bottom');
19450
- }
19451
- });
19452
- return baseAnimation;
19303
+ .addAnimation([backdropAnimation, wrapperAnimation]);
19453
19304
  };
19454
19305
 
19455
- const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
19306
+ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
19456
19307
  // Defaults for the sheet swipe animation
19457
19308
  const defaultBackdrop = [
19458
19309
  { offset: 0, opacity: 'var(--backdrop-opacity)' },
@@ -19469,10 +19320,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
19469
19320
  { offset: 1, transform: 'translateY(100%)' },
19470
19321
  ],
19471
19322
  BACKDROP_KEYFRAMES: backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop,
19472
- CONTENT_KEYFRAMES: [
19473
- { offset: 0, maxHeight: '100%' },
19474
- { offset: 1, maxHeight: '0%' },
19475
- ],
19476
19323
  };
19477
19324
  const contentEl = baseEl.querySelector('ion-content');
19478
19325
  const height = wrapperEl.clientHeight;
@@ -19480,11 +19327,10 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
19480
19327
  let offset = 0;
19481
19328
  let canDismissBlocksGesture = false;
19482
19329
  const canDismissMaxStep = 0.95;
19483
- const maxBreakpoint = breakpoints[breakpoints.length - 1];
19484
- const minBreakpoint = breakpoints[0];
19485
19330
  const wrapperAnimation = animation.childAnimations.find((ani) => ani.id === 'wrapperAnimation');
19486
19331
  const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
19487
- const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
19332
+ const maxBreakpoint = breakpoints[breakpoints.length - 1];
19333
+ const minBreakpoint = breakpoints[0];
19488
19334
  const enableBackdrop = () => {
19489
19335
  baseEl.style.setProperty('pointer-events', 'auto');
19490
19336
  backdropEl.style.setProperty('pointer-events', 'auto');
@@ -19507,31 +19353,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
19507
19353
  */
19508
19354
  baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
19509
19355
  };
19510
- /**
19511
- * Toggles the visible modal footer when `expandToScroll` is disabled.
19512
- * @param footer The footer to show.
19513
- */
19514
- const swapFooterVisibility = (footer) => {
19515
- const originalFooter = baseEl.querySelector('ion-footer');
19516
- if (!originalFooter) {
19517
- return;
19518
- }
19519
- const clonedFooter = wrapperEl.nextElementSibling;
19520
- const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
19521
- const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
19522
- footerToShow.style.removeProperty('display');
19523
- footerToShow.removeAttribute('aria-hidden');
19524
- const page = baseEl.querySelector('.ion-page');
19525
- if (footer === 'original') {
19526
- page.style.removeProperty('padding-bottom');
19527
- }
19528
- else {
19529
- const pagePadding = footerToShow.clientHeight;
19530
- page.style.setProperty('padding-bottom', `${pagePadding}px`);
19531
- }
19532
- footerToHide.style.setProperty('display', 'none');
19533
- footerToHide.setAttribute('aria-hidden', 'true');
19534
- };
19535
19356
  /**
19536
19357
  * After the entering animation completes,
19537
19358
  * we need to set the animation to go from
@@ -19543,7 +19364,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
19543
19364
  if (wrapperAnimation && backdropAnimation) {
19544
19365
  wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
19545
19366
  backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
19546
- contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
19547
19367
  animation.progressStart(true, 1 - currentBreakpoint);
19548
19368
  /**
19549
19369
  * If backdrop is not enabled, then content
@@ -19560,7 +19380,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
19560
19380
  disableBackdrop();
19561
19381
  }
19562
19382
  }
19563
- if (contentEl && currentBreakpoint !== maxBreakpoint && expandToScroll) {
19383
+ if (contentEl && currentBreakpoint !== maxBreakpoint) {
19564
19384
  contentEl.scrollY = false;
19565
19385
  }
19566
19386
  const canStart = (detail) => {
@@ -19574,13 +19394,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
19574
19394
  */
19575
19395
  const contentEl = findClosestIonContent(detail.event.target);
19576
19396
  currentBreakpoint = getCurrentBreakpoint();
19577
- /**
19578
- * If we have expandToScroll disabled, we should not allow the swipe gesture to start
19579
- * if the content is being swiped.
19580
- */
19581
- if (!expandToScroll && contentEl) {
19582
- return false;
19583
- }
19584
19397
  if (currentBreakpoint === 1 && contentEl) {
19585
19398
  /**
19586
19399
  * The modal should never swipe to close on the content with a refresher.
@@ -19611,15 +19424,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
19611
19424
  * Remove undefined check
19612
19425
  */
19613
19426
  canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
19614
- /**
19615
- * If expandToScroll is disabled, we need to swap
19616
- * the footer visibility to the original, so if the modal
19617
- * is dismissed, the footer dismisses with the modal
19618
- * and doesn't stay on the screen after the modal is gone.
19619
- */
19620
- if (!expandToScroll) {
19621
- swapFooterVisibility('original');
19622
- }
19623
19427
  /**
19624
19428
  * If we are pulling down, then it is possible we are pulling on the content.
19625
19429
  * We do not want scrolling to happen at the same time as the gesture.
@@ -19735,19 +19539,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
19735
19539
  opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
19736
19540
  },
19737
19541
  ]);
19738
- if (contentAnimation) {
19739
- /**
19740
- * The modal content should scroll at any breakpoint when expandToScroll
19741
- * is disabled. In order to do this, the content needs to be completely
19742
- * viewable so scrolling can access everything. Otherwise, the default
19743
- * behavior would show the content off the screen and only allow
19744
- * scrolling when the sheet is fully expanded.
19745
- */
19746
- contentAnimation.keyframes([
19747
- { offset: 0, maxHeight: `${(1 - breakpointOffset) * 100}%` },
19748
- { offset: 1, maxHeight: `${snapToBreakpoint * 100}%` },
19749
- ]);
19750
- }
19751
19542
  animation.progressStep(0);
19752
19543
  }
19753
19544
  /**
@@ -19755,14 +19546,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
19755
19546
  * snapping animation completes.
19756
19547
  */
19757
19548
  gesture.enable(false);
19758
- /**
19759
- * If expandToScroll is disabled, we need to swap
19760
- * the footer visibility to the cloned one so the footer
19761
- * doesn't flicker when the sheet's height is animated.
19762
- */
19763
- if (!expandToScroll && shouldRemainOpen) {
19764
- swapFooterVisibility('cloned');
19765
- }
19766
19549
  if (shouldPreventDismiss) {
19767
19550
  handleCanDismiss(baseEl, animation);
19768
19551
  }
@@ -19770,13 +19553,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
19770
19553
  onDismiss();
19771
19554
  }
19772
19555
  /**
19773
- * Enables scrolling immediately if the sheet is about to fully expand
19774
- * or if it allows scrolling at any breakpoint. Without this, there would
19775
- * be a ~500ms delay while the modal animation completes, causing a
19776
- * noticeable lag. Native iOS allows scrolling as soon as the gesture is
19777
- * released, so we align with that behavior.
19556
+ * If the sheet is going to be fully expanded then we should enable
19557
+ * scrolling immediately. The sheet modal animation takes ~500ms to finish
19558
+ * so if we wait until then there is a visible delay for when scrolling is
19559
+ * re-enabled. Native iOS allows for scrolling on the sheet modal as soon
19560
+ * as the gesture is released, so we align with that.
19778
19561
  */
19779
- if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
19562
+ if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
19780
19563
  contentEl.scrollY = true;
19781
19564
  }
19782
19565
  return new Promise((resolve) => {
@@ -19794,7 +19577,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
19794
19577
  raf(() => {
19795
19578
  wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
19796
19579
  backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
19797
- contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
19798
19580
  animation.progressStart(true, 1 - snapToBreakpoint);
19799
19581
  currentBreakpoint = snapToBreakpoint;
19800
19582
  onBreakpointChange(currentBreakpoint);
@@ -19847,10 +19629,10 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
19847
19629
  };
19848
19630
  };
19849
19631
 
19850
- const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer ion-toolbar:first-of-type{padding-top:6px}";
19632
+ const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
19851
19633
  var IonModalIosStyle0 = modalIosCss;
19852
19634
 
19853
- const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
19635
+ const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
19854
19636
  var IonModalMdStyle0 = modalMdCss;
19855
19637
 
19856
19638
  // TODO(FW-2832): types
@@ -19929,7 +19711,6 @@ class Modal {
19929
19711
  this.enterAnimation = undefined;
19930
19712
  this.leaveAnimation = undefined;
19931
19713
  this.breakpoints = undefined;
19932
- this.expandToScroll = true;
19933
19714
  this.initialBreakpoint = undefined;
19934
19715
  this.backdropBreakpoint = 0;
19935
19716
  this.handle = undefined;
@@ -20145,7 +19926,6 @@ class Modal {
20145
19926
  presentingEl: presentingElement,
20146
19927
  currentBreakpoint: this.initialBreakpoint,
20147
19928
  backdropBreakpoint: this.backdropBreakpoint,
20148
- expandToScroll: this.expandToScroll,
20149
19929
  });
20150
19930
  /* tslint:disable-next-line */
20151
19931
  if (typeof window !== 'undefined') {
@@ -20196,10 +19976,7 @@ class Modal {
20196
19976
  // should be in the DOM and referenced by now, except
20197
19977
  // for the presenting el
20198
19978
  const animationBuilder = this.leaveAnimation || config.get('modalLeave', iosLeaveAnimation$3);
20199
- const ani = (this.animation = animationBuilder(el, {
20200
- presentingEl: this.presentingElement,
20201
- expandToScroll: this.expandToScroll,
20202
- }));
19979
+ const ani = (this.animation = animationBuilder(el, { presentingEl: this.presentingElement }));
20203
19980
  const contentEl = findIonContent(el);
20204
19981
  if (!contentEl) {
20205
19982
  printIonContentErrorMsg(el);
@@ -20244,10 +20021,9 @@ class Modal {
20244
20021
  presentingEl: this.presentingElement,
20245
20022
  currentBreakpoint: initialBreakpoint,
20246
20023
  backdropBreakpoint,
20247
- expandToScroll: this.expandToScroll,
20248
20024
  }));
20249
20025
  ani.progressStart(true, 1);
20250
- const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, this.expandToScroll, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
20026
+ const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
20251
20027
  if (this.currentBreakpoint !== breakpoint) {
20252
20028
  this.currentBreakpoint = breakpoint;
20253
20029
  this.ionBreakpointDidChange.emit({ breakpoint });
@@ -20325,7 +20101,6 @@ class Modal {
20325
20101
  presentingEl: presentingElement,
20326
20102
  currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
20327
20103
  backdropBreakpoint: this.backdropBreakpoint,
20328
- expandToScroll: this.expandToScroll,
20329
20104
  });
20330
20105
  if (dismissed) {
20331
20106
  const { delegate } = this.getDelegate();
@@ -20411,23 +20186,23 @@ class Modal {
20411
20186
  return true;
20412
20187
  }
20413
20188
  render() {
20414
- const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
20189
+ const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } = this;
20415
20190
  const showHandle = handle !== false && isSheetModal;
20416
20191
  const mode = getIonMode$1(this);
20417
20192
  const isCardModal = presentingElement !== undefined && mode === 'ios';
20418
20193
  const isHandleCycle = handleBehavior === 'cycle';
20419
- return (hAsync(Host, Object.assign({ key: 'ff15df63e72caaeb0a4ad68e9eedeaaa7d3f3bde', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
20194
+ return (hAsync(Host, Object.assign({ key: 'b4da5111fe4719fa450c39b2d4bd884a302a7924', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
20420
20195
  zIndex: `${20000 + this.overlayIndex}`,
20421
- }, 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: '27a73655779af9d175a829d3d2d29e42fd2a63ee', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '406a65080087e7895026ecc2f04e9d707439e86f', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '8e410eb925374158996c82cbbd522f07d741679e',
20196
+ }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, '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: 'c12dbf747e0eb914eaf1331798548ffc7e147763', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'da546ee80c6576b5acc66e959fd5009e0b9a8160', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '306ebe6427440ad5f7ed36d590e562d15a503b75',
20422
20197
  /*
20423
20198
  role and aria-modal must be used on the
20424
20199
  same element. They must also be set inside the
20425
20200
  shadow DOM otherwise ion-button will not be highlighted
20426
20201
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
20427
20202
  */
20428
- role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '7326c969ebe5a70a35e83b09d3db2bb848c90e47', class: "modal-handle",
20203
+ role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: 'c5d17e346fe255a7c0cacbbf15c0083f2d09c488', class: "modal-handle",
20429
20204
  // Prevents the handle from receiving keyboard focus when it does not cycle
20430
- 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: '0b65cdb9e337a27edf437b9e754e79f1449c217d' }))));
20205
+ 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: '5cc714170a00b67f3eda0cd1d6f37c1489a99c83' }))));
20431
20206
  }
20432
20207
  get el() { return getElement(this); }
20433
20208
  static get watchers() { return {
@@ -20449,7 +20224,6 @@ class Modal {
20449
20224
  "enterAnimation": [16],
20450
20225
  "leaveAnimation": [16],
20451
20226
  "breakpoints": [16],
20452
- "expandToScroll": [4, "expand-to-scroll"],
20453
20227
  "initialBreakpoint": [2, "initial-breakpoint"],
20454
20228
  "backdropBreakpoint": [2, "backdrop-breakpoint"],
20455
20229
  "handle": [4],
@@ -24794,10 +24568,10 @@ const renderProgress = (value, buffer) => {
24794
24568
  ];
24795
24569
  };
24796
24570
 
24797
- const radioIosCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color-checked:var(--ion-color-primary, #0054e9)}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:\"\";opacity:0.2}:host(.ion-focused) .radio-icon::after{inset-inline-start:-9px}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}";
24571
+ const radioIosCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.radio-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.radio-label-placement-stacked) .radio-bottom{font-size:1rem}.radio-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .radio-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .radio-bottom .helper-text{display:none}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host{--color-checked:var(--ion-color-primary, #0054e9)}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:\"\";opacity:0.2}:host(.ion-focused) .radio-icon::after{inset-inline-start:-9px}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}";
24798
24572
  var IonRadioIosStyle0 = radioIosCss;
24799
24573
 
24800
- const radioMdCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--border-width:0.125rem;--border-style:solid;--border-radius:50%}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}:host(.radio-disabled) .label-text-wrapper{opacity:0.38}:host(.radio-disabled) .native-wrapper{opacity:0.63}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:\"\";opacity:0.2}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}";
24574
+ const radioMdCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.radio-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.radio-label-placement-stacked) .radio-bottom{font-size:1rem}.radio-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .radio-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .radio-bottom .helper-text{display:none}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host{--color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--border-width:0.125rem;--border-style:solid;--border-radius:50%}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}:host(.radio-disabled) .label-text-wrapper{opacity:0.38}:host(.radio-disabled) .native-wrapper{opacity:0.63}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:\"\";opacity:0.2}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}";
24801
24575
  var IonRadioMdStyle0 = radioMdCss;
24802
24576
 
24803
24577
  /**
@@ -24808,6 +24582,9 @@ var IonRadioMdStyle0 = radioMdCss;
24808
24582
  * @part container - The container for the radio mark.
24809
24583
  * @part label - The label text describing the radio.
24810
24584
  * @part mark - The checkmark or dot used to indicate the checked state.
24585
+ * @part supporting-text - Supporting text displayed beneath the radio label.
24586
+ * @part helper-text - Supporting text displayed beneath the radio label when the radio is valid.
24587
+ * @part error-text - Supporting text displayed beneath the radio label when the radio is invalid and touched.
24811
24588
  */
24812
24589
  class Radio {
24813
24590
  constructor(hostRef) {
@@ -24815,6 +24592,8 @@ class Radio {
24815
24592
  this.ionFocus = createEvent(this, "ionFocus", 7);
24816
24593
  this.ionBlur = createEvent(this, "ionBlur", 7);
24817
24594
  this.inputId = `ion-rb-${radioButtonIds++}`;
24595
+ this.helperTextId = `${this.inputId}-helper-text`;
24596
+ this.errorTextId = `${this.inputId}-error-text`;
24818
24597
  this.radioGroup = null;
24819
24598
  this.updateState = () => {
24820
24599
  if (this.radioGroup) {
@@ -24854,6 +24633,8 @@ class Radio {
24854
24633
  this.color = undefined;
24855
24634
  this.name = this.inputId;
24856
24635
  this.disabled = false;
24636
+ this.errorText = undefined;
24637
+ this.helperText = undefined;
24857
24638
  this.value = undefined;
24858
24639
  this.labelPlacement = 'start';
24859
24640
  this.justify = undefined;
@@ -24913,11 +24694,37 @@ class Radio {
24913
24694
  renderRadioControl() {
24914
24695
  return (hAsync("div", { class: "radio-icon", part: "container" }, hAsync("div", { class: "radio-inner", part: "mark" }), hAsync("div", { class: "radio-ripple" })));
24915
24696
  }
24697
+ getHintTextID() {
24698
+ const { el, helperText, errorText, helperTextId, errorTextId } = this;
24699
+ if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
24700
+ return errorTextId;
24701
+ }
24702
+ if (helperText) {
24703
+ return helperTextId;
24704
+ }
24705
+ return undefined;
24706
+ }
24707
+ /**
24708
+ * Responsible for rendering helper text and error text.
24709
+ * This element should only be rendered if hint text is set.
24710
+ */
24711
+ renderHintText() {
24712
+ const { helperText, errorText, helperTextId, errorTextId } = this;
24713
+ /**
24714
+ * undefined and empty string values should
24715
+ * be treated as not having helper/error text.
24716
+ */
24717
+ const hasHintText = !!helperText || !!errorText;
24718
+ if (!hasHintText) {
24719
+ return;
24720
+ }
24721
+ return (hAsync("div", { class: "radio-bottom" }, hAsync("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), hAsync("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
24722
+ }
24916
24723
  render() {
24917
24724
  const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
24918
24725
  const mode = getIonMode$1(this);
24919
24726
  const inItem = hostContext('ion-item', el);
24920
- return (hAsync(Host, { key: '5a0adab55ad009305de4856fa1b9f93f2279a734', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
24727
+ return (hAsync(Host, { key: '4f01024a74c1846438372c40519df1044f5b12b9', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
24921
24728
  [mode]: true,
24922
24729
  'in-item': inItem,
24923
24730
  'radio-checked': checked,
@@ -24928,10 +24735,10 @@ class Radio {
24928
24735
  // Focus and active styling should not apply when the radio is in an item
24929
24736
  'ion-activatable': !inItem,
24930
24737
  'ion-focusable': !inItem,
24931
- }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: 'f5673a798e6d87868339f046445f707e1d93b7b6', class: "radio-wrapper" }, hAsync("div", { key: 'e9190c06f75a171cab63e3f74ccf771c3ed87005', class: {
24738
+ }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, tabindex: buttonTabindex }, hAsync("label", { key: '59dc0343534e626692f3b71b32204c1b2b25d40a', class: "radio-wrapper" }, hAsync("div", { key: '26d7d3faf1b02bb138fb2c46f83e824962b6b92e', class: {
24932
24739
  'label-text-wrapper': true,
24933
24740
  'label-text-wrapper-hidden': !hasLabel,
24934
- }, part: "label" }, hAsync("slot", { key: '6cedf4e7b3bd03e4a635727dd7b6094bab64af64' })), hAsync("div", { key: '26dd48d9d2848b7f100b732abdc4a3171adde483', class: "native-wrapper" }, this.renderRadioControl()))));
24741
+ }, part: "label" }, hAsync("slot", { key: '9c3d8bb0c5cd3ce94d1e661d89587cf67c522bc0' }), this.renderHintText()), hAsync("div", { key: '3183f79e2977ee001e69c23f73073555744281d8', class: "native-wrapper" }, this.renderRadioControl()))));
24935
24742
  }
24936
24743
  get el() { return getElement(this); }
24937
24744
  static get watchers() { return {
@@ -24948,6 +24755,8 @@ class Radio {
24948
24755
  "color": [513],
24949
24756
  "name": [1],
24950
24757
  "disabled": [4],
24758
+ "errorText": [1, "error-text"],
24759
+ "helperText": [1, "helper-text"],
24951
24760
  "value": [8],
24952
24761
  "labelPlacement": [1, "label-placement"],
24953
24762
  "justify": [1],
@@ -29893,7 +29702,6 @@ class Select {
29893
29702
  this.expandedIcon = undefined;
29894
29703
  this.shape = undefined;
29895
29704
  this.value = undefined;
29896
- this.required = false;
29897
29705
  }
29898
29706
  styleChanged() {
29899
29707
  this.emitStyle();
@@ -30378,8 +30186,8 @@ class Select {
30378
30186
  return renderedLabel;
30379
30187
  }
30380
30188
  renderListbox() {
30381
- const { disabled, inputId, isExpanded, required } = this;
30382
- return (hAsync("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
30189
+ const { disabled, inputId, isExpanded } = this;
30190
+ return (hAsync("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
30383
30191
  }
30384
30192
  render() {
30385
30193
  const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
@@ -30410,7 +30218,7 @@ class Select {
30410
30218
  * TODO(FW-5592): Remove hasStartEndSlots condition
30411
30219
  */
30412
30220
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
30413
- return (hAsync(Host, { key: '491cf1b0e3aa31e7c9cfad3e87d83eb54272312a', onClick: this.onClick, class: createColorClasses$1(this.color, {
30221
+ return (hAsync(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses$1(this.color, {
30414
30222
  [mode]: true,
30415
30223
  'in-item': inItem,
30416
30224
  'in-item-color': hostContext('ion-item.ion-color', el),
@@ -30426,7 +30234,7 @@ class Select {
30426
30234
  [`select-justify-${justify}`]: justifyEnabled,
30427
30235
  [`select-shape-${shape}`]: shape !== undefined,
30428
30236
  [`select-label-placement-${labelPlacement}`]: true,
30429
- }) }, hAsync("label", { key: '07bf3cb57bd1121383d8c746e3ac49da38300082', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '884facd18342797576bbacc761d18d83c52762e3', class: "select-wrapper-inner" }, hAsync("slot", { key: 'c4f2a2a7a76f52db15f9a0b806017caea443c47a', name: "start" }), hAsync("div", { key: '235cf383f268cc74412722cd31e246cbd4c2abe5', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '1481302e11c494d49dfd80a7aaf743f7e851558f', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '8a45ea9280651695c8e5435f266c286f3e3f6a18', class: "select-highlight" }))));
30237
+ }) }, hAsync("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, hAsync("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), hAsync("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
30430
30238
  }
30431
30239
  get el() { return getElement(this); }
30432
30240
  static get watchers() { return {
@@ -30462,7 +30270,6 @@ class Select {
30462
30270
  "expandedIcon": [1, "expanded-icon"],
30463
30271
  "shape": [1],
30464
30272
  "value": [1032],
30465
- "required": [4],
30466
30273
  "isExpanded": [32],
30467
30274
  "open": [64]
30468
30275
  },
@@ -31019,10 +30826,10 @@ class Tab {
31019
30826
  }
31020
30827
  render() {
31021
30828
  const { tab, active, component } = this;
31022
- return (hAsync(Host, { key: 'c8d049c74c66a2748f3ec81d2855446acf114abe', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
30829
+ return (hAsync(Host, { key: 'cb75d0877979b3b8df8f7e1952bfa9677da1eaa5', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
31023
30830
  'ion-page': component === undefined,
31024
30831
  'tab-hidden': !active,
31025
- } }, hAsync("slot", { key: 'fba1ddc9aefb2711e13d43734f606b493ce8380a' })));
30832
+ } }, hAsync("slot", { key: '37fbb7b7a6b03eb93b1dacd2dc1025b78eb2aa6b' })));
31026
30833
  }
31027
30834
  get el() { return getElement(this); }
31028
30835
  static get watchers() { return {
@@ -31214,7 +31021,7 @@ class TabButton {
31214
31021
  'ion-activatable': true,
31215
31022
  'ion-selectable': true,
31216
31023
  'ion-focusable': true,
31217
- } }, hAsync("a", Object.assign({ key: '2f32e70232c7872b14e9ead1d1c31c98ad3577b4' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : '0' }, inheritedAttributes), hAsync("span", { key: '5c9467b16e36a526a20f460980ec45022f464c3a', class: "button-inner" }, hAsync("slot", { key: 'eefd60fac84ff01366a0f82f6ad71782ee7351e9' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '0d3452ae46e47f2d50c0198668c42e00e1a4d7bf', type: "unbounded" }))));
31024
+ } }, hAsync("a", Object.assign({ key: '1db09d861b67ff292018fb4b0dc7b85bd4677eb8' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: '4381eafcb27e8c7bb0d86d4f115ceb0caf03b9b4', class: "button-inner" }, hAsync("slot", { key: '1981135f6fbb88376c1bd923c55c70fe8b5c5159' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '0509bc7155d055d1ed710600e9cf4df135881491', type: "unbounded" }))));
31218
31025
  }
31219
31026
  get el() { return getElement(this); }
31220
31027
  static get style() { return {
@@ -31256,7 +31063,6 @@ class Tabs {
31256
31063
  this.ionTabsDidChange = createEvent(this, "ionTabsDidChange", 3);
31257
31064
  this.transitioning = false;
31258
31065
  this.onTabClicked = (ev) => {
31259
- console.log("onTabClicked");
31260
31066
  const { href, tab } = ev.detail;
31261
31067
  if (this.useRouter && href !== undefined) {
31262
31068
  const router = document.querySelector('ion-router');
@@ -31391,7 +31197,7 @@ class Tabs {
31391
31197
  return Array.from(this.el.querySelectorAll('ion-tab'));
31392
31198
  }
31393
31199
  render() {
31394
- return (hAsync(Host, { key: '6c9bb24efdbb7d2135097dbaf200b9d9a106eba0', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '7e29a9895b183269b3e293c3f70c9644324215ad', name: "top" }), hAsync("div", { key: '02d3c0685ff01dff1a0e0663aaec55552a24acd9', class: "tabs-inner" }, hAsync("slot", { key: 'e7b6928b811caae14f8981b1da65d1d487bd74e8' })), hAsync("slot", { key: 'd4464bcf631c7ff7afc96d95942a4af1fda64919', name: "bottom" })));
31200
+ return (hAsync(Host, { key: 'e01ccf6bfaccad094515be50e407399c733fc226', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '38d2d01dbfd8a08f01e6f0e27274b21d75424e37', name: "top" }), hAsync("div", { key: '7e894f0f423e2d43e1c68daff5f9f6c442fad237', class: "tabs-inner" }, hAsync("slot", { key: 'df16be529a0370a26d0adf850530b31607507c23' })), hAsync("slot", { key: '44642e1cb24c3281c43db75fd69a32fe0defe40a', name: "bottom" })));
31395
31201
  }
31396
31202
  get el() { return getElement(this); }
31397
31203
  static get style() { return IonTabsStyle0; }
@@ -32860,7 +32666,6 @@ class Toggle {
32860
32666
  this.labelPlacement = 'start';
32861
32667
  this.justify = undefined;
32862
32668
  this.alignment = undefined;
32863
- this.required = false;
32864
32669
  }
32865
32670
  disabledChanged() {
32866
32671
  if (this.gesture) {
@@ -32942,12 +32747,12 @@ class Toggle {
32942
32747
  return this.el.textContent !== '';
32943
32748
  }
32944
32749
  render() {
32945
- const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
32750
+ const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
32946
32751
  const mode = getIonMode$1(this);
32947
32752
  const value = this.getValue();
32948
32753
  const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
32949
32754
  renderHiddenInput(true, el, name, checked ? value : '', disabled);
32950
- return (hAsync(Host, { key: 'ed75573caa6e37011f1453dd7f723fb9bd8a3656', onClick: this.onClick, class: createColorClasses$1(color, {
32755
+ return (hAsync(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses$1(color, {
32951
32756
  [mode]: true,
32952
32757
  'in-item': hostContext('ion-item', el),
32953
32758
  'toggle-activated': activated,
@@ -32957,10 +32762,10 @@ class Toggle {
32957
32762
  [`toggle-alignment-${alignment}`]: alignment !== undefined,
32958
32763
  [`toggle-label-placement-${labelPlacement}`]: true,
32959
32764
  [`toggle-${rtl}`]: true,
32960
- }) }, hAsync("label", { key: '484860e2a33f4d123904edb96159f0e1972d3add', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: '360b53080aacfd99a9ff60ffb5219816bd4163ee', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), hAsync("div", { key: 'f7239fa668fe11257239ea30cf0198e4f3274f6b', class: {
32765
+ }) }, hAsync("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: 'f387b1ea840737a9737917e516834c887be99c09', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), hAsync("div", { key: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
32961
32766
  'label-text-wrapper': true,
32962
32767
  'label-text-wrapper-hidden': !this.hasLabel,
32963
- }, part: "label" }, hAsync("slot", { key: '9495a4a39889822ee68e0d89dc5a2f863d1feb3c' })), hAsync("div", { key: '55f1eb08c4b705e94fbcf02220bbe1d292f06155', class: "native-wrapper" }, this.renderToggleControl()))));
32768
+ }, part: "label" }, hAsync("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), hAsync("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
32964
32769
  }
32965
32770
  get el() { return getElement(this); }
32966
32771
  static get watchers() { return {
@@ -32983,7 +32788,6 @@ class Toggle {
32983
32788
  "labelPlacement": [1, "label-placement"],
32984
32789
  "justify": [1],
32985
32790
  "alignment": [1],
32986
- "required": [4],
32987
32791
  "activated": [32]
32988
32792
  },
32989
32793
  "$listeners$": undefined,