voyager-ionic-core 7.6.1 → 7.6.3

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 (157) hide show
  1. package/components/icon.js +15 -3
  2. package/components/index7.js +1 -1
  3. package/components/ion-datetime.js +1 -1
  4. package/components/ion-input.js +2 -2
  5. package/components/ion-refresher-content.js +10 -3
  6. package/components/ion-refresher.js +4 -183
  7. package/components/ion-select.js +2 -2
  8. package/components/ion-split-pane.js +2 -2
  9. package/components/ion-textarea.js +2 -2
  10. package/components/item.js +2 -2
  11. package/components/radio-group.js +9 -1
  12. package/components/refresher.utils.js +196 -0
  13. package/dist/cjs/{index-09471526.js → index-f52c6d38.js} +1 -1
  14. package/dist/cjs/ion-accordion_2.cjs.entry.js +1 -1
  15. package/dist/cjs/ion-back-button.cjs.entry.js +1 -1
  16. package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +1 -1
  17. package/dist/cjs/ion-button_2.cjs.entry.js +15 -3
  18. package/dist/cjs/ion-datetime_3.cjs.entry.js +2 -2
  19. package/dist/cjs/ion-fab_3.cjs.entry.js +1 -1
  20. package/dist/cjs/ion-input.cjs.entry.js +3 -3
  21. package/dist/cjs/ion-item_8.cjs.entry.js +3 -3
  22. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  23. package/dist/cjs/ion-radio_2.cjs.entry.js +9 -1
  24. package/dist/cjs/ion-refresher_2.cjs.entry.js +28 -13
  25. package/dist/cjs/ion-reorder_2.cjs.entry.js +1 -1
  26. package/dist/cjs/ion-searchbar.cjs.entry.js +1 -1
  27. package/dist/cjs/ion-select_3.cjs.entry.js +3 -3
  28. package/dist/cjs/ion-split-pane.cjs.entry.js +2 -2
  29. package/dist/cjs/ion-textarea.cjs.entry.js +2 -2
  30. package/dist/cjs/ion-toggle.cjs.entry.js +1 -1
  31. package/dist/collection/components/datetime/datetime.ios.css +3 -1
  32. package/dist/collection/components/datetime/datetime.js +1 -1
  33. package/dist/collection/components/datetime/test/basic/datetime.e2e.js +29 -0
  34. package/dist/collection/components/input/input.ios.css +20 -0
  35. package/dist/collection/components/input/input.js +1 -1
  36. package/dist/collection/components/input/input.md.css +21 -0
  37. package/dist/collection/components/input/test/slot/input.e2e.js +6 -2
  38. package/dist/collection/components/item/item.ios.css +6 -0
  39. package/dist/collection/components/item/item.md.css +6 -0
  40. package/dist/collection/components/label/test/a11y/label.e2e.js +25 -0
  41. package/dist/collection/components/modal/modal.js +1 -1
  42. package/dist/collection/components/radio/test/a11y/radio.e2e.js +16 -3
  43. package/dist/collection/components/radio/test/legacy/a11y/radio.e2e.js +15 -2
  44. package/dist/collection/components/radio-group/radio-group.js +9 -1
  45. package/dist/collection/components/range/range.js +1 -1
  46. package/dist/collection/components/refresher/refresher.js +3 -0
  47. package/dist/collection/components/refresher/refresher.utils.js +19 -11
  48. package/dist/collection/components/refresher-content/refresher-content.js +9 -3
  49. package/dist/collection/components/select/select.ios.css +20 -0
  50. package/dist/collection/components/select/select.md.css +21 -0
  51. package/dist/collection/components/select/test/slot/select.e2e.js +6 -2
  52. package/dist/collection/components/split-pane/split-pane.ios.css +9 -0
  53. package/dist/collection/components/split-pane/split-pane.md.css +9 -0
  54. package/dist/collection/components/textarea/test/slot/textarea.e2e.js +6 -2
  55. package/dist/collection/components/textarea/textarea.ios.css +20 -0
  56. package/dist/collection/components/textarea/textarea.js +1 -1
  57. package/dist/collection/components/textarea/textarea.md.css +21 -0
  58. package/dist/docs.json +33 -7
  59. package/dist/esm/{index-c132c5f1.js → index-f7dc70ba.js} +1 -1
  60. package/dist/esm/ion-accordion_2.entry.js +1 -1
  61. package/dist/esm/ion-back-button.entry.js +1 -1
  62. package/dist/esm/ion-breadcrumb_2.entry.js +1 -1
  63. package/dist/esm/ion-button_2.entry.js +15 -3
  64. package/dist/esm/ion-datetime_3.entry.js +2 -2
  65. package/dist/esm/ion-fab_3.entry.js +1 -1
  66. package/dist/esm/ion-input.entry.js +3 -3
  67. package/dist/esm/ion-item_8.entry.js +3 -3
  68. package/dist/esm/ion-menu_3.entry.js +1 -1
  69. package/dist/esm/ion-radio_2.entry.js +9 -1
  70. package/dist/esm/ion-refresher_2.entry.js +29 -14
  71. package/dist/esm/ion-reorder_2.entry.js +1 -1
  72. package/dist/esm/ion-searchbar.entry.js +1 -1
  73. package/dist/esm/ion-select_3.entry.js +3 -3
  74. package/dist/esm/ion-split-pane.entry.js +2 -2
  75. package/dist/esm/ion-textarea.entry.js +2 -2
  76. package/dist/esm/ion-toggle.entry.js +1 -1
  77. package/dist/esm-es5/ion-accordion_2.entry.js +1 -1
  78. package/dist/esm-es5/ion-back-button.entry.js +1 -1
  79. package/dist/esm-es5/ion-breadcrumb_2.entry.js +1 -1
  80. package/dist/esm-es5/ion-button_2.entry.js +1 -1
  81. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  82. package/dist/esm-es5/ion-fab_3.entry.js +1 -1
  83. package/dist/esm-es5/ion-input.entry.js +1 -1
  84. package/dist/esm-es5/ion-item_8.entry.js +1 -1
  85. package/dist/esm-es5/ion-menu_3.entry.js +1 -1
  86. package/dist/esm-es5/ion-radio_2.entry.js +1 -1
  87. package/dist/esm-es5/ion-refresher_2.entry.js +1 -1
  88. package/dist/esm-es5/ion-reorder_2.entry.js +1 -1
  89. package/dist/esm-es5/ion-searchbar.entry.js +1 -1
  90. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  91. package/dist/esm-es5/ion-split-pane.entry.js +1 -1
  92. package/dist/esm-es5/ion-textarea.entry.js +1 -1
  93. package/dist/esm-es5/ion-toggle.entry.js +1 -1
  94. package/dist/html.html-data.json +13 -1
  95. package/dist/ionic/ionic.esm.js +1 -1
  96. package/dist/ionic/p-02cb0cf0.entry.js +4 -0
  97. package/dist/ionic/{p-a42ef163.system.entry.js → p-068ec6d3.system.entry.js} +1 -1
  98. package/dist/ionic/{p-19c379da.system.entry.js → p-149567b1.system.entry.js} +1 -1
  99. package/dist/ionic/{p-11786dc7.entry.js → p-154e5e06.entry.js} +1 -1
  100. package/dist/ionic/p-19d9ceb8.system.js +1 -1
  101. package/dist/ionic/p-213e377d.system.entry.js +4 -0
  102. package/dist/ionic/{p-0dfa4ab4.system.entry.js → p-254ec7c0.system.entry.js} +2 -2
  103. package/dist/ionic/{p-ebe8bd8a.entry.js → p-2b3debd5.entry.js} +1 -1
  104. package/dist/ionic/{p-f0504446.system.entry.js → p-328107a5.system.entry.js} +1 -1
  105. package/dist/ionic/p-328b49db.system.entry.js +4 -0
  106. package/dist/ionic/{p-aee39e06.entry.js → p-3381c3f4.entry.js} +1 -1
  107. package/dist/ionic/{p-4981ea0a.system.entry.js → p-39f96ff6.system.entry.js} +1 -1
  108. package/dist/ionic/{p-10ec9af7.system.entry.js → p-43f03cf4.system.entry.js} +1 -1
  109. package/dist/ionic/p-4a3218d4.system.entry.js +4 -0
  110. package/dist/ionic/{p-2a583966.entry.js → p-4f400544.entry.js} +1 -1
  111. package/dist/ionic/p-5e0c7fdc.entry.js +4 -0
  112. package/dist/ionic/{p-529b24fb.entry.js → p-5ff99b79.entry.js} +1 -1
  113. package/dist/ionic/{p-cb8dff22.system.entry.js → p-6337e56b.system.entry.js} +1 -1
  114. package/dist/ionic/{p-2df97906.system.entry.js → p-72cb0718.system.entry.js} +1 -1
  115. package/dist/ionic/{p-4685218a.system.entry.js → p-793a10e0.system.entry.js} +1 -1
  116. package/dist/ionic/p-799da666.entry.js +4 -0
  117. package/dist/ionic/p-8dae44aa.entry.js +4 -0
  118. package/dist/ionic/p-93419ece.system.entry.js +4 -0
  119. package/dist/ionic/p-a20bb802.entry.js +4 -0
  120. package/dist/ionic/p-a4461d1c.system.entry.js +4 -0
  121. package/dist/ionic/{p-ae4b7df8.entry.js → p-aed4931c.entry.js} +1 -1
  122. package/dist/ionic/{p-cf53213c.entry.js → p-bdf71399.entry.js} +1 -1
  123. package/dist/ionic/{p-806a9810.entry.js → p-c23eff76.entry.js} +1 -1
  124. package/dist/ionic/{p-803efb5d.entry.js → p-c68dd1e0.entry.js} +1 -1
  125. package/dist/ionic/p-c8aadc98.system.entry.js +4 -0
  126. package/dist/ionic/{p-11a3973f.entry.js → p-cad1126a.entry.js} +1 -1
  127. package/dist/ionic/{p-7dc892f8.entry.js → p-d0748f6d.entry.js} +1 -1
  128. package/dist/ionic/p-da666998.system.entry.js +4 -0
  129. package/dist/ionic/p-eb246b50.entry.js +4 -0
  130. package/dist/ionic/p-ee810056.system.entry.js +4 -0
  131. package/dist/types/components/datetime/datetime.d.ts +3 -0
  132. package/dist/types/components/input/input.d.ts +3 -0
  133. package/dist/types/components/modal/modal.d.ts +3 -0
  134. package/dist/types/components/range/range.d.ts +3 -0
  135. package/dist/types/components/refresher/refresher.d.ts +3 -0
  136. package/dist/types/components/refresher/refresher.utils.d.ts +16 -0
  137. package/dist/types/components/textarea/textarea.d.ts +3 -0
  138. package/dist/types/components.d.ts +18 -10
  139. package/hydrate/index.js +51 -25
  140. package/package.json +5 -5
  141. package/dist/ionic/p-164aa69c.entry.js +0 -4
  142. package/dist/ionic/p-22827063.system.entry.js +0 -4
  143. package/dist/ionic/p-2cf21a15.system.entry.js +0 -4
  144. package/dist/ionic/p-38531958.system.entry.js +0 -4
  145. package/dist/ionic/p-469dd571.system.entry.js +0 -4
  146. package/dist/ionic/p-932f2259.system.entry.js +0 -4
  147. package/dist/ionic/p-950c05ad.entry.js +0 -4
  148. package/dist/ionic/p-96d4814f.system.entry.js +0 -4
  149. package/dist/ionic/p-9ba72fdb.system.entry.js +0 -4
  150. package/dist/ionic/p-a06501e3.entry.js +0 -4
  151. package/dist/ionic/p-b78e6a44.entry.js +0 -4
  152. package/dist/ionic/p-c5acfeb1.entry.js +0 -4
  153. package/dist/ionic/p-dc6d8647.entry.js +0 -4
  154. package/dist/ionic/p-f434bcf3.system.entry.js +0 -4
  155. /package/dist/esm-es5/{index-c132c5f1.js → index-f7dc70ba.js} +0 -0
  156. /package/dist/ionic/{p-ea96fa73.js → p-831269de.js} +0 -0
  157. /package/dist/ionic/{p-8050b9b9.system.js → p-dfb6de03.system.js} +0 -0
@@ -4,7 +4,6 @@
4
4
  import { writeTask } from "@stencil/core";
5
5
  import { createAnimation } from "../../utils/animation/animation";
6
6
  import { clamp, componentOnReady, transitionEndAsync } from "../../utils/helpers";
7
- import { isPlatform } from "../../utils/platform";
8
7
  export const getRefresherAnimationType = (contentEl) => {
9
8
  const previousSibling = contentEl.previousElementSibling;
10
9
  const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
@@ -162,6 +161,24 @@ export const translateElement = (el, value, duration = 200) => {
162
161
  };
163
162
  // Utils
164
163
  // -----------------------------
164
+ /**
165
+ * In order to use the native iOS refresher the device must support rubber band scrolling.
166
+ * As part of this, we need to exclude Desktop Safari because it has a slightly different rubber band effect that is not compatible with the native refresher in Ionic.
167
+ *
168
+ * We also need to be careful not to include devices that spoof their user agent.
169
+ * For example, when using iOS emulation in Chrome the user agent will be spoofed such that
170
+ * navigator.maxTouchPointer > 0. To work around this,
171
+ * we check to see if the apple-pay-logo is supported as a named image which is only
172
+ * true on Apple devices.
173
+ *
174
+ * We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
175
+ * for rubber band support. However, this property was removed on iPadOS and it's possible
176
+ * that this will be removed on iOS in the future too.
177
+ *
178
+ */
179
+ export const supportsRubberBandScrolling = () => {
180
+ return navigator.maxTouchPoints > 0 && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)');
181
+ };
165
182
  export const shouldUseNativeRefresher = async (referenceEl, mode) => {
166
183
  const refresherContent = referenceEl.querySelector('ion-refresher-content');
167
184
  if (!refresherContent) {
@@ -172,14 +189,5 @@ export const shouldUseNativeRefresher = async (referenceEl, mode) => {
172
189
  const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
173
190
  return (pullingSpinner !== null &&
174
191
  refreshingSpinner !== null &&
175
- /**
176
- * We use webkitOverflowScrolling for feature detection with rubber band scrolling
177
- * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
178
- * However, it will be the empty string on iOS.
179
- * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
180
- * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
181
- * set on the element, even if the platform does not support that.
182
- */
183
- ((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
184
- mode === 'md'));
192
+ ((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md'));
185
193
  };
@@ -3,11 +3,11 @@
3
3
  */
4
4
  import { Host, h } from "@stencil/core";
5
5
  import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
6
- import { isPlatform } from "../../utils/platform";
7
6
  import { sanitizeDOMString } from "../../utils/sanitization/index";
8
7
  import { arrowDown, caretBackSharp } from "ionicons/icons";
9
8
  import { config } from "../../global/config";
10
9
  import { getIonMode } from "../../global/ionic-global";
10
+ import { supportsRubberBandScrolling } from "../refresher/refresher.utils";
11
11
  import { SPINNERS } from "../spinner/spinner-configs";
12
12
  export class RefresherContent {
13
13
  constructor() {
@@ -19,9 +19,15 @@ export class RefresherContent {
19
19
  }
20
20
  componentWillLoad() {
21
21
  if (this.pullingIcon === undefined) {
22
+ /**
23
+ * The native iOS refresher uses a spinner instead of
24
+ * an icon, so we need to see if this device supports
25
+ * the native iOS refresher.
26
+ */
27
+ const hasRubberBandScrolling = supportsRubberBandScrolling();
22
28
  const mode = getIonMode(this);
23
- const overflowRefresher = this.el.style.webkitOverflowScrolling !== undefined ? 'lines' : arrowDown;
24
- this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular');
29
+ const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
30
+ this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
25
31
  }
26
32
  if (this.refreshingSpinner === undefined) {
27
33
  const mode = getIonMode(this);
@@ -628,10 +628,12 @@ button {
628
628
 
629
629
  ::slotted([slot=start]) {
630
630
  margin-inline-end: 16px;
631
+ margin-inline-start: 0;
631
632
  }
632
633
 
633
634
  ::slotted([slot=end]) {
634
635
  margin-inline-start: 16px;
636
+ margin-inline-end: 0;
635
637
  }
636
638
 
637
639
  /**
@@ -764,4 +766,22 @@ button {
764
766
 
765
767
  :host(.select-disabled) {
766
768
  opacity: 0.3;
769
+ }
770
+
771
+ /**
772
+ * Slotted buttons have a lot of default padding that can
773
+ * cause them to look misaligned from other pieces such
774
+ * as the control's label, especially when using a clear
775
+ * fill. We also make them circular to ensure that non-
776
+ * clear buttons and the focus/hover state on clear ones
777
+ * don't look too crowded.
778
+ */
779
+ ::slotted(ion-button[slot=start].button-has-icon-only),
780
+ ::slotted(ion-button[slot=end].button-has-icon-only) {
781
+ --border-radius: 50%;
782
+ --padding-start: 0;
783
+ --padding-end: 0;
784
+ --padding-top: 0;
785
+ --padding-bottom: 0;
786
+ aspect-ratio: 1;
767
787
  }
@@ -628,10 +628,12 @@ button {
628
628
 
629
629
  ::slotted([slot=start]) {
630
630
  margin-inline-end: 16px;
631
+ margin-inline-start: 0;
631
632
  }
632
633
 
633
634
  ::slotted([slot=end]) {
634
635
  margin-inline-start: 16px;
636
+ margin-inline-end: 0;
635
637
  }
636
638
 
637
639
  /**
@@ -1350,4 +1352,23 @@ button {
1350
1352
 
1351
1353
  :host(.select-disabled) {
1352
1354
  opacity: 0.38;
1355
+ }
1356
+
1357
+ /**
1358
+ * Slotted buttons have a lot of default padding that can
1359
+ * cause them to look misaligned from other pieces such
1360
+ * as the control's label, especially when using a clear
1361
+ * fill. We also make them circular to ensure that non-
1362
+ * clear buttons and the focus/hover state on clear ones
1363
+ * don't look too crowded.
1364
+ */
1365
+ ::slotted(ion-button[slot=start].button-has-icon-only),
1366
+ ::slotted(ion-button[slot=end].button-has-icon-only) {
1367
+ --border-radius: 50%;
1368
+ --padding-start: 8px;
1369
+ --padding-end: 8px;
1370
+ --padding-top: 8px;
1371
+ --padding-bottom: 8px;
1372
+ aspect-ratio: 1;
1373
+ min-height: 40px;
1353
1374
  }
@@ -9,7 +9,9 @@ configs().forEach(({ title, screenshot, config }) => {
9
9
  await page.setContent(`
10
10
  <ion-select label-placement="start" fill="solid" placeholder="Select weight" label="Weight">
11
11
  <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
12
- <ion-label slot="end">lbs</ion-label>
12
+ <ion-button slot="end" aria-label="Show/hide password">
13
+ <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
14
+ </ion-button>
13
15
  </ion-select>
14
16
  `, config);
15
17
  const select = page.locator('ion-select');
@@ -19,7 +21,9 @@ configs().forEach(({ title, screenshot, config }) => {
19
21
  await page.setContent(`
20
22
  <ion-select label-placement="floating" fill="solid" placeholder="Select weight" label="Weight">
21
23
  <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
22
- <ion-label slot="end">lbs</ion-label>
24
+ <ion-button slot="end" aria-label="Show/hide password">
25
+ <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
26
+ </ion-button>
23
27
  </ion-select>
24
28
  `, config);
25
29
  const select = page.locator('ion-select');
@@ -152,6 +152,15 @@
152
152
 
153
153
  :host(.split-pane-visible) ::slotted(.split-pane-main) {
154
154
  flex: 1;
155
+ /**
156
+ * Content can overflow outside of a router outlet
157
+ * or a nav container to allow for the translucent
158
+ * tab bar effect to work. However, this can cause
159
+ * iOS page transitions to flow outside of the container
160
+ * and overlap the menu on larger viewports. As a result,
161
+ * we disable the overflow when that is the case.
162
+ */
163
+ overflow: hidden;
155
164
  }
156
165
 
157
166
  :host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),
@@ -152,6 +152,15 @@
152
152
 
153
153
  :host(.split-pane-visible) ::slotted(.split-pane-main) {
154
154
  flex: 1;
155
+ /**
156
+ * Content can overflow outside of a router outlet
157
+ * or a nav container to allow for the translucent
158
+ * tab bar effect to work. However, this can cause
159
+ * iOS page transitions to flow outside of the container
160
+ * and overlap the menu on larger viewports. As a result,
161
+ * we disable the overflow when that is the case.
162
+ */
163
+ overflow: hidden;
155
164
  }
156
165
 
157
166
  :host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),
@@ -9,7 +9,9 @@ configs().forEach(({ title, screenshot, config }) => {
9
9
  await page.setContent(`
10
10
  <ion-textarea label-placement="start" fill="solid" value="100" label="Weight">
11
11
  <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
12
- <ion-label slot="end">lbs</ion-label>
12
+ <ion-button slot="end" aria-label="Show/hide password">
13
+ <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
14
+ </ion-button>
13
15
  </ion-textarea>
14
16
  `, config);
15
17
  const textarea = page.locator('ion-textarea');
@@ -19,7 +21,9 @@ configs().forEach(({ title, screenshot, config }) => {
19
21
  await page.setContent(`
20
22
  <ion-textarea label-placement="floating" fill="solid" value="100" label="Weight">
21
23
  <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
22
- <ion-label slot="end">lbs</ion-label>
24
+ <ion-button slot="end" aria-label="Show/hide password">
25
+ <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
26
+ </ion-button>
23
27
  </ion-textarea>
24
28
  `, config);
25
29
  const textarea = page.locator('ion-textarea');
@@ -766,10 +766,12 @@
766
766
 
767
767
  ::slotted([slot=start]) {
768
768
  margin-inline-end: 16px;
769
+ margin-inline-start: 0;
769
770
  }
770
771
 
771
772
  ::slotted([slot=end]) {
772
773
  margin-inline-start: 16px;
774
+ margin-inline-end: 0;
773
775
  }
774
776
 
775
777
  /**
@@ -964,4 +966,22 @@
964
966
  :host(.legacy-textarea) .native-textarea[disabled],
965
967
  :host(.textarea-disabled) {
966
968
  opacity: 0.3;
969
+ }
970
+
971
+ /**
972
+ * Slotted buttons have a lot of default padding that can
973
+ * cause them to look misaligned from other pieces such
974
+ * as the control's label, especially when using a clear
975
+ * fill. We also make them circular to ensure that non-
976
+ * clear buttons and the focus/hover state on clear ones
977
+ * don't look too crowded.
978
+ */
979
+ ::slotted(ion-button[slot=start].button-has-icon-only),
980
+ ::slotted(ion-button[slot=end].button-has-icon-only) {
981
+ --border-radius: 50%;
982
+ --padding-start: 0;
983
+ --padding-end: 0;
984
+ --padding-top: 0;
985
+ --padding-bottom: 0;
986
+ aspect-ratio: 1;
967
987
  }
@@ -848,7 +848,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
848
848
  "optional": true,
849
849
  "docs": {
850
850
  "tags": [],
851
- "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\"."
851
+ "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
852
852
  }
853
853
  },
854
854
  "errorText": {
@@ -766,10 +766,12 @@
766
766
 
767
767
  ::slotted([slot=start]) {
768
768
  margin-inline-end: 16px;
769
+ margin-inline-start: 0;
769
770
  }
770
771
 
771
772
  ::slotted([slot=end]) {
772
773
  margin-inline-start: 16px;
774
+ margin-inline-end: 0;
773
775
  }
774
776
 
775
777
  /**
@@ -1529,4 +1531,23 @@
1529
1531
 
1530
1532
  :host(.textarea-shape-round) {
1531
1533
  --border-radius: 16px;
1534
+ }
1535
+
1536
+ /**
1537
+ * Slotted buttons have a lot of default padding that can
1538
+ * cause them to look misaligned from other pieces such
1539
+ * as the control's label, especially when using a clear
1540
+ * fill. We also make them circular to ensure that non-
1541
+ * clear buttons and the focus/hover state on clear ones
1542
+ * don't look too crowded.
1543
+ */
1544
+ ::slotted(ion-button[slot=start].button-has-icon-only),
1545
+ ::slotted(ion-button[slot=end].button-has-icon-only) {
1546
+ --border-radius: 50%;
1547
+ --padding-start: 8px;
1548
+ --padding-end: 8px;
1549
+ --padding-top: 8px;
1550
+ --padding-bottom: 8px;
1551
+ aspect-ratio: 1;
1552
+ min-height: 40px;
1532
1553
  }
package/dist/docs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2023-12-13T16:22:14",
2
+ "timestamp": "2024-01-03T23:38:55",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.8.2",
@@ -7627,7 +7627,7 @@
7627
7627
  },
7628
7628
  "mutable": false,
7629
7629
  "reflectToAttr": false,
7630
- "docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".",
7630
+ "docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback.",
7631
7631
  "docsTags": [],
7632
7632
  "values": [
7633
7633
  {
@@ -10162,7 +10162,7 @@
10162
10162
  },
10163
10163
  "mutable": false,
10164
10164
  "reflectToAttr": false,
10165
- "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
10165
+ "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback.",
10166
10166
  "docsTags": [],
10167
10167
  "values": [
10168
10168
  {
@@ -15091,7 +15091,7 @@
15091
15091
  "mutable": false,
15092
15092
  "attr": "can-dismiss",
15093
15093
  "reflectToAttr": false,
15094
- "docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.",
15094
+ "docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback.",
15095
15095
  "docsTags": [],
15096
15096
  "default": "true",
15097
15097
  "values": [
@@ -20286,7 +20286,7 @@
20286
20286
  },
20287
20287
  "mutable": false,
20288
20288
  "reflectToAttr": false,
20289
- "docs": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.",
20289
+ "docs": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback.",
20290
20290
  "docsTags": [],
20291
20291
  "default": "(value: number): number => Math.round(value)",
20292
20292
  "values": [
@@ -20620,7 +20620,12 @@
20620
20620
  "encapsulation": "none",
20621
20621
  "tag": "ion-refresher",
20622
20622
  "docs": "",
20623
- "docsTags": [],
20623
+ "docsTags": [
20624
+ {
20625
+ "name": "virtualProp",
20626
+ "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
20627
+ }
20628
+ ],
20624
20629
  "usage": {},
20625
20630
  "props": [
20626
20631
  {
@@ -20667,6 +20672,27 @@
20667
20672
  "optional": false,
20668
20673
  "required": false
20669
20674
  },
20675
+ {
20676
+ "name": "mode",
20677
+ "type": "\"ios\" | \"md\"",
20678
+ "mutable": false,
20679
+ "attr": "mode",
20680
+ "reflectToAttr": false,
20681
+ "docs": "The mode determines which platform styles to use.",
20682
+ "docsTags": [],
20683
+ "values": [
20684
+ {
20685
+ "value": "ios",
20686
+ "type": "string"
20687
+ },
20688
+ {
20689
+ "value": "md",
20690
+ "type": "string"
20691
+ }
20692
+ ],
20693
+ "optional": true,
20694
+ "required": false
20695
+ },
20670
20696
  {
20671
20697
  "name": "pullFactor",
20672
20698
  "type": "number",
@@ -26355,7 +26381,7 @@
26355
26381
  },
26356
26382
  "mutable": false,
26357
26383
  "reflectToAttr": false,
26358
- "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
26384
+ "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback.",
26359
26385
  "docsTags": [],
26360
26386
  "values": [
26361
26387
  {
@@ -1,7 +1,7 @@
1
1
  /*!
2
2
  * (C) Ionic http://ionicframework.com - MIT License
3
3
  */
4
- /* Ionicons v7.2.1, ES Modules */
4
+ /* Ionicons v7.2.2, ES Modules */
5
5
  const arrowBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='square' stroke-miterlimit='10' stroke-width='48' d='M244 400L100 256l144-144M120 256h292' class='ionicon-fill-none'/></svg>";
6
6
  const arrowDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 268l144 144 144-144M256 392V100' class='ionicon-fill-none'/></svg>";
7
7
  const caretBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M368 64L144 256l224 192V64z'/></svg>";
@@ -3,7 +3,7 @@
3
3
  */
4
4
  import { r as registerInstance, h, H as Host, f as getElement, d as createEvent } from './index-b7d870cf.js';
5
5
  import { r as raf, t as transitionEndAsync, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers-ae653409.js';
6
- import { l as chevronDown } from './index-c132c5f1.js';
6
+ import { l as chevronDown } from './index-f7dc70ba.js';
7
7
  import { c as config, b as getIonMode } from './ionic-global-1f99b929.js';
8
8
  import { p as printIonWarning } from './index-9b0d46f4.js';
9
9
 
@@ -4,7 +4,7 @@
4
4
  import { r as registerInstance, h, H as Host, f as getElement } from './index-b7d870cf.js';
5
5
  import { i as inheritAriaAttributes } from './helpers-ae653409.js';
6
6
  import { o as openURL, c as createColorClasses, h as hostContext } from './theme-01f3f29c.js';
7
- import { c as chevronBack, a as arrowBackSharp } from './index-c132c5f1.js';
7
+ import { c as chevronBack, a as arrowBackSharp } from './index-f7dc70ba.js';
8
8
  import { c as config, b as getIonMode } from './ionic-global-1f99b929.js';
9
9
 
10
10
  const backButtonIosCss = ":host{--background:transparent;--color-focused:currentColor;--color-hover:currentColor;--icon-margin-top:0;--icon-margin-bottom:0;--icon-padding-top:0;--icon-padding-end:0;--icon-padding-bottom:0;--icon-padding-start:0;--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--min-width:auto;--min-height:auto;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--opacity:1;--ripple-color:currentColor;--transition:background-color, opacity 100ms linear;display:none;min-width:var(--min-width);min-height:var(--min-height);color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-kerning:none;font-kerning:none}ion-ripple-effect{color:var(--ripple-color)}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.show-back-button){display:block}:host(.back-button-disabled){cursor:default;opacity:0.5;pointer-events:none}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;opacity:var(--opacity);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}ion-icon{-webkit-padding-start:var(--icon-padding-start);padding-inline-start:var(--icon-padding-start);-webkit-padding-end:var(--icon-padding-end);padding-inline-end:var(--icon-padding-end);padding-top:var(--icon-padding-top);padding-bottom:var(--icon-padding-bottom);-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom);display:inherit;font-size:var(--icon-font-size);font-weight:var(--icon-font-weight);pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-hover:transparent;--background-hover-opacity:1;--background-focused:currentColor;--background-focused-opacity:.1;--border-radius:4px;--color:var(--ion-color-primary, #3880ff);--icon-margin-end:1px;--icon-margin-start:-4px;--icon-font-size:1.6em;--min-height:32px;font-size:clamp(17px, 1.0625rem, 21.998px)}.button-native{-webkit-transform:translateZ(0);transform:translateZ(0);overflow:visible;z-index:99}:host(.ion-activated) .button-native{opacity:0.4}@media (any-hover: hover){:host(:hover){opacity:0.6}}";
@@ -4,7 +4,7 @@
4
4
  import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-b7d870cf.js';
5
5
  import { i as inheritAriaAttributes } from './helpers-ae653409.js';
6
6
  import { o as openURL, c as createColorClasses, h as hostContext } from './theme-01f3f29c.js';
7
- import { m as chevronForwardOutline, n as ellipsisHorizontal } from './index-c132c5f1.js';
7
+ import { m as chevronForwardOutline, n as ellipsisHorizontal } from './index-f7dc70ba.js';
8
8
  import { b as getIonMode } from './ionic-global-1f99b929.js';
9
9
 
10
10
  const breadcrumbIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;align-items:center;color:var(--color);font-size:1rem;font-weight:400;line-height:1.5}.breadcrumb-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;outline:none;background:inherit}:host(.breadcrumb-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.breadcrumb-active){color:var(--color-active)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .breadcrumb-native{background:var(--background-focused)}@media (any-hover: hover){:host(.ion-activatable:hover){color:var(--color-hover)}:host(.ion-activatable.in-breadcrumbs-color:hover),:host(.ion-activatable.ion-color:hover){color:var(--ion-color-shade)}}.breadcrumb-separator{display:-ms-inline-flexbox;display:inline-flex}:host(.breadcrumb-collapsed) .breadcrumb-native{display:none}:host(.in-breadcrumbs-color),:host(.in-breadcrumbs-color.breadcrumb-active){color:var(--ion-color-base)}:host(.in-breadcrumbs-color) .breadcrumb-separator{color:var(--ion-color-base)}:host(.ion-color){color:var(--ion-color-base)}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumb-separator{color:rgba(var(--ion-color-contrast-rgb), 0.8)}:host(.in-toolbar-color.breadcrumb-active){color:var(--ion-color-contrast)}.breadcrumbs-collapsed-indicator{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:14px;margin-inline-end:14px;margin-top:0;margin-bottom:0;display:-ms-flexbox;display:flex;-ms-flex:1 1 100%;flex:1 1 100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:32px;height:18px;border:0;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.breadcrumbs-collapsed-indicator ion-icon{margin-top:1px;font-size:1.375rem}:host{--color:var(--ion-color-step-850, #2d4665);--color-active:var(--ion-text-color, #03060b);--color-hover:var(--ion-text-color, #03060b);--color-focused:var(--color-active);--background-focused:var(--ion-color-step-50, rgba(233, 237, 243, 0.7));font-size:clamp(16px, 1rem, 22px)}:host(.breadcrumb-active){font-weight:600}.breadcrumb-native{border-radius:4px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:5px;padding-bottom:5px;border:1px solid transparent}:host(.ion-focused) .breadcrumb-native{border-radius:8px}:host(.in-breadcrumbs-color.ion-focused) .breadcrumb-native,:host(.ion-color.ion-focused) .breadcrumb-native{background:rgba(var(--ion-color-base-rgb), 0.1);color:var(--ion-color-base)}:host(.ion-focused) ::slotted(ion-icon),:host(.in-breadcrumbs-color.ion-focused) ::slotted(ion-icon),:host(.ion-color.ion-focused) ::slotted(ion-icon){color:var(--ion-color-step-750, #445b78)}.breadcrumb-separator{color:var(--ion-color-step-550, #73849a)}::slotted(ion-icon){color:var(--ion-color-step-400, #92a0b3);font-size:min(1.125rem, 21.6px)}::slotted(ion-icon[slot=start]){-webkit-margin-end:8px;margin-inline-end:8px}::slotted(ion-icon[slot=end]){-webkit-margin-start:8px;margin-inline-start:8px}:host(.breadcrumb-active) ::slotted(ion-icon){color:var(--ion-color-step-850, #242d39)}.breadcrumbs-collapsed-indicator{border-radius:4px;background:var(--ion-color-step-100, #e9edf3);color:var(--ion-color-step-550, #73849a)}.breadcrumbs-collapsed-indicator:hover{opacity:0.45}.breadcrumbs-collapsed-indicator:focus{background:var(--ion-color-step-150, #d9e0ea)}.breadcrumbs-collapsed-indicator ion-icon{font-size:min(1.375rem, 22px)}";
@@ -28,7 +28,7 @@ const getUrl = (i) => {
28
28
  }
29
29
  url = getName(i.name, i.icon, i.mode, i.ios, i.md);
30
30
  if (url) {
31
- return getNamedUrl(url);
31
+ return getNamedUrl(url, i);
32
32
  }
33
33
  if (i.icon) {
34
34
  url = getSrc(i.icon);
@@ -42,12 +42,24 @@ const getUrl = (i) => {
42
42
  }
43
43
  return null;
44
44
  };
45
- const getNamedUrl = (iconName) => {
45
+ const getNamedUrl = (iconName, iconEl) => {
46
46
  const url = getIconMap().get(iconName);
47
47
  if (url) {
48
48
  return url;
49
49
  }
50
- return getAssetPath(`svg/${iconName}.svg`);
50
+ try {
51
+ return getAssetPath(`svg/${iconName}.svg`);
52
+ }
53
+ catch (e) {
54
+ /**
55
+ * In the custom elements build version of ionicons, referencing an icon
56
+ * by name will throw an invalid URL error because the asset path is not defined.
57
+ * This catches that error and logs something that is more developer-friendly.
58
+ * We also include a reference to the ion-icon element so developers can
59
+ * figure out which instance of ion-icon needs to be updated.
60
+ */
61
+ console.warn(`[Ionicons Warning]: Could not load icon with name "${iconName}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component.`, iconEl);
62
+ }
51
63
  };
52
64
  const getName = (iconName, icon, mode, ios, md) => {
53
65
  // default to "md" if somehow the mode wasn't set
@@ -7,7 +7,7 @@ import { r as raf, d as renderHiddenInput, g as getElementRoot, l as clamp } fro
7
7
  import { a as printIonError, p as printIonWarning } from './index-9b0d46f4.js';
8
8
  import { i as isRTL } from './dir-babeabeb.js';
9
9
  import { c as createColorClasses, g as getClassMap } from './theme-01f3f29c.js';
10
- import { c as chevronBack, o as chevronForward, l as chevronDown, p as caretUpSharp, q as caretDownSharp } from './index-c132c5f1.js';
10
+ import { c as chevronBack, o as chevronForward, l as chevronDown, p as caretUpSharp, q as caretDownSharp } from './index-f7dc70ba.js';
11
11
  import { b as getIonMode } from './ionic-global-1f99b929.js';
12
12
  import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getEndOfWeek, j as getStartOfWeek, k as getPreviousDay, l as getNextDay, m as getPreviousWeek, n as getNextWeek, p as parseMinParts, o as parseMaxParts, q as parseDate, w as warnIfValueOutOfBounds, r as convertToArrayOfNumbers, s as convertDataToISO, t as getToday, u as getClosestValidDate, x as getNumDaysInMonth, y as getCombinedDateColumnData, z as getMonthColumnData, A as getDayColumnData, B as getYearColumnData, C as isMonthFirstLocale, D as getTimeColumnsData, E as isLocaleDayPeriodRTL, F as getDaysOfWeek, G as getMonthAndYear, H as getDaysOfMonth, I as generateMonths, J as getHourCycle, K as getLocalizedTime, L as getMonthAndDay, M as formatValue, N as getNextYear, O as getPreviousYear, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-775093f5.js';
13
13
  import { c as createLockController } from './lock-controller-316928be.js';
@@ -186,7 +186,7 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
186
186
  return undefined;
187
187
  };
188
188
 
189
- const datetimeIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year:dir(rtl)) .calendar-next-prev,:host(.show-month-and-year:dir(rtl)) .calendar-days-of-week,:host(.show-month-and-year:dir(rtl)) .calendar-body,:host(.show-month-and-year:dir(rtl)) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:auto}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #666666)}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, #cccccc);font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}:host .calendar-action-buttons ion-item{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:min(1rem, 25.6px);font-weight:600}:host .calendar-action-buttons ion-item ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, #b3b3b3);font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{color:var(--ion-color-contrast)}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, #cccccc)}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons{width:100%}";
189
+ const datetimeIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year:dir(rtl)) .calendar-next-prev,:host(.show-month-and-year:dir(rtl)) .calendar-days-of-week,:host(.show-month-and-year:dir(rtl)) .calendar-body,:host(.show-month-and-year:dir(rtl)) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:auto}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #666666)}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, #cccccc);font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}:host .calendar-action-buttons ion-item{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:min(1rem, 25.6px);font-weight:600}:host .calendar-action-buttons ion-item ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, #b3b3b3);font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, #cccccc)}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons{width:100%}";
190
190
 
191
191
  const datetimeMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year:dir(rtl)) .calendar-next-prev,:host(.show-month-and-year:dir(rtl)) .calendar-days-of-week,:host(.show-month-and-year:dir(rtl)) .calendar-body,:host(.show-month-and-year:dir(rtl)) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:auto}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .datetime-calendar .calendar-action-buttons ion-item{--padding-start:20px}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, #595959)}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, gray);font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, #595959)}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}";
192
192
 
@@ -5,7 +5,7 @@ import { r as registerInstance, h, H as Host, f as getElement, d as createEvent
5
5
  import { b as getIonMode } from './ionic-global-1f99b929.js';
6
6
  import { i as inheritAriaAttributes } from './helpers-ae653409.js';
7
7
  import { h as hostContext, o as openURL, c as createColorClasses } from './theme-01f3f29c.js';
8
- import { t as close } from './index-c132c5f1.js';
8
+ import { t as close } from './index-f7dc70ba.js';
9
9
 
10
10
  const fabCss = ":host{position:absolute;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;z-index:999}:host(.fab-horizontal-center){left:0px;right:0px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}:host(.fab-horizontal-start){left:calc(10px + var(--ion-safe-area-left, 0px));}:host-context([dir=rtl]):host(.fab-horizontal-start),:host-context([dir=rtl]).fab-horizontal-start{right:calc(10px + var(--ion-safe-area-right, 0px));left:unset}@supports selector(:dir(rtl)){:host(.fab-horizontal-start:dir(rtl)){right:calc(10px + var(--ion-safe-area-right, 0px));left:unset}}:host(.fab-horizontal-end){right:calc(10px + var(--ion-safe-area-right, 0px));}:host-context([dir=rtl]):host(.fab-horizontal-end),:host-context([dir=rtl]).fab-horizontal-end{left:calc(10px + var(--ion-safe-area-left, 0px));right:unset}@supports selector(:dir(rtl)){:host(.fab-horizontal-end:dir(rtl)){left:calc(10px + var(--ion-safe-area-left, 0px));right:unset}}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:0}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-top:calc((-100% + 16px) / 2)}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-top:calc(50% + 10px)}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:0}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-bottom:calc((-100% + 16px) / 2)}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-bottom:calc(50% + 10px)}:host(.fab-vertical-center){top:0px;bottom:0px;margin-top:auto;margin-bottom:auto}";
11
11