@ionic/core 7.5.8-dev.11702398696.1ab62ea9 → 7.5.8-dev.11703088210.14a72b83

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 (485) hide show
  1. package/components/backdrop.js +12 -0
  2. package/components/data.js +1 -1
  3. package/components/gesture-controller.js +1 -1
  4. package/components/ion-content.js +1 -1
  5. package/components/ion-datetime.js +64 -40
  6. package/components/ion-input.js +0 -2
  7. package/components/ion-picker-column-internal.d.ts +11 -0
  8. package/components/ion-picker-column-internal.js +9 -0
  9. package/components/ion-picker-column.js +2 -2
  10. package/components/{ion-picker-legacy.d.ts → ion-picker-internal.d.ts} +4 -4
  11. package/components/ion-picker-internal.js +9 -0
  12. package/components/ion-picker.js +309 -1
  13. package/components/ion-refresher-content.js +10 -3
  14. package/components/ion-refresher.js +4 -183
  15. package/components/ion-searchbar.js +0 -2
  16. package/components/ion-textarea.js +0 -2
  17. package/components/overlays.js +4 -11
  18. package/components/picker-column-internal.js +390 -0
  19. package/components/picker-column.js +322 -351
  20. package/components/{picker.js → picker-internal.js} +22 -29
  21. package/components/refresher.utils.js +196 -0
  22. package/dist/cjs/{app-globals-0af482c7.js → app-globals-28656db1.js} +1 -1
  23. package/dist/cjs/{button-active-9d7e0640.js → button-active-75b38d77.js} +2 -2
  24. package/dist/cjs/{data-e7526b58.js → data-36b9094e.js} +1 -1
  25. package/dist/cjs/{gesture-controller-9436f482.js → gesture-controller-c40c045a.js} +0 -1
  26. package/dist/cjs/{index-5cbb20f9.js → index-097270a3.js} +1 -1
  27. package/dist/cjs/{index-bbb4336c.js → index-b0102f48.js} +1 -39
  28. package/dist/cjs/{index-d4c2e02c.js → index-cb3e0ab7.js} +3 -3
  29. package/dist/cjs/{index-ee07ed59.js → index-d1b59ffa.js} +1 -1
  30. package/dist/cjs/index.cjs.js +9 -9
  31. package/dist/cjs/ion-accordion_2.cjs.entry.js +2 -2
  32. package/dist/cjs/ion-action-sheet.cjs.entry.js +6 -6
  33. package/dist/cjs/ion-alert.cjs.entry.js +6 -6
  34. package/dist/cjs/ion-app_8.cjs.entry.js +6 -6
  35. package/dist/cjs/ion-avatar_3.cjs.entry.js +2 -2
  36. package/dist/cjs/ion-back-button.cjs.entry.js +2 -2
  37. package/dist/cjs/ion-backdrop.cjs.entry.js +14 -2
  38. package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +2 -2
  39. package/dist/cjs/ion-button_2.cjs.entry.js +2 -2
  40. package/dist/cjs/ion-card_5.cjs.entry.js +2 -2
  41. package/dist/cjs/ion-checkbox.cjs.entry.js +2 -2
  42. package/dist/cjs/ion-chip.cjs.entry.js +2 -2
  43. package/dist/cjs/ion-col_3.cjs.entry.js +2 -2
  44. package/dist/cjs/ion-datetime-button.cjs.entry.js +3 -3
  45. package/dist/cjs/ion-datetime_3.cjs.entry.js +58 -38
  46. package/dist/cjs/ion-fab_3.cjs.entry.js +2 -2
  47. package/dist/cjs/ion-img.cjs.entry.js +2 -2
  48. package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js +2 -2
  49. package/dist/cjs/ion-input.cjs.entry.js +2 -4
  50. package/dist/cjs/ion-item-option_3.cjs.entry.js +3 -3
  51. package/dist/cjs/ion-item_8.cjs.entry.js +2 -2
  52. package/dist/cjs/ion-loading.cjs.entry.js +3 -4
  53. package/dist/cjs/ion-menu_3.cjs.entry.js +6 -6
  54. package/dist/cjs/ion-modal.cjs.entry.js +6 -6
  55. package/dist/cjs/ion-nav_2.cjs.entry.js +4 -4
  56. package/dist/cjs/{ion-picker-column.cjs.entry.js → ion-picker-column-internal.cjs.entry.js} +89 -106
  57. package/dist/cjs/{ion-picker.cjs.entry.js → ion-picker-internal.cjs.entry.js} +20 -27
  58. package/dist/cjs/ion-popover.cjs.entry.js +4 -5
  59. package/dist/cjs/ion-progress-bar.cjs.entry.js +2 -2
  60. package/dist/cjs/ion-radio_2.cjs.entry.js +2 -2
  61. package/dist/cjs/ion-range.cjs.entry.js +3 -3
  62. package/dist/cjs/ion-refresher_2.cjs.entry.js +32 -17
  63. package/dist/cjs/ion-reorder_2.cjs.entry.js +3 -3
  64. package/dist/cjs/ion-ripple-effect.cjs.entry.js +2 -2
  65. package/dist/cjs/ion-route_4.cjs.entry.js +2 -2
  66. package/dist/cjs/ion-searchbar.cjs.entry.js +2 -4
  67. package/dist/cjs/ion-segment_2.cjs.entry.js +3 -3
  68. package/dist/cjs/ion-select_3.cjs.entry.js +3 -4
  69. package/dist/cjs/ion-spinner.cjs.entry.js +2 -2
  70. package/dist/cjs/ion-split-pane.cjs.entry.js +2 -2
  71. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +2 -2
  72. package/dist/cjs/ion-tab_2.cjs.entry.js +1 -1
  73. package/dist/cjs/ion-text.cjs.entry.js +2 -2
  74. package/dist/cjs/ion-textarea.cjs.entry.js +2 -4
  75. package/dist/cjs/ion-toast.cjs.entry.js +3 -4
  76. package/dist/cjs/ion-toggle.cjs.entry.js +3 -3
  77. package/dist/cjs/{ionic-global-f4a2093b.js → ionic-global-62510d64.js} +1 -1
  78. package/dist/cjs/ionic.cjs.js +5 -5
  79. package/dist/cjs/{ios.transition-a4ffb5a2.js → ios.transition-d9c0e4fb.js} +2 -2
  80. package/dist/cjs/loader.cjs.js +4 -4
  81. package/dist/cjs/{md.transition-292abe1c.js → md.transition-4fac8a87.js} +2 -2
  82. package/dist/cjs/{overlays-e8e05b0e.js → overlays-b1471172.js} +5 -12
  83. package/dist/cjs/{status-tap-415acac6.js → status-tap-0aa8e1f2.js} +1 -1
  84. package/dist/cjs/{swipe-back-b8f2330b.js → swipe-back-2a858bbd.js} +2 -2
  85. package/dist/collection/collection-manifest.json +7 -8
  86. package/dist/collection/components/backdrop/backdrop.js +12 -0
  87. package/dist/collection/components/content/content.css +4 -0
  88. package/dist/collection/components/datetime/datetime.ios.css +37 -91
  89. package/dist/collection/components/datetime/datetime.js +36 -24
  90. package/dist/collection/components/datetime/datetime.md.css +37 -96
  91. package/dist/collection/components/datetime/test/a11y/datetime.e2e.js +1 -1
  92. package/dist/collection/components/datetime/test/a11y/datetime.spec.js +9 -6
  93. package/dist/collection/components/datetime/test/basic/datetime.e2e.js +0 -10
  94. package/dist/collection/components/datetime/test/datetime.e2e.js +2 -2
  95. package/dist/collection/components/datetime/test/disabled/datetime.spec.js +4 -4
  96. package/dist/collection/components/datetime/test/locale/datetime.e2e.js +2 -2
  97. package/dist/collection/components/datetime/test/minmax/datetime.e2e.js +6 -6
  98. package/dist/collection/components/datetime/test/month-year-picker/datetime.e2e.js +1 -1
  99. package/dist/collection/components/datetime/test/prefer-wheel/datetime.e2e.js +41 -43
  100. package/dist/collection/components/datetime/test/presentation/datetime.e2e.js +1 -1
  101. package/dist/collection/components/datetime/test/readonly/datetime.e2e.js +4 -4
  102. package/dist/collection/components/datetime/test/values/datetime.e2e.js +12 -15
  103. package/dist/collection/components/datetime/utils/data.js +1 -1
  104. package/dist/collection/components/input/input.js +2 -4
  105. package/dist/collection/components/picker/picker.ios.css +211 -112
  106. package/dist/collection/components/picker/picker.js +743 -468
  107. package/dist/collection/components/picker/picker.md.css +198 -108
  108. package/dist/collection/components/picker/test/basic/picker.e2e.js +13 -99
  109. package/dist/collection/components/{picker-legacy → picker}/test/is-open/picker.e2e.js +4 -4
  110. package/dist/collection/components/{picker-legacy → picker}/test/picker-id.spec.js +5 -5
  111. package/dist/collection/components/{picker-legacy → picker}/test/trigger/picker.e2e.js +1 -1
  112. package/dist/collection/components/picker-column/picker-column.js +335 -497
  113. package/dist/collection/components/{picker-legacy-column → picker-column}/test/picker-column-aria.spec.js +3 -3
  114. package/dist/collection/components/{picker-legacy-column → picker-column}/test/picker-column-dynamic.spec.js +2 -2
  115. package/dist/collection/components/{picker-legacy-column → picker-column}/test/picker-column.spec.js +2 -2
  116. package/dist/collection/components/{picker-legacy-column → picker-column}/test/standalone/picker-column.e2e.js +3 -3
  117. package/dist/collection/components/{picker-column-option/picker-column-option.md.css → picker-column-internal/picker-column-internal.ios.css} +53 -6
  118. package/dist/collection/components/picker-column-internal/picker-column-internal.js +565 -0
  119. package/dist/collection/components/{picker-column/picker-column.css → picker-column-internal/picker-column-internal.md.css} +83 -96
  120. package/dist/collection/components/{picker-column/test/basic/picker-column.e2e.js → picker-column-internal/test/basic/picker-column-internal.e2e.js} +8 -8
  121. package/dist/collection/components/picker-column-internal/test/disabled/picker-column-internal.e2e.js +162 -0
  122. package/dist/collection/components/{picker-legacy/picker.md.css → picker-internal/picker-internal.ios.css} +100 -192
  123. package/dist/collection/components/picker-internal/picker-internal.js +544 -0
  124. package/dist/collection/components/{picker-legacy/picker.ios.css → picker-internal/picker-internal.md.css} +98 -207
  125. package/dist/collection/components/{picker/test/a11y/picker.e2e.js → picker-internal/test/a11y/picker-internal.e2e.js} +2 -2
  126. package/dist/collection/components/picker-internal/test/basic/picker-internal.e2e.js +118 -0
  127. package/dist/collection/components/{picker/test/keyboard-entry/picker.e2e.js → picker-internal/test/keyboard-entry/picker-internal.e2e.js} +32 -63
  128. package/dist/collection/components/refresher/refresher.utils.js +19 -11
  129. package/dist/collection/components/refresher-content/refresher-content.js +9 -3
  130. package/dist/collection/components/searchbar/searchbar.js +1 -3
  131. package/dist/collection/components/textarea/textarea.js +2 -4
  132. package/dist/collection/utils/gesture/gesture-controller.js +1 -1
  133. package/dist/collection/utils/overlays.js +4 -11
  134. package/dist/docs.json +47 -505
  135. package/dist/esm/{app-globals-722340c4.js → app-globals-c23144fc.js} +1 -1
  136. package/dist/esm/{button-active-ed9d848c.js → button-active-7013b5a1.js} +2 -2
  137. package/dist/esm/{data-4b9508c9.js → data-f5c75b4e.js} +1 -1
  138. package/dist/esm/{gesture-controller-314a54f6.js → gesture-controller-1bf57181.js} +1 -1
  139. package/dist/esm/{index-39782642.js → index-2cf77112.js} +2 -2
  140. package/dist/esm/{index-08d686eb.js → index-39329c6f.js} +1 -39
  141. package/dist/esm/{index-80492ed3.js → index-7a818ed3.js} +1 -1
  142. package/dist/esm/{index-d8817fb0.js → index-bebaae5d.js} +3 -3
  143. package/dist/esm/index.js +9 -9
  144. package/dist/esm/ion-accordion_2.entry.js +2 -2
  145. package/dist/esm/ion-action-sheet.entry.js +6 -6
  146. package/dist/esm/ion-alert.entry.js +6 -6
  147. package/dist/esm/ion-app_8.entry.js +6 -6
  148. package/dist/esm/ion-avatar_3.entry.js +2 -2
  149. package/dist/esm/ion-back-button.entry.js +2 -2
  150. package/dist/esm/ion-backdrop.entry.js +14 -2
  151. package/dist/esm/ion-breadcrumb_2.entry.js +2 -2
  152. package/dist/esm/ion-button_2.entry.js +2 -2
  153. package/dist/esm/ion-card_5.entry.js +2 -2
  154. package/dist/esm/ion-checkbox.entry.js +2 -2
  155. package/dist/esm/ion-chip.entry.js +2 -2
  156. package/dist/esm/ion-col_3.entry.js +2 -2
  157. package/dist/esm/ion-datetime-button.entry.js +3 -3
  158. package/dist/esm/ion-datetime_3.entry.js +57 -37
  159. package/dist/esm/ion-fab_3.entry.js +2 -2
  160. package/dist/esm/ion-img.entry.js +2 -2
  161. package/dist/esm/ion-infinite-scroll_2.entry.js +2 -2
  162. package/dist/esm/ion-input.entry.js +2 -4
  163. package/dist/esm/ion-item-option_3.entry.js +3 -3
  164. package/dist/esm/ion-item_8.entry.js +2 -2
  165. package/dist/esm/ion-loading.entry.js +3 -4
  166. package/dist/esm/ion-menu_3.entry.js +6 -6
  167. package/dist/esm/ion-modal.entry.js +6 -6
  168. package/dist/esm/ion-nav_2.entry.js +4 -4
  169. package/dist/esm/{ion-picker-column.entry.js → ion-picker-column-internal.entry.js} +89 -106
  170. package/dist/esm/{ion-picker.entry.js → ion-picker-internal.entry.js} +20 -27
  171. package/dist/esm/ion-popover.entry.js +4 -5
  172. package/dist/esm/ion-progress-bar.entry.js +2 -2
  173. package/dist/esm/ion-radio_2.entry.js +2 -2
  174. package/dist/esm/ion-range.entry.js +3 -3
  175. package/dist/esm/ion-refresher_2.entry.js +32 -17
  176. package/dist/esm/ion-reorder_2.entry.js +3 -3
  177. package/dist/esm/ion-ripple-effect.entry.js +2 -2
  178. package/dist/esm/ion-route_4.entry.js +2 -2
  179. package/dist/esm/ion-searchbar.entry.js +2 -4
  180. package/dist/esm/ion-segment_2.entry.js +3 -3
  181. package/dist/esm/ion-select_3.entry.js +3 -4
  182. package/dist/esm/ion-spinner.entry.js +2 -2
  183. package/dist/esm/ion-split-pane.entry.js +2 -2
  184. package/dist/esm/ion-tab-bar_2.entry.js +2 -2
  185. package/dist/esm/ion-tab_2.entry.js +1 -1
  186. package/dist/esm/ion-text.entry.js +2 -2
  187. package/dist/esm/ion-textarea.entry.js +2 -4
  188. package/dist/esm/ion-toast.entry.js +3 -4
  189. package/dist/esm/ion-toggle.entry.js +3 -3
  190. package/dist/esm/{ionic-global-c0cda98e.js → ionic-global-6c78e871.js} +1 -1
  191. package/dist/esm/ionic.js +6 -6
  192. package/dist/esm/{ios.transition-fd16bec1.js → ios.transition-daa373e9.js} +2 -2
  193. package/dist/esm/loader.js +5 -5
  194. package/dist/esm/{md.transition-94ac93e1.js → md.transition-91c3d3cc.js} +2 -2
  195. package/dist/esm/{overlays-fbc5cab5.js → overlays-64e67e2c.js} +5 -12
  196. package/dist/esm/{status-tap-2b93b1b5.js → status-tap-9dd45200.js} +1 -1
  197. package/dist/esm/{swipe-back-a8ca7f93.js → swipe-back-a6f386fc.js} +2 -2
  198. package/dist/esm-es5/app-globals-c23144fc.js +4 -0
  199. package/dist/esm-es5/{button-active-ed9d848c.js → button-active-7013b5a1.js} +1 -1
  200. package/dist/esm-es5/{gesture-controller-314a54f6.js → gesture-controller-1bf57181.js} +1 -1
  201. package/dist/esm-es5/{index-39782642.js → index-2cf77112.js} +1 -1
  202. package/dist/esm-es5/{index-08d686eb.js → index-39329c6f.js} +1 -1
  203. package/dist/esm-es5/{index-80492ed3.js → index-7a818ed3.js} +1 -1
  204. package/dist/esm-es5/{index-d8817fb0.js → index-bebaae5d.js} +1 -1
  205. package/dist/esm-es5/index.js +1 -1
  206. package/dist/esm-es5/ion-accordion_2.entry.js +1 -1
  207. package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
  208. package/dist/esm-es5/ion-alert.entry.js +1 -1
  209. package/dist/esm-es5/ion-app_8.entry.js +1 -1
  210. package/dist/esm-es5/ion-avatar_3.entry.js +1 -1
  211. package/dist/esm-es5/ion-back-button.entry.js +1 -1
  212. package/dist/esm-es5/ion-backdrop.entry.js +1 -1
  213. package/dist/esm-es5/ion-breadcrumb_2.entry.js +1 -1
  214. package/dist/esm-es5/ion-button_2.entry.js +1 -1
  215. package/dist/esm-es5/ion-card_5.entry.js +1 -1
  216. package/dist/esm-es5/ion-checkbox.entry.js +1 -1
  217. package/dist/esm-es5/ion-chip.entry.js +1 -1
  218. package/dist/esm-es5/ion-col_3.entry.js +1 -1
  219. package/dist/esm-es5/ion-datetime-button.entry.js +1 -1
  220. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  221. package/dist/esm-es5/ion-fab_3.entry.js +1 -1
  222. package/dist/esm-es5/ion-img.entry.js +1 -1
  223. package/dist/esm-es5/ion-infinite-scroll_2.entry.js +1 -1
  224. package/dist/esm-es5/ion-input.entry.js +1 -1
  225. package/dist/esm-es5/ion-item-option_3.entry.js +1 -1
  226. package/dist/esm-es5/ion-item_8.entry.js +1 -1
  227. package/dist/esm-es5/ion-loading.entry.js +1 -1
  228. package/dist/esm-es5/ion-menu_3.entry.js +1 -1
  229. package/dist/esm-es5/ion-modal.entry.js +1 -1
  230. package/dist/esm-es5/ion-nav_2.entry.js +1 -1
  231. package/dist/esm-es5/ion-picker-column-internal.entry.js +4 -0
  232. package/dist/esm-es5/ion-picker-internal.entry.js +4 -0
  233. package/dist/esm-es5/ion-popover.entry.js +1 -1
  234. package/dist/esm-es5/ion-progress-bar.entry.js +1 -1
  235. package/dist/esm-es5/ion-radio_2.entry.js +1 -1
  236. package/dist/esm-es5/ion-range.entry.js +1 -1
  237. package/dist/esm-es5/ion-refresher_2.entry.js +1 -1
  238. package/dist/esm-es5/ion-reorder_2.entry.js +1 -1
  239. package/dist/esm-es5/ion-ripple-effect.entry.js +1 -1
  240. package/dist/esm-es5/ion-route_4.entry.js +1 -1
  241. package/dist/esm-es5/ion-searchbar.entry.js +1 -1
  242. package/dist/esm-es5/ion-segment_2.entry.js +1 -1
  243. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  244. package/dist/esm-es5/ion-spinner.entry.js +1 -1
  245. package/dist/esm-es5/ion-split-pane.entry.js +1 -1
  246. package/dist/esm-es5/ion-tab-bar_2.entry.js +1 -1
  247. package/dist/esm-es5/ion-tab_2.entry.js +1 -1
  248. package/dist/esm-es5/ion-text.entry.js +1 -1
  249. package/dist/esm-es5/ion-textarea.entry.js +1 -1
  250. package/dist/esm-es5/ion-toast.entry.js +1 -1
  251. package/dist/esm-es5/ion-toggle.entry.js +1 -1
  252. package/dist/esm-es5/{ionic-global-c0cda98e.js → ionic-global-6c78e871.js} +1 -1
  253. package/dist/esm-es5/ionic.js +1 -1
  254. package/dist/esm-es5/{ios.transition-fd16bec1.js → ios.transition-daa373e9.js} +1 -1
  255. package/dist/esm-es5/loader.js +1 -1
  256. package/dist/esm-es5/{md.transition-94ac93e1.js → md.transition-91c3d3cc.js} +1 -1
  257. package/dist/esm-es5/overlays-64e67e2c.js +4 -0
  258. package/dist/esm-es5/{status-tap-2b93b1b5.js → status-tap-9dd45200.js} +1 -1
  259. package/dist/esm-es5/swipe-back-a6f386fc.js +4 -0
  260. package/dist/html.html-data.json +3 -154
  261. package/dist/ionic/index.esm.js +1 -1
  262. package/dist/ionic/ionic.esm.js +1 -1
  263. package/dist/ionic/ionic.js +1 -1
  264. package/dist/ionic/{p-30029cc2.system.js → p-0263eb49.system.js} +1 -1
  265. package/dist/ionic/p-06600f70.js +4 -0
  266. package/dist/ionic/p-0827d00e.system.entry.js +4 -0
  267. package/dist/ionic/{p-9738fd82.js → p-12cdcb59.js} +1 -1
  268. package/dist/ionic/{p-1161a793.entry.js → p-161d0916.entry.js} +1 -1
  269. package/dist/ionic/{p-1d624e03.system.js → p-1631b52f.system.js} +1 -1
  270. package/dist/ionic/{p-34c39c48.entry.js → p-18032a93.entry.js} +1 -1
  271. package/dist/ionic/p-19545a49.system.entry.js +4 -0
  272. package/dist/ionic/{p-cfe57b1b.entry.js → p-1c6c6098.entry.js} +1 -1
  273. package/dist/ionic/{p-6e70dd1a.system.entry.js → p-1cbc21e2.system.entry.js} +1 -1
  274. package/dist/ionic/p-1e7daa1f.entry.js +4 -0
  275. package/dist/ionic/{p-2092f39f.entry.js → p-1ff22253.entry.js} +1 -1
  276. package/dist/ionic/{p-5ecae037.js → p-21f015cf.js} +1 -1
  277. package/dist/ionic/{p-3fd26bd6.system.entry.js → p-23a27e78.system.entry.js} +1 -1
  278. package/dist/ionic/p-2507b0c0.entry.js +4 -0
  279. package/dist/ionic/{p-22e5af95.entry.js → p-2657f213.entry.js} +1 -1
  280. package/dist/ionic/{p-6fd64e7c.system.entry.js → p-27a5f2c7.system.entry.js} +1 -1
  281. package/dist/ionic/{p-4a081ea9.entry.js → p-27e6473f.entry.js} +1 -1
  282. package/dist/ionic/{p-6ad34705.system.entry.js → p-2a7e6572.system.entry.js} +1 -1
  283. package/dist/ionic/{p-77965464.system.entry.js → p-2ac9d078.system.entry.js} +1 -1
  284. package/dist/ionic/{p-4fb51e61.system.entry.js → p-2cd9cb80.system.entry.js} +1 -1
  285. package/dist/ionic/{p-17da5ed1.entry.js → p-312221db.entry.js} +1 -1
  286. package/dist/ionic/{p-a225bf0f.system.entry.js → p-315ad733.system.entry.js} +1 -1
  287. package/dist/ionic/{p-3e1e14d9.system.js → p-31b2326e.system.js} +1 -1
  288. package/dist/ionic/p-33f3cd49.entry.js +4 -0
  289. package/dist/ionic/{p-5b365ca7.system.js → p-34d6f520.system.js} +1 -1
  290. package/dist/ionic/{p-b133e9b4.entry.js → p-3535a36c.entry.js} +1 -1
  291. package/dist/ionic/p-35ce400e.system.js +4 -0
  292. package/dist/ionic/{p-93000a81.system.entry.js → p-3acad8ff.system.entry.js} +1 -1
  293. package/dist/ionic/{p-b5f9f14c.entry.js → p-3cb5466e.entry.js} +1 -1
  294. package/dist/ionic/{p-1fc72959.entry.js → p-3f5ae764.entry.js} +1 -1
  295. package/dist/ionic/{p-42ba3902.entry.js → p-405f1a72.entry.js} +1 -1
  296. package/dist/ionic/{p-96dbbac1.system.entry.js → p-41f7af3f.system.entry.js} +1 -1
  297. package/dist/ionic/{p-3fe96156.system.js → p-426bdba9.system.js} +1 -1
  298. package/dist/ionic/p-45db7949.system.entry.js +4 -0
  299. package/dist/ionic/{p-21c3515a.entry.js → p-46dbd723.entry.js} +1 -1
  300. package/dist/ionic/{p-ef126ae8.system.entry.js → p-4f71a9cf.system.entry.js} +1 -1
  301. package/dist/ionic/{p-a4afcc88.entry.js → p-53a3283e.entry.js} +1 -1
  302. package/dist/ionic/{p-4a36430f.system.entry.js → p-57c0d5bf.system.entry.js} +1 -1
  303. package/dist/ionic/p-58dd7c15.entry.js +4 -0
  304. package/dist/ionic/{p-b4a51c42.system.js → p-58ff9e5b.system.js} +1 -1
  305. package/dist/ionic/{p-cde52378.system.entry.js → p-5a7d5905.system.entry.js} +1 -1
  306. package/dist/ionic/p-5c7f13cd.system.entry.js +4 -0
  307. package/dist/ionic/{p-e8e86f69.system.entry.js → p-5f127075.system.entry.js} +1 -1
  308. package/dist/ionic/{p-4a31c99f.entry.js → p-5f46d93e.entry.js} +1 -1
  309. package/dist/ionic/{p-18ba8221.entry.js → p-5fb707e0.entry.js} +1 -1
  310. package/dist/ionic/{p-6fbecbda.entry.js → p-64af4468.entry.js} +1 -1
  311. package/dist/ionic/{p-232d1f22.entry.js → p-6744eca5.entry.js} +1 -1
  312. package/dist/ionic/{p-8f5d30f5.entry.js → p-67598744.entry.js} +1 -1
  313. package/dist/ionic/p-6a6477b2.js +4 -0
  314. package/dist/ionic/{p-7b725280.entry.js → p-6cf08720.entry.js} +1 -1
  315. package/dist/ionic/{p-6d72fb44.entry.js → p-70ecb18b.entry.js} +1 -1
  316. package/dist/ionic/{p-6b7c55cd.entry.js → p-71d986ae.entry.js} +1 -1
  317. package/dist/ionic/p-742e11cf.system.entry.js +4 -0
  318. package/dist/ionic/{p-f7a36cd0.system.js → p-7484b1d6.system.js} +1 -1
  319. package/dist/ionic/p-78ebf1b6.system.entry.js +4 -0
  320. package/dist/ionic/{p-b7010c69.system.entry.js → p-7ae5ca1f.system.entry.js} +1 -1
  321. package/dist/ionic/{p-c847fb35.system.entry.js → p-8261be6c.system.entry.js} +1 -1
  322. package/dist/ionic/p-83fada9e.system.entry.js +4 -0
  323. package/dist/ionic/{p-353b349d.entry.js → p-86c2bbc8.entry.js} +1 -1
  324. package/dist/ionic/{p-1208f939.entry.js → p-89026d53.entry.js} +1 -1
  325. package/dist/ionic/{p-9c229210.system.entry.js → p-89cfbc88.system.entry.js} +2 -2
  326. package/dist/ionic/p-8a10752d.entry.js +4 -0
  327. package/dist/ionic/{p-e7ea9815.system.entry.js → p-8a75f7bf.system.entry.js} +1 -1
  328. package/dist/ionic/{p-32303650.system.entry.js → p-8c202d6e.system.entry.js} +1 -1
  329. package/dist/ionic/{p-a9e3b5be.system.entry.js → p-90db28f8.system.entry.js} +1 -1
  330. package/dist/ionic/{p-d662d908.js → p-91f9e81b.js} +1 -1
  331. package/dist/ionic/{p-f910cc73.system.entry.js → p-93dac17a.system.entry.js} +1 -1
  332. package/dist/ionic/{p-b3b3efba.system.entry.js → p-98ac0e27.system.entry.js} +2 -2
  333. package/dist/ionic/{p-a98dc0c1.entry.js → p-99fe0543.entry.js} +1 -1
  334. package/dist/ionic/{p-c9a21dfd.system.entry.js → p-9f376964.system.entry.js} +1 -1
  335. package/dist/ionic/{p-0e53f8ea.system.entry.js → p-a0945c3a.system.entry.js} +1 -1
  336. package/dist/ionic/{p-9709ebd8.system.entry.js → p-a0db3de9.system.entry.js} +1 -1
  337. package/dist/ionic/{p-5d42b6b4.entry.js → p-a1b4dba7.entry.js} +1 -1
  338. package/dist/ionic/{p-3f6270b3.entry.js → p-a3a145d3.entry.js} +1 -1
  339. package/dist/ionic/{p-5a68960f.entry.js → p-a5c81b99.entry.js} +1 -1
  340. package/dist/ionic/{p-98f3d827.entry.js → p-a70b5d24.entry.js} +1 -1
  341. package/dist/ionic/{p-ab9456e9.system.entry.js → p-a843a90e.system.entry.js} +1 -1
  342. package/dist/ionic/{p-b752714f.system.entry.js → p-a99f14a7.system.entry.js} +1 -1
  343. package/dist/ionic/{p-564af202.system.entry.js → p-aac289d2.system.entry.js} +1 -1
  344. package/dist/ionic/{p-57477107.system.js → p-abab375b.system.js} +1 -1
  345. package/dist/ionic/{p-31158892.js → p-ac4a7fc0.js} +1 -1
  346. package/dist/ionic/{p-c3c3333a.js → p-acdd8148.js} +1 -1
  347. package/dist/ionic/{p-54dfc9b5.system.js → p-ad78c421.system.js} +1 -1
  348. package/dist/ionic/{p-caf21b46.system.entry.js → p-ad953217.system.entry.js} +1 -1
  349. package/dist/ionic/p-af959b5d.entry.js +4 -0
  350. package/dist/ionic/{p-b6f5e4f2.system.entry.js → p-b0fcf130.system.entry.js} +1 -1
  351. package/dist/ionic/p-b11ceee2.entry.js +4 -0
  352. package/dist/ionic/p-b5e33ebc.system.entry.js +4 -0
  353. package/dist/ionic/{p-2938823a.system.entry.js → p-b81a8111.system.entry.js} +1 -1
  354. package/dist/ionic/p-b8f2134e.js +4 -0
  355. package/dist/ionic/{p-9b97df10.js → p-bb3615f7.js} +1 -1
  356. package/dist/ionic/p-bbe3feee.entry.js +4 -0
  357. package/dist/ionic/{p-fbf3a689.system.entry.js → p-bc97b5cd.system.entry.js} +1 -1
  358. package/dist/ionic/{p-d37b441e.entry.js → p-c04accad.entry.js} +1 -1
  359. package/dist/ionic/{p-e3584231.system.js → p-c5ae50be.system.js} +1 -1
  360. package/dist/ionic/{p-20d469d0.system.js → p-c7c8429a.system.js} +1 -1
  361. package/dist/ionic/{p-c18de88a.system.entry.js → p-ca32685b.system.entry.js} +1 -1
  362. package/dist/ionic/p-cde72008.js +4 -0
  363. package/dist/ionic/p-d0251fc4.entry.js +4 -0
  364. package/dist/ionic/p-d1530ea9.entry.js +4 -0
  365. package/dist/ionic/{p-51a087d6.entry.js → p-d3e123c0.entry.js} +1 -1
  366. package/dist/ionic/p-ddccf1f4.js +4 -0
  367. package/dist/ionic/{p-2ab4e925.system.entry.js → p-df361680.system.entry.js} +1 -1
  368. package/dist/ionic/p-e145b9f9.entry.js +4 -0
  369. package/dist/ionic/{p-4155f352.system.js → p-e26030f8.system.js} +1 -1
  370. package/dist/ionic/{p-c91ccbfa.system.entry.js → p-e3c44332.system.entry.js} +1 -1
  371. package/dist/ionic/{p-f8a5bb89.entry.js → p-e4045e04.entry.js} +1 -1
  372. package/dist/ionic/{p-535d2a67.entry.js → p-e8e530fc.entry.js} +1 -1
  373. package/dist/ionic/p-eab6401e.js +4 -0
  374. package/dist/ionic/p-edc5c693.system.entry.js +4 -0
  375. package/dist/ionic/{p-4911a5d6.entry.js → p-ee4a54e3.entry.js} +1 -1
  376. package/dist/ionic/{p-5bebc7b3.system.entry.js → p-eef8d7e8.system.entry.js} +1 -1
  377. package/dist/ionic/p-f0384573.system.entry.js +4 -0
  378. package/dist/ionic/p-f10de9d5.system.js +4 -0
  379. package/dist/ionic/{p-0add7211.entry.js → p-f34d6a49.entry.js} +1 -1
  380. package/dist/ionic/p-f444fea5.entry.js +4 -0
  381. package/dist/ionic/{p-8ededb41.js → p-f5d2dc9b.js} +1 -1
  382. package/dist/ionic/{p-d3b030b8.system.js → p-f8c5a0dd.system.js} +1 -1
  383. package/dist/ionic/p-fcf49977.system.entry.js +4 -0
  384. package/dist/types/components/backdrop/backdrop.d.ts +3 -0
  385. package/dist/types/components/datetime/datetime.d.ts +1 -0
  386. package/dist/types/components/datetime/utils/data.d.ts +7 -11
  387. package/dist/types/components/input/input.d.ts +1 -5
  388. package/dist/types/components/menu/menu.d.ts +1 -1
  389. package/dist/types/components/picker/picker.d.ts +131 -74
  390. package/dist/types/components/picker-column/picker-column.d.ts +39 -99
  391. package/dist/types/components/picker-column-internal/picker-column-internal-interfaces.d.ts +5 -0
  392. package/dist/types/components/picker-column-internal/picker-column-internal.d.ts +102 -0
  393. package/dist/types/components/picker-internal/picker-internal-interfaces.d.ts +8 -0
  394. package/dist/types/components/picker-internal/picker-internal.d.ts +102 -0
  395. package/dist/types/components/refresher/refresher.utils.d.ts +16 -0
  396. package/dist/types/components/searchbar/searchbar.d.ts +0 -2
  397. package/dist/types/components/textarea/textarea.d.ts +1 -5
  398. package/dist/types/components.d.ts +129 -162
  399. package/dist/types/interface.d.ts +1 -1
  400. package/dist/types/utils/config.d.ts +2 -2
  401. package/dist/types/utils/gesture/gesture-controller.d.ts +0 -1
  402. package/dist/types/utils/overlays.d.ts +2 -5
  403. package/hydrate/index.d.ts +1 -1
  404. package/hydrate/index.js +948 -1040
  405. package/package.json +2 -2
  406. package/components/ion-picker-column-option.d.ts +0 -11
  407. package/components/ion-picker-column-option.js +0 -9
  408. package/components/ion-picker-legacy-column.d.ts +0 -11
  409. package/components/ion-picker-legacy-column.js +0 -9
  410. package/components/ion-picker-legacy.js +0 -309
  411. package/components/picker-column-option.js +0 -122
  412. package/components/picker-column2.js +0 -379
  413. package/dist/cjs/ion-picker-column-option.cjs.entry.js +0 -104
  414. package/dist/collection/components/picker/test/custom/picker.e2e.js +0 -85
  415. package/dist/collection/components/picker-column/test/disabled/picker-column.e2e.js +0 -91
  416. package/dist/collection/components/picker-column/test/slots/picker-column.e2e.js +0 -39
  417. package/dist/collection/components/picker-column-option/picker-column-option.ios.css +0 -87
  418. package/dist/collection/components/picker-column-option/picker-column-option.js +0 -173
  419. package/dist/collection/components/picker-column-option/test/a11y/picker-column-option.e2e.js +0 -18
  420. package/dist/collection/components/picker-column-option/test/basic/picker-column-option.e2e.js +0 -37
  421. package/dist/collection/components/picker-column-option/test/picker-column-option.spec.js +0 -29
  422. package/dist/collection/components/picker-legacy/picker.js +0 -817
  423. package/dist/collection/components/picker-legacy/test/basic/picker.e2e.js +0 -25
  424. package/dist/collection/components/picker-legacy-column/picker-column.js +0 -419
  425. package/dist/collection/utils/test/overlays/overlays-scroll-blocking.spec.js +0 -65
  426. package/dist/esm/ion-picker-column-option.entry.js +0 -100
  427. package/dist/esm-es5/app-globals-722340c4.js +0 -4
  428. package/dist/esm-es5/ion-picker-column-option.entry.js +0 -4
  429. package/dist/esm-es5/ion-picker-column.entry.js +0 -4
  430. package/dist/esm-es5/ion-picker.entry.js +0 -4
  431. package/dist/esm-es5/overlays-fbc5cab5.js +0 -4
  432. package/dist/esm-es5/swipe-back-a8ca7f93.js +0 -4
  433. package/dist/ionic/p-1786bc72.js +0 -4
  434. package/dist/ionic/p-26798a7b.system.entry.js +0 -4
  435. package/dist/ionic/p-27bcbbc7.system.entry.js +0 -4
  436. package/dist/ionic/p-350f7292.system.entry.js +0 -4
  437. package/dist/ionic/p-36d194c5.entry.js +0 -4
  438. package/dist/ionic/p-3993ae66.entry.js +0 -4
  439. package/dist/ionic/p-3ba01a9c.system.entry.js +0 -4
  440. package/dist/ionic/p-4890093d.js +0 -4
  441. package/dist/ionic/p-51abefb7.system.js +0 -4
  442. package/dist/ionic/p-563c41f0.system.entry.js +0 -4
  443. package/dist/ionic/p-588fdf40.entry.js +0 -4
  444. package/dist/ionic/p-5a1aac13.system.entry.js +0 -4
  445. package/dist/ionic/p-73190c5f.entry.js +0 -4
  446. package/dist/ionic/p-73aa7604.entry.js +0 -4
  447. package/dist/ionic/p-76d3765d.js +0 -4
  448. package/dist/ionic/p-8017aad2.system.entry.js +0 -4
  449. package/dist/ionic/p-846ee227.entry.js +0 -4
  450. package/dist/ionic/p-8c97cdc0.entry.js +0 -4
  451. package/dist/ionic/p-8e42850f.entry.js +0 -4
  452. package/dist/ionic/p-8fa6583d.system.js +0 -4
  453. package/dist/ionic/p-91af3c52.system.entry.js +0 -4
  454. package/dist/ionic/p-a60a1ce5.js +0 -4
  455. package/dist/ionic/p-a8baa23e.entry.js +0 -4
  456. package/dist/ionic/p-a9a80f5b.entry.js +0 -4
  457. package/dist/ionic/p-afcf4620.entry.js +0 -4
  458. package/dist/ionic/p-b4d31b30.system.entry.js +0 -4
  459. package/dist/ionic/p-c41bff4e.system.entry.js +0 -4
  460. package/dist/ionic/p-ca8938f4.js +0 -4
  461. package/dist/ionic/p-da15f571.system.entry.js +0 -4
  462. package/dist/ionic/p-e4d90573.js +0 -4
  463. package/dist/ionic/p-ea69616e.entry.js +0 -4
  464. package/dist/ionic/p-fe4dde76.entry.js +0 -4
  465. package/dist/ionic/p-ffd5dba4.system.entry.js +0 -4
  466. package/dist/types/components/picker/picker-interfaces.d.ts +0 -8
  467. package/dist/types/components/picker-column/picker-column-interfaces.d.ts +0 -4
  468. package/dist/types/components/picker-column-option/picker-column-option.d.ts +0 -66
  469. package/dist/types/components/picker-legacy/picker.d.ts +0 -158
  470. package/dist/types/components/picker-legacy-column/picker-column.d.ts +0 -46
  471. /package/dist/collection/components/{picker-legacy → picker}/animations/ios.enter.js +0 -0
  472. /package/dist/collection/components/{picker-legacy → picker}/animations/ios.leave.js +0 -0
  473. /package/dist/collection/components/picker/{picker-interfaces.js → picker-interface.js} +0 -0
  474. /package/dist/collection/components/{picker-legacy-column → picker-column}/picker-column.ios.css +0 -0
  475. /package/dist/collection/components/{picker-legacy-column → picker-column}/picker-column.md.css +0 -0
  476. /package/dist/collection/components/{picker-legacy-column → picker-column}/test/test.utils.js +0 -0
  477. /package/dist/collection/components/{picker-column/picker-column-interfaces.js → picker-column-internal/picker-column-internal-interfaces.js} +0 -0
  478. /package/dist/collection/components/{picker-legacy/picker-interface.js → picker-internal/picker-internal-interfaces.js} +0 -0
  479. /package/dist/esm-es5/{data-4b9508c9.js → data-f5c75b4e.js} +0 -0
  480. /package/dist/ionic/{p-368f5215.js → p-2aea8b1e.js} +0 -0
  481. /package/dist/ionic/{p-f58981c2.system.js → p-82e3d633.system.js} +0 -0
  482. /package/dist/types/components/{picker-legacy → picker}/animations/ios.enter.d.ts +0 -0
  483. /package/dist/types/components/{picker-legacy → picker}/animations/ios.leave.d.ts +0 -0
  484. /package/dist/types/components/{picker-legacy → picker}/picker-interface.d.ts +0 -0
  485. /package/dist/types/components/{picker-legacy-column → picker-column}/test/test.utils.d.ts +0 -0
package/hydrate/index.js CHANGED
@@ -6,7 +6,7 @@
6
6
  Object.defineProperty(exports, '__esModule', { value: true });
7
7
 
8
8
  /*!
9
- Stencil Mock Doc v4.8.1 | MIT Licensed | https://stenciljs.com
9
+ Stencil Mock Doc v4.8.0 | MIT Licensed | https://stenciljs.com
10
10
  */
11
11
  const CONTENT_REF_ID = 'r';
12
12
  const ORG_LOCATION_ID = 'o';
@@ -8355,7 +8355,7 @@ const focusLastDescendant = (ref, overlay) => {
8355
8355
  * Should NOT include: Toast
8356
8356
  */
8357
8357
  const trapKeyboardFocus = (ev, doc) => {
8358
- const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
8358
+ const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
8359
8359
  const target = ev.target;
8360
8360
  /**
8361
8361
  * If no active overlay, ignore this event.
@@ -8540,7 +8540,7 @@ const dismissOverlay = (doc, data, role, overlayTag, id) => {
8540
8540
  */
8541
8541
  const getOverlays = (doc, selector) => {
8542
8542
  if (selector === undefined) {
8543
- selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
8543
+ selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
8544
8544
  }
8545
8545
  return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
8546
8546
  };
@@ -8606,7 +8606,6 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
8606
8606
  return;
8607
8607
  }
8608
8608
  setRootAriaHidden(true);
8609
- document.body.classList.add(BACKDROP_NO_SCROLL);
8610
8609
  overlay.presented = true;
8611
8610
  overlay.willPresent.emit();
8612
8611
  (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -8669,14 +8668,12 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
8669
8668
  if (!overlay.presented) {
8670
8669
  return false;
8671
8670
  }
8672
- const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
8673
8671
  /**
8674
8672
  * If this is the last visible overlay then
8675
8673
  * we want to re-add the root to the accessibility tree.
8676
8674
  */
8677
- if (lastOverlay) {
8675
+ if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
8678
8676
  setRootAriaHidden(false);
8679
- document.body.classList.remove(BACKDROP_NO_SCROLL);
8680
8677
  }
8681
8678
  overlay.presented = false;
8682
8679
  try {
@@ -11192,10 +11189,21 @@ class Backdrop {
11192
11189
  constructor(hostRef) {
11193
11190
  registerInstance(this, hostRef);
11194
11191
  this.ionBackdropTap = createEvent(this, "ionBackdropTap", 7);
11192
+ this.blocker = GESTURE_CONTROLLER.createBlocker({
11193
+ disableScroll: true,
11194
+ });
11195
11195
  this.visible = true;
11196
11196
  this.tappable = true;
11197
11197
  this.stopPropagation = true;
11198
11198
  }
11199
+ connectedCallback() {
11200
+ if (this.stopPropagation) {
11201
+ this.blocker.block();
11202
+ }
11203
+ }
11204
+ disconnectedCallback() {
11205
+ this.blocker.unblock();
11206
+ }
11199
11207
  onMouseDown(ev) {
11200
11208
  this.emitTap(ev);
11201
11209
  }
@@ -12646,7 +12654,7 @@ const isRTL$1 = (hostEl) => {
12646
12654
  return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
12647
12655
  };
12648
12656
 
12649
- const contentCss = "/*!@:host*/.sc-ion-content-h{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}/*!@:host(.ion-color) .inner-scroll*/.ion-color.sc-ion-content-h .inner-scroll.sc-ion-content{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@#background-content*/#background-content.sc-ion-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}/*!@.inner-scroll*/.inner-scroll.sc-ion-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-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:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}/*!@.scroll-y,\n.scroll-x*/.scroll-y.sc-ion-content,.scroll-x.sc-ion-content{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}/*!@.scroll-y*/.scroll-y.sc-ion-content{overflow-y:var(--overflow);overscroll-behavior-y:contain}/*!@.scroll-x*/.scroll-x.sc-ion-content{overflow-x:var(--overflow);overscroll-behavior-x:contain}/*!@.overscroll::before,\n.overscroll::after*/.overscroll.sc-ion-content::before,.overscroll.sc-ion-content::after{position:absolute;width:1px;height:1px;content:\"\"}/*!@.overscroll::before*/.overscroll.sc-ion-content::before{bottom:-1px}/*!@.overscroll::after*/.overscroll.sc-ion-content::after{top:-1px}/*!@:host(.content-sizing)*/.content-sizing.sc-ion-content-h{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}/*!@:host(.content-sizing) .inner-scroll*/.content-sizing.sc-ion-content-h .inner-scroll.sc-ion-content{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}/*!@.transition-effect*/.transition-effect.sc-ion-content{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}/*!@:host(.content-ltr) .transition-effect*/.content-ltr.sc-ion-content-h .transition-effect.sc-ion-content{left:-100%}/*!@:host(.content-rtl) .transition-effect*/.content-rtl.sc-ion-content-h .transition-effect.sc-ion-content{right:-100%}/*!@.transition-cover*/.transition-cover.sc-ion-content{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}/*!@.transition-shadow*/.transition-shadow.sc-ion-content{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}/*!@:host(.content-ltr) .transition-shadow*/.content-ltr.sc-ion-content-h .transition-shadow.sc-ion-content{right:0}/*!@:host(.content-rtl) .transition-shadow*/.content-rtl.sc-ion-content-h .transition-shadow.sc-ion-content{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}/*!@::slotted([slot=fixed])*/.sc-ion-content-s>[slot=fixed]{position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
12657
+ const contentCss = "/*!@:host*/.sc-ion-content-h{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}/*!@:host(.ion-color) .inner-scroll*/.ion-color.sc-ion-content-h .inner-scroll.sc-ion-content{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@:host(.outer-content)*/.outer-content.sc-ion-content-h{--background:var(--ion-color-step-50, #f2f2f2)}/*!@#background-content*/#background-content.sc-ion-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}/*!@.inner-scroll*/.inner-scroll.sc-ion-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-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:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}/*!@.scroll-y,\n.scroll-x*/.scroll-y.sc-ion-content,.scroll-x.sc-ion-content{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}/*!@.scroll-y*/.scroll-y.sc-ion-content{overflow-y:var(--overflow);overscroll-behavior-y:contain}/*!@.scroll-x*/.scroll-x.sc-ion-content{overflow-x:var(--overflow);overscroll-behavior-x:contain}/*!@.overscroll::before,\n.overscroll::after*/.overscroll.sc-ion-content::before,.overscroll.sc-ion-content::after{position:absolute;width:1px;height:1px;content:\"\"}/*!@.overscroll::before*/.overscroll.sc-ion-content::before{bottom:-1px}/*!@.overscroll::after*/.overscroll.sc-ion-content::after{top:-1px}/*!@:host(.content-sizing)*/.content-sizing.sc-ion-content-h{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}/*!@:host(.content-sizing) .inner-scroll*/.content-sizing.sc-ion-content-h .inner-scroll.sc-ion-content{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}/*!@.transition-effect*/.transition-effect.sc-ion-content{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}/*!@:host(.content-ltr) .transition-effect*/.content-ltr.sc-ion-content-h .transition-effect.sc-ion-content{left:-100%}/*!@:host(.content-rtl) .transition-effect*/.content-rtl.sc-ion-content-h .transition-effect.sc-ion-content{right:-100%}/*!@.transition-cover*/.transition-cover.sc-ion-content{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}/*!@.transition-shadow*/.transition-shadow.sc-ion-content{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}/*!@:host(.content-ltr) .transition-shadow*/.content-ltr.sc-ion-content-h .transition-shadow.sc-ion-content{right:0}/*!@:host(.content-rtl) .transition-shadow*/.content-rtl.sc-ion-content-h .transition-shadow.sc-ion-content{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}/*!@::slotted([slot=fixed])*/.sc-ion-content-s>[slot=fixed]{position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
12650
12658
 
12651
12659
  /**
12652
12660
  * @slot - Content is placed in the scrollable area if provided without a slot.
@@ -14518,7 +14526,7 @@ const getMonthColumnData = (locale, refParts, minParts, maxParts, monthValues, f
14518
14526
  * @param minParts The minimum bound on the date that can be returned
14519
14527
  * @param maxParts The maximum bound on the date that can be returned
14520
14528
  * @param dayValues The allowed date values
14521
- * @returns Date data to be used in ion-picker-column
14529
+ * @returns Date data to be used in ion-picker-column-internal
14522
14530
  */
14523
14531
  const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues, formatOptions = {
14524
14532
  day: 'numeric',
@@ -14865,9 +14873,9 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
14865
14873
  return undefined;
14866
14874
  };
14867
14875
 
14868
- const datetimeIosCss = "/*!@:host*/.sc-ion-datetime-ios-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-ios-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-ios-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-ios-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-ios-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-ios{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .day-column.sc-ion-datetime-ios{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .month-column.sc-ion-datetime-ios{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .year-column.sc-ion-datetime-ios{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-ios-h .datetime-calendar.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{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*/.show-month-and-year.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{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,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios not.sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .datetime-time,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-ios-h.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,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-ios-h .datetime-footer.sc-ion-datetime-ios{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.datetime-disabled.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-button[disabled].sc-ion-datetime-ios{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-ios-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-ios{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-ios .datetime-action-buttons-container.sc-ion-datetime-ios{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{--background:transparent}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{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*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios{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*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-disabled.sc-ion-datetime-ios{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{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*/.calendar-day.sc-ion-datetime-ios{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]*/.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-ios: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*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-ios-h ion-popover.sc-ion-datetime-ios{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-ios-h .time-header.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-ios-h .time-body.sc-ion-datetime-ios{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*/.sc-ion-datetime-ios-h .time-body-active.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-ios-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios .calendar-month-year-toggle.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@.calendar-month-year*/.calendar-month-year.sc-ion-datetime-ios{min-width:0}/*!@.calendar-month-year-toggle*/.calendar-month-year-toggle.sc-ion-datetime-ios{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;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}/*!@.calendar-month-year-toggle::after*/.calendar-month-year-toggle.sc-ion-datetime-ios::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}/*!@.calendar-month-year-toggle.ion-focused::after*/.calendar-month-year-toggle.ion-focused.sc-ion-datetime-ios::after{background:currentColor}/*!@.calendar-month-year-toggle:disabled*/.calendar-month-year-toggle.sc-ion-datetime-ios:disabled{opacity:0.3;pointer-events:none}/*!@.calendar-month-year-toggle ion-icon*/.calendar-month-year-toggle.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}/*!@.calendar-month-year-toggle #toggle-wrapper*/.calendar-month-year-toggle.sc-ion-datetime-ios #toggle-wrapper.sc-ion-datetime-ios{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}/*!@ion-picker*/ion-picker.sc-ion-datetime-ios{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}/*!@:host*/.sc-ion-datetime-ios-h{--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)),\n:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),\n:host(.datetime-presentation-date:not(.datetime-prefer-wheel))*/.datetime-presentation-date-time.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-time-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){min-height:350px}/*!@:host .datetime-header*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{color:var(--title-color)}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-selected-date.sc-ion-datetime-ios{margin-top:10px}/*!@.calendar-month-year-toggle*/.calendar-month-year-toggle.sc-ion-datetime-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-height:44px;font-size:min(1rem, 25.6px);font-weight:600}/*!@.calendar-month-year-toggle.ion-focused::after*/.calendar-month-year-toggle.ion-focused.sc-ion-datetime-ios::after{opacity:0.15}/*!@.calendar-month-year-toggle #toggle-wrapper*/.calendar-month-year-toggle.sc-ion-datetime-ios #toggle-wrapper.sc-ion-datetime-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}/*!@:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,\n:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios .calendar-month-year-toggle.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}/*!@:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{-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*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{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*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:auto;height:auto;overflow:initial}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:32px}}/*!@:host .calendar-body .calendar-month .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .calendar-day.sc-ion-datetime-ios{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-ios{background:rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-base);font-weight:600}/*!@:host .calendar-day.calendar-day-today.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-contrast)}/*!@:host .datetime-time*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios .time-header.sc-ion-datetime-ios{font-weight:600}/*!@:host .datetime-buttons*/.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios{-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),\n:host .datetime-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-buttons .sc-ion-datetime-ios-s>ion-buttons,.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .datetime-action-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios{width:100%}";
14876
+ const datetimeIosCss = "/*!@:host*/.sc-ion-datetime-ios-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@ion-picker-column-internal*/ion-picker-column-internal.sc-ion-datetime-ios{min-width:26px}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-ios-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-ios-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-ios-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-ios-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-ios{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .day-column.sc-ion-datetime-ios{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .month-column.sc-ion-datetime-ios{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .year-column.sc-ion-datetime-ios{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-ios-h .datetime-calendar.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{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*/.show-month-and-year.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{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,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios not.sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .datetime-time,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-ios-h.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,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-ios-h .datetime-footer.sc-ion-datetime-ios{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.datetime-disabled.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-button[disabled].sc-ion-datetime-ios{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-ios-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-ios{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-ios .datetime-action-buttons-container.sc-ion-datetime-ios{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-item,\n:host .calendar-action-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{--background:translucent}/*!@:host .calendar-action-buttons ion-item ion-label*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios ion-label.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .calendar-action-buttons ion-item ion-icon*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{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*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios{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*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-disabled.sc-ion-datetime-ios{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{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*/.calendar-day.sc-ion-datetime-ios{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]*/.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-ios: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*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-ios-h ion-popover.sc-ion-datetime-ios{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-ios-h .time-header.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-ios-h .time-body.sc-ion-datetime-ios{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*/.sc-ion-datetime-ios-h .time-body-active.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-ios-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons ion-item*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios{--color:var(--ion-color-base)}/*!@:host*/.sc-ion-datetime-ios-h{--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)),\n:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),\n:host(.datetime-presentation-date:not(.datetime-prefer-wheel))*/.datetime-presentation-date-time.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-time-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){min-height:350px}/*!@:host .datetime-header*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{color:var(--title-color)}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-selected-date.sc-ion-datetime-ios{margin-top:10px}/*!@:host .calendar-action-buttons ion-item*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios{--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,\n:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}/*!@:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{-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*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{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*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:auto;height:auto;overflow:initial}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:32px}}/*!@:host .calendar-body .calendar-month .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .calendar-day.sc-ion-datetime-ios{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-ios{background:rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-base);font-weight:600}/*!@:host .calendar-day.calendar-day-today.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-contrast)}/*!@:host .datetime-time*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios .time-header.sc-ion-datetime-ios{font-weight:600}/*!@:host .datetime-buttons*/.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios{-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),\n:host .datetime-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-buttons .sc-ion-datetime-ios-s>ion-buttons,.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .datetime-action-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios{width:100%}";
14869
14877
 
14870
- const datetimeMdCss = "/*!@:host*/.sc-ion-datetime-md-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-md-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-md-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-md-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-md-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-md-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-md{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .day-column.sc-ion-datetime-md{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .month-column.sc-ion-datetime-md{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .year-column.sc-ion-datetime-md{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-md-h .datetime-calendar.sc-ion-datetime-md,.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{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*/.show-month-and-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{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,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-md-h .calendar-next-prev.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-md (inset-inline-start.sc-ion-datetime-md: 0).sc-ion-datetime-md{.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-md not.sc-ion-datetime-md (inset-inline-start.sc-ion-datetime-md: 0).sc-ion-datetime-md{.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .datetime-time,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-md-h.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,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-md-h .calendar-next-prev.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-md-h .datetime-footer.sc-ion-datetime-md{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-md-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.datetime-disabled.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-md-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md,.datetime-readonly.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.datetime-readonly.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-md-h .calendar-day[disabled].sc-ion-datetime-md:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-md-h .datetime-action-buttons.sc-ion-datetime-md ion-button[disabled].sc-ion-datetime-md{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-title.sc-ion-datetime-md{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-md-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-md{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-md-h .datetime-action-buttons.sc-ion-datetime-md ion-buttons.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-md .datetime-action-buttons-container.sc-ion-datetime-md{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-button*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-button.sc-ion-datetime-md{--background:transparent}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-md .day-of-week.sc-ion-datetime-md{-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*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md{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*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month.sc-ion-datetime-md{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*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month-disabled.sc-ion-datetime-md{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month-grid.sc-ion-datetime-md{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-md-h .calendar-day-wrapper.sc-ion-datetime-md{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*/.calendar-day.sc-ion-datetime-md{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]*/.sc-ion-datetime-md-h .calendar-day[disabled].sc-ion-datetime-md{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-md: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*/.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-md-h ion-popover.sc-ion-datetime-md{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-md-h .time-header.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-md-h .time-body.sc-ion-datetime-md{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*/.sc-ion-datetime-md-h .time-body-active.sc-ion-datetime-md{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-md-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle*/.show-month-and-year.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md .calendar-month-year-toggle.sc-ion-datetime-md{color:var(--ion-color-base)}/*!@.calendar-month-year*/.calendar-month-year.sc-ion-datetime-md{min-width:0}/*!@.calendar-month-year-toggle*/.calendar-month-year-toggle.sc-ion-datetime-md{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;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}/*!@.calendar-month-year-toggle::after*/.calendar-month-year-toggle.sc-ion-datetime-md::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}/*!@.calendar-month-year-toggle.ion-focused::after*/.calendar-month-year-toggle.ion-focused.sc-ion-datetime-md::after{background:currentColor}/*!@.calendar-month-year-toggle:disabled*/.calendar-month-year-toggle.sc-ion-datetime-md:disabled{opacity:0.3;pointer-events:none}/*!@.calendar-month-year-toggle ion-icon*/.calendar-month-year-toggle.sc-ion-datetime-md ion-icon.sc-ion-datetime-md{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}/*!@.calendar-month-year-toggle #toggle-wrapper*/.calendar-month-year-toggle.sc-ion-datetime-md #toggle-wrapper.sc-ion-datetime-md{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}/*!@ion-picker*/ion-picker.sc-ion-datetime-md{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}/*!@:host*/.sc-ion-datetime-md-h{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}/*!@:host .datetime-header*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md{-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*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-title.sc-ion-datetime-md{font-size:0.75rem;text-transform:uppercase}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-selected-date.sc-ion-datetime-md{margin-top:30px;font-size:2.125rem}/*!@:host .calendar-action-buttons ion-button*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-button.sc-ion-datetime-md{--color:var(--ion-color-step-650, #595959)}/*!@.calendar-month-year-toggle*/.calendar-month-year-toggle.sc-ion-datetime-md{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;min-height:48px;background:transparent;color:var(--ion-color-step-650, #595959);z-index:1}/*!@.calendar-month-year-toggle.ion-focused::after*/.calendar-month-year-toggle.ion-focused.sc-ion-datetime-md::after{opacity:0.04}/*!@.calendar-month-year-toggle ion-ripple-effect*/.calendar-month-year-toggle.sc-ion-datetime-md ion-ripple-effect.sc-ion-datetime-md{color:currentColor}@media (any-hover: hover){/*!@.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after*/.calendar-month-year-toggle.ion-activatable.sc-ion-datetime-md:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md{-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*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month.sc-ion-datetime-md .calendar-month-grid.sc-ion-datetime-md{-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*/.sc-ion-datetime-md-h .calendar-day.sc-ion-datetime-md{width:42px;min-width:42px;height:42px;font-size:0.875rem}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-md-h .calendar-day.calendar-day-today.sc-ion-datetime-md{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-md-h .calendar-day.calendar-day-active.sc-ion-datetime-md{color:var(--ion-color-contrast)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-md{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}/*!@:host .datetime-time*/.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{-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*/.sc-ion-datetime-md-h .time-header.sc-ion-datetime-md{color:var(--ion-color-step-650, #595959)}/*!@:host(.datetime-presentation-month) .datetime-year,\n:host(.datetime-presentation-year) .datetime-year,\n:host(.datetime-presentation-month-year) .datetime-year*/.datetime-presentation-month.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md,.datetime-presentation-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md,.datetime-presentation-month-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{margin-top:20px;margin-bottom:20px}/*!@:host .datetime-buttons*/.sc-ion-datetime-md-h .datetime-buttons.sc-ion-datetime-md{-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}";
14878
+ const datetimeMdCss = "/*!@:host*/.sc-ion-datetime-md-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@ion-picker-column-internal*/ion-picker-column-internal.sc-ion-datetime-md{min-width:26px}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-md-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-md-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-md-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-md-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-md-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-md{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .day-column.sc-ion-datetime-md{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .month-column.sc-ion-datetime-md{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .year-column.sc-ion-datetime-md{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-md-h .datetime-calendar.sc-ion-datetime-md,.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{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*/.show-month-and-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{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,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-md-h .calendar-next-prev.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-md (inset-inline-start.sc-ion-datetime-md: 0).sc-ion-datetime-md{.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-md not.sc-ion-datetime-md (inset-inline-start.sc-ion-datetime-md: 0).sc-ion-datetime-md{.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .datetime-time,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-md-h.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,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-md-h .calendar-next-prev.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-md-h .datetime-footer.sc-ion-datetime-md{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-md-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.datetime-disabled.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-md-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md,.datetime-readonly.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.datetime-readonly.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-md-h .calendar-day[disabled].sc-ion-datetime-md:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-md-h .datetime-action-buttons.sc-ion-datetime-md ion-button[disabled].sc-ion-datetime-md{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-title.sc-ion-datetime-md{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-md-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-md{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-md-h .datetime-action-buttons.sc-ion-datetime-md ion-buttons.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-md .datetime-action-buttons-container.sc-ion-datetime-md{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-item,\n:host .calendar-action-buttons ion-button*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md,.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-button.sc-ion-datetime-md{--background:translucent}/*!@:host .calendar-action-buttons ion-item ion-label*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md ion-label.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .calendar-action-buttons ion-item ion-icon*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md ion-icon.sc-ion-datetime-md{-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*/.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-md .day-of-week.sc-ion-datetime-md{-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*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md{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*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month.sc-ion-datetime-md{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*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month-disabled.sc-ion-datetime-md{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month-grid.sc-ion-datetime-md{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-md-h .calendar-day-wrapper.sc-ion-datetime-md{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*/.calendar-day.sc-ion-datetime-md{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]*/.sc-ion-datetime-md-h .calendar-day[disabled].sc-ion-datetime-md{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-md: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*/.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-md-h ion-popover.sc-ion-datetime-md{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-md-h .time-header.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-md-h .time-body.sc-ion-datetime-md{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*/.sc-ion-datetime-md-h .time-body-active.sc-ion-datetime-md{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-md-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons ion-item*/.show-month-and-year.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md{--color:var(--ion-color-base)}/*!@:host*/.sc-ion-datetime-md-h{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}/*!@:host .datetime-header*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md{-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*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-title.sc-ion-datetime-md{font-size:0.75rem;text-transform:uppercase}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-selected-date.sc-ion-datetime-md{margin-top:30px;font-size:2.125rem}/*!@:host .datetime-calendar .calendar-action-buttons ion-item*/.sc-ion-datetime-md-h .datetime-calendar.sc-ion-datetime-md .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md{--padding-start:20px}/*!@:host .calendar-action-buttons ion-item,\n:host .calendar-action-buttons ion-button*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md,.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-button.sc-ion-datetime-md{--color:var(--ion-color-step-650, #595959)}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md{-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*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month.sc-ion-datetime-md .calendar-month-grid.sc-ion-datetime-md{-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*/.sc-ion-datetime-md-h .calendar-day.sc-ion-datetime-md{width:42px;min-width:42px;height:42px;font-size:0.875rem}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-md-h .calendar-day.calendar-day-today.sc-ion-datetime-md{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-md-h .calendar-day.calendar-day-active.sc-ion-datetime-md{color:var(--ion-color-contrast)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-md{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}/*!@:host .datetime-time*/.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{-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*/.sc-ion-datetime-md-h .time-header.sc-ion-datetime-md{color:var(--ion-color-step-650, #595959)}/*!@:host(.datetime-presentation-month) .datetime-year,\n:host(.datetime-presentation-year) .datetime-year,\n:host(.datetime-presentation-month-year) .datetime-year*/.datetime-presentation-month.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md,.datetime-presentation-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md,.datetime-presentation-month-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{margin-top:20px;margin-bottom:20px}/*!@:host .datetime-buttons*/.sc-ion-datetime-md-h .datetime-buttons.sc-ion-datetime-md{-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}";
14871
14879
 
14872
14880
  /**
14873
14881
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -15838,7 +15846,7 @@ class Datetime {
15838
15846
  const renderArray = forcePresentation === 'time-date'
15839
15847
  ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
15840
15848
  : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
15841
- return hAsync("ion-picker", null, renderArray);
15849
+ return hAsync("ion-picker-internal", null, renderArray);
15842
15850
  }
15843
15851
  renderDatePickerColumns(forcePresentation) {
15844
15852
  return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -15897,7 +15905,7 @@ class Datetime {
15897
15905
  const todayString = workingParts.day !== null
15898
15906
  ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
15899
15907
  : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
15900
- return (hAsync("ion-picker-column", { class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
15908
+ return (hAsync("ion-picker-column-internal", { class: "date-column", color: this.color, disabled: disabled, items: items, value: todayString, onIonChange: (ev) => {
15901
15909
  // TODO(FW-1823) Remove this when iOS 14 support is dropped.
15902
15910
  // Due to a Safari 14 issue we need to destroy
15903
15911
  // the scroll listener before we update state
@@ -15913,7 +15921,7 @@ class Datetime {
15913
15921
  // the working parts have been updated.
15914
15922
  this.initializeCalendarListener();
15915
15923
  ev.stopPropagation();
15916
- } }, items.map((item) => (hAsync("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
15924
+ } }));
15917
15925
  }
15918
15926
  renderIndividualDatePickerColumns(forcePresentation) {
15919
15927
  const { workingParts, isDateEnabled } = this;
@@ -15981,8 +15989,7 @@ class Datetime {
15981
15989
  }
15982
15990
  const { disabled, workingParts } = this;
15983
15991
  const activePart = this.getActivePartsWithFallback();
15984
- const pickerColumnValue = (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined;
15985
- return (hAsync("ion-picker-column", { class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
15992
+ return (hAsync("ion-picker-column-internal", { class: "day-column", color: this.color, disabled: disabled, items: days, value: (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined, onIonChange: (ev) => {
15986
15993
  // TODO(FW-1823) Remove this when iOS 14 support is dropped.
15987
15994
  // Due to a Safari 14 issue we need to destroy
15988
15995
  // the scroll listener before we update state
@@ -15996,7 +16003,7 @@ class Datetime {
15996
16003
  // the working parts have been updated.
15997
16004
  this.initializeCalendarListener();
15998
16005
  ev.stopPropagation();
15999
- } }, days.map((day) => (hAsync("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
16006
+ } }));
16000
16007
  }
16001
16008
  renderMonthPickerColumn(months) {
16002
16009
  if (months.length === 0) {
@@ -16004,7 +16011,7 @@ class Datetime {
16004
16011
  }
16005
16012
  const { disabled, workingParts } = this;
16006
16013
  const activePart = this.getActivePartsWithFallback();
16007
- return (hAsync("ion-picker-column", { class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
16014
+ return (hAsync("ion-picker-column-internal", { class: "month-column", color: this.color, disabled: disabled, items: months, value: workingParts.month, onIonChange: (ev) => {
16008
16015
  // TODO(FW-1823) Remove this when iOS 14 support is dropped.
16009
16016
  // Due to a Safari 14 issue we need to destroy
16010
16017
  // the scroll listener before we update state
@@ -16018,7 +16025,7 @@ class Datetime {
16018
16025
  // the working parts have been updated.
16019
16026
  this.initializeCalendarListener();
16020
16027
  ev.stopPropagation();
16021
- } }, months.map((month) => (hAsync("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
16028
+ } }));
16022
16029
  }
16023
16030
  renderYearPickerColumn(years) {
16024
16031
  if (years.length === 0) {
@@ -16026,7 +16033,7 @@ class Datetime {
16026
16033
  }
16027
16034
  const { disabled, workingParts } = this;
16028
16035
  const activePart = this.getActivePartsWithFallback();
16029
- return (hAsync("ion-picker-column", { class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
16036
+ return (hAsync("ion-picker-column-internal", { class: "year-column", color: this.color, disabled: disabled, items: years, value: workingParts.year, onIonChange: (ev) => {
16030
16037
  // TODO(FW-1823) Remove this when iOS 14 support is dropped.
16031
16038
  // Due to a Safari 14 issue we need to destroy
16032
16039
  // the scroll listener before we update state
@@ -16040,7 +16047,7 @@ class Datetime {
16040
16047
  // the working parts have been updated.
16041
16048
  this.initializeCalendarListener();
16042
16049
  ev.stopPropagation();
16043
- } }, years.map((year) => (hAsync("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
16050
+ } }));
16044
16051
  }
16045
16052
  renderTimePickerColumns(forcePresentation) {
16046
16053
  if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
@@ -16069,22 +16076,22 @@ class Datetime {
16069
16076
  if (hoursData.length === 0)
16070
16077
  return [];
16071
16078
  const activePart = this.getActivePartsWithFallback();
16072
- return (hAsync("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
16079
+ return (hAsync("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.hour, items: hoursData, numericInput: true, onIonChange: (ev) => {
16073
16080
  this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
16074
16081
  this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value }));
16075
16082
  ev.stopPropagation();
16076
- } }, hoursData.map((hour) => (hAsync("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
16083
+ } }));
16077
16084
  }
16078
16085
  renderMinutePickerColumn(minutesData) {
16079
16086
  const { disabled, workingParts } = this;
16080
16087
  if (minutesData.length === 0)
16081
16088
  return [];
16082
16089
  const activePart = this.getActivePartsWithFallback();
16083
- return (hAsync("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
16090
+ return (hAsync("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.minute, items: minutesData, numericInput: true, onIonChange: (ev) => {
16084
16091
  this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
16085
16092
  this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value }));
16086
16093
  ev.stopPropagation();
16087
- } }, minutesData.map((minute) => (hAsync("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
16094
+ } }));
16088
16095
  }
16089
16096
  renderDayPeriodPickerColumn(dayPeriodData) {
16090
16097
  const { disabled, workingParts } = this;
@@ -16093,12 +16100,12 @@ class Datetime {
16093
16100
  }
16094
16101
  const activePart = this.getActivePartsWithFallback();
16095
16102
  const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
16096
- return (hAsync("ion-picker-column", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
16103
+ return (hAsync("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, items: dayPeriodData, onIonChange: (ev) => {
16097
16104
  const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
16098
16105
  this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
16099
16106
  this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));
16100
16107
  ev.stopPropagation();
16101
- } }, dayPeriodData.map((dayPeriod) => (hAsync("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
16108
+ } }));
16102
16109
  }
16103
16110
  renderWheelView(forcePresentation) {
16104
16111
  const { locale } = this;
@@ -16119,11 +16126,26 @@ class Datetime {
16119
16126
  const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
16120
16127
  // don't use the inheritAttributes util because it removes dir from the host, and we still need that
16121
16128
  const hostDir = this.el.getAttribute('dir') || undefined;
16122
- return (hAsync("div", { class: "calendar-header" }, hAsync("div", { class: "calendar-action-buttons" }, hAsync("div", { class: "calendar-month-year" }, hAsync("button", { class: {
16123
- 'calendar-month-year-toggle': true,
16124
- 'ion-activatable': true,
16125
- 'ion-focusable': true,
16126
- }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, hAsync("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), hAsync("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && hAsync("ion-ripple-effect", null))), hAsync("div", { class: "calendar-next-prev" }, hAsync("ion-buttons", null, hAsync("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), hAsync("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), hAsync("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
16129
+ return (hAsync("div", { class: "calendar-header" }, hAsync("div", { class: "calendar-action-buttons" }, hAsync("div", { class: "calendar-month-year" }, hAsync("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", disabled: disabled, onClick: () => {
16130
+ var _a;
16131
+ this.toggleMonthAndYearView();
16132
+ /**
16133
+ * TODO: FW-3547
16134
+ *
16135
+ * Currently there is not a way to set the aria-label on the inner button
16136
+ * on the `ion-item` and have it be reactive to changes. This is a workaround
16137
+ * until we either refactor `ion-item` to a button or Stencil adds a way to
16138
+ * have reactive props for built-in properties, such as `aria-label`.
16139
+ */
16140
+ const { monthYearToggleItemRef } = this;
16141
+ if (monthYearToggleItemRef) {
16142
+ const btn = (_a = monthYearToggleItemRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-native');
16143
+ if (btn) {
16144
+ const monthYearAriaLabel = this.showMonthAndYear ? 'Hide year picker' : 'Show year picker';
16145
+ btn.setAttribute('aria-label', monthYearAriaLabel);
16146
+ }
16147
+ }
16148
+ } }, hAsync("ion-label", null, getMonthAndYear(this.locale, this.workingParts), hAsync("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })))), hAsync("div", { class: "calendar-next-prev" }, hAsync("ion-buttons", null, hAsync("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), hAsync("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), hAsync("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
16127
16149
  return hAsync("div", { class: "day-of-week" }, d);
16128
16150
  }))));
16129
16151
  }
@@ -16284,7 +16306,7 @@ class Datetime {
16284
16306
  * This will correctly scroll the element position to the correct time value,
16285
16307
  * before the popover is fully presented.
16286
16308
  */
16287
- const cols = ev.target.querySelectorAll('ion-picker-column');
16309
+ const cols = ev.target.querySelectorAll('ion-picker-column-internal');
16288
16310
  // TODO (FW-615): Potentially remove this when intersection observers are fixed in picker column
16289
16311
  cols.forEach((col) => col.scrollActiveItemIntoView());
16290
16312
  }, style: {
@@ -16478,8 +16500,6 @@ class Datetime {
16478
16500
  }; }
16479
16501
  }
16480
16502
  let datetimeIds = 0;
16481
- const WHEEL_ITEM_PART = 'wheel-item';
16482
- const WHEEL_ITEM_ACTIVE_PART = `active`;
16483
16503
 
16484
16504
  const iosDatetimeButtonCss = "/*!@:host*/.sc-ion-datetime-button-ios-h{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}/*!@:host button*/.sc-ion-datetime-button-ios-h button.sc-ion-datetime-button-ios{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;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@:host(.time-active) #time-button,\n:host(.date-active) #date-button*/.time-active.sc-ion-datetime-button-ios-h #time-button.sc-ion-datetime-button-ios,.date-active.sc-ion-datetime-button-ios-h #date-button.sc-ion-datetime-button-ios{color:var(--ion-color-base)}/*!@:host(.datetime-button-disabled)*/.datetime-button-disabled.sc-ion-datetime-button-ios-h{pointer-events:none}/*!@:host(.datetime-button-disabled) button*/.datetime-button-disabled.sc-ion-datetime-button-ios-h button.sc-ion-datetime-button-ios{opacity:0.4}";
16485
16505
 
@@ -18740,8 +18760,6 @@ class Input {
18740
18760
  *
18741
18761
  * Developers who wish to focus an input when an overlay is presented
18742
18762
  * should call `setFocus` after `didPresent` has resolved.
18743
- *
18744
- * See [managing focus](/docs/developing/managing-focus) for more information.
18745
18763
  */
18746
18764
  async setFocus() {
18747
18765
  if (this.nativeInput) {
@@ -24527,501 +24545,6 @@ class Note {
24527
24545
  }; }
24528
24546
  }
24529
24547
 
24530
- const pickerIosCss$1 = "/*!@:host*/.sc-ion-picker-ios-h{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}/*!@:host .picker-before,\n:host .picker-after*/.sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios,.sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}/*!@:host .picker-before*/.sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios{top:0;height:83px}@supports (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios{left:0}/*!@:host-context([dir=rtl]) .picker-before*/[dir=rtl].sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-ios selector(.sc-ion-picker-ios:dir(rtl)){.sc-ion-picker-ios-h:dir(rtl) .picker-before{left:unset;right:unset;right:0}}}/*!@:host .picker-after*/.sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios{top:116px;height:84px}@supports (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios{left:0}/*!@:host-context([dir=rtl]) .picker-after*/[dir=rtl].sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-ios selector(.sc-ion-picker-ios:dir(rtl)){.sc-ion-picker-ios-h:dir(rtl) .picker-after{left:unset;right:unset;right:0}}}/*!@:host .picker-highlight*/.sc-ion-picker-ios-h .picker-highlight.sc-ion-picker-ios{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}/*!@:host input*/.sc-ion-picker-ios-h input.sc-ion-picker-ios{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 ::slotted(ion-picker-column:first-of-type)*/.sc-ion-picker-ios-h .sc-ion-picker-ios-s>ion-picker-column:first-of-type{text-align:start}/*!@:host ::slotted(ion-picker-column:last-of-type)*/.sc-ion-picker-ios-h .sc-ion-picker-ios-s>ion-picker-column:last-of-type{text-align:end}/*!@:host ::slotted(ion-picker-column:only-child)*/.sc-ion-picker-ios-h .sc-ion-picker-ios-s>ion-picker-column:only-child{text-align:center}/*!@:host .picker-before*/.sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}/*!@:host .picker-after*/.sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}/*!@:host .picker-highlight*/.sc-ion-picker-ios-h .picker-highlight.sc-ion-picker-ios{background:var(--highlight-background, var(--ion-color-step-150, #eeeeef))}";
24531
-
24532
- const pickerMdCss$1 = "/*!@:host*/.sc-ion-picker-md-h{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}/*!@:host .picker-before,\n:host .picker-after*/.sc-ion-picker-md-h .picker-before.sc-ion-picker-md,.sc-ion-picker-md-h .picker-after.sc-ion-picker-md{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}/*!@:host .picker-before*/.sc-ion-picker-md-h .picker-before.sc-ion-picker-md{top:0;height:83px}@supports (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-md-h .picker-before.sc-ion-picker-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-md-h .picker-before.sc-ion-picker-md{left:0}/*!@:host-context([dir=rtl]) .picker-before*/[dir=rtl].sc-ion-picker-md-h .picker-before.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-before.sc-ion-picker-md{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-md selector(.sc-ion-picker-md:dir(rtl)){.sc-ion-picker-md-h:dir(rtl) .picker-before{left:unset;right:unset;right:0}}}/*!@:host .picker-after*/.sc-ion-picker-md-h .picker-after.sc-ion-picker-md{top:116px;height:84px}@supports (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-md-h .picker-after.sc-ion-picker-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-md-h .picker-after.sc-ion-picker-md{left:0}/*!@:host-context([dir=rtl]) .picker-after*/[dir=rtl].sc-ion-picker-md-h .picker-after.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-after.sc-ion-picker-md{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-md selector(.sc-ion-picker-md:dir(rtl)){.sc-ion-picker-md-h:dir(rtl) .picker-after{left:unset;right:unset;right:0}}}/*!@:host .picker-highlight*/.sc-ion-picker-md-h .picker-highlight.sc-ion-picker-md{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}/*!@:host input*/.sc-ion-picker-md-h input.sc-ion-picker-md{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 ::slotted(ion-picker-column:first-of-type)*/.sc-ion-picker-md-h .sc-ion-picker-md-s>ion-picker-column:first-of-type{text-align:start}/*!@:host ::slotted(ion-picker-column:last-of-type)*/.sc-ion-picker-md-h .sc-ion-picker-md-s>ion-picker-column:last-of-type{text-align:end}/*!@:host ::slotted(ion-picker-column:only-child)*/.sc-ion-picker-md-h .sc-ion-picker-md-s>ion-picker-column:only-child{text-align:center}/*!@:host .picker-before*/.sc-ion-picker-md-h .picker-before.sc-ion-picker-md{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}/*!@:host .picker-after*/.sc-ion-picker-md-h .picker-after.sc-ion-picker-md{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}";
24533
-
24534
- /**
24535
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
24536
- */
24537
- class Picker$1 {
24538
- constructor(hostRef) {
24539
- registerInstance(this, hostRef);
24540
- this.ionInputModeChange = createEvent(this, "ionInputModeChange", 7);
24541
- this.useInputMode = false;
24542
- this.isInHighlightBounds = (ev) => {
24543
- const { highlightEl } = this;
24544
- if (!highlightEl) {
24545
- return false;
24546
- }
24547
- const bbox = highlightEl.getBoundingClientRect();
24548
- /**
24549
- * Check to see if the user clicked
24550
- * outside the bounds of the highlight.
24551
- */
24552
- const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
24553
- const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
24554
- if (outsideX || outsideY) {
24555
- return false;
24556
- }
24557
- return true;
24558
- };
24559
- /**
24560
- * If we are no longer focused
24561
- * on a picker column, then we should
24562
- * exit input mode. An exception is made
24563
- * for the input in the picker since having
24564
- * that focused means we are still in input mode.
24565
- */
24566
- this.onFocusOut = (ev) => {
24567
- // TODO(FW-2832): type
24568
- const { relatedTarget } = ev;
24569
- if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN' && relatedTarget !== this.inputEl)) {
24570
- this.exitInputMode();
24571
- }
24572
- };
24573
- /**
24574
- * When picker columns receive focus
24575
- * the parent picker needs to determine
24576
- * whether to enter/exit input mode.
24577
- */
24578
- this.onFocusIn = (ev) => {
24579
- // TODO(FW-2832): type
24580
- const { target } = ev;
24581
- /**
24582
- * Due to browser differences in how/when focus
24583
- * is dispatched on certain elements, we need to
24584
- * make sure that this function only ever runs when
24585
- * focusing a picker column.
24586
- */
24587
- if (target.tagName !== 'ION-PICKER-COLUMN') {
24588
- return;
24589
- }
24590
- /**
24591
- * If we have actionOnClick
24592
- * then this means the user focused
24593
- * a picker column via mouse or
24594
- * touch (i.e. a PointerEvent). As a result,
24595
- * we should not enter/exit input mode
24596
- * until the click event has fired, which happens
24597
- * after the `focusin` event.
24598
- *
24599
- * Otherwise, the user likely focused
24600
- * the column using their keyboard and
24601
- * we should enter/exit input mode automatically.
24602
- */
24603
- if (!this.actionOnClick) {
24604
- const columnEl = target;
24605
- const allowInput = columnEl.numericInput;
24606
- if (allowInput) {
24607
- this.enterInputMode(columnEl, false);
24608
- }
24609
- else {
24610
- this.exitInputMode();
24611
- }
24612
- }
24613
- };
24614
- /**
24615
- * On click we need to run an actionOnClick
24616
- * function that has been set in onPointerDown
24617
- * so that we enter/exit input mode correctly.
24618
- */
24619
- this.onClick = () => {
24620
- const { actionOnClick } = this;
24621
- if (actionOnClick) {
24622
- actionOnClick();
24623
- this.actionOnClick = undefined;
24624
- }
24625
- };
24626
- /**
24627
- * Clicking a column also focuses the column on
24628
- * certain browsers, so we use onPointerDown
24629
- * to tell the onFocusIn function that users
24630
- * are trying to click the column rather than
24631
- * focus the column using the keyboard. When the
24632
- * user completes the click, the onClick function
24633
- * runs and runs the actionOnClick callback.
24634
- */
24635
- this.onPointerDown = (ev) => {
24636
- const { useInputMode, inputModeColumn, el } = this;
24637
- if (this.isInHighlightBounds(ev)) {
24638
- /**
24639
- * If we were already in
24640
- * input mode, then we should determine
24641
- * if we tapped a particular column and
24642
- * should switch to input mode for
24643
- * that specific column.
24644
- */
24645
- if (useInputMode) {
24646
- /**
24647
- * If we tapped a picker column
24648
- * then we should either switch to input
24649
- * mode for that column or all columns.
24650
- * Otherwise we should exit input mode
24651
- * since we just tapped the highlight and
24652
- * not a column.
24653
- */
24654
- if (ev.target.tagName === 'ION-PICKER-COLUMN') {
24655
- /**
24656
- * If user taps 2 different columns
24657
- * then we should just switch to input mode
24658
- * for the new column rather than switching to
24659
- * input mode for all columns.
24660
- */
24661
- if (inputModeColumn && inputModeColumn === ev.target) {
24662
- this.actionOnClick = () => {
24663
- this.enterInputMode();
24664
- };
24665
- }
24666
- else {
24667
- this.actionOnClick = () => {
24668
- this.enterInputMode(ev.target);
24669
- };
24670
- }
24671
- }
24672
- else {
24673
- this.actionOnClick = () => {
24674
- this.exitInputMode();
24675
- };
24676
- }
24677
- /**
24678
- * If we were not already in
24679
- * input mode, then we should
24680
- * enter input mode for all columns.
24681
- */
24682
- }
24683
- else {
24684
- /**
24685
- * If there is only 1 numeric input column
24686
- * then we should skip multi column input.
24687
- */
24688
- const columns = el.querySelectorAll('ion-picker-column.picker-column-numeric-input');
24689
- const columnEl = columns.length === 1 ? ev.target : undefined;
24690
- this.actionOnClick = () => {
24691
- this.enterInputMode(columnEl);
24692
- };
24693
- }
24694
- return;
24695
- }
24696
- this.actionOnClick = () => {
24697
- this.exitInputMode();
24698
- };
24699
- };
24700
- /**
24701
- * Enters input mode to allow
24702
- * for text entry of numeric values.
24703
- * If on mobile, we focus a hidden input
24704
- * field so that the on screen keyboard
24705
- * is brought up. When tabbing using a
24706
- * keyboard, picker columns receive an outline
24707
- * to indicate they are focused. As a result,
24708
- * we should not focus the hidden input as it
24709
- * would cause the outline to go away, preventing
24710
- * users from having any visual indication of which
24711
- * column is focused.
24712
- */
24713
- this.enterInputMode = (columnEl, focusInput = true) => {
24714
- const { inputEl, el } = this;
24715
- if (!inputEl) {
24716
- return;
24717
- }
24718
- /**
24719
- * Only active input mode if there is at
24720
- * least one column that accepts numeric input.
24721
- */
24722
- const hasInputColumn = el.querySelector('ion-picker-column.picker-column-numeric-input');
24723
- if (!hasInputColumn) {
24724
- return;
24725
- }
24726
- /**
24727
- * If columnEl is undefined then
24728
- * it is assumed that all numeric pickers
24729
- * are eligible for text entry.
24730
- * (i.e. hour and minute columns)
24731
- */
24732
- this.useInputMode = true;
24733
- this.inputModeColumn = columnEl;
24734
- /**
24735
- * Users with a keyboard and mouse can
24736
- * activate input mode where the input is
24737
- * focused as well as when it is not focused,
24738
- * so we need to make sure we clean up any
24739
- * old listeners.
24740
- */
24741
- if (focusInput) {
24742
- if (this.destroyKeypressListener) {
24743
- this.destroyKeypressListener();
24744
- this.destroyKeypressListener = undefined;
24745
- }
24746
- inputEl.focus();
24747
- }
24748
- else {
24749
- el.addEventListener('keypress', this.onKeyPress);
24750
- this.destroyKeypressListener = () => {
24751
- el.removeEventListener('keypress', this.onKeyPress);
24752
- };
24753
- }
24754
- this.emitInputModeChange();
24755
- };
24756
- this.onKeyPress = (ev) => {
24757
- const { inputEl } = this;
24758
- if (!inputEl) {
24759
- return;
24760
- }
24761
- const parsedValue = parseInt(ev.key, 10);
24762
- /**
24763
- * Only numbers should be allowed
24764
- */
24765
- if (!Number.isNaN(parsedValue)) {
24766
- inputEl.value += ev.key;
24767
- this.onInputChange();
24768
- }
24769
- };
24770
- this.selectSingleColumn = () => {
24771
- const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
24772
- if (!inputEl || !inputModeColumn) {
24773
- return;
24774
- }
24775
- const options = Array.from(inputModeColumn.querySelectorAll('ion-picker-column-option')).filter((el) => el.disabled !== true);
24776
- /**
24777
- * If users pause for a bit, the search
24778
- * value should be reset similar to how a
24779
- * <select> behaves. So typing "34", waiting,
24780
- * then typing "5" should select "05".
24781
- */
24782
- if (singleColumnSearchTimeout) {
24783
- clearTimeout(singleColumnSearchTimeout);
24784
- }
24785
- this.singleColumnSearchTimeout = setTimeout(() => {
24786
- inputEl.value = '';
24787
- this.singleColumnSearchTimeout = undefined;
24788
- }, 1000);
24789
- /**
24790
- * For values that are longer than 2 digits long
24791
- * we should shift the value over 1 character
24792
- * to the left. So typing "456" would result in "56".
24793
- * TODO: If we want to support more than just
24794
- * time entry, we should update this value to be
24795
- * the max length of all of the picker items.
24796
- */
24797
- if (inputEl.value.length >= 3) {
24798
- const startIndex = inputEl.value.length - 2;
24799
- const newString = inputEl.value.substring(startIndex);
24800
- inputEl.value = newString;
24801
- this.selectSingleColumn();
24802
- return;
24803
- }
24804
- /**
24805
- * Checking the value of the input gets priority
24806
- * first. For example, if the value of the input
24807
- * is "1" and we entered "2", then the complete value
24808
- * is "12" and we should select hour 12.
24809
- *
24810
- * Regex removes any leading zeros from values like "02",
24811
- * but it keeps a single zero if there are only zeros in the string.
24812
- * 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
24813
- * 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
24814
- */
24815
- const findItemFromCompleteValue = options.find(({ textContent }) => {
24816
- /**
24817
- * Keyboard entry is currently only used inside of Datetime
24818
- * where we guarantee textContent is set.
24819
- * If we end up exposing this feature publicly we should revisit this assumption.
24820
- */
24821
- const parsedText = textContent.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
24822
- return parsedText === inputEl.value;
24823
- });
24824
- if (findItemFromCompleteValue) {
24825
- inputModeColumn.setValue(findItemFromCompleteValue.value);
24826
- return;
24827
- }
24828
- /**
24829
- * If we typed "56" to get minute 56, then typed "7",
24830
- * we should select "07" as "567" is not a valid minute.
24831
- */
24832
- if (inputEl.value.length === 2) {
24833
- const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
24834
- inputEl.value = changedCharacter;
24835
- this.selectSingleColumn();
24836
- }
24837
- };
24838
- /**
24839
- * Searches a list of column items for a particular
24840
- * value. This is currently used for numeric values.
24841
- * The zeroBehavior can be set to account for leading
24842
- * or trailing zeros when looking at the item text.
24843
- */
24844
- this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
24845
- const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
24846
- const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => {
24847
- return el.disabled !== true && el.textContent.replace(behavior, '') === value;
24848
- });
24849
- if (option) {
24850
- colEl.setValue(option.value);
24851
- }
24852
- };
24853
- this.selectMultiColumn = () => {
24854
- const { inputEl, el } = this;
24855
- if (!inputEl) {
24856
- return;
24857
- }
24858
- const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);
24859
- const firstColumn = numericPickers[0];
24860
- const lastColumn = numericPickers[1];
24861
- let value = inputEl.value;
24862
- let minuteValue;
24863
- switch (value.length) {
24864
- case 1:
24865
- this.searchColumn(firstColumn, value);
24866
- break;
24867
- case 2:
24868
- /**
24869
- * If the first character is `0` or `1` it is
24870
- * possible that users are trying to type `09`
24871
- * or `11` into the hour field, so we should look
24872
- * at that first.
24873
- */
24874
- const firstCharacter = inputEl.value.substring(0, 1);
24875
- value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
24876
- this.searchColumn(firstColumn, value);
24877
- /**
24878
- * If only checked the first value,
24879
- * we can check the second value
24880
- * for a match in the minutes column
24881
- */
24882
- if (value.length === 1) {
24883
- minuteValue = inputEl.value.substring(inputEl.value.length - 1);
24884
- this.searchColumn(lastColumn, minuteValue, 'end');
24885
- }
24886
- break;
24887
- case 3:
24888
- /**
24889
- * If the first character is `0` or `1` it is
24890
- * possible that users are trying to type `09`
24891
- * or `11` into the hour field, so we should look
24892
- * at that first.
24893
- */
24894
- const firstCharacterAgain = inputEl.value.substring(0, 1);
24895
- value =
24896
- firstCharacterAgain === '0' || firstCharacterAgain === '1'
24897
- ? inputEl.value.substring(0, 2)
24898
- : firstCharacterAgain;
24899
- this.searchColumn(firstColumn, value);
24900
- /**
24901
- * If only checked the first value,
24902
- * we can check the second value
24903
- * for a match in the minutes column
24904
- */
24905
- minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
24906
- this.searchColumn(lastColumn, minuteValue, 'end');
24907
- break;
24908
- case 4:
24909
- /**
24910
- * If the first character is `0` or `1` it is
24911
- * possible that users are trying to type `09`
24912
- * or `11` into the hour field, so we should look
24913
- * at that first.
24914
- */
24915
- const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
24916
- value =
24917
- firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
24918
- ? inputEl.value.substring(0, 2)
24919
- : firstCharacterAgainAgain;
24920
- this.searchColumn(firstColumn, value);
24921
- /**
24922
- * If only checked the first value,
24923
- * we can check the second value
24924
- * for a match in the minutes column
24925
- */
24926
- const minuteValueAgain = value.length === 1
24927
- ? inputEl.value.substring(1, inputEl.value.length)
24928
- : inputEl.value.substring(2, inputEl.value.length);
24929
- this.searchColumn(lastColumn, minuteValueAgain, 'end');
24930
- break;
24931
- default:
24932
- const startIndex = inputEl.value.length - 4;
24933
- const newString = inputEl.value.substring(startIndex);
24934
- inputEl.value = newString;
24935
- this.selectMultiColumn();
24936
- break;
24937
- }
24938
- };
24939
- /**
24940
- * Searches the value of the active column
24941
- * to determine which value users are trying
24942
- * to select
24943
- */
24944
- this.onInputChange = () => {
24945
- const { useInputMode, inputEl, inputModeColumn } = this;
24946
- if (!useInputMode || !inputEl) {
24947
- return;
24948
- }
24949
- if (inputModeColumn) {
24950
- this.selectSingleColumn();
24951
- }
24952
- else {
24953
- this.selectMultiColumn();
24954
- }
24955
- };
24956
- /**
24957
- * Emit ionInputModeChange. Picker columns
24958
- * listen for this event to determine whether
24959
- * or not their column is "active" for text input.
24960
- */
24961
- this.emitInputModeChange = () => {
24962
- const { useInputMode, inputModeColumn } = this;
24963
- this.ionInputModeChange.emit({
24964
- useInputMode,
24965
- inputModeColumn,
24966
- });
24967
- };
24968
- }
24969
- /**
24970
- * When the picker is interacted with
24971
- * we need to prevent touchstart so other
24972
- * gestures do not fire. For example,
24973
- * scrolling on the wheel picker
24974
- * in ion-datetime should not cause
24975
- * a card modal to swipe to close.
24976
- */
24977
- preventTouchStartPropagation(ev) {
24978
- ev.stopPropagation();
24979
- }
24980
- componentWillLoad() {
24981
- getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
24982
- getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
24983
- }
24984
- /**
24985
- * @internal
24986
- * Exits text entry mode for the picker
24987
- * This method blurs the hidden input
24988
- * and cause the keyboard to dismiss.
24989
- */
24990
- async exitInputMode() {
24991
- const { inputEl, useInputMode } = this;
24992
- if (!useInputMode || !inputEl) {
24993
- return;
24994
- }
24995
- this.useInputMode = false;
24996
- this.inputModeColumn = undefined;
24997
- inputEl.blur();
24998
- inputEl.value = '';
24999
- if (this.destroyKeypressListener) {
25000
- this.destroyKeypressListener();
25001
- this.destroyKeypressListener = undefined;
25002
- }
25003
- this.emitInputModeChange();
25004
- }
25005
- render() {
25006
- return (hAsync(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { class: "picker-before" }), hAsync("div", { class: "picker-after" }), hAsync("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", null)));
25007
- }
25008
- get el() { return getElement(this); }
25009
- static get style() { return {
25010
- ios: pickerIosCss$1,
25011
- md: pickerMdCss$1
25012
- }; }
25013
- static get cmpMeta() { return {
25014
- "$flags$": 41,
25015
- "$tagName$": "ion-picker",
25016
- "$members$": {
25017
- "exitInputMode": [64]
25018
- },
25019
- "$listeners$": [[1, "touchstart", "preventTouchStartPropagation"]],
25020
- "$lazyBundleId$": "-",
25021
- "$attrsToReflect$": []
25022
- }; }
25023
- }
25024
-
25025
24548
  /**
25026
24549
  * iOS Picker Enter Animation
25027
24550
  */
@@ -25066,9 +24589,9 @@ const iosLeaveAnimation$2 = (baseEl) => {
25066
24589
  .addAnimation([backdropAnimation, wrapperAnimation]);
25067
24590
  };
25068
24591
 
25069
- const pickerIosCss = ".sc-ion-picker-legacy-ios-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}@supports (inset-inline-start: 0){.sc-ion-picker-legacy-ios-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){.sc-ion-picker-legacy-ios-h{left:0}[dir=rtl].sc-ion-picker-legacy-ios-h,[dir=rtl] .sc-ion-picker-legacy-ios-h{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.sc-ion-picker-legacy-ios-h:dir(rtl){left:unset;right:unset;right:0}}}.overlay-hidden.sc-ion-picker-legacy-ios-h{display:none}.picker-wrapper.sc-ion-picker-legacy-ios{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;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);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-legacy-ios{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-legacy-ios{border:0;font-family:inherit}.picker-button.sc-ion-picker-legacy-ios:active,.picker-button.sc-ion-picker-legacy-ios:focus{outline:none}.picker-columns.sc-ion-picker-legacy-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-legacy-ios,.picker-below-highlight.sc-ion-picker-legacy-ios{display:none;pointer-events:none}.sc-ion-picker-legacy-ios-h{--background:var(--ion-background-color, #fff);--border-width:1px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-legacy-ios{display:-ms-flexbox;display:flex;height:44px;border-bottom:0.55px solid var(--border-color)}.picker-toolbar-button.sc-ion-picker-legacy-ios{-ms-flex:1;flex:1;text-align:end}.picker-toolbar-button.sc-ion-picker-legacy-ios:last-child .picker-button.sc-ion-picker-legacy-ios{font-weight:600}.picker-toolbar-button.sc-ion-picker-legacy-ios:first-child{font-weight:normal;text-align:start}.picker-button.sc-ion-picker-legacy-ios,.picker-button.ion-activated.sc-ion-picker-legacy-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1em;padding-inline-start:1em;-webkit-padding-end:1em;padding-inline-end:1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:16px}.picker-columns.sc-ion-picker-legacy-ios{height:215px;-webkit-perspective:1000px;perspective:1000px}.picker-above-highlight.sc-ion-picker-legacy-ios{top:0;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);display:block;position:absolute;width:100%;height:81px;border-bottom:1px solid var(--border-color);background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:10}@supports (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-legacy-ios{left:0}[dir=rtl].sc-ion-picker-legacy-ios-h .picker-above-highlight.sc-ion-picker-legacy-ios,[dir=rtl] .sc-ion-picker-legacy-ios-h .picker-above-highlight.sc-ion-picker-legacy-ios{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-legacy-ios .picker-above-highlight.sc-ion-picker-legacy-ios{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-above-highlight.sc-ion-picker-legacy-ios:dir(rtl){left:unset;right:unset;right:0}}}.picker-below-highlight.sc-ion-picker-legacy-ios{top:115px;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);display:block;position:absolute;width:100%;height:119px;border-top:1px solid var(--border-color);background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:11}@supports (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-legacy-ios{left:0}[dir=rtl].sc-ion-picker-legacy-ios-h .picker-below-highlight.sc-ion-picker-legacy-ios,[dir=rtl] .sc-ion-picker-legacy-ios-h .picker-below-highlight.sc-ion-picker-legacy-ios{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-legacy-ios .picker-below-highlight.sc-ion-picker-legacy-ios{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-below-highlight.sc-ion-picker-legacy-ios:dir(rtl){left:unset;right:unset;right:0}}}";
24592
+ const pickerIosCss = ".sc-ion-picker-ios-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}@supports (inset-inline-start: 0){.sc-ion-picker-ios-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){.sc-ion-picker-ios-h{left:0}[dir=rtl].sc-ion-picker-ios-h,[dir=rtl] .sc-ion-picker-ios-h{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.sc-ion-picker-ios-h:dir(rtl){left:unset;right:unset;right:0}}}.overlay-hidden.sc-ion-picker-ios-h{display:none}.picker-wrapper.sc-ion-picker-ios{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;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);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-ios{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-ios{border:0;font-family:inherit}.picker-button.sc-ion-picker-ios:active,.picker-button.sc-ion-picker-ios:focus{outline:none}.picker-columns.sc-ion-picker-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-ios,.picker-below-highlight.sc-ion-picker-ios{display:none;pointer-events:none}.sc-ion-picker-ios-h{--background:var(--ion-background-color, #fff);--border-width:1px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-ios{display:-ms-flexbox;display:flex;height:44px;border-bottom:0.55px solid var(--border-color)}.picker-toolbar-button.sc-ion-picker-ios{-ms-flex:1;flex:1;text-align:end}.picker-toolbar-button.sc-ion-picker-ios:last-child .picker-button.sc-ion-picker-ios{font-weight:600}.picker-toolbar-button.sc-ion-picker-ios:first-child{font-weight:normal;text-align:start}.picker-button.sc-ion-picker-ios,.picker-button.ion-activated.sc-ion-picker-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1em;padding-inline-start:1em;-webkit-padding-end:1em;padding-inline-end:1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:16px}.picker-columns.sc-ion-picker-ios{height:215px;-webkit-perspective:1000px;perspective:1000px}.picker-above-highlight.sc-ion-picker-ios{top:0;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);display:block;position:absolute;width:100%;height:81px;border-bottom:1px solid var(--border-color);background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:10}@supports (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-ios{left:0}[dir=rtl].sc-ion-picker-ios-h .picker-above-highlight.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-above-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-ios .picker-above-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-above-highlight.sc-ion-picker-ios:dir(rtl){left:unset;right:unset;right:0}}}.picker-below-highlight.sc-ion-picker-ios{top:115px;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);display:block;position:absolute;width:100%;height:119px;border-top:1px solid var(--border-color);background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:11}@supports (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-ios{left:0}[dir=rtl].sc-ion-picker-ios-h .picker-below-highlight.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-below-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-ios .picker-below-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-below-highlight.sc-ion-picker-ios:dir(rtl){left:unset;right:unset;right:0}}}";
25070
24593
 
25071
- const pickerMdCss = ".sc-ion-picker-legacy-md-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}@supports (inset-inline-start: 0){.sc-ion-picker-legacy-md-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){.sc-ion-picker-legacy-md-h{left:0}[dir=rtl].sc-ion-picker-legacy-md-h,[dir=rtl] .sc-ion-picker-legacy-md-h{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.sc-ion-picker-legacy-md-h:dir(rtl){left:unset;right:unset;right:0}}}.overlay-hidden.sc-ion-picker-legacy-md-h{display:none}.picker-wrapper.sc-ion-picker-legacy-md{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;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);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-legacy-md{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-legacy-md{border:0;font-family:inherit}.picker-button.sc-ion-picker-legacy-md:active,.picker-button.sc-ion-picker-legacy-md:focus{outline:none}.picker-columns.sc-ion-picker-legacy-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-legacy-md,.picker-below-highlight.sc-ion-picker-legacy-md{display:none;pointer-events:none}.sc-ion-picker-legacy-md-h{--background:var(--ion-background-color, #fff);--border-width:0.55px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-legacy-md{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;height:44px}.picker-button.sc-ion-picker-legacy-md,.picker-button.ion-activated.sc-ion-picker-legacy-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1.1em;padding-inline-start:1.1em;-webkit-padding-end:1.1em;padding-inline-end:1.1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:14px;font-weight:500;text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none}.picker-columns.sc-ion-picker-legacy-md{height:216px;-webkit-perspective:1800px;perspective:1800px}.picker-above-highlight.sc-ion-picker-legacy-md{top:0;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);position:absolute;width:100%;height:81px;border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:10}@supports (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-legacy-md{left:0}[dir=rtl].sc-ion-picker-legacy-md-h .picker-above-highlight.sc-ion-picker-legacy-md,[dir=rtl] .sc-ion-picker-legacy-md-h .picker-above-highlight.sc-ion-picker-legacy-md{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-legacy-md .picker-above-highlight.sc-ion-picker-legacy-md{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-above-highlight.sc-ion-picker-legacy-md:dir(rtl){left:unset;right:unset;right:0}}}.picker-below-highlight.sc-ion-picker-legacy-md{top:115px;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);position:absolute;width:100%;height:119px;border-top:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:11}@supports (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-legacy-md{left:0}[dir=rtl].sc-ion-picker-legacy-md-h .picker-below-highlight.sc-ion-picker-legacy-md,[dir=rtl] .sc-ion-picker-legacy-md-h .picker-below-highlight.sc-ion-picker-legacy-md{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-legacy-md .picker-below-highlight.sc-ion-picker-legacy-md{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-below-highlight.sc-ion-picker-legacy-md:dir(rtl){left:unset;right:unset;right:0}}}";
24594
+ const pickerMdCss = ".sc-ion-picker-md-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}@supports (inset-inline-start: 0){.sc-ion-picker-md-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){.sc-ion-picker-md-h{left:0}[dir=rtl].sc-ion-picker-md-h,[dir=rtl] .sc-ion-picker-md-h{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.sc-ion-picker-md-h:dir(rtl){left:unset;right:unset;right:0}}}.overlay-hidden.sc-ion-picker-md-h{display:none}.picker-wrapper.sc-ion-picker-md{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;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);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-md{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-md{border:0;font-family:inherit}.picker-button.sc-ion-picker-md:active,.picker-button.sc-ion-picker-md:focus{outline:none}.picker-columns.sc-ion-picker-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-md,.picker-below-highlight.sc-ion-picker-md{display:none;pointer-events:none}.sc-ion-picker-md-h{--background:var(--ion-background-color, #fff);--border-width:0.55px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-md{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;height:44px}.picker-button.sc-ion-picker-md,.picker-button.ion-activated.sc-ion-picker-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1.1em;padding-inline-start:1.1em;-webkit-padding-end:1.1em;padding-inline-end:1.1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:14px;font-weight:500;text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none}.picker-columns.sc-ion-picker-md{height:216px;-webkit-perspective:1800px;perspective:1800px}.picker-above-highlight.sc-ion-picker-md{top:0;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);position:absolute;width:100%;height:81px;border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:10}@supports (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-md{left:0}[dir=rtl].sc-ion-picker-md-h .picker-above-highlight.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-above-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-md .picker-above-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-above-highlight.sc-ion-picker-md:dir(rtl){left:unset;right:unset;right:0}}}.picker-below-highlight.sc-ion-picker-md{top:115px;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);position:absolute;width:100%;height:119px;border-top:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:11}@supports (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-md{left:0}[dir=rtl].sc-ion-picker-md-h .picker-below-highlight.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-below-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-md .picker-below-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-below-highlight.sc-ion-picker-md:dir(rtl){left:unset;right:unset;right:0}}}";
25072
24595
 
25073
24596
  // TODO(FW-2832): types
25074
24597
  /**
@@ -25141,7 +24664,6 @@ class Picker {
25141
24664
  setOverlayId(this.el);
25142
24665
  }
25143
24666
  componentDidLoad() {
25144
- printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
25145
24667
  /**
25146
24668
  * If picker was rendered with isOpen="true"
25147
24669
  * then we should open picker immediately.
@@ -25149,6 +24671,16 @@ class Picker {
25149
24671
  if (this.isOpen === true) {
25150
24672
  raf(() => this.present());
25151
24673
  }
24674
+ /**
24675
+ * When binding values in frameworks such as Angular
24676
+ * it is possible for the value to be set after the Web Component
24677
+ * initializes but before the value watcher is set up in Stencil.
24678
+ * As a result, the watcher callback may not be fired.
24679
+ * We work around this by manually calling the watcher
24680
+ * callback when the component has loaded and the watcher
24681
+ * is configured.
24682
+ */
24683
+ this.triggerChanged();
25152
24684
  }
25153
24685
  /**
25154
24686
  * Present the picker overlay after it has been created.
@@ -25245,7 +24777,7 @@ class Picker {
25245
24777
  zIndex: `${20000 + this.overlayIndex}`,
25246
24778
  }, class: Object.assign({ [mode]: true,
25247
24779
  // Used internally for styling
25248
- [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { tabindex: "0" }), hAsync("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { class: "picker-columns" }, hAsync("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { class: "picker-below-highlight" }))), hAsync("div", { tabindex: "0" })));
24780
+ [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { tabindex: "0" }), hAsync("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { class: "picker-columns" }, hAsync("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-column", { col: c })), hAsync("div", { class: "picker-below-highlight" }))), hAsync("div", { tabindex: "0" })));
25249
24781
  }
25250
24782
  get el() { return getElement(this); }
25251
24783
  static get watchers() { return {
@@ -25258,7 +24790,7 @@ class Picker {
25258
24790
  }; }
25259
24791
  static get cmpMeta() { return {
25260
24792
  "$flags$": 34,
25261
- "$tagName$": "ion-picker-legacy",
24793
+ "$tagName$": "ion-picker",
25262
24794
  "$members$": {
25263
24795
  "overlayIndex": [2, "overlay-index"],
25264
24796
  "delegate": [16],
@@ -25298,400 +24830,6 @@ const buttonClass$1 = (button) => {
25298
24830
  return Object.assign({ 'picker-button': true, 'ion-activatable': true }, getClassMap(button.cssClass));
25299
24831
  };
25300
24832
 
25301
- const pickerColumnCss = "/*!@:host*/.sc-ion-picker-column-h{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}/*!@.picker-opts*/.picker-opts.sc-ion-picker-column{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}/*!@.picker-item-empty*/.picker-item-empty.sc-ion-picker-column{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:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@.picker-opts::-webkit-scrollbar*/.picker-opts.sc-ion-picker-column::-webkit-scrollbar{display:none}/*!@::slotted(ion-picker-column-option)*/.sc-ion-picker-column-s>ion-picker-column-option{display:block;scroll-snap-align:center}/*!@.picker-item-empty,\n:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled)*/.picker-item-empty.sc-ion-picker-column,.sc-ion-picker-column-h:not([disabled]).sc-ion-picker-column-s>ion-picker-column-option.option-disabled,.sc-ion-picker-column-h:not([disabled]) .sc-ion-picker-column-s>ion-picker-column-option.option-disabled{scroll-snap-align:none}/*!@::slotted([slot=prefix]), ::slotted([slot=suffix])*/.sc-ion-picker-column-s>[slot=prefix],.sc-ion-picker-column-s>[slot=suffix]{max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@::slotted([slot=prefix])*/.sc-ion-picker-column-s>[slot=prefix]{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}/*!@::slotted([slot=suffix])*/.sc-ion-picker-column-s>[slot=suffix]{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}/*!@:host(.picker-column-disabled) .picker-opts*/.picker-column-disabled.sc-ion-picker-column-h .picker-opts.sc-ion-picker-column{overflow-y:hidden}/*!@:host(.picker-column-disabled) ::slotted(ion-picker-column-option)*/.sc-ion-picker-column-h.picker-column-disabled .sc-ion-picker-column-s>ion-picker-column-option{cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){/*!@:host(:focus) .picker-opts*/.sc-ion-picker-column-h:focus .picker-opts.sc-ion-picker-column{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
25302
-
25303
- /**
25304
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
25305
- *
25306
- * @slot prefix - Content to show on the left side of the picker options.
25307
- * @slot suffix - Content to show on the right side of the picker options.
25308
- */
25309
- class PickerColumn {
25310
- constructor(hostRef) {
25311
- registerInstance(this, hostRef);
25312
- this.ionChange = createEvent(this, "ionChange", 7);
25313
- this.isScrolling = false;
25314
- this.isColumnVisible = false;
25315
- this.canExitInputMode = true;
25316
- this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
25317
- const { isColumnVisible, scrollEl } = this;
25318
- if (isColumnVisible && scrollEl) {
25319
- // (Vertical offset from parent) - (three empty picker rows) + (half the height of the target to ensure the scroll triggers)
25320
- const top = target.offsetTop - 3 * target.clientHeight + target.clientHeight / 2;
25321
- if (scrollEl.scrollTop !== top) {
25322
- /**
25323
- * Setting this flag prevents input
25324
- * mode from exiting in the picker column's
25325
- * scroll callback. This is useful when the user manually
25326
- * taps an item or types on the keyboard as both
25327
- * of these can cause a scroll to occur.
25328
- */
25329
- this.canExitInputMode = canExitInputMode;
25330
- scrollEl.scroll({
25331
- top,
25332
- left: 0,
25333
- behavior: smooth ? 'smooth' : undefined,
25334
- });
25335
- }
25336
- }
25337
- };
25338
- this.setPickerItemActiveState = (item, isActive) => {
25339
- if (isActive) {
25340
- item.classList.add(PICKER_ITEM_ACTIVE_CLASS);
25341
- }
25342
- else {
25343
- item.classList.remove(PICKER_ITEM_ACTIVE_CLASS);
25344
- }
25345
- };
25346
- /**
25347
- * When ionInputModeChange is emitted, each column
25348
- * needs to check if it is the one being made available
25349
- * for text entry.
25350
- */
25351
- this.inputModeChange = (ev) => {
25352
- if (!this.numericInput) {
25353
- return;
25354
- }
25355
- const { useInputMode, inputModeColumn } = ev.detail;
25356
- /**
25357
- * If inputModeColumn is undefined then this means
25358
- * all numericInput columns are being selected.
25359
- */
25360
- const isColumnActive = inputModeColumn === undefined || inputModeColumn === this.el;
25361
- if (!useInputMode || !isColumnActive) {
25362
- this.setInputModeActive(false);
25363
- return;
25364
- }
25365
- this.setInputModeActive(true);
25366
- };
25367
- /**
25368
- * Setting isActive will cause a re-render.
25369
- * As a result, we do not want to cause the
25370
- * re-render mid scroll as this will cause
25371
- * the picker column to jump back to
25372
- * whatever value was selected at the
25373
- * start of the scroll interaction.
25374
- */
25375
- this.setInputModeActive = (state) => {
25376
- if (this.isScrolling) {
25377
- this.scrollEndCallback = () => {
25378
- this.isActive = state;
25379
- };
25380
- return;
25381
- }
25382
- this.isActive = state;
25383
- };
25384
- /**
25385
- * When the column scrolls, the component
25386
- * needs to determine which item is centered
25387
- * in the view and will emit an ionChange with
25388
- * the item object.
25389
- */
25390
- this.initializeScrollListener = () => {
25391
- /**
25392
- * The haptics for the wheel picker are
25393
- * an iOS-only feature. As a result, they should
25394
- * be disabled on Android.
25395
- */
25396
- const enableHaptics = isPlatform('ios');
25397
- const { el, scrollEl } = this;
25398
- let timeout;
25399
- let activeEl = this.activeItem;
25400
- const scrollCallback = () => {
25401
- raf(() => {
25402
- if (!scrollEl)
25403
- return;
25404
- if (timeout) {
25405
- clearTimeout(timeout);
25406
- timeout = undefined;
25407
- }
25408
- if (!this.isScrolling) {
25409
- enableHaptics && hapticSelectionStart();
25410
- this.isScrolling = true;
25411
- }
25412
- /**
25413
- * Select item in the center of the column
25414
- * which is the month/year that we want to select
25415
- */
25416
- const bbox = scrollEl.getBoundingClientRect();
25417
- const centerX = bbox.x + bbox.width / 2;
25418
- const centerY = bbox.y + bbox.height / 2;
25419
- /**
25420
- * elementFromPoint returns the top-most element.
25421
- * This means that if an ion-backdrop is overlaying the
25422
- * picker then the appropriate picker column option will
25423
- * not be selected. To account for this, we use elementsFromPoint
25424
- * and use an Array.find to find the appropriate column option
25425
- * at that point.
25426
- *
25427
- * Additionally, the picker column could be used in the
25428
- * Shadow DOM (i.e. in ion-datetime) so we need to make
25429
- * sure we are choosing the correct host otherwise
25430
- * the elements returns by elementsFromPoint will be
25431
- * retargeted. To account for this, we check to see
25432
- * if the picker column has a parent shadow root. If
25433
- * so, we use that shadow root when doing elementsFromPoint.
25434
- * Otherwise, we just use the document.
25435
- */
25436
- const rootNode = el.getRootNode();
25437
- const hasParentShadow = rootNode instanceof ShadowRoot;
25438
- const referenceNode = hasParentShadow ? rootNode : doc;
25439
- /**
25440
- * If the reference node is undefined
25441
- * then it's likely that doc is undefined
25442
- * due to being in an SSR environment.
25443
- */
25444
- if (referenceNode === undefined) {
25445
- return;
25446
- }
25447
- const elementsAtPoint = referenceNode.elementsFromPoint(centerX, centerY);
25448
- /**
25449
- * elementsFromPoint can returns multiple elements
25450
- * so find the relevant picker column option if one exists.
25451
- */
25452
- const newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
25453
- if (activeEl !== undefined) {
25454
- this.setPickerItemActiveState(activeEl, false);
25455
- }
25456
- if (newActiveElement === undefined || newActiveElement.disabled) {
25457
- return;
25458
- }
25459
- /**
25460
- * If we are selecting a new value,
25461
- * we need to run haptics again.
25462
- */
25463
- if (newActiveElement !== activeEl) {
25464
- enableHaptics && hapticSelectionChanged();
25465
- if (this.canExitInputMode) {
25466
- /**
25467
- * The native iOS wheel picker
25468
- * only dismisses the keyboard
25469
- * once the selected item has changed
25470
- * as a result of a swipe
25471
- * from the user. If `canExitInputMode` is
25472
- * `false` then this means that the
25473
- * scroll is happening as a result of
25474
- * the `value` property programmatically changing
25475
- * either by an application or by the user via the keyboard.
25476
- */
25477
- this.exitInputMode();
25478
- }
25479
- }
25480
- activeEl = newActiveElement;
25481
- this.setPickerItemActiveState(newActiveElement, true);
25482
- timeout = setTimeout(() => {
25483
- this.isScrolling = false;
25484
- enableHaptics && hapticSelectionEnd();
25485
- /**
25486
- * Certain tasks (such as those that
25487
- * cause re-renders) should only be done
25488
- * once scrolling has finished, otherwise
25489
- * flickering may occur.
25490
- */
25491
- const { scrollEndCallback } = this;
25492
- if (scrollEndCallback) {
25493
- scrollEndCallback();
25494
- this.scrollEndCallback = undefined;
25495
- }
25496
- /**
25497
- * Reset this flag as the
25498
- * next scroll interaction could
25499
- * be a scroll from the user. In this
25500
- * case, we should exit input mode.
25501
- */
25502
- this.canExitInputMode = true;
25503
- this.setValue(newActiveElement.value);
25504
- }, 250);
25505
- });
25506
- };
25507
- /**
25508
- * Wrap this in an raf so that the scroll callback
25509
- * does not fire when component is initially shown.
25510
- */
25511
- raf(() => {
25512
- if (!scrollEl)
25513
- return;
25514
- scrollEl.addEventListener('scroll', scrollCallback);
25515
- this.destroyScrollListener = () => {
25516
- scrollEl.removeEventListener('scroll', scrollCallback);
25517
- };
25518
- });
25519
- };
25520
- /**
25521
- * Tells the parent picker to
25522
- * exit text entry mode. This is only called
25523
- * when the selected item changes during scroll, so
25524
- * we know that the user likely wants to scroll
25525
- * instead of type.
25526
- */
25527
- this.exitInputMode = () => {
25528
- const { parentEl } = this;
25529
- if (parentEl == null)
25530
- return;
25531
- parentEl.exitInputMode();
25532
- /**
25533
- * setInputModeActive only takes
25534
- * effect once scrolling stops to avoid
25535
- * a component re-render while scrolling.
25536
- * However, we want the visual active
25537
- * indicator to go away immediately, so
25538
- * we call classList.remove here.
25539
- */
25540
- this.el.classList.remove('picker-column-active');
25541
- };
25542
- this.isActive = false;
25543
- this.disabled = false;
25544
- this.value = undefined;
25545
- this.color = 'primary';
25546
- this.numericInput = false;
25547
- }
25548
- valueChange() {
25549
- if (this.isColumnVisible) {
25550
- /**
25551
- * Only scroll the active item into view when the picker column
25552
- * is actively visible to the user.
25553
- */
25554
- this.scrollActiveItemIntoView(true);
25555
- }
25556
- }
25557
- /**
25558
- * Only setup scroll listeners
25559
- * when the picker is visible, otherwise
25560
- * the container will have a scroll
25561
- * height of 0px.
25562
- */
25563
- componentWillLoad() {
25564
- const visibleCallback = (entries) => {
25565
- const ev = entries[0];
25566
- if (ev.isIntersecting) {
25567
- const { activeItem, el } = this;
25568
- this.isColumnVisible = true;
25569
- /**
25570
- * Because this initial call to scrollActiveItemIntoView has to fire before
25571
- * the scroll listener is set up, we need to manage the active class manually.
25572
- */
25573
- const oldActive = getElementRoot(el).querySelector(`.${PICKER_ITEM_ACTIVE_CLASS}`);
25574
- if (oldActive) {
25575
- this.setPickerItemActiveState(oldActive, false);
25576
- }
25577
- this.scrollActiveItemIntoView();
25578
- if (activeItem) {
25579
- this.setPickerItemActiveState(activeItem, true);
25580
- }
25581
- this.initializeScrollListener();
25582
- }
25583
- else {
25584
- this.isColumnVisible = false;
25585
- if (this.destroyScrollListener) {
25586
- this.destroyScrollListener();
25587
- this.destroyScrollListener = undefined;
25588
- }
25589
- }
25590
- };
25591
- new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
25592
- const parentEl = (this.parentEl = this.el.closest('ion-picker'));
25593
- if (parentEl !== null) {
25594
- // TODO(FW-2832): type
25595
- parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
25596
- }
25597
- }
25598
- componentDidRender() {
25599
- const { el, activeItem, isColumnVisible, value } = this;
25600
- if (isColumnVisible && !activeItem) {
25601
- const firstOption = el.querySelector('ion-picker-column-option');
25602
- /**
25603
- * If the picker column does not have an active item and the current value
25604
- * does not match the first item in the picker column, that means
25605
- * the value is out of bounds. In this case, we assign the value to the
25606
- * first item to match the scroll position of the column.
25607
- *
25608
- */
25609
- if (firstOption !== null && firstOption.value !== value) {
25610
- this.setValue(firstOption.value);
25611
- }
25612
- }
25613
- }
25614
- /** @internal */
25615
- async scrollActiveItemIntoView(smooth = false) {
25616
- const activeEl = this.activeItem;
25617
- if (activeEl) {
25618
- this.centerPickerItemInView(activeEl, smooth, false);
25619
- }
25620
- }
25621
- /**
25622
- * Sets the value prop and fires the ionChange event.
25623
- * This is used when we need to fire ionChange from
25624
- * user-generated events that cannot be caught with normal
25625
- * input/change event listeners.
25626
- * @internal
25627
- */
25628
- async setValue(value) {
25629
- if (this.disabled === true || this.value === value) {
25630
- return;
25631
- }
25632
- this.value = value;
25633
- this.ionChange.emit({ value });
25634
- }
25635
- /**
25636
- * Sets focus on the scrollable container within the picker column.
25637
- * Use this method instead of the global `pickerColumn.focus()`.
25638
- */
25639
- async setFocus() {
25640
- if (this.scrollEl) {
25641
- this.scrollEl.focus();
25642
- }
25643
- }
25644
- get activeItem() {
25645
- const { value } = this;
25646
- const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
25647
- return options.find((option) => {
25648
- /**
25649
- * If the whole picker column is disabled, the current value should appear active
25650
- * If the current value item is specifically disabled, it should not appear active
25651
- */
25652
- if (!this.disabled && option.disabled) {
25653
- return false;
25654
- }
25655
- return option.value === value;
25656
- });
25657
- }
25658
- render() {
25659
- const { color, disabled, isActive, numericInput } = this;
25660
- const mode = getIonMode$1(this);
25661
- return (hAsync(Host, { class: createColorClasses$1(color, {
25662
- [mode]: true,
25663
- ['picker-column-active']: isActive,
25664
- ['picker-column-numeric-input']: numericInput,
25665
- ['picker-column-disabled']: disabled,
25666
- }) }, hAsync("slot", { name: "prefix" }), hAsync("div", { class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
25667
- this.scrollEl = el;
25668
- } }, hAsync("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", null), hAsync("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { name: "suffix" })));
25669
- }
25670
- get el() { return getElement(this); }
25671
- static get watchers() { return {
25672
- "value": ["valueChange"]
25673
- }; }
25674
- static get style() { return pickerColumnCss; }
25675
- static get cmpMeta() { return {
25676
- "$flags$": 9,
25677
- "$tagName$": "ion-picker-column",
25678
- "$members$": {
25679
- "disabled": [4],
25680
- "value": [1032],
25681
- "color": [513],
25682
- "numericInput": [4, "numeric-input"],
25683
- "isActive": [32],
25684
- "scrollActiveItemIntoView": [64],
25685
- "setValue": [64],
25686
- "setFocus": [64]
25687
- },
25688
- "$listeners$": undefined,
25689
- "$lazyBundleId$": "-",
25690
- "$attrsToReflect$": [["color", "color"]]
25691
- }; }
25692
- }
25693
- const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
25694
-
25695
24833
  const pickerColumnIosCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-transform-origin:center center;transform-origin:center center;height:46px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}:host-context([dir=rtl]) .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}";
25696
24834
 
25697
24835
  const pickerColumnMdCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #3880ff)}";
@@ -26023,140 +25161,900 @@ class PickerColumnCmp {
26023
25161
  // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the the column has changed
26024
25162
  this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
26025
25163
  }
26026
- this.refresh(forceRefresh, animated);
25164
+ this.refresh(forceRefresh, animated);
25165
+ }
25166
+ render() {
25167
+ const col = this.col;
25168
+ const mode = getIonMode$1(this);
25169
+ return (hAsync(Host, { class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
25170
+ 'max-width': this.col.columnWidth,
25171
+ } }, col.prefix && (hAsync("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
25172
+ }
25173
+ get el() { return getElement(this); }
25174
+ static get watchers() { return {
25175
+ "col": ["colChanged"]
25176
+ }; }
25177
+ static get style() { return {
25178
+ ios: pickerColumnIosCss,
25179
+ md: pickerColumnMdCss
25180
+ }; }
25181
+ static get cmpMeta() { return {
25182
+ "$flags$": 32,
25183
+ "$tagName$": "ion-picker-column",
25184
+ "$members$": {
25185
+ "col": [16]
25186
+ },
25187
+ "$listeners$": undefined,
25188
+ "$lazyBundleId$": "-",
25189
+ "$attrsToReflect$": []
25190
+ }; }
25191
+ }
25192
+ const PICKER_OPT_SELECTED = 'picker-opt-selected';
25193
+ const DECELERATION_FRICTION = 0.97;
25194
+ const MAX_PICKER_SPEED = 90;
25195
+ const TRANSITION_DURATION = 150;
25196
+
25197
+ const pickerColumnInternalIosCss = "/*!@:host*/.sc-ion-picker-column-internal-ios-h{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}/*!@:host::-webkit-scrollbar*/.sc-ion-picker-column-internal-ios-h::-webkit-scrollbar{display:none}/*!@:host .picker-item*/.sc-ion-picker-column-internal-ios-h .picker-item.sc-ion-picker-column-internal-ios{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:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}/*!@:host .picker-item-empty,\n:host .picker-item[disabled]*/.sc-ion-picker-column-internal-ios-h .picker-item-empty.sc-ion-picker-column-internal-ios,.sc-ion-picker-column-internal-ios-h .picker-item[disabled].sc-ion-picker-column-internal-ios{cursor:default}/*!@:host .picker-item-empty,\n:host(:not([disabled])) .picker-item[disabled]*/.sc-ion-picker-column-internal-ios-h .picker-item-empty.sc-ion-picker-column-internal-ios,.sc-ion-picker-column-internal-ios-h:not([disabled]) .picker-item[disabled].sc-ion-picker-column-internal-ios{scroll-snap-align:none}/*!@:host([disabled])*/[disabled].sc-ion-picker-column-internal-ios-h{overflow-y:hidden}/*!@:host .picker-item[disabled]*/.sc-ion-picker-column-internal-ios-h .picker-item[disabled].sc-ion-picker-column-internal-ios{opacity:0.4}/*!@:host(.picker-column-active) .picker-item.picker-item-active*/.picker-column-active.sc-ion-picker-column-internal-ios-h .picker-item.picker-item-active.sc-ion-picker-column-internal-ios{color:var(--ion-color-base)}@media (any-hover: hover){/*!@:host(:focus)*/.sc-ion-picker-column-internal-ios-h:focus{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
25198
+
25199
+ const pickerColumnInternalMdCss = "/*!@:host*/.sc-ion-picker-column-internal-md-h{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}/*!@:host::-webkit-scrollbar*/.sc-ion-picker-column-internal-md-h::-webkit-scrollbar{display:none}/*!@:host .picker-item*/.sc-ion-picker-column-internal-md-h .picker-item.sc-ion-picker-column-internal-md{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:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}/*!@:host .picker-item-empty,\n:host .picker-item[disabled]*/.sc-ion-picker-column-internal-md-h .picker-item-empty.sc-ion-picker-column-internal-md,.sc-ion-picker-column-internal-md-h .picker-item[disabled].sc-ion-picker-column-internal-md{cursor:default}/*!@:host .picker-item-empty,\n:host(:not([disabled])) .picker-item[disabled]*/.sc-ion-picker-column-internal-md-h .picker-item-empty.sc-ion-picker-column-internal-md,.sc-ion-picker-column-internal-md-h:not([disabled]) .picker-item[disabled].sc-ion-picker-column-internal-md{scroll-snap-align:none}/*!@:host([disabled])*/[disabled].sc-ion-picker-column-internal-md-h{overflow-y:hidden}/*!@:host .picker-item[disabled]*/.sc-ion-picker-column-internal-md-h .picker-item[disabled].sc-ion-picker-column-internal-md{opacity:0.4}/*!@:host(.picker-column-active) .picker-item.picker-item-active*/.picker-column-active.sc-ion-picker-column-internal-md-h .picker-item.picker-item-active.sc-ion-picker-column-internal-md{color:var(--ion-color-base)}@media (any-hover: hover){/*!@:host(:focus)*/.sc-ion-picker-column-internal-md-h:focus{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}/*!@:host .picker-item-active*/.sc-ion-picker-column-internal-md-h .picker-item-active.sc-ion-picker-column-internal-md{color:var(--ion-color-base)}";
25200
+
25201
+ /**
25202
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
25203
+ * @internal
25204
+ */
25205
+ class PickerColumnInternal {
25206
+ constructor(hostRef) {
25207
+ registerInstance(this, hostRef);
25208
+ this.ionChange = createEvent(this, "ionChange", 7);
25209
+ this.isScrolling = false;
25210
+ this.isColumnVisible = false;
25211
+ this.canExitInputMode = true;
25212
+ this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
25213
+ const { el, isColumnVisible } = this;
25214
+ if (isColumnVisible) {
25215
+ // (Vertical offset from parent) - (three empty picker rows) + (half the height of the target to ensure the scroll triggers)
25216
+ const top = target.offsetTop - 3 * target.clientHeight + target.clientHeight / 2;
25217
+ if (el.scrollTop !== top) {
25218
+ /**
25219
+ * Setting this flag prevents input
25220
+ * mode from exiting in the picker column's
25221
+ * scroll callback. This is useful when the user manually
25222
+ * taps an item or types on the keyboard as both
25223
+ * of these can cause a scroll to occur.
25224
+ */
25225
+ this.canExitInputMode = canExitInputMode;
25226
+ el.scroll({
25227
+ top,
25228
+ left: 0,
25229
+ behavior: smooth ? 'smooth' : undefined,
25230
+ });
25231
+ }
25232
+ }
25233
+ };
25234
+ this.setPickerItemActiveState = (item, isActive) => {
25235
+ if (isActive) {
25236
+ item.classList.add(PICKER_ITEM_ACTIVE_CLASS);
25237
+ item.part.add(PICKER_ITEM_ACTIVE_PART);
25238
+ }
25239
+ else {
25240
+ item.classList.remove(PICKER_ITEM_ACTIVE_CLASS);
25241
+ item.part.remove(PICKER_ITEM_ACTIVE_PART);
25242
+ }
25243
+ };
25244
+ /**
25245
+ * When ionInputModeChange is emitted, each column
25246
+ * needs to check if it is the one being made available
25247
+ * for text entry.
25248
+ */
25249
+ this.inputModeChange = (ev) => {
25250
+ if (!this.numericInput) {
25251
+ return;
25252
+ }
25253
+ const { useInputMode, inputModeColumn } = ev.detail;
25254
+ /**
25255
+ * If inputModeColumn is undefined then this means
25256
+ * all numericInput columns are being selected.
25257
+ */
25258
+ const isColumnActive = inputModeColumn === undefined || inputModeColumn === this.el;
25259
+ if (!useInputMode || !isColumnActive) {
25260
+ this.setInputModeActive(false);
25261
+ return;
25262
+ }
25263
+ this.setInputModeActive(true);
25264
+ };
25265
+ /**
25266
+ * Setting isActive will cause a re-render.
25267
+ * As a result, we do not want to cause the
25268
+ * re-render mid scroll as this will cause
25269
+ * the picker column to jump back to
25270
+ * whatever value was selected at the
25271
+ * start of the scroll interaction.
25272
+ */
25273
+ this.setInputModeActive = (state) => {
25274
+ if (this.isScrolling) {
25275
+ this.scrollEndCallback = () => {
25276
+ this.isActive = state;
25277
+ };
25278
+ return;
25279
+ }
25280
+ this.isActive = state;
25281
+ };
25282
+ /**
25283
+ * When the column scrolls, the component
25284
+ * needs to determine which item is centered
25285
+ * in the view and will emit an ionChange with
25286
+ * the item object.
25287
+ */
25288
+ this.initializeScrollListener = () => {
25289
+ /**
25290
+ * The haptics for the wheel picker are
25291
+ * an iOS-only feature. As a result, they should
25292
+ * be disabled on Android.
25293
+ */
25294
+ const enableHaptics = isPlatform('ios');
25295
+ const { el } = this;
25296
+ let timeout;
25297
+ let activeEl = this.activeItem;
25298
+ const scrollCallback = () => {
25299
+ raf(() => {
25300
+ if (timeout) {
25301
+ clearTimeout(timeout);
25302
+ timeout = undefined;
25303
+ }
25304
+ if (!this.isScrolling) {
25305
+ enableHaptics && hapticSelectionStart();
25306
+ this.isScrolling = true;
25307
+ }
25308
+ /**
25309
+ * Select item in the center of the column
25310
+ * which is the month/year that we want to select
25311
+ */
25312
+ const bbox = el.getBoundingClientRect();
25313
+ const centerX = bbox.x + bbox.width / 2;
25314
+ const centerY = bbox.y + bbox.height / 2;
25315
+ const activeElement = el.shadowRoot.elementFromPoint(centerX, centerY);
25316
+ if (activeEl !== null) {
25317
+ this.setPickerItemActiveState(activeEl, false);
25318
+ }
25319
+ if (activeElement === null || activeElement.disabled) {
25320
+ return;
25321
+ }
25322
+ /**
25323
+ * If we are selecting a new value,
25324
+ * we need to run haptics again.
25325
+ */
25326
+ if (activeElement !== activeEl) {
25327
+ enableHaptics && hapticSelectionChanged();
25328
+ if (this.canExitInputMode) {
25329
+ /**
25330
+ * The native iOS wheel picker
25331
+ * only dismisses the keyboard
25332
+ * once the selected item has changed
25333
+ * as a result of a swipe
25334
+ * from the user. If `canExitInputMode` is
25335
+ * `false` then this means that the
25336
+ * scroll is happening as a result of
25337
+ * the `value` property programmatically changing
25338
+ * either by an application or by the user via the keyboard.
25339
+ */
25340
+ this.exitInputMode();
25341
+ }
25342
+ }
25343
+ activeEl = activeElement;
25344
+ this.setPickerItemActiveState(activeElement, true);
25345
+ timeout = setTimeout(() => {
25346
+ this.isScrolling = false;
25347
+ enableHaptics && hapticSelectionEnd();
25348
+ /**
25349
+ * Certain tasks (such as those that
25350
+ * cause re-renders) should only be done
25351
+ * once scrolling has finished, otherwise
25352
+ * flickering may occur.
25353
+ */
25354
+ const { scrollEndCallback } = this;
25355
+ if (scrollEndCallback) {
25356
+ scrollEndCallback();
25357
+ this.scrollEndCallback = undefined;
25358
+ }
25359
+ /**
25360
+ * Reset this flag as the
25361
+ * next scroll interaction could
25362
+ * be a scroll from the user. In this
25363
+ * case, we should exit input mode.
25364
+ */
25365
+ this.canExitInputMode = true;
25366
+ const dataIndex = activeElement.getAttribute('data-index');
25367
+ /**
25368
+ * If no value it is
25369
+ * possible we hit one of the
25370
+ * empty padding columns.
25371
+ */
25372
+ if (dataIndex === null) {
25373
+ return;
25374
+ }
25375
+ const index = parseInt(dataIndex, 10);
25376
+ const selectedItem = this.items[index];
25377
+ if (selectedItem.value !== this.value) {
25378
+ this.setValue(selectedItem.value);
25379
+ }
25380
+ }, 250);
25381
+ });
25382
+ };
25383
+ /**
25384
+ * Wrap this in an raf so that the scroll callback
25385
+ * does not fire when component is initially shown.
25386
+ */
25387
+ raf(() => {
25388
+ el.addEventListener('scroll', scrollCallback);
25389
+ this.destroyScrollListener = () => {
25390
+ el.removeEventListener('scroll', scrollCallback);
25391
+ };
25392
+ });
25393
+ };
25394
+ /**
25395
+ * Tells the parent picker to
25396
+ * exit text entry mode. This is only called
25397
+ * when the selected item changes during scroll, so
25398
+ * we know that the user likely wants to scroll
25399
+ * instead of type.
25400
+ */
25401
+ this.exitInputMode = () => {
25402
+ const { parentEl } = this;
25403
+ if (parentEl == null)
25404
+ return;
25405
+ parentEl.exitInputMode();
25406
+ /**
25407
+ * setInputModeActive only takes
25408
+ * effect once scrolling stops to avoid
25409
+ * a component re-render while scrolling.
25410
+ * However, we want the visual active
25411
+ * indicator to go away immediately, so
25412
+ * we call classList.remove here.
25413
+ */
25414
+ this.el.classList.remove('picker-column-active');
25415
+ };
25416
+ this.isActive = false;
25417
+ this.disabled = false;
25418
+ this.items = [];
25419
+ this.value = undefined;
25420
+ this.color = 'primary';
25421
+ this.numericInput = false;
25422
+ }
25423
+ valueChange() {
25424
+ if (this.isColumnVisible) {
25425
+ /**
25426
+ * Only scroll the active item into view when the picker column
25427
+ * is actively visible to the user.
25428
+ */
25429
+ this.scrollActiveItemIntoView();
25430
+ }
25431
+ }
25432
+ /**
25433
+ * Only setup scroll listeners
25434
+ * when the picker is visible, otherwise
25435
+ * the container will have a scroll
25436
+ * height of 0px.
25437
+ */
25438
+ componentWillLoad() {
25439
+ const visibleCallback = (entries) => {
25440
+ const ev = entries[0];
25441
+ if (ev.isIntersecting) {
25442
+ const { activeItem, el } = this;
25443
+ this.isColumnVisible = true;
25444
+ /**
25445
+ * Because this initial call to scrollActiveItemIntoView has to fire before
25446
+ * the scroll listener is set up, we need to manage the active class manually.
25447
+ */
25448
+ const oldActive = getElementRoot(el).querySelector(`.${PICKER_ITEM_ACTIVE_CLASS}`);
25449
+ if (oldActive) {
25450
+ this.setPickerItemActiveState(oldActive, false);
25451
+ }
25452
+ this.scrollActiveItemIntoView();
25453
+ if (activeItem) {
25454
+ this.setPickerItemActiveState(activeItem, true);
25455
+ }
25456
+ this.initializeScrollListener();
25457
+ }
25458
+ else {
25459
+ this.isColumnVisible = false;
25460
+ if (this.destroyScrollListener) {
25461
+ this.destroyScrollListener();
25462
+ this.destroyScrollListener = undefined;
25463
+ }
25464
+ }
25465
+ };
25466
+ new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
25467
+ const parentEl = (this.parentEl = this.el.closest('ion-picker-internal'));
25468
+ if (parentEl !== null) {
25469
+ // TODO(FW-2832): type
25470
+ parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
25471
+ }
25472
+ }
25473
+ componentDidRender() {
25474
+ var _a;
25475
+ const { activeItem, items, isColumnVisible, value } = this;
25476
+ if (isColumnVisible) {
25477
+ if (activeItem) {
25478
+ this.scrollActiveItemIntoView();
25479
+ }
25480
+ else if (((_a = items[0]) === null || _a === void 0 ? void 0 : _a.value) !== value) {
25481
+ /**
25482
+ * If the picker column does not have an active item and the current value
25483
+ * does not match the first item in the picker column, that means
25484
+ * the value is out of bounds. In this case, we assign the value to the
25485
+ * first item to match the scroll position of the column.
25486
+ *
25487
+ */
25488
+ this.setValue(items[0].value);
25489
+ }
25490
+ }
25491
+ }
25492
+ /** @internal */
25493
+ async scrollActiveItemIntoView() {
25494
+ const activeEl = this.activeItem;
25495
+ if (activeEl) {
25496
+ this.centerPickerItemInView(activeEl, false, false);
25497
+ }
25498
+ }
25499
+ /**
25500
+ * Sets the value prop and fires the ionChange event.
25501
+ * This is used when we need to fire ionChange from
25502
+ * user-generated events that cannot be caught with normal
25503
+ * input/change event listeners.
25504
+ * @internal
25505
+ */
25506
+ async setValue(value) {
25507
+ const { items } = this;
25508
+ this.value = value;
25509
+ const findItem = items.find((item) => item.value === value && item.disabled !== true);
25510
+ if (findItem) {
25511
+ this.ionChange.emit(findItem);
25512
+ }
25513
+ }
25514
+ get activeItem() {
25515
+ // If the whole picker column is disabled, the current value should appear active
25516
+ // If the current value item is specifically disabled, it should not appear active
25517
+ const selector = `.picker-item[data-value="${this.value}"]${this.disabled ? '' : ':not([disabled])'}`;
25518
+ return getElementRoot(this.el).querySelector(selector);
26027
25519
  }
26028
25520
  render() {
26029
- const col = this.col;
25521
+ const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
26030
25522
  const mode = getIonMode$1(this);
26031
- return (hAsync(Host, { class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
26032
- 'max-width': this.col.columnWidth,
26033
- } }, col.prefix && (hAsync("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
25523
+ /**
25524
+ * exportparts is needed so ion-datetime can expose the parts
25525
+ * from two layers of shadow nesting. If this causes problems,
25526
+ * the attribute can be moved to datetime.tsx and set on every
25527
+ * instance of ion-picker-column-internal there instead.
25528
+ */
25529
+ return (hAsync(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses$1(color, {
25530
+ [mode]: true,
25531
+ ['picker-column-active']: isActive,
25532
+ ['picker-column-numeric-input']: numericInput,
25533
+ }) }, hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
25534
+ const isItemDisabled = pickerDisabled || item.disabled || false;
25535
+ return (hAsync("button", { tabindex: "-1", class: {
25536
+ 'picker-item': true,
25537
+ }, "data-value": item.value, "data-index": index, onClick: (ev) => {
25538
+ this.centerPickerItemInView(ev.target, true);
25539
+ }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
25540
+ }), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
26034
25541
  }
26035
25542
  get el() { return getElement(this); }
26036
25543
  static get watchers() { return {
26037
- "col": ["colChanged"]
25544
+ "value": ["valueChange"]
26038
25545
  }; }
26039
25546
  static get style() { return {
26040
- ios: pickerColumnIosCss,
26041
- md: pickerColumnMdCss
25547
+ ios: pickerColumnInternalIosCss,
25548
+ md: pickerColumnInternalMdCss
26042
25549
  }; }
26043
25550
  static get cmpMeta() { return {
26044
- "$flags$": 32,
26045
- "$tagName$": "ion-picker-legacy-column",
25551
+ "$flags$": 41,
25552
+ "$tagName$": "ion-picker-column-internal",
26046
25553
  "$members$": {
26047
- "col": [16]
25554
+ "disabled": [4],
25555
+ "items": [16],
25556
+ "value": [1032],
25557
+ "color": [513],
25558
+ "numericInput": [4, "numeric-input"],
25559
+ "isActive": [32],
25560
+ "scrollActiveItemIntoView": [64],
25561
+ "setValue": [64]
26048
25562
  },
26049
25563
  "$listeners$": undefined,
26050
25564
  "$lazyBundleId$": "-",
26051
- "$attrsToReflect$": []
25565
+ "$attrsToReflect$": [["color", "color"]]
26052
25566
  }; }
26053
25567
  }
26054
- const PICKER_OPT_SELECTED = 'picker-opt-selected';
26055
- const DECELERATION_FRICTION = 0.97;
26056
- const MAX_PICKER_SPEED = 90;
26057
- const TRANSITION_DURATION = 150;
25568
+ const PICKER_ITEM_ACTIVE_CLASS = 'picker-item-active';
25569
+ const PICKER_ITEM_PART = 'wheel-item';
25570
+ const PICKER_ITEM_ACTIVE_PART = 'active';
26058
25571
 
26059
- const pickerColumnOptionIosCss = "/*!@button*/button.sc-ion-picker-column-option-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}/*!@:host(.option-disabled)*/.option-disabled.sc-ion-picker-column-option-ios-h{opacity:0.4}/*!@:host(.option-disabled) button*/.option-disabled.sc-ion-picker-column-option-ios-h button.sc-ion-picker-column-option-ios{cursor:default}";
25572
+ const pickerInternalIosCss = "/*!@:host*/.sc-ion-picker-internal-ios-h{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}/*!@:host .picker-before,\n:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios,.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}/*!@:host .picker-before*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{top:0;height:83px}@supports (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{left:0}/*!@:host-context([dir=rtl]) .picker-before*/[dir=rtl].sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios,[dir=rtl] .sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-internal-ios selector(.sc-ion-picker-internal-ios:dir(rtl)){.sc-ion-picker-internal-ios-h:dir(rtl) .picker-before{left:unset;right:unset;right:0}}}/*!@:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{top:116px;height:84px}@supports (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{left:0}/*!@:host-context([dir=rtl]) .picker-after*/[dir=rtl].sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios,[dir=rtl] .sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-internal-ios selector(.sc-ion-picker-internal-ios:dir(rtl)){.sc-ion-picker-internal-ios-h:dir(rtl) .picker-after{left:unset;right:unset;right:0}}}/*!@:host .picker-highlight*/.sc-ion-picker-internal-ios-h .picker-highlight.sc-ion-picker-internal-ios{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}/*!@:host input*/.sc-ion-picker-internal-ios-h input.sc-ion-picker-internal-ios{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 ::slotted(ion-picker-column-internal:first-of-type)*/.sc-ion-picker-internal-ios-h .sc-ion-picker-internal-ios-s>ion-picker-column-internal:first-of-type{text-align:start}/*!@:host ::slotted(ion-picker-column-internal:last-of-type)*/.sc-ion-picker-internal-ios-h .sc-ion-picker-internal-ios-s>ion-picker-column-internal:last-of-type{text-align:end}/*!@:host ::slotted(ion-picker-column-internal:only-child)*/.sc-ion-picker-internal-ios-h .sc-ion-picker-internal-ios-s>ion-picker-column-internal:only-child{text-align:center}/*!@:host .picker-before*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}/*!@:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}/*!@:host .picker-highlight*/.sc-ion-picker-internal-ios-h .picker-highlight.sc-ion-picker-internal-ios{background:var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef))}";
26060
25573
 
26061
- const pickerColumnOptionMdCss = "/*!@button*/button.sc-ion-picker-column-option-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}/*!@:host(.option-disabled)*/.option-disabled.sc-ion-picker-column-option-md-h{opacity:0.4}/*!@:host(.option-disabled) button*/.option-disabled.sc-ion-picker-column-option-md-h button.sc-ion-picker-column-option-md{cursor:default}/*!@:host(.option-active)*/.option-active.sc-ion-picker-column-option-md-h{color:var(--ion-color-base)}";
25574
+ const pickerInternalMdCss = "/*!@:host*/.sc-ion-picker-internal-md-h{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}/*!@:host .picker-before,\n:host .picker-after*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md,.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}/*!@:host .picker-before*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{top:0;height:83px}@supports (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{left:0}/*!@:host-context([dir=rtl]) .picker-before*/[dir=rtl].sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md,[dir=rtl] .sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-internal-md selector(.sc-ion-picker-internal-md:dir(rtl)){.sc-ion-picker-internal-md-h:dir(rtl) .picker-before{left:unset;right:unset;right:0}}}/*!@:host .picker-after*/.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{top:116px;height:84px}@supports (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{left:0}/*!@:host-context([dir=rtl]) .picker-after*/[dir=rtl].sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md,[dir=rtl] .sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-internal-md selector(.sc-ion-picker-internal-md:dir(rtl)){.sc-ion-picker-internal-md-h:dir(rtl) .picker-after{left:unset;right:unset;right:0}}}/*!@:host .picker-highlight*/.sc-ion-picker-internal-md-h .picker-highlight.sc-ion-picker-internal-md{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}/*!@:host input*/.sc-ion-picker-internal-md-h input.sc-ion-picker-internal-md{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 ::slotted(ion-picker-column-internal:first-of-type)*/.sc-ion-picker-internal-md-h .sc-ion-picker-internal-md-s>ion-picker-column-internal:first-of-type{text-align:start}/*!@:host ::slotted(ion-picker-column-internal:last-of-type)*/.sc-ion-picker-internal-md-h .sc-ion-picker-internal-md-s>ion-picker-column-internal:last-of-type{text-align:end}/*!@:host ::slotted(ion-picker-column-internal:only-child)*/.sc-ion-picker-internal-md-h .sc-ion-picker-internal-md-s>ion-picker-column-internal:only-child{text-align:center}/*!@:host .picker-before*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}/*!@:host .picker-after*/.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}";
26062
25575
 
26063
- class PickerColumnOption {
25576
+ /**
25577
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
25578
+ * @internal
25579
+ */
25580
+ class PickerInternal {
26064
25581
  constructor(hostRef) {
26065
25582
  registerInstance(this, hostRef);
25583
+ this.ionInputModeChange = createEvent(this, "ionInputModeChange", 7);
25584
+ this.useInputMode = false;
25585
+ this.isInHighlightBounds = (ev) => {
25586
+ const { highlightEl } = this;
25587
+ if (!highlightEl) {
25588
+ return false;
25589
+ }
25590
+ const bbox = highlightEl.getBoundingClientRect();
25591
+ /**
25592
+ * Check to see if the user clicked
25593
+ * outside the bounds of the highlight.
25594
+ */
25595
+ const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
25596
+ const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
25597
+ if (outsideX || outsideY) {
25598
+ return false;
25599
+ }
25600
+ return true;
25601
+ };
26066
25602
  /**
26067
- * We keep track of the parent picker column
26068
- * so we can update the value of it when
26069
- * clicking an enable option.
25603
+ * If we are no longer focused
25604
+ * on a picker column, then we should
25605
+ * exit input mode. An exception is made
25606
+ * for the input in the picker since having
25607
+ * that focused means we are still in input mode.
26070
25608
  */
26071
- this.pickerColumn = null;
26072
- this.ariaLabel = null;
26073
- this.disabled = false;
26074
- this.value = undefined;
26075
- this.color = 'primary';
25609
+ this.onFocusOut = (ev) => {
25610
+ // TODO(FW-2832): type
25611
+ const { relatedTarget } = ev;
25612
+ if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
25613
+ this.exitInputMode();
25614
+ }
25615
+ };
25616
+ /**
25617
+ * When picker columns receive focus
25618
+ * the parent picker needs to determine
25619
+ * whether to enter/exit input mode.
25620
+ */
25621
+ this.onFocusIn = (ev) => {
25622
+ // TODO(FW-2832): type
25623
+ const { target } = ev;
25624
+ /**
25625
+ * Due to browser differences in how/when focus
25626
+ * is dispatched on certain elements, we need to
25627
+ * make sure that this function only ever runs when
25628
+ * focusing a picker column.
25629
+ */
25630
+ if (target.tagName !== 'ION-PICKER-COLUMN-INTERNAL') {
25631
+ return;
25632
+ }
25633
+ /**
25634
+ * If we have actionOnClick
25635
+ * then this means the user focused
25636
+ * a picker column via mouse or
25637
+ * touch (i.e. a PointerEvent). As a result,
25638
+ * we should not enter/exit input mode
25639
+ * until the click event has fired, which happens
25640
+ * after the `focusin` event.
25641
+ *
25642
+ * Otherwise, the user likely focused
25643
+ * the column using their keyboard and
25644
+ * we should enter/exit input mode automatically.
25645
+ */
25646
+ if (!this.actionOnClick) {
25647
+ const columnEl = target;
25648
+ const allowInput = columnEl.numericInput;
25649
+ if (allowInput) {
25650
+ this.enterInputMode(columnEl, false);
25651
+ }
25652
+ else {
25653
+ this.exitInputMode();
25654
+ }
25655
+ }
25656
+ };
25657
+ /**
25658
+ * On click we need to run an actionOnClick
25659
+ * function that has been set in onPointerDown
25660
+ * so that we enter/exit input mode correctly.
25661
+ */
25662
+ this.onClick = () => {
25663
+ const { actionOnClick } = this;
25664
+ if (actionOnClick) {
25665
+ actionOnClick();
25666
+ this.actionOnClick = undefined;
25667
+ }
25668
+ };
25669
+ /**
25670
+ * Clicking a column also focuses the column on
25671
+ * certain browsers, so we use onPointerDown
25672
+ * to tell the onFocusIn function that users
25673
+ * are trying to click the column rather than
25674
+ * focus the column using the keyboard. When the
25675
+ * user completes the click, the onClick function
25676
+ * runs and runs the actionOnClick callback.
25677
+ */
25678
+ this.onPointerDown = (ev) => {
25679
+ const { useInputMode, inputModeColumn, el } = this;
25680
+ if (this.isInHighlightBounds(ev)) {
25681
+ /**
25682
+ * If we were already in
25683
+ * input mode, then we should determine
25684
+ * if we tapped a particular column and
25685
+ * should switch to input mode for
25686
+ * that specific column.
25687
+ */
25688
+ if (useInputMode) {
25689
+ /**
25690
+ * If we tapped a picker column
25691
+ * then we should either switch to input
25692
+ * mode for that column or all columns.
25693
+ * Otherwise we should exit input mode
25694
+ * since we just tapped the highlight and
25695
+ * not a column.
25696
+ */
25697
+ if (ev.target.tagName === 'ION-PICKER-COLUMN-INTERNAL') {
25698
+ /**
25699
+ * If user taps 2 different columns
25700
+ * then we should just switch to input mode
25701
+ * for the new column rather than switching to
25702
+ * input mode for all columns.
25703
+ */
25704
+ if (inputModeColumn && inputModeColumn === ev.target) {
25705
+ this.actionOnClick = () => {
25706
+ this.enterInputMode();
25707
+ };
25708
+ }
25709
+ else {
25710
+ this.actionOnClick = () => {
25711
+ this.enterInputMode(ev.target);
25712
+ };
25713
+ }
25714
+ }
25715
+ else {
25716
+ this.actionOnClick = () => {
25717
+ this.exitInputMode();
25718
+ };
25719
+ }
25720
+ /**
25721
+ * If we were not already in
25722
+ * input mode, then we should
25723
+ * enter input mode for all columns.
25724
+ */
25725
+ }
25726
+ else {
25727
+ /**
25728
+ * If there is only 1 numeric input column
25729
+ * then we should skip multi column input.
25730
+ */
25731
+ const columns = el.querySelectorAll('ion-picker-column-internal.picker-column-numeric-input');
25732
+ const columnEl = columns.length === 1 ? ev.target : undefined;
25733
+ this.actionOnClick = () => {
25734
+ this.enterInputMode(columnEl);
25735
+ };
25736
+ }
25737
+ return;
25738
+ }
25739
+ this.actionOnClick = () => {
25740
+ this.exitInputMode();
25741
+ };
25742
+ };
25743
+ /**
25744
+ * Enters input mode to allow
25745
+ * for text entry of numeric values.
25746
+ * If on mobile, we focus a hidden input
25747
+ * field so that the on screen keyboard
25748
+ * is brought up. When tabbing using a
25749
+ * keyboard, picker columns receive an outline
25750
+ * to indicate they are focused. As a result,
25751
+ * we should not focus the hidden input as it
25752
+ * would cause the outline to go away, preventing
25753
+ * users from having any visual indication of which
25754
+ * column is focused.
25755
+ */
25756
+ this.enterInputMode = (columnEl, focusInput = true) => {
25757
+ const { inputEl, el } = this;
25758
+ if (!inputEl) {
25759
+ return;
25760
+ }
25761
+ /**
25762
+ * Only active input mode if there is at
25763
+ * least one column that accepts numeric input.
25764
+ */
25765
+ const hasInputColumn = el.querySelector('ion-picker-column-internal.picker-column-numeric-input');
25766
+ if (!hasInputColumn) {
25767
+ return;
25768
+ }
25769
+ /**
25770
+ * If columnEl is undefined then
25771
+ * it is assumed that all numeric pickers
25772
+ * are eligible for text entry.
25773
+ * (i.e. hour and minute columns)
25774
+ */
25775
+ this.useInputMode = true;
25776
+ this.inputModeColumn = columnEl;
25777
+ /**
25778
+ * Users with a keyboard and mouse can
25779
+ * activate input mode where the input is
25780
+ * focused as well as when it is not focused,
25781
+ * so we need to make sure we clean up any
25782
+ * old listeners.
25783
+ */
25784
+ if (focusInput) {
25785
+ if (this.destroyKeypressListener) {
25786
+ this.destroyKeypressListener();
25787
+ this.destroyKeypressListener = undefined;
25788
+ }
25789
+ inputEl.focus();
25790
+ }
25791
+ else {
25792
+ el.addEventListener('keypress', this.onKeyPress);
25793
+ this.destroyKeypressListener = () => {
25794
+ el.removeEventListener('keypress', this.onKeyPress);
25795
+ };
25796
+ }
25797
+ this.emitInputModeChange();
25798
+ };
25799
+ this.onKeyPress = (ev) => {
25800
+ const { inputEl } = this;
25801
+ if (!inputEl) {
25802
+ return;
25803
+ }
25804
+ const parsedValue = parseInt(ev.key, 10);
25805
+ /**
25806
+ * Only numbers should be allowed
25807
+ */
25808
+ if (!Number.isNaN(parsedValue)) {
25809
+ inputEl.value += ev.key;
25810
+ this.onInputChange();
25811
+ }
25812
+ };
25813
+ this.selectSingleColumn = () => {
25814
+ const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
25815
+ if (!inputEl || !inputModeColumn) {
25816
+ return;
25817
+ }
25818
+ const values = inputModeColumn.items.filter((item) => item.disabled !== true);
25819
+ /**
25820
+ * If users pause for a bit, the search
25821
+ * value should be reset similar to how a
25822
+ * <select> behaves. So typing "34", waiting,
25823
+ * then typing "5" should select "05".
25824
+ */
25825
+ if (singleColumnSearchTimeout) {
25826
+ clearTimeout(singleColumnSearchTimeout);
25827
+ }
25828
+ this.singleColumnSearchTimeout = setTimeout(() => {
25829
+ inputEl.value = '';
25830
+ this.singleColumnSearchTimeout = undefined;
25831
+ }, 1000);
25832
+ /**
25833
+ * For values that are longer than 2 digits long
25834
+ * we should shift the value over 1 character
25835
+ * to the left. So typing "456" would result in "56".
25836
+ * TODO: If we want to support more than just
25837
+ * time entry, we should update this value to be
25838
+ * the max length of all of the picker items.
25839
+ */
25840
+ if (inputEl.value.length >= 3) {
25841
+ const startIndex = inputEl.value.length - 2;
25842
+ const newString = inputEl.value.substring(startIndex);
25843
+ inputEl.value = newString;
25844
+ this.selectSingleColumn();
25845
+ return;
25846
+ }
25847
+ /**
25848
+ * Checking the value of the input gets priority
25849
+ * first. For example, if the value of the input
25850
+ * is "1" and we entered "2", then the complete value
25851
+ * is "12" and we should select hour 12.
25852
+ *
25853
+ * Regex removes any leading zeros from values like "02",
25854
+ * but it keeps a single zero if there are only zeros in the string.
25855
+ * 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
25856
+ * 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
25857
+ */
25858
+ const findItemFromCompleteValue = values.find(({ text }) => {
25859
+ const parsedText = text.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
25860
+ return parsedText === inputEl.value;
25861
+ });
25862
+ if (findItemFromCompleteValue) {
25863
+ inputModeColumn.setValue(findItemFromCompleteValue.value);
25864
+ return;
25865
+ }
25866
+ /**
25867
+ * If we typed "56" to get minute 56, then typed "7",
25868
+ * we should select "07" as "567" is not a valid minute.
25869
+ */
25870
+ if (inputEl.value.length === 2) {
25871
+ const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
25872
+ inputEl.value = changedCharacter;
25873
+ this.selectSingleColumn();
25874
+ }
25875
+ };
25876
+ /**
25877
+ * Searches a list of column items for a particular
25878
+ * value. This is currently used for numeric values.
25879
+ * The zeroBehavior can be set to account for leading
25880
+ * or trailing zeros when looking at the item text.
25881
+ */
25882
+ this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
25883
+ const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
25884
+ const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
25885
+ if (item) {
25886
+ colEl.setValue(item.value);
25887
+ }
25888
+ };
25889
+ this.selectMultiColumn = () => {
25890
+ const { inputEl, el } = this;
25891
+ if (!inputEl) {
25892
+ return;
25893
+ }
25894
+ const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter((col) => col.numericInput);
25895
+ const firstColumn = numericPickers[0];
25896
+ const lastColumn = numericPickers[1];
25897
+ let value = inputEl.value;
25898
+ let minuteValue;
25899
+ switch (value.length) {
25900
+ case 1:
25901
+ this.searchColumn(firstColumn, value);
25902
+ break;
25903
+ case 2:
25904
+ /**
25905
+ * If the first character is `0` or `1` it is
25906
+ * possible that users are trying to type `09`
25907
+ * or `11` into the hour field, so we should look
25908
+ * at that first.
25909
+ */
25910
+ const firstCharacter = inputEl.value.substring(0, 1);
25911
+ value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
25912
+ this.searchColumn(firstColumn, value);
25913
+ /**
25914
+ * If only checked the first value,
25915
+ * we can check the second value
25916
+ * for a match in the minutes column
25917
+ */
25918
+ if (value.length === 1) {
25919
+ minuteValue = inputEl.value.substring(inputEl.value.length - 1);
25920
+ this.searchColumn(lastColumn, minuteValue, 'end');
25921
+ }
25922
+ break;
25923
+ case 3:
25924
+ /**
25925
+ * If the first character is `0` or `1` it is
25926
+ * possible that users are trying to type `09`
25927
+ * or `11` into the hour field, so we should look
25928
+ * at that first.
25929
+ */
25930
+ const firstCharacterAgain = inputEl.value.substring(0, 1);
25931
+ value =
25932
+ firstCharacterAgain === '0' || firstCharacterAgain === '1'
25933
+ ? inputEl.value.substring(0, 2)
25934
+ : firstCharacterAgain;
25935
+ this.searchColumn(firstColumn, value);
25936
+ /**
25937
+ * If only checked the first value,
25938
+ * we can check the second value
25939
+ * for a match in the minutes column
25940
+ */
25941
+ minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
25942
+ this.searchColumn(lastColumn, minuteValue, 'end');
25943
+ break;
25944
+ case 4:
25945
+ /**
25946
+ * If the first character is `0` or `1` it is
25947
+ * possible that users are trying to type `09`
25948
+ * or `11` into the hour field, so we should look
25949
+ * at that first.
25950
+ */
25951
+ const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
25952
+ value =
25953
+ firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
25954
+ ? inputEl.value.substring(0, 2)
25955
+ : firstCharacterAgainAgain;
25956
+ this.searchColumn(firstColumn, value);
25957
+ /**
25958
+ * If only checked the first value,
25959
+ * we can check the second value
25960
+ * for a match in the minutes column
25961
+ */
25962
+ const minuteValueAgain = value.length === 1
25963
+ ? inputEl.value.substring(1, inputEl.value.length)
25964
+ : inputEl.value.substring(2, inputEl.value.length);
25965
+ this.searchColumn(lastColumn, minuteValueAgain, 'end');
25966
+ break;
25967
+ default:
25968
+ const startIndex = inputEl.value.length - 4;
25969
+ const newString = inputEl.value.substring(startIndex);
25970
+ inputEl.value = newString;
25971
+ this.selectMultiColumn();
25972
+ break;
25973
+ }
25974
+ };
25975
+ /**
25976
+ * Searches the value of the active column
25977
+ * to determine which value users are trying
25978
+ * to select
25979
+ */
25980
+ this.onInputChange = () => {
25981
+ const { useInputMode, inputEl, inputModeColumn } = this;
25982
+ if (!useInputMode || !inputEl) {
25983
+ return;
25984
+ }
25985
+ if (inputModeColumn) {
25986
+ this.selectSingleColumn();
25987
+ }
25988
+ else {
25989
+ this.selectMultiColumn();
25990
+ }
25991
+ };
25992
+ /**
25993
+ * Emit ionInputModeChange. Picker columns
25994
+ * listen for this event to determine whether
25995
+ * or not their column is "active" for text input.
25996
+ */
25997
+ this.emitInputModeChange = () => {
25998
+ const { useInputMode, inputModeColumn } = this;
25999
+ this.ionInputModeChange.emit({
26000
+ useInputMode,
26001
+ inputModeColumn,
26002
+ });
26003
+ };
26076
26004
  }
26077
26005
  /**
26078
- * The aria-label of the option has changed after the
26079
- * first render and needs to be updated within the component.
26080
- *
26081
- * @param ariaLbl The new aria-label value.
26006
+ * When the picker is interacted with
26007
+ * we need to prevent touchstart so other
26008
+ * gestures do not fire. For example,
26009
+ * scrolling on the wheel picker
26010
+ * in ion-datetime should not cause
26011
+ * a card modal to swipe to close.
26082
26012
  */
26083
- onAriaLabelChange(ariaLbl) {
26084
- this.ariaLabel = ariaLbl;
26013
+ preventTouchStartPropagation(ev) {
26014
+ ev.stopPropagation();
26085
26015
  }
26086
26016
  componentWillLoad() {
26087
- const inheritedAttributes = inheritAttributes$1(this.el, ['aria-label']);
26088
- /**
26089
- * The initial value of `aria-label` needs to be set for
26090
- * the first render.
26091
-
26092
- */
26093
- this.ariaLabel = inheritedAttributes['aria-label'] || null;
26094
- }
26095
- connectedCallback() {
26096
- this.pickerColumn = this.el.closest('ion-picker-column');
26097
- }
26098
- disconnectedCallback() {
26099
- this.pickerColumn = null;
26017
+ getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
26018
+ getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
26100
26019
  }
26101
26020
  /**
26102
- * The column options can load at any time
26103
- * so the options needs to tell the
26104
- * parent picker column when it is loaded
26105
- * so the picker column can ensure it is
26106
- * centered in the view.
26107
- *
26108
- * We intentionally run this for every
26109
- * option. If we only ran this from
26110
- * the selected option then if the newly
26111
- * loaded options were not selected then
26112
- * scrollActiveItemIntoView would not be called.
26021
+ * @internal
26022
+ * Exits text entry mode for the picker
26023
+ * This method blurs the hidden input
26024
+ * and cause the keyboard to dismiss.
26113
26025
  */
26114
- componentDidLoad() {
26115
- const { pickerColumn } = this;
26116
- if (pickerColumn !== null) {
26117
- pickerColumn.scrollActiveItemIntoView();
26026
+ async exitInputMode() {
26027
+ const { inputEl, useInputMode } = this;
26028
+ if (!useInputMode || !inputEl) {
26029
+ return;
26118
26030
  }
26119
- }
26120
- /**
26121
- * When an option is clicked, update the
26122
- * parent picker column value. This
26123
- * component will handle centering the option
26124
- * in the column view.
26125
- */
26126
- onClick() {
26127
- const { pickerColumn } = this;
26128
- if (pickerColumn !== null) {
26129
- pickerColumn.setValue(this.value);
26031
+ this.useInputMode = false;
26032
+ this.inputModeColumn = undefined;
26033
+ inputEl.blur();
26034
+ inputEl.value = '';
26035
+ if (this.destroyKeypressListener) {
26036
+ this.destroyKeypressListener();
26037
+ this.destroyKeypressListener = undefined;
26130
26038
  }
26039
+ this.emitInputModeChange();
26131
26040
  }
26132
26041
  render() {
26133
- const { color, disabled, ariaLabel } = this;
26134
- const mode = getIonMode$1(this);
26135
- return (hAsync(Host, { class: createColorClasses$1(color, {
26136
- [mode]: true,
26137
- ['option-disabled']: disabled,
26138
- }) }, hAsync("button", { tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", null))));
26042
+ return (hAsync(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { class: "picker-before" }), hAsync("div", { class: "picker-after" }), hAsync("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", null)));
26139
26043
  }
26140
26044
  get el() { return getElement(this); }
26141
- static get watchers() { return {
26142
- "aria-label": ["onAriaLabelChange"]
26143
- }; }
26144
26045
  static get style() { return {
26145
- ios: pickerColumnOptionIosCss,
26146
- md: pickerColumnOptionMdCss
26046
+ ios: pickerInternalIosCss,
26047
+ md: pickerInternalMdCss
26147
26048
  }; }
26148
26049
  static get cmpMeta() { return {
26149
26050
  "$flags$": 41,
26150
- "$tagName$": "ion-picker-column-option",
26051
+ "$tagName$": "ion-picker-internal",
26151
26052
  "$members$": {
26152
- "disabled": [4],
26153
- "value": [8],
26154
- "color": [513],
26155
- "ariaLabel": [32]
26053
+ "exitInputMode": [64]
26156
26054
  },
26157
- "$listeners$": undefined,
26055
+ "$listeners$": [[1, "touchstart", "preventTouchStartPropagation"]],
26158
26056
  "$lazyBundleId$": "-",
26159
- "$attrsToReflect$": [["color", "color"]]
26057
+ "$attrsToReflect$": []
26160
26058
  }; }
26161
26059
  }
26162
26060
 
@@ -28781,6 +28679,24 @@ const translateElement = (el, value, duration = 200) => {
28781
28679
  };
28782
28680
  // Utils
28783
28681
  // -----------------------------
28682
+ /**
28683
+ * In order to use the native iOS refresher the device must support rubber band scrolling.
28684
+ * 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.
28685
+ *
28686
+ * We also need to be careful not to include devices that spoof their user agent.
28687
+ * For example, when using iOS emulation in Chrome the user agent will be spoofed such that
28688
+ * navigator.maxTouchPointer > 0. To work around this,
28689
+ * we check to see if the apple-pay-logo is supported as a named image which is only
28690
+ * true on Apple devices.
28691
+ *
28692
+ * We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
28693
+ * for rubber band support. However, this property was removed on iPadOS and it's possible
28694
+ * that this will be removed on iOS in the future too.
28695
+ *
28696
+ */
28697
+ const supportsRubberBandScrolling = () => {
28698
+ return navigator.maxTouchPoints > 0 && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)');
28699
+ };
28784
28700
  const shouldUseNativeRefresher = async (referenceEl, mode) => {
28785
28701
  const refresherContent = referenceEl.querySelector('ion-refresher-content');
28786
28702
  if (!refresherContent) {
@@ -28791,16 +28707,7 @@ const shouldUseNativeRefresher = async (referenceEl, mode) => {
28791
28707
  const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
28792
28708
  return (pullingSpinner !== null &&
28793
28709
  refreshingSpinner !== null &&
28794
- /**
28795
- * We use webkitOverflowScrolling for feature detection with rubber band scrolling
28796
- * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
28797
- * However, it will be the empty string on iOS.
28798
- * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
28799
- * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
28800
- * set on the element, even if the platform does not support that.
28801
- */
28802
- ((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
28803
- mode === 'md'));
28710
+ ((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md'));
28804
28711
  };
28805
28712
 
28806
28713
  const refresherIosCss = "ion-refresher{top:0;display:none;position:absolute;width:100%;height:60px;pointer-events:none;z-index:-1}@supports (inset-inline-start: 0){ion-refresher{inset-inline-start:0}}@supports not (inset-inline-start: 0){ion-refresher{left:0}:host-context([dir=rtl]) ion-refresher{left:unset;right:unset;right:0}[dir=rtl] ion-refresher{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){ion-refresher:dir(rtl){left:unset;right:unset;right:0}}}ion-refresher.refresher-active{display:block}ion-refresher-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;height:100%}.refresher-pulling,.refresher-refreshing{display:none;width:100%}.refresher-pulling-icon,.refresher-refreshing-icon{-webkit-transform-origin:center;transform-origin:center;-webkit-transition:200ms;transition:200ms;font-size:30px;text-align:center}:host-context([dir=rtl]) .refresher-pulling-icon,:host-context([dir=rtl]) .refresher-refreshing-icon{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}[dir=rtl] .refresher-pulling-icon,[dir=rtl] .refresher-refreshing-icon{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}@supports selector(:dir(rtl)){.refresher-pulling-icon:dir(rtl),.refresher-refreshing-icon:dir(rtl){-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}}.refresher-pulling-text,.refresher-refreshing-text{font-size:16px;text-align:center}ion-refresher-content .arrow-container{display:none}.refresher-pulling ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.refresher-refreshing ion-refresher-content .refresher-refreshing{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling-icon{-webkit-transform:scale(0);transform:scale(0)}.refresher-completing ion-refresher-content .refresher-refreshing{display:block}.refresher-completing ion-refresher-content .refresher-refreshing-icon{-webkit-transform:scale(0);transform:scale(0)}.refresher-native .refresher-pulling-text,.refresher-native .refresher-refreshing-text{display:none}.refresher-ios .refresher-pulling-icon,.refresher-ios .refresher-refreshing-icon{color:var(--ion-text-color, #000)}.refresher-ios .refresher-pulling-text,.refresher-ios .refresher-refreshing-text{color:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-lines-ios line,.refresher-ios .refresher-refreshing .spinner-lines-small-ios line,.refresher-ios .refresher-refreshing .spinner-crescent circle{stroke:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-bubbles circle,.refresher-ios .refresher-refreshing .spinner-circles circle,.refresher-ios .refresher-refreshing .spinner-dots circle{fill:var(--ion-text-color, #000)}ion-refresher.refresher-native{display:block;z-index:1}ion-refresher.refresher-native ion-spinner{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}.refresher-native .refresher-refreshing ion-spinner{--refreshing-rotation-duration:2s;display:none;-webkit-animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards;animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards}.refresher-native .refresher-refreshing{display:none;-webkit-animation:250ms linear refresher-pop forwards;animation:250ms linear refresher-pop forwards}.refresher-native ion-spinner{width:32px;height:32px;color:var(--ion-color-step-450, #747577)}.refresher-native.refresher-refreshing .refresher-pulling ion-spinner,.refresher-native.refresher-completing .refresher-pulling ion-spinner{display:none}.refresher-native.refresher-refreshing .refresher-refreshing ion-spinner,.refresher-native.refresher-completing .refresher-refreshing ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-pulling ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-refreshing ion-spinner{display:none}.refresher-native.refresher-completing ion-refresher-content .refresher-refreshing-icon{-webkit-transform:scale(0) rotate(180deg);transform:scale(0) rotate(180deg);-webkit-transition:300ms;transition:300ms}@-webkit-keyframes refresher-pop{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes refresher-pop{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes refresher-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@keyframes refresher-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}";
@@ -29589,9 +29496,15 @@ class RefresherContent {
29589
29496
  }
29590
29497
  componentWillLoad() {
29591
29498
  if (this.pullingIcon === undefined) {
29499
+ /**
29500
+ * The native iOS refresher uses a spinner instead of
29501
+ * an icon, so we need to see if this device supports
29502
+ * the native iOS refresher.
29503
+ */
29504
+ const hasRubberBandScrolling = supportsRubberBandScrolling();
29592
29505
  const mode = getIonMode$1(this);
29593
- const overflowRefresher = this.el.style.webkitOverflowScrolling !== undefined ? 'lines' : arrowDown;
29594
- this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular');
29506
+ const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
29507
+ this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
29595
29508
  }
29596
29509
  if (this.refreshingSpinner === undefined) {
29597
29510
  const mode = getIonMode$1(this);
@@ -31384,8 +31297,6 @@ class Searchbar {
31384
31297
  *
31385
31298
  * Developers who wish to focus an input when an overlay is presented
31386
31299
  * should call `setFocus` after `didPresent` has resolved.
31387
- *
31388
- * See [managing focus](/docs/developing/managing-focus) for more information.
31389
31300
  */
31390
31301
  async setFocus() {
31391
31302
  if (this.nativeInput) {
@@ -33867,8 +33778,6 @@ class Textarea {
33867
33778
  /**
33868
33779
  * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
33869
33780
  * `textarea.focus()`.
33870
- *
33871
- * See [managing focus](/docs/developing/managing-focus) for more information.
33872
33781
  */
33873
33782
  async setFocus() {
33874
33783
  if (this.nativeInput) {
@@ -35147,11 +35056,10 @@ registerComponents([
35147
35056
  Nav,
35148
35057
  NavLink,
35149
35058
  Note,
35150
- Picker$1,
35151
35059
  Picker,
35152
- PickerColumn,
35153
35060
  PickerColumnCmp,
35154
- PickerColumnOption,
35061
+ PickerColumnInternal,
35062
+ PickerInternal,
35155
35063
  Popover,
35156
35064
  ProgressBar,
35157
35065
  Radio,