@ionic/core 8.8.14-dev.11784238294.131cd99d → 8.8.14-dev.11784563563.137a903a

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 (476) hide show
  1. package/components/index.js +1 -1
  2. package/components/ion-accordion-group.js +1 -1
  3. package/components/ion-accordion.js +1 -1
  4. package/components/ion-action-sheet.js +1 -1
  5. package/components/ion-alert.js +1 -1
  6. package/components/ion-app.js +1 -1
  7. package/components/ion-avatar.js +1 -1
  8. package/components/ion-back-button.js +1 -1
  9. package/components/ion-backdrop.js +1 -1
  10. package/components/ion-badge.js +1 -1
  11. package/components/ion-breadcrumb.js +1 -1
  12. package/components/ion-breadcrumbs.js +1 -1
  13. package/components/ion-button.js +1 -1
  14. package/components/ion-buttons.js +1 -1
  15. package/components/ion-card-content.js +1 -1
  16. package/components/ion-card-header.js +1 -1
  17. package/components/ion-card-subtitle.js +1 -1
  18. package/components/ion-card-title.js +1 -1
  19. package/components/ion-card.js +1 -1
  20. package/components/ion-checkbox.js +1 -1
  21. package/components/ion-chip.js +1 -1
  22. package/components/ion-col.js +1 -1
  23. package/components/ion-content.js +1 -1
  24. package/components/ion-datetime-button.js +1 -1
  25. package/components/ion-datetime.js +1 -1
  26. package/components/ion-fab-button.js +1 -1
  27. package/components/ion-fab-list.js +1 -1
  28. package/components/ion-fab.js +1 -1
  29. package/components/ion-footer.js +1 -1
  30. package/components/ion-grid.js +1 -1
  31. package/components/ion-header.js +1 -1
  32. package/components/ion-img.js +1 -1
  33. package/components/ion-infinite-scroll-content.js +1 -1
  34. package/components/ion-infinite-scroll.js +1 -1
  35. package/components/ion-input-otp.js +1 -1
  36. package/components/ion-input-password-toggle.js +1 -1
  37. package/components/ion-input.js +1 -1
  38. package/components/ion-item-divider.js +1 -1
  39. package/components/ion-item-group.js +1 -1
  40. package/components/ion-item-option.js +1 -1
  41. package/components/ion-item-options.js +1 -1
  42. package/components/ion-item-sliding.js +1 -1
  43. package/components/ion-item.js +1 -1
  44. package/components/ion-label.js +1 -1
  45. package/components/ion-list-header.js +1 -1
  46. package/components/ion-list.js +1 -1
  47. package/components/ion-loading.js +1 -1
  48. package/components/ion-menu-button.js +1 -1
  49. package/components/ion-menu-toggle.js +1 -1
  50. package/components/ion-menu.js +1 -1
  51. package/components/ion-modal.js +1 -1
  52. package/components/ion-nav.js +1 -1
  53. package/components/ion-note.js +1 -1
  54. package/components/ion-picker-column-option.js +1 -1
  55. package/components/ion-picker-column.js +1 -1
  56. package/components/ion-popover.js +1 -1
  57. package/components/ion-progress-bar.js +1 -1
  58. package/components/ion-radio-group.js +1 -1
  59. package/components/ion-radio.js +1 -1
  60. package/components/ion-range.js +1 -1
  61. package/components/ion-refresher-content.js +1 -1
  62. package/components/ion-refresher.js +1 -1
  63. package/components/ion-reorder-group.js +1 -1
  64. package/components/ion-reorder.js +1 -1
  65. package/components/ion-ripple-effect.js +1 -1
  66. package/components/ion-router-link.js +1 -1
  67. package/components/ion-router-outlet.js +1 -1
  68. package/components/ion-router.js +1 -1
  69. package/components/ion-row.js +1 -1
  70. package/components/ion-searchbar.js +1 -1
  71. package/components/ion-segment-button.js +1 -1
  72. package/components/ion-segment-content.js +1 -1
  73. package/components/ion-segment-view.js +1 -1
  74. package/components/ion-segment.js +1 -1
  75. package/components/ion-select-modal.js +1 -1
  76. package/components/ion-select-option.js +1 -1
  77. package/components/ion-select-popover.js +1 -1
  78. package/components/ion-select.js +1 -1
  79. package/components/ion-skeleton-text.js +1 -1
  80. package/components/ion-spinner.js +1 -1
  81. package/components/ion-split-pane.js +1 -1
  82. package/components/ion-tab-bar.js +1 -1
  83. package/components/ion-tab-button.js +1 -1
  84. package/components/ion-tab.js +1 -1
  85. package/components/ion-tabs.js +1 -1
  86. package/components/ion-text.js +1 -1
  87. package/components/ion-textarea.js +1 -1
  88. package/components/ion-thumbnail.js +1 -1
  89. package/components/ion-title.js +1 -1
  90. package/components/ion-toast.js +1 -1
  91. package/components/ion-toggle.js +1 -1
  92. package/components/ion-toolbar.js +1 -1
  93. package/components/{p-BLmJ0zRm.js → p-8cRBED2y.js} +1 -1
  94. package/components/{p-BSEgsdFI.js → p-B5Ia5kbJ.js} +1 -1
  95. package/components/p-BG9RNTmW.js +4 -0
  96. package/components/p-BSQPZ79H.js +4 -0
  97. package/components/p-BnTB62Lu.js +4 -0
  98. package/components/p-BwKpO3Is.js +4 -0
  99. package/components/p-CEktCi-l.js +4 -0
  100. package/components/{p-B60hm8Qv.js → p-CHdYfvVx.js} +1 -1
  101. package/components/{p-B9jFTlwE.js → p-CPa2WmW7.js} +1 -1
  102. package/components/{p-BnqQlm7c.js → p-CYhGN6l4.js} +1 -1
  103. package/components/{p-ryqmO0B-.js → p-CbJDPICP.js} +1 -1
  104. package/components/{p-rCa2eL0j.js → p-CtQ-1ZRt.js} +1 -1
  105. package/components/p-CwcD5kE9.js +4 -0
  106. package/components/{p--JUspHvy.js → p-CyFtf1Mm.js} +1 -1
  107. package/components/{p-DqZAXv2t.js → p-CzuRCorP.js} +1 -1
  108. package/components/{p-j5IxBIan.js → p-D-lHU3L1.js} +1 -1
  109. package/components/p-D1-tlI3U.js +4 -0
  110. package/components/p-D2D6VdCA.js +4 -0
  111. package/components/{p-BHrrc-3d.js → p-D355UF9s.js} +1 -1
  112. package/components/{p-5bE_Wz4Y.js → p-DEI720fP.js} +1 -1
  113. package/components/p-DK0D_QD_.js +4 -0
  114. package/components/p-DXTfY6aF.js +4 -0
  115. package/components/{p-Cfx4M1Bn.js → p-DfjhtfFw.js} +1 -1
  116. package/components/{p-CI3ncNZm.js → p-Dg1a5T1q.js} +1 -1
  117. package/components/{p-lE_JGpHD.js → p-Ds1Brlka.js} +1 -1
  118. package/components/p-Dtmv7Nm_.js +4 -0
  119. package/components/{p-BirPFsRD.js → p-Dy5czMtc.js} +1 -1
  120. package/components/p-FV45cfy9.js +4 -0
  121. package/components/p-LMGfIvTf.js +4 -0
  122. package/components/{p-CSZf8_j0.js → p-XX59Wsi5.js} +1 -1
  123. package/components/p-jOtMJMv8.js +4 -0
  124. package/components/p-xjzudrQv.js +4 -0
  125. package/dist/cjs/{app-globals-BlqrqKTN.js → app-globals-7VMuu6PT.js} +1 -1
  126. package/dist/cjs/config-DWdFbSNK.js +35 -0
  127. package/dist/cjs/index-Cueg3U4w.js +429 -0
  128. package/dist/cjs/{index-aC4x3Fk3.js → index-IPWmFzOn.js} +1 -1
  129. package/dist/cjs/index.cjs.js +7 -7
  130. package/dist/cjs/ion-accordion_2.cjs.entry.js +1 -1
  131. package/dist/cjs/ion-action-sheet.cjs.entry.js +28 -8
  132. package/dist/cjs/ion-alert.cjs.entry.js +65 -26
  133. package/dist/cjs/ion-app_8.cjs.entry.js +24 -10
  134. package/dist/cjs/ion-avatar_3.cjs.entry.js +2 -2
  135. package/dist/cjs/ion-back-button.cjs.entry.js +1 -1
  136. package/dist/cjs/ion-backdrop.cjs.entry.js +1 -1
  137. package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +1 -1
  138. package/dist/cjs/ion-button_2.cjs.entry.js +1 -1
  139. package/dist/cjs/ion-card_5.cjs.entry.js +1 -1
  140. package/dist/cjs/ion-checkbox.cjs.entry.js +1 -1
  141. package/dist/cjs/ion-chip.cjs.entry.js +1 -1
  142. package/dist/cjs/ion-col_3.cjs.entry.js +2 -2
  143. package/dist/cjs/ion-datetime-button.cjs.entry.js +5 -11
  144. package/dist/cjs/{ion-datetime_3.cjs.entry.js → ion-datetime.cjs.entry.js} +13 -657
  145. package/dist/cjs/ion-fab_3.cjs.entry.js +1 -1
  146. package/dist/cjs/ion-img.cjs.entry.js +4 -2
  147. package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js +4 -3
  148. package/dist/cjs/ion-input-otp.cjs.entry.js +1 -1
  149. package/dist/cjs/ion-input-password-toggle.cjs.entry.js +1 -1
  150. package/dist/cjs/ion-input.cjs.entry.js +5 -5
  151. package/dist/cjs/ion-item-option_3.cjs.entry.js +1 -1
  152. package/dist/cjs/ion-item_8.cjs.entry.js +3 -3
  153. package/dist/cjs/ion-loading.cjs.entry.js +11 -6
  154. package/dist/cjs/ion-menu_3.cjs.entry.js +3 -3
  155. package/dist/cjs/ion-modal.cjs.entry.js +24 -33
  156. package/dist/cjs/ion-nav_2.cjs.entry.js +3 -116
  157. package/dist/cjs/ion-picker-column-option.cjs.entry.js +4 -10
  158. package/dist/cjs/ion-picker-column.cjs.entry.js +5 -11
  159. package/dist/cjs/ion-popover.cjs.entry.js +10 -6
  160. package/dist/cjs/ion-progress-bar.cjs.entry.js +2 -2
  161. package/dist/cjs/ion-radio_2.cjs.entry.js +4 -4
  162. package/dist/cjs/ion-range.cjs.entry.js +4 -4
  163. package/dist/cjs/ion-refresher_2.cjs.entry.js +7 -6
  164. package/dist/cjs/ion-reorder_2.cjs.entry.js +3 -3
  165. package/dist/cjs/ion-ripple-effect.cjs.entry.js +2 -2
  166. package/dist/cjs/ion-route_4.cjs.entry.js +19 -5
  167. package/dist/cjs/ion-searchbar.cjs.entry.js +6 -6
  168. package/dist/cjs/ion-segment-content.cjs.entry.js +1 -1
  169. package/dist/cjs/ion-segment-view.cjs.entry.js +2 -2
  170. package/dist/cjs/ion-segment_2.cjs.entry.js +5 -5
  171. package/dist/cjs/ion-select-modal.cjs.entry.js +85 -31
  172. package/dist/cjs/ion-select_3.cjs.entry.js +408 -50
  173. package/dist/cjs/ion-spinner.cjs.entry.js +2 -2
  174. package/dist/cjs/ion-split-pane.cjs.entry.js +3 -3
  175. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +5 -5
  176. package/dist/cjs/ion-tab_2.cjs.entry.js +3 -3
  177. package/dist/cjs/ion-text.cjs.entry.js +3 -3
  178. package/dist/cjs/ion-textarea.cjs.entry.js +3 -3
  179. package/dist/cjs/ion-toast.cjs.entry.js +7 -6
  180. package/dist/cjs/ion-toggle.cjs.entry.js +4 -4
  181. package/dist/cjs/{ionic-global-B-cA6LkY.js → ionic-global-CbxQmwkf.js} +2 -2
  182. package/dist/cjs/ionic.cjs.js +3 -3
  183. package/dist/cjs/loader.cjs.js +3 -3
  184. package/dist/cjs/overlay-control-label-D2sdL2O8.js +50 -0
  185. package/dist/cjs/{overlays-DdtIYQUH.js → overlays-DXnnHORC.js} +28 -32
  186. package/dist/cjs/select-option-render-DTF50t5r.js +124 -0
  187. package/dist/collection/collection-manifest.json +6 -10
  188. package/dist/collection/components/action-sheet/action-sheet.ios.css +229 -2
  189. package/dist/collection/components/action-sheet/action-sheet.js +24 -5
  190. package/dist/collection/components/action-sheet/action-sheet.md.css +175 -2
  191. package/dist/collection/components/alert/alert.ios.css +280 -10
  192. package/dist/collection/components/alert/alert.js +59 -21
  193. package/dist/collection/components/alert/alert.md.css +269 -20
  194. package/dist/collection/components/datetime/datetime.ios.css +42 -2
  195. package/dist/collection/components/datetime/datetime.js +10 -17
  196. package/dist/collection/components/datetime/datetime.md.css +42 -1
  197. package/dist/collection/components/datetime-button/datetime-button.ios.css +5 -0
  198. package/dist/collection/components/datetime-button/datetime-button.js +3 -10
  199. package/dist/collection/components/datetime-button/datetime-button.md.css +5 -0
  200. package/dist/collection/components/img/img.js +6 -1
  201. package/dist/collection/components/input/input.js +8 -8
  202. package/dist/collection/components/loading/loading.js +7 -3
  203. package/dist/collection/components/modal/gestures/sheet.js +0 -7
  204. package/dist/collection/components/modal/gestures/swipe-to-close.js +0 -7
  205. package/dist/collection/components/modal/modal.ios.css +0 -8
  206. package/dist/collection/components/modal/modal.js +23 -18
  207. package/dist/collection/components/modal/modal.md.css +0 -8
  208. package/dist/collection/components/nav/nav.js +4 -219
  209. package/dist/collection/components/picker-column/picker-column.css +3 -0
  210. package/dist/collection/components/picker-column/picker-column.js +4 -11
  211. package/dist/collection/components/picker-column-option/picker-column-option.js +3 -10
  212. package/dist/collection/components/picker-column-option/picker-column-option.md.css +6 -1
  213. package/dist/collection/components/popover/popover.ios.css +15 -0
  214. package/dist/collection/components/popover/popover.js +7 -3
  215. package/dist/collection/components/popover/popover.md.css +15 -0
  216. package/dist/collection/components/progress-bar/progress-bar.js +1 -1
  217. package/dist/collection/components/radio/radio.js +4 -4
  218. package/dist/collection/components/range/range.js +3 -3
  219. package/dist/collection/components/refresher/refresher.js +1 -1
  220. package/dist/collection/components/refresher-content/refresher-content.js +1 -1
  221. package/dist/collection/components/reorder/reorder.js +1 -1
  222. package/dist/collection/components/reorder-group/reorder-group.js +1 -1
  223. package/dist/collection/components/ripple-effect/ripple-effect.js +1 -1
  224. package/dist/collection/components/route/route.js +1 -1
  225. package/dist/collection/components/router/utils/dom.js +22 -3
  226. package/dist/collection/components/router-link/router-link.js +2 -2
  227. package/dist/collection/components/router-outlet/router-outlet.js +38 -5
  228. package/dist/collection/components/row/row.js +1 -1
  229. package/dist/collection/components/searchbar/searchbar.js +9 -9
  230. package/dist/collection/components/segment/segment.js +2 -2
  231. package/dist/collection/components/segment-button/segment-button.js +2 -2
  232. package/dist/collection/components/segment-content/segment-content.js +1 -1
  233. package/dist/collection/components/segment-view/segment-view.js +2 -2
  234. package/dist/collection/components/select/select.ios.css +33 -0
  235. package/dist/collection/components/select/select.js +323 -16
  236. package/dist/collection/components/select/select.md.css +33 -0
  237. package/dist/collection/components/select-modal/select-modal.ios.css +219 -0
  238. package/dist/collection/components/select-modal/select-modal.js +79 -26
  239. package/dist/collection/components/select-modal/select-modal.md.css +165 -0
  240. package/dist/collection/components/select-option/select-option.js +67 -3
  241. package/dist/collection/components/select-popover/select-popover.ios.css +219 -0
  242. package/dist/collection/components/select-popover/select-popover.js +78 -26
  243. package/dist/collection/components/select-popover/select-popover.md.css +165 -0
  244. package/dist/collection/components/skeleton-text/skeleton-text.js +2 -2
  245. package/dist/collection/components/spinner/spinner.js +1 -1
  246. package/dist/collection/components/split-pane/split-pane.js +2 -2
  247. package/dist/collection/components/tab/tab.js +2 -2
  248. package/dist/collection/components/tab-bar/tab-bar.js +2 -2
  249. package/dist/collection/components/tab-button/tab-button.js +2 -2
  250. package/dist/collection/components/tabs/tabs.js +1 -1
  251. package/dist/collection/components/text/text.js +2 -2
  252. package/dist/collection/components/textarea/textarea.js +2 -2
  253. package/dist/collection/components/thumbnail/thumbnail.js +1 -1
  254. package/dist/collection/components/title/title.js +2 -2
  255. package/dist/collection/components/toast/toast.js +2 -2
  256. package/dist/collection/components/toggle/toggle.js +3 -3
  257. package/dist/collection/components/toolbar/toolbar.js +2 -2
  258. package/dist/collection/index.js +1 -1
  259. package/dist/collection/utils/overlay-control-label.js +45 -0
  260. package/dist/collection/utils/overlays.js +26 -30
  261. package/dist/collection/utils/platform.js +2 -2
  262. package/dist/collection/utils/sanitization/index.js +274 -18
  263. package/dist/collection/utils/select-option-render.js +119 -0
  264. package/dist/collection/utils/test/playwright/drag-element.js +0 -5
  265. package/dist/docs.json +556 -1272
  266. package/dist/esm/{app-globals-D0C5S4hU.js → app-globals-DNgPBV1i.js} +1 -1
  267. package/dist/esm/config-BwKpO3Is.js +31 -0
  268. package/dist/esm/{index-Q6UPU0Ay.js → index-0f4UTH6Z.js} +1 -1
  269. package/dist/esm/{index-DV3sJJW8.js → index-AlrZKoWR.js} +1 -1
  270. package/dist/esm/index-DQSkZyOJ.js +424 -0
  271. package/dist/esm/index.js +5 -4
  272. package/dist/esm/ion-accordion_2.entry.js +2 -2
  273. package/dist/esm/ion-action-sheet.entry.js +28 -8
  274. package/dist/esm/ion-alert.entry.js +64 -25
  275. package/dist/esm/ion-app_8.entry.js +24 -10
  276. package/dist/esm/ion-avatar_3.entry.js +2 -2
  277. package/dist/esm/ion-back-button.entry.js +2 -2
  278. package/dist/esm/ion-backdrop.entry.js +1 -1
  279. package/dist/esm/ion-breadcrumb_2.entry.js +2 -2
  280. package/dist/esm/ion-button_2.entry.js +1 -1
  281. package/dist/esm/ion-card_5.entry.js +1 -1
  282. package/dist/esm/ion-checkbox.entry.js +1 -1
  283. package/dist/esm/ion-chip.entry.js +1 -1
  284. package/dist/esm/ion-col_3.entry.js +2 -2
  285. package/dist/esm/ion-datetime-button.entry.js +5 -11
  286. package/dist/esm/{ion-datetime_3.entry.js → ion-datetime.entry.js} +17 -659
  287. package/dist/esm/ion-fab_3.entry.js +2 -2
  288. package/dist/esm/ion-img.entry.js +5 -3
  289. package/dist/esm/ion-infinite-scroll_2.entry.js +3 -2
  290. package/dist/esm/ion-input-otp.entry.js +1 -1
  291. package/dist/esm/ion-input-password-toggle.entry.js +2 -2
  292. package/dist/esm/ion-input.entry.js +6 -6
  293. package/dist/esm/ion-item-option_3.entry.js +1 -1
  294. package/dist/esm/ion-item_8.entry.js +4 -4
  295. package/dist/esm/ion-loading.entry.js +10 -5
  296. package/dist/esm/ion-menu_3.entry.js +4 -4
  297. package/dist/esm/ion-modal.entry.js +24 -33
  298. package/dist/esm/ion-nav_2.entry.js +4 -117
  299. package/dist/esm/ion-picker-column-option.entry.js +4 -10
  300. package/dist/esm/ion-picker-column.entry.js +5 -11
  301. package/dist/esm/ion-popover.entry.js +10 -6
  302. package/dist/esm/ion-progress-bar.entry.js +2 -2
  303. package/dist/esm/ion-radio_2.entry.js +4 -4
  304. package/dist/esm/ion-range.entry.js +4 -4
  305. package/dist/esm/ion-refresher_2.entry.js +6 -5
  306. package/dist/esm/ion-reorder_2.entry.js +4 -4
  307. package/dist/esm/ion-ripple-effect.entry.js +2 -2
  308. package/dist/esm/ion-route_4.entry.js +19 -5
  309. package/dist/esm/ion-searchbar.entry.js +7 -7
  310. package/dist/esm/ion-segment-content.entry.js +1 -1
  311. package/dist/esm/ion-segment-view.entry.js +2 -2
  312. package/dist/esm/ion-segment_2.entry.js +5 -5
  313. package/dist/esm/ion-select-modal.entry.js +85 -31
  314. package/dist/esm/ion-select_3.entry.js +411 -53
  315. package/dist/esm/ion-spinner.entry.js +2 -2
  316. package/dist/esm/ion-split-pane.entry.js +3 -3
  317. package/dist/esm/ion-tab-bar_2.entry.js +5 -5
  318. package/dist/esm/ion-tab_2.entry.js +3 -3
  319. package/dist/esm/ion-text.entry.js +3 -3
  320. package/dist/esm/ion-textarea.entry.js +3 -3
  321. package/dist/esm/ion-toast.entry.js +6 -5
  322. package/dist/esm/ion-toggle.entry.js +5 -5
  323. package/dist/esm/{ionic-global-Cp_eT4sZ.js → ionic-global-pMW1XhFZ.js} +2 -2
  324. package/dist/esm/ionic.js +3 -3
  325. package/dist/esm/loader.js +3 -3
  326. package/dist/esm/overlay-control-label-BSQPZ79H.js +47 -0
  327. package/dist/esm/{overlays-Dg0q2_tJ.js → overlays-DVgWBV3s.js} +29 -33
  328. package/dist/esm/select-option-render-B8nWZRnd.js +122 -0
  329. package/dist/html.html-data.json +52 -80
  330. package/dist/ionic/index.esm.js +1 -1
  331. package/dist/ionic/ionic.esm.js +1 -1
  332. package/dist/ionic/{p-d889ff6d.entry.js → p-06cef0c6.entry.js} +1 -1
  333. package/dist/ionic/{p-c6e49f3f.entry.js → p-0be097d7.entry.js} +1 -1
  334. package/dist/ionic/{p-dfa8d673.entry.js → p-0e7de053.entry.js} +1 -1
  335. package/dist/ionic/p-129d3ed9.entry.js +4 -0
  336. package/dist/ionic/p-1d9e649a.entry.js +4 -0
  337. package/dist/ionic/p-2b3a2a38.entry.js +4 -0
  338. package/dist/ionic/{p-0fa9c382.entry.js → p-306b2e91.entry.js} +1 -1
  339. package/dist/ionic/{p-fabcce6c.entry.js → p-341032b3.entry.js} +1 -1
  340. package/dist/ionic/{p-37e720da.entry.js → p-34c8f2dc.entry.js} +1 -1
  341. package/dist/ionic/{p-e0be05c5.entry.js → p-3ce3a59d.entry.js} +1 -1
  342. package/dist/ionic/p-3d719e91.entry.js +4 -0
  343. package/dist/ionic/{p-3a7d1e91.entry.js → p-408afa6d.entry.js} +1 -1
  344. package/dist/ionic/{p-9a65ac7f.entry.js → p-426130ad.entry.js} +1 -1
  345. package/dist/ionic/p-5599e1e1.entry.js +4 -0
  346. package/dist/ionic/{p-75dc25ba.entry.js → p-567b25e9.entry.js} +1 -1
  347. package/dist/ionic/p-570a212e.entry.js +4 -0
  348. package/dist/ionic/{p-4858af1f.entry.js → p-656e8181.entry.js} +1 -1
  349. package/dist/ionic/p-686de5dc.entry.js +4 -0
  350. package/dist/ionic/{p-b6a7397c.entry.js → p-694aa5fc.entry.js} +1 -1
  351. package/dist/ionic/p-73d06afe.entry.js +4 -0
  352. package/dist/ionic/{p-34586ead.entry.js → p-79054426.entry.js} +1 -1
  353. package/dist/ionic/{p-9f1103ce.entry.js → p-79b2abe6.entry.js} +1 -1
  354. package/dist/ionic/p-7cb5cf53.entry.js +4 -0
  355. package/dist/ionic/{p-3353c229.entry.js → p-80b44b3c.entry.js} +1 -1
  356. package/dist/ionic/p-845eb5d5.entry.js +4 -0
  357. package/dist/ionic/p-88f33e44.entry.js +4 -0
  358. package/dist/ionic/p-89c9c057.entry.js +4 -0
  359. package/dist/ionic/{p-c4d8641b.entry.js → p-8c4bdd70.entry.js} +1 -1
  360. package/dist/ionic/{p-a3bdcae6.entry.js → p-8c898f59.entry.js} +1 -1
  361. package/dist/ionic/p-8cde6208.entry.js +4 -0
  362. package/dist/ionic/{p-5d1da0a2.entry.js → p-9366f06d.entry.js} +1 -1
  363. package/dist/ionic/p-9a29ba8c.entry.js +4 -0
  364. package/dist/ionic/{p-DV3sJJW8.js → p-AlrZKoWR.js} +1 -1
  365. package/dist/ionic/p-BDtODLZ4.js +4 -0
  366. package/dist/ionic/p-BSQPZ79H.js +4 -0
  367. package/dist/ionic/p-BwKpO3Is.js +4 -0
  368. package/dist/ionic/p-CGqbOURp.js +4 -0
  369. package/dist/ionic/{p-KjNvRoEp.js → p-D9iu80E_.js} +1 -1
  370. package/dist/ionic/p-DCOvXkOm.js +4 -0
  371. package/dist/ionic/p-DZigX5id.js +4 -0
  372. package/dist/ionic/p-DeSfrUWZ.js +4 -0
  373. package/dist/ionic/{p-84d5ce05.entry.js → p-a1448991.entry.js} +1 -1
  374. package/dist/ionic/{p-390ca786.entry.js → p-a256aeb6.entry.js} +1 -1
  375. package/dist/ionic/{p-8c8eee7d.entry.js → p-aeff523a.entry.js} +1 -1
  376. package/dist/ionic/{p-8eb8ee76.entry.js → p-b2f15bd0.entry.js} +1 -1
  377. package/dist/ionic/p-b7737b44.entry.js +4 -0
  378. package/dist/ionic/p-ba99d16b.entry.js +4 -0
  379. package/dist/ionic/{p-ef4c3bee.entry.js → p-cdfe2531.entry.js} +1 -1
  380. package/dist/ionic/p-cf68f89c.entry.js +4 -0
  381. package/dist/ionic/p-d183a4ba.entry.js +4 -0
  382. package/dist/ionic/p-d57560ff.entry.js +4 -0
  383. package/dist/ionic/p-d5be2815.entry.js +4 -0
  384. package/dist/ionic/{p-874b4bd8.entry.js → p-d6d91a44.entry.js} +1 -1
  385. package/dist/ionic/{p-4745f534.entry.js → p-e3842b54.entry.js} +1 -1
  386. package/dist/ionic/{p-3ae5f277.entry.js → p-e56b1836.entry.js} +1 -1
  387. package/dist/ionic/p-f09f9642.entry.js +4 -0
  388. package/dist/ionic/p-f2ae690a.entry.js +4 -0
  389. package/dist/ionic/{p-3a126bca.entry.js → p-f5b104d9.entry.js} +1 -1
  390. package/dist/ionic/p-f88310b9.entry.js +4 -0
  391. package/dist/ionic/p-fd4e56cd.entry.js +4 -0
  392. package/dist/types/components/img/img.d.ts +2 -0
  393. package/dist/types/components/input/input.d.ts +1 -1
  394. package/dist/types/components/modal/modal.d.ts +11 -4
  395. package/dist/types/components/nav/nav-interface.d.ts +0 -1
  396. package/dist/types/components/nav/nav.d.ts +2 -22
  397. package/dist/types/components/route/route.d.ts +1 -1
  398. package/dist/types/components/router-outlet/router-outlet.d.ts +7 -0
  399. package/dist/types/components/searchbar/searchbar.d.ts +1 -1
  400. package/dist/types/components/select/select-interface.d.ts +31 -0
  401. package/dist/types/components/select/select.d.ts +18 -0
  402. package/dist/types/components/select-option/select-option.d.ts +42 -1
  403. package/dist/types/components.d.ts +74 -311
  404. package/dist/types/index.d.ts +1 -1
  405. package/dist/types/interface.d.ts +0 -1
  406. package/dist/types/utils/config.d.ts +0 -8
  407. package/dist/types/utils/overlay-control-label.d.ts +32 -0
  408. package/dist/types/utils/overlays.d.ts +11 -9
  409. package/dist/types/utils/sanitization/index.d.ts +58 -2
  410. package/dist/types/utils/select-option-render.d.ts +53 -0
  411. package/hydrate/index.js +1355 -1261
  412. package/hydrate/index.mjs +1355 -1261
  413. package/package.json +37 -5
  414. package/components/ion-picker-legacy-column.d.ts +0 -11
  415. package/components/ion-picker-legacy-column.js +0 -4
  416. package/components/ion-picker-legacy.d.ts +0 -11
  417. package/components/ion-picker-legacy.js +0 -4
  418. package/components/p-BIPPbW0M.js +0 -4
  419. package/components/p-BUYFy35a.js +0 -4
  420. package/components/p-BWEZufiK.js +0 -4
  421. package/components/p-BjfgFSSR.js +0 -4
  422. package/components/p-BqpciLfi.js +0 -4
  423. package/components/p-BsPelv04.js +0 -4
  424. package/components/p-BsQPAqo9.js +0 -4
  425. package/components/p-CRNiQiYf.js +0 -4
  426. package/components/p-CU5rbWAW.js +0 -4
  427. package/components/p-DOFCbuQR.js +0 -4
  428. package/components/p-W5nO8mX_.js +0 -4
  429. package/components/p-k_E4tX5Z.js +0 -4
  430. package/components/p-nyXeHk23.js +0 -4
  431. package/dist/cjs/config-xninhj0J.js +0 -201
  432. package/dist/collection/components/picker-legacy/animations/ios.enter.js +0 -27
  433. package/dist/collection/components/picker-legacy/animations/ios.leave.js +0 -23
  434. package/dist/collection/components/picker-legacy/picker-interface.js +0 -1
  435. package/dist/collection/components/picker-legacy/picker.ios.css +0 -300
  436. package/dist/collection/components/picker-legacy/picker.js +0 -890
  437. package/dist/collection/components/picker-legacy/picker.md.css +0 -287
  438. package/dist/collection/components/picker-legacy-column/picker-column.ios.css +0 -231
  439. package/dist/collection/components/picker-legacy-column/picker-column.js +0 -422
  440. package/dist/collection/components/picker-legacy-column/picker-column.md.css +0 -222
  441. package/dist/collection/components/picker-legacy-column/test/test.utils.js +0 -43
  442. package/dist/esm/config-DQCONYYp.js +0 -195
  443. package/dist/ionic/p-01f81ea5.entry.js +0 -4
  444. package/dist/ionic/p-06c232a4.entry.js +0 -4
  445. package/dist/ionic/p-0dc33652.entry.js +0 -4
  446. package/dist/ionic/p-20b1a044.entry.js +0 -4
  447. package/dist/ionic/p-21eb76d5.entry.js +0 -4
  448. package/dist/ionic/p-27d30585.entry.js +0 -4
  449. package/dist/ionic/p-2a05aa64.entry.js +0 -4
  450. package/dist/ionic/p-2bb2cb18.entry.js +0 -4
  451. package/dist/ionic/p-485fda23.entry.js +0 -4
  452. package/dist/ionic/p-4baa5b82.entry.js +0 -4
  453. package/dist/ionic/p-5018dfc8.entry.js +0 -4
  454. package/dist/ionic/p-50e1194a.entry.js +0 -4
  455. package/dist/ionic/p-5eb8e86d.entry.js +0 -4
  456. package/dist/ionic/p-65ebdf1b.entry.js +0 -4
  457. package/dist/ionic/p-6ebdbebe.entry.js +0 -4
  458. package/dist/ionic/p-8fce95d5.entry.js +0 -4
  459. package/dist/ionic/p-9f9db3a2.entry.js +0 -4
  460. package/dist/ionic/p-D-3ycHmd.js +0 -4
  461. package/dist/ionic/p-DzWaWHGc.js +0 -4
  462. package/dist/ionic/p-Nqf6uvGh.js +0 -4
  463. package/dist/ionic/p-SNAkTDfm.js +0 -4
  464. package/dist/ionic/p-a21add2f.entry.js +0 -4
  465. package/dist/ionic/p-c0fb8edd.entry.js +0 -4
  466. package/dist/ionic/p-c38b648e.entry.js +0 -4
  467. package/dist/ionic/p-ca2ab74d.entry.js +0 -4
  468. package/dist/ionic/p-e6a4bb56.entry.js +0 -4
  469. package/dist/ionic/p-ec090e0a.entry.js +0 -4
  470. package/dist/ionic/p-f386f6ae.entry.js +0 -4
  471. package/dist/types/components/picker-legacy/animations/ios.enter.d.ts +0 -5
  472. package/dist/types/components/picker-legacy/animations/ios.leave.d.ts +0 -5
  473. package/dist/types/components/picker-legacy/picker-interface.d.ts +0 -52
  474. package/dist/types/components/picker-legacy/picker.d.ts +0 -158
  475. package/dist/types/components/picker-legacy-column/picker-column.d.ts +0 -46
  476. package/dist/types/components/picker-legacy-column/test/test.utils.d.ts +0 -9
@@ -6,20 +6,16 @@
6
6
  var index = require('./index-Ct7gcRif.js');
7
7
  var focusVisible = require('./focus-visible-CCvKiLh3.js');
8
8
  var helpers = require('./helpers-Cv23MFHM.js');
9
- var overlays = require('./overlays-DdtIYQUH.js');
9
+ var overlays = require('./overlays-DXnnHORC.js');
10
10
  var dir = require('./dir-Cn0z1rJH.js');
11
11
  var theme = require('./theme-CeDs6Hcv.js');
12
12
  var index$1 = require('./index-DqmRDbxg.js');
13
- var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
13
+ var ionicGlobal = require('./ionic-global-CbxQmwkf.js');
14
14
  var format = require('./format-PxvGiOik.js');
15
- var lockController = require('./lock-controller-aDB9wrEf.js');
16
- var animation = require('./animation-BJq0kcy2.js');
17
- var haptic = require('./haptic-ClPPQ_PS.js');
18
15
  require('./index-DkNv4J_i.js');
19
16
  require('./hardware-back-button-iUuF_76h.js');
20
17
  require('./framework-delegate-BtICZDHr.js');
21
18
  require('./gesture-controller-dtqlP_q4.js');
22
- require('./capacitor-DmA66EwP.js');
23
19
 
24
20
  /**
25
21
  * Returns the current date as
@@ -754,9 +750,9 @@ const checkForPresentationFormatMismatch = (el, presentation, formatOptions) =>
754
750
  }
755
751
  };
756
752
 
757
- const datetimeIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{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{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{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-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{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-light, #f4f5f8);--background-rgb:var(--ion-color-light-rgb, 244, 245, 248);--title-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}.calendar-month-year-toggle{-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{opacity:0.15}.calendar-month-year-toggle #toggle-wrapper{-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,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{-ms-flex-align:stretch;align-items:stretch;height:100%}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2);font-size:min(1.375rem, 35.2px)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons{width:100%}`;
753
+ const datetimeIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{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{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{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-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{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-light, #f4f5f8);--background-rgb:var(--ion-color-light-rgb, 244, 245, 248);--title-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}.calendar-month-year-toggle{-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{opacity:0.15}.calendar-month-year-toggle #toggle-wrapper{-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,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host(.ion-color) .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{-ms-flex-align:stretch;align-items:stretch;height:100%}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);font-size:min(1.375rem, 35.2px)}:host(.ion-color) .calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-primary, #0054e9);font-weight:600}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base)}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-primary, #0054e9);color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons{width:100%}`;
758
754
 
759
- const datetimeMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{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{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{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-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{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}.calendar-month-year-toggle{-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, var(--ion-text-color-step-350, #595959));z-index:1}.calendar-month-year-toggle.ion-focused::after{opacity:0.04}.calendar-month-year-toggle ion-ripple-effect{color:currentColor}@media (any-hover: hover){.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray));font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}`;
755
+ const datetimeMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{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{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{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-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{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));--title-color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color){--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-primary, #0054e9);color:var(--title-color)}:host(.ion-color) .datetime-header{background:var(--ion-color-base)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}.calendar-month-year-toggle{-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, var(--ion-text-color-step-350, #595959));z-index:1}.calendar-month-year-toggle.ion-focused::after{opacity:0.04}.calendar-month-year-toggle ion-ripple-effect{color:currentColor}@media (any-hover: hover){.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray));font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-primary, #0054e9);color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-primary, #0054e9);background:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}`;
760
756
 
761
757
  const Datetime = class {
762
758
  constructor(hostRef) {
@@ -788,12 +784,6 @@ const Datetime = class {
788
784
  isAdjacentDay: false,
789
785
  };
790
786
  this.isTimePopoverOpen = false;
791
- /**
792
- * The color to use from your application's color palette.
793
- * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
794
- * For more information on colors, see [theming](/docs/theming/basics).
795
- */
796
- this.color = 'primary';
797
787
  /**
798
788
  * The name of the control, which is submitted with the form data.
799
789
  */
@@ -1969,7 +1959,7 @@ const Datetime = class {
1969
1959
  this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
1970
1960
  this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart));
1971
1961
  ev.stopPropagation();
1972
- } }, items.map((item) => (index.h("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)))));
1962
+ } }, items.map((item) => (index.h("ion-picker-column-option", { color: this.color, 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)))));
1973
1963
  }
1974
1964
  renderIndividualDatePickerColumns(forcePresentation) {
1975
1965
  const { workingParts, isDateEnabled } = this;
@@ -2042,7 +2032,7 @@ const Datetime = class {
2042
2032
  this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
2043
2033
  this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
2044
2034
  ev.stopPropagation();
2045
- } }, days.map((day) => (index.h("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)))));
2035
+ } }, days.map((day) => (index.h("ion-picker-column-option", { color: this.color, 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)))));
2046
2036
  }
2047
2037
  renderMonthPickerColumn(months) {
2048
2038
  if (months.length === 0) {
@@ -2057,7 +2047,7 @@ const Datetime = class {
2057
2047
  this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
2058
2048
  }
2059
2049
  ev.stopPropagation();
2060
- } }, months.map((month) => (index.h("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)))));
2050
+ } }, months.map((month) => (index.h("ion-picker-column-option", { color: this.color, 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)))));
2061
2051
  }
2062
2052
  renderYearPickerColumn(years) {
2063
2053
  if (years.length === 0) {
@@ -2072,7 +2062,7 @@ const Datetime = class {
2072
2062
  this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
2073
2063
  }
2074
2064
  ev.stopPropagation();
2075
- } }, years.map((year) => (index.h("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)))));
2065
+ } }, years.map((year) => (index.h("ion-picker-column-option", { color: this.color, 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)))));
2076
2066
  }
2077
2067
  renderTimePickerColumns(forcePresentation) {
2078
2068
  if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
@@ -2105,7 +2095,7 @@ const Datetime = class {
2105
2095
  this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
2106
2096
  this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
2107
2097
  ev.stopPropagation();
2108
- } }, hoursData.map((hour) => (index.h("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)))));
2098
+ } }, hoursData.map((hour) => (index.h("ion-picker-column-option", { color: this.color, 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)))));
2109
2099
  }
2110
2100
  renderMinutePickerColumn(minutesData) {
2111
2101
  const { disabled, workingParts } = this;
@@ -2116,7 +2106,7 @@ const Datetime = class {
2116
2106
  this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
2117
2107
  this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
2118
2108
  ev.stopPropagation();
2119
- } }, minutesData.map((minute) => (index.h("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)))));
2109
+ } }, minutesData.map((minute) => (index.h("ion-picker-column-option", { color: this.color, 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)))));
2120
2110
  }
2121
2111
  renderDayPeriodPickerColumn(dayPeriodData) {
2122
2112
  const { disabled, workingParts } = this;
@@ -2130,7 +2120,7 @@ const Datetime = class {
2130
2120
  this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
2131
2121
  this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
2132
2122
  ev.stopPropagation();
2133
- } }, dayPeriodData.map((dayPeriod) => (index.h("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)))));
2123
+ } }, dayPeriodData.map((dayPeriod) => (index.h("ion-picker-column-option", { color: this.color, 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)))));
2134
2124
  }
2135
2125
  renderWheelView(forcePresentation) {
2136
2126
  const { locale } = this;
@@ -2467,7 +2457,7 @@ const Datetime = class {
2467
2457
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
2468
2458
  const hasWheelVariant = hasDatePresentation && preferWheel;
2469
2459
  helpers.renderHiddenInput(true, el, name, format.formatValue(value), disabled);
2470
- return (index.h(index.Host, { key: '5e0b83cb88a87945eaae2f9402751819b75452ee', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
2460
+ return (index.h(index.Host, { key: '79b906669d3e0d9ff356421a5f571d5cf12b6793', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
2471
2461
  [mode]: true,
2472
2462
  ['datetime-readonly']: readonly,
2473
2463
  ['datetime-disabled']: disabled,
@@ -2477,7 +2467,7 @@ const Datetime = class {
2477
2467
  [`datetime-size-${size}`]: true,
2478
2468
  [`datetime-prefer-wheel`]: hasWheelVariant,
2479
2469
  [`datetime-grid`]: isGridStyle,
2480
- })) }, index.h("div", { key: '9f9ba72e9879525961b00abe342a7891492ca0ff', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
2470
+ })) }, index.h("div", { key: 'e29ce6edd79f3efb8f7cc4a81bb543d580e5f4c6', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
2481
2471
  }
2482
2472
  get el() { return index.getElement(this); }
2483
2473
  static get watchers() { return {
@@ -2527,638 +2517,4 @@ Datetime.style = {
2527
2517
  md: datetimeMdCss()
2528
2518
  };
2529
2519
 
2530
- /**
2531
- * iOS Picker Enter Animation
2532
- */
2533
- const iosEnterAnimation = (baseEl) => {
2534
- const baseAnimation = animation.createAnimation();
2535
- const backdropAnimation = animation.createAnimation();
2536
- const wrapperAnimation = animation.createAnimation();
2537
- backdropAnimation
2538
- .addElement(baseEl.querySelector('ion-backdrop'))
2539
- .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
2540
- .beforeStyles({
2541
- 'pointer-events': 'none',
2542
- })
2543
- .afterClearStyles(['pointer-events']);
2544
- wrapperAnimation
2545
- .addElement(baseEl.querySelector('.picker-wrapper'))
2546
- .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
2547
- return baseAnimation
2548
- .addElement(baseEl)
2549
- .easing('cubic-bezier(.36,.66,.04,1)')
2550
- .duration(400)
2551
- .addAnimation([backdropAnimation, wrapperAnimation]);
2552
- };
2553
-
2554
- /**
2555
- * iOS Picker Leave Animation
2556
- */
2557
- const iosLeaveAnimation = (baseEl) => {
2558
- const baseAnimation = animation.createAnimation();
2559
- const backdropAnimation = animation.createAnimation();
2560
- const wrapperAnimation = animation.createAnimation();
2561
- backdropAnimation
2562
- .addElement(baseEl.querySelector('ion-backdrop'))
2563
- .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
2564
- wrapperAnimation
2565
- .addElement(baseEl.querySelector('.picker-wrapper'))
2566
- .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
2567
- return baseAnimation
2568
- .addElement(baseEl)
2569
- .easing('cubic-bezier(.36,.66,.04,1)')
2570
- .duration(400)
2571
- .addAnimation([backdropAnimation, wrapperAnimation]);
2572
- };
2573
-
2574
- 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}.sc-ion-picker-legacy-ios-h{inset-inline-start: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, var(--ion-background-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, #0054e9);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}.picker-above-highlight.sc-ion-picker-legacy-ios{inset-inline-start: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}.picker-below-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}`;
2575
-
2576
- 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}.sc-ion-picker-legacy-md-h{inset-inline-start: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, var(--ion-background-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, #0054e9);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, var(--ion-background-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}.picker-above-highlight.sc-ion-picker-legacy-md{inset-inline-start: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, var(--ion-background-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}.picker-below-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}`;
2577
-
2578
- const Picker = class {
2579
- constructor(hostRef) {
2580
- index.registerInstance(this, hostRef);
2581
- this.didPresent = index.createEvent(this, "ionPickerDidPresent", 7);
2582
- this.willPresent = index.createEvent(this, "ionPickerWillPresent", 7);
2583
- this.willDismiss = index.createEvent(this, "ionPickerWillDismiss", 7);
2584
- this.didDismiss = index.createEvent(this, "ionPickerDidDismiss", 7);
2585
- this.didPresentShorthand = index.createEvent(this, "didPresent", 7);
2586
- this.willPresentShorthand = index.createEvent(this, "willPresent", 7);
2587
- this.willDismissShorthand = index.createEvent(this, "willDismiss", 7);
2588
- this.didDismissShorthand = index.createEvent(this, "didDismiss", 7);
2589
- this.delegateController = overlays.createDelegateController(this);
2590
- this.lockController = lockController.createLockController();
2591
- this.triggerController = overlays.createTriggerController();
2592
- this.presented = false;
2593
- /** @internal */
2594
- this.hasController = false;
2595
- /**
2596
- * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
2597
- */
2598
- this.keyboardClose = true;
2599
- /**
2600
- * Array of buttons to be displayed at the top of the picker.
2601
- */
2602
- this.buttons = [];
2603
- /**
2604
- * Array of columns to be displayed in the picker.
2605
- */
2606
- this.columns = [];
2607
- /**
2608
- * Number of milliseconds to wait before dismissing the picker.
2609
- */
2610
- this.duration = 0;
2611
- /**
2612
- * If `true`, a backdrop will be displayed behind the picker.
2613
- */
2614
- this.showBackdrop = true;
2615
- /**
2616
- * If `true`, the picker will be dismissed when the backdrop is clicked.
2617
- */
2618
- this.backdropDismiss = true;
2619
- /**
2620
- * If `true`, the picker will animate.
2621
- */
2622
- this.animated = true;
2623
- /**
2624
- * If `true`, the picker will open. If `false`, the picker will close.
2625
- * Use this if you need finer grained control over presentation, otherwise
2626
- * just use the pickerController or the `trigger` property.
2627
- * Note: `isOpen` will not automatically be set back to `false` when
2628
- * the picker dismisses. You will need to do that in your code.
2629
- */
2630
- this.isOpen = false;
2631
- this.onBackdropTap = () => {
2632
- this.dismiss(undefined, overlays.BACKDROP);
2633
- };
2634
- this.dispatchCancelHandler = (ev) => {
2635
- const role = ev.detail.role;
2636
- if (overlays.isCancel(role)) {
2637
- const cancelButton = this.buttons.find((b) => b.role === 'cancel');
2638
- this.callButtonHandler(cancelButton);
2639
- }
2640
- };
2641
- }
2642
- onIsOpenChange(newValue, oldValue) {
2643
- if (newValue === true && oldValue === false) {
2644
- this.present();
2645
- }
2646
- else if (newValue === false && oldValue === true) {
2647
- this.dismiss();
2648
- }
2649
- }
2650
- triggerChanged() {
2651
- const { trigger, el, triggerController } = this;
2652
- if (trigger) {
2653
- triggerController.addClickListener(el, trigger);
2654
- }
2655
- }
2656
- connectedCallback() {
2657
- overlays.prepareOverlay(this.el);
2658
- this.triggerChanged();
2659
- }
2660
- disconnectedCallback() {
2661
- this.triggerController.removeClickListener();
2662
- }
2663
- componentWillLoad() {
2664
- var _a;
2665
- if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
2666
- overlays.setOverlayId(this.el);
2667
- }
2668
- }
2669
- componentDidLoad() {
2670
- index.printIonWarning('[ion-picker-legacy] - 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);
2671
- /**
2672
- * If picker was rendered with isOpen="true"
2673
- * then we should open picker immediately.
2674
- */
2675
- if (this.isOpen === true) {
2676
- helpers.raf(() => this.present());
2677
- }
2678
- /**
2679
- * When binding values in frameworks such as Angular
2680
- * it is possible for the value to be set after the Web Component
2681
- * initializes but before the value watcher is set up in Stencil.
2682
- * As a result, the watcher callback may not be fired.
2683
- * We work around this by manually calling the watcher
2684
- * callback when the component has loaded and the watcher
2685
- * is configured.
2686
- */
2687
- this.triggerChanged();
2688
- }
2689
- /**
2690
- * Present the picker overlay after it has been created.
2691
- */
2692
- async present() {
2693
- const unlock = await this.lockController.lock();
2694
- await this.delegateController.attachViewToDom();
2695
- await overlays.present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
2696
- if (this.duration > 0) {
2697
- this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
2698
- }
2699
- unlock();
2700
- }
2701
- /**
2702
- * Dismiss the picker overlay after it has been presented.
2703
- *
2704
- * @param data Any data to emit in the dismiss events.
2705
- * @param role The role of the element that is dismissing the picker.
2706
- * This can be useful in a button handler for determining which button was
2707
- * clicked to dismiss the picker.
2708
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
2709
- */
2710
- async dismiss(data, role) {
2711
- const unlock = await this.lockController.lock();
2712
- if (this.durationTimeout) {
2713
- clearTimeout(this.durationTimeout);
2714
- }
2715
- const dismissed = await overlays.dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
2716
- if (dismissed) {
2717
- this.delegateController.removeViewFromDom();
2718
- }
2719
- unlock();
2720
- return dismissed;
2721
- }
2722
- /**
2723
- * Returns a promise that resolves when the picker did dismiss.
2724
- */
2725
- onDidDismiss() {
2726
- return overlays.eventMethod(this.el, 'ionPickerDidDismiss');
2727
- }
2728
- /**
2729
- * Returns a promise that resolves when the picker will dismiss.
2730
- */
2731
- onWillDismiss() {
2732
- return overlays.eventMethod(this.el, 'ionPickerWillDismiss');
2733
- }
2734
- /**
2735
- * Get the column that matches the specified name.
2736
- *
2737
- * @param name The name of the column.
2738
- */
2739
- getColumn(name) {
2740
- return Promise.resolve(this.columns.find((column) => column.name === name));
2741
- }
2742
- async buttonClick(button) {
2743
- const role = button.role;
2744
- if (overlays.isCancel(role)) {
2745
- return this.dismiss(undefined, role);
2746
- }
2747
- const shouldDismiss = await this.callButtonHandler(button);
2748
- if (shouldDismiss) {
2749
- return this.dismiss(this.getSelected(), button.role);
2750
- }
2751
- return Promise.resolve();
2752
- }
2753
- async callButtonHandler(button) {
2754
- if (button) {
2755
- // a handler has been provided, execute it
2756
- // pass the handler the values from the inputs
2757
- const rtn = await overlays.safeCall(button.handler, this.getSelected());
2758
- if (rtn === false) {
2759
- // if the return value of the handler is false then do not dismiss
2760
- return false;
2761
- }
2762
- }
2763
- return true;
2764
- }
2765
- getSelected() {
2766
- const selected = {};
2767
- this.columns.forEach((col, index) => {
2768
- const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined;
2769
- selected[col.name] = {
2770
- text: selectedColumn ? selectedColumn.text : undefined,
2771
- value: selectedColumn ? selectedColumn.value : undefined,
2772
- columnIndex: index,
2773
- };
2774
- });
2775
- return selected;
2776
- }
2777
- render() {
2778
- const { htmlAttributes } = this;
2779
- const mode = ionicGlobal.getIonMode(this);
2780
- return (index.h(index.Host, Object.assign({ key: '80f66d33780d8a1352d24be9cb63a0cc03d01ab5', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
2781
- zIndex: `${20000 + this.overlayIndex}`,
2782
- }, class: Object.assign({ [mode]: true,
2783
- // Used internally for styling
2784
- [`picker-${mode}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index.h("ion-backdrop", { key: '97fb8e10ba08b197610cb8c0cdea61103883d55f', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: 'b3969cb6fbf7153623d14e3ca1493d3370efb211', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: '299268483c3727e698d9135bfdf40349a7050ac1', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index.h("div", { key: '95394de3ef691899b7dbf416f56fd3e86bbdce3f', class: "picker-toolbar" }, this.buttons.map((b) => (index.h("div", { class: buttonWrapperClass(b) }, index.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index.h("div", { key: '05f18bb8d00dc0e22f691b7e41f90f729a6c66d7', class: "picker-columns" }, index.h("div", { key: '4a8fdf224effc0af67fd413e2e6aca8a78d1cf43', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index.h("ion-picker-legacy-column", { col: c })), index.h("div", { key: 'e50a31db45e3f39e9d0fed36a21be9257eec09bf', class: "picker-below-highlight" }))), index.h("div", { key: '5a78cb2176ac807ea0c195c6b76cd0e8eef9d4c0', tabindex: "0", "aria-hidden": "true" })));
2785
- }
2786
- get el() { return index.getElement(this); }
2787
- static get watchers() { return {
2788
- "isOpen": [{
2789
- "onIsOpenChange": 0
2790
- }],
2791
- "trigger": [{
2792
- "triggerChanged": 0
2793
- }]
2794
- }; }
2795
- };
2796
- const buttonWrapperClass = (button) => {
2797
- return {
2798
- [`picker-toolbar-${button.role}`]: button.role !== undefined,
2799
- 'picker-toolbar-button': true,
2800
- };
2801
- };
2802
- const buttonClass = (button) => {
2803
- return Object.assign({ 'picker-button': true, 'ion-activatable': true }, theme.getClassMap(button.cssClass));
2804
- };
2805
- Picker.style = {
2806
- ios: pickerIosCss(),
2807
- md: pickerMdCss()
2808
- };
2809
-
2810
- 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}.picker-opt{inset-inline-start: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}}`;
2811
-
2812
- 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}.picker-opt{inset-inline-start: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, #0054e9)}`;
2813
-
2814
- const PickerColumnCmp = class {
2815
- constructor(hostRef) {
2816
- index.registerInstance(this, hostRef);
2817
- this.ionPickerColChange = index.createEvent(this, "ionPickerColChange", 7);
2818
- this.optHeight = 0;
2819
- this.rotateFactor = 0;
2820
- this.scaleFactor = 1;
2821
- this.velocity = 0;
2822
- this.y = 0;
2823
- this.noAnimate = true;
2824
- // `colDidChange` is a flag that gets set when the column is changed
2825
- // dynamically. When this flag is set, the column will refresh
2826
- // after the component re-renders to incorporate the new column data.
2827
- // This is necessary because `this.refresh` queries for the option elements,
2828
- // so it needs to wait for the latest elements to be available in the DOM.
2829
- // Ex: column is created with 3 options. User updates the column data
2830
- // to have 5 options. The column will still think it only has 3 options.
2831
- this.colDidChange = false;
2832
- }
2833
- colChanged() {
2834
- this.colDidChange = true;
2835
- }
2836
- async connectedCallback() {
2837
- let pickerRotateFactor = 0;
2838
- let pickerScaleFactor = 0.81;
2839
- const mode = ionicGlobal.getIonMode(this);
2840
- if (mode === 'ios') {
2841
- pickerRotateFactor = -0.46;
2842
- pickerScaleFactor = 1;
2843
- }
2844
- this.rotateFactor = pickerRotateFactor;
2845
- this.scaleFactor = pickerScaleFactor;
2846
- this.gesture = (await Promise.resolve().then(function () { return require('./index-CAvQ7Tka.js'); })).createGesture({
2847
- el: this.el,
2848
- gestureName: 'picker-swipe',
2849
- gesturePriority: 100,
2850
- threshold: 0,
2851
- passive: false,
2852
- onStart: (ev) => this.onStart(ev),
2853
- onMove: (ev) => this.onMove(ev),
2854
- onEnd: (ev) => this.onEnd(ev),
2855
- });
2856
- this.gesture.enable();
2857
- // Options have not been initialized yet
2858
- // Animation must be disabled through the `noAnimate` flag
2859
- // Otherwise, the options will render
2860
- // at the top of the column and transition down
2861
- this.tmrId = setTimeout(() => {
2862
- this.noAnimate = false;
2863
- // After initialization, `refresh()` will be called
2864
- // At this point, animation will be enabled. The options will
2865
- // animate as they are being selected.
2866
- this.refresh(true);
2867
- }, 250);
2868
- }
2869
- componentDidLoad() {
2870
- this.onDomChange();
2871
- }
2872
- componentDidUpdate() {
2873
- // Options may have changed since last update.
2874
- if (this.colDidChange) {
2875
- // Animation must be disabled through the `onDomChange` parameter.
2876
- // Otherwise, the recently added options will render
2877
- // at the top of the column and transition down
2878
- this.onDomChange(true, false);
2879
- this.colDidChange = false;
2880
- }
2881
- }
2882
- disconnectedCallback() {
2883
- if (this.rafId !== undefined)
2884
- cancelAnimationFrame(this.rafId);
2885
- if (this.tmrId)
2886
- clearTimeout(this.tmrId);
2887
- if (this.gesture) {
2888
- this.gesture.destroy();
2889
- this.gesture = undefined;
2890
- }
2891
- }
2892
- emitColChange() {
2893
- this.ionPickerColChange.emit(this.col);
2894
- }
2895
- setSelected(selectedIndex, duration) {
2896
- // if there is a selected index, then figure out it's y position
2897
- // if there isn't a selected index, then just use the top y position
2898
- const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
2899
- this.velocity = 0;
2900
- // set what y position we're at
2901
- if (this.rafId !== undefined)
2902
- cancelAnimationFrame(this.rafId);
2903
- this.update(y, duration, true);
2904
- this.emitColChange();
2905
- }
2906
- update(y, duration, saveY) {
2907
- if (!this.optsEl) {
2908
- return;
2909
- }
2910
- // ensure we've got a good round number :)
2911
- let translateY = 0;
2912
- let translateZ = 0;
2913
- const { col, rotateFactor } = this;
2914
- const prevSelected = col.selectedIndex;
2915
- const selectedIndex = (col.selectedIndex = this.indexForY(-y));
2916
- const durationStr = duration === 0 ? '' : duration + 'ms';
2917
- const scaleStr = `scale(${this.scaleFactor})`;
2918
- const children = this.optsEl.children;
2919
- for (let i = 0; i < children.length; i++) {
2920
- const button = children[i];
2921
- const opt = col.options[i];
2922
- const optOffset = i * this.optHeight + y;
2923
- let transform = '';
2924
- if (rotateFactor !== 0) {
2925
- const rotateX = optOffset * rotateFactor;
2926
- if (Math.abs(rotateX) <= 90) {
2927
- translateY = 0;
2928
- translateZ = 90;
2929
- transform = `rotateX(${rotateX}deg) `;
2930
- }
2931
- else {
2932
- translateY = -9999;
2933
- }
2934
- }
2935
- else {
2936
- translateZ = 0;
2937
- translateY = optOffset;
2938
- }
2939
- const selected = selectedIndex === i;
2940
- transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
2941
- if (this.scaleFactor !== 1 && !selected) {
2942
- transform += scaleStr;
2943
- }
2944
- // Update transition duration
2945
- if (this.noAnimate) {
2946
- opt.duration = 0;
2947
- button.style.transitionDuration = '';
2948
- }
2949
- else if (duration !== opt.duration) {
2950
- opt.duration = duration;
2951
- button.style.transitionDuration = durationStr;
2952
- }
2953
- // Update transform
2954
- if (transform !== opt.transform) {
2955
- opt.transform = transform;
2956
- }
2957
- button.style.transform = transform;
2958
- /**
2959
- * Ensure that the select column
2960
- * item has the selected class
2961
- */
2962
- opt.selected = selected;
2963
- if (selected) {
2964
- button.classList.add(PICKER_OPT_SELECTED);
2965
- }
2966
- else {
2967
- button.classList.remove(PICKER_OPT_SELECTED);
2968
- }
2969
- }
2970
- this.col.prevSelected = prevSelected;
2971
- if (saveY) {
2972
- this.y = y;
2973
- }
2974
- if (this.lastIndex !== selectedIndex) {
2975
- // have not set a last index yet
2976
- haptic.hapticSelectionChanged();
2977
- this.lastIndex = selectedIndex;
2978
- }
2979
- }
2980
- decelerate() {
2981
- if (this.velocity !== 0) {
2982
- // still decelerating
2983
- this.velocity *= DECELERATION_FRICTION;
2984
- // do not let it go slower than a velocity of 1
2985
- this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
2986
- let y = this.y + this.velocity;
2987
- if (y > this.minY) {
2988
- // whoops, it's trying to scroll up farther than the options we have!
2989
- y = this.minY;
2990
- this.velocity = 0;
2991
- }
2992
- else if (y < this.maxY) {
2993
- // gahh, it's trying to scroll down farther than we can!
2994
- y = this.maxY;
2995
- this.velocity = 0;
2996
- }
2997
- this.update(y, 0, true);
2998
- const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1;
2999
- if (notLockedIn) {
3000
- // isn't locked in yet, keep decelerating until it is
3001
- this.rafId = requestAnimationFrame(() => this.decelerate());
3002
- }
3003
- else {
3004
- this.velocity = 0;
3005
- this.emitColChange();
3006
- haptic.hapticSelectionEnd();
3007
- }
3008
- }
3009
- else if (this.y % this.optHeight !== 0) {
3010
- // needs to still get locked into a position so options line up
3011
- const currentPos = Math.abs(this.y % this.optHeight);
3012
- // create a velocity in the direction it needs to scroll
3013
- this.velocity = currentPos > this.optHeight / 2 ? 1 : -1;
3014
- this.decelerate();
3015
- }
3016
- }
3017
- indexForY(y) {
3018
- return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
3019
- }
3020
- onStart(detail) {
3021
- // We have to prevent default in order to block scrolling under the picker
3022
- // but we DO NOT have to stop propagation, since we still want
3023
- // some "click" events to capture
3024
- if (detail.event.cancelable) {
3025
- detail.event.preventDefault();
3026
- }
3027
- detail.event.stopPropagation();
3028
- haptic.hapticSelectionStart();
3029
- // reset everything
3030
- if (this.rafId !== undefined)
3031
- cancelAnimationFrame(this.rafId);
3032
- const options = this.col.options;
3033
- let minY = options.length - 1;
3034
- let maxY = 0;
3035
- for (let i = 0; i < options.length; i++) {
3036
- if (!options[i].disabled) {
3037
- minY = Math.min(minY, i);
3038
- maxY = Math.max(maxY, i);
3039
- }
3040
- }
3041
- this.minY = -(minY * this.optHeight);
3042
- this.maxY = -(maxY * this.optHeight);
3043
- }
3044
- onMove(detail) {
3045
- if (detail.event.cancelable) {
3046
- detail.event.preventDefault();
3047
- }
3048
- detail.event.stopPropagation();
3049
- // update the scroll position relative to pointer start position
3050
- let y = this.y + detail.deltaY;
3051
- if (y > this.minY) {
3052
- // scrolling up higher than scroll area
3053
- y = Math.pow(y, 0.8);
3054
- this.bounceFrom = y;
3055
- }
3056
- else if (y < this.maxY) {
3057
- // scrolling down below scroll area
3058
- y += Math.pow(this.maxY - y, 0.9);
3059
- this.bounceFrom = y;
3060
- }
3061
- else {
3062
- this.bounceFrom = 0;
3063
- }
3064
- this.update(y, 0, false);
3065
- }
3066
- onEnd(detail) {
3067
- if (this.bounceFrom > 0) {
3068
- // bounce back up
3069
- this.update(this.minY, 100, true);
3070
- this.emitColChange();
3071
- return;
3072
- }
3073
- else if (this.bounceFrom < 0) {
3074
- // bounce back down
3075
- this.update(this.maxY, 100, true);
3076
- this.emitColChange();
3077
- return;
3078
- }
3079
- this.velocity = helpers.clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
3080
- if (this.velocity === 0 && detail.deltaY === 0) {
3081
- const opt = detail.event.target.closest('.picker-opt');
3082
- if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) {
3083
- this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
3084
- }
3085
- }
3086
- else {
3087
- this.y += detail.deltaY;
3088
- if (Math.abs(detail.velocityY) < 0.05) {
3089
- const isScrollingUp = detail.deltaY > 0;
3090
- const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
3091
- if (isScrollingUp && optHeightFraction > 0.5) {
3092
- this.velocity = Math.abs(this.velocity) * -1;
3093
- }
3094
- else if (!isScrollingUp && optHeightFraction <= 0.5) {
3095
- this.velocity = Math.abs(this.velocity);
3096
- }
3097
- }
3098
- this.decelerate();
3099
- }
3100
- }
3101
- refresh(forceRefresh, animated) {
3102
- var _a;
3103
- let min = this.col.options.length - 1;
3104
- let max = 0;
3105
- const options = this.col.options;
3106
- for (let i = 0; i < options.length; i++) {
3107
- if (!options[i].disabled) {
3108
- min = Math.min(min, i);
3109
- max = Math.max(max, i);
3110
- }
3111
- }
3112
- /**
3113
- * Only update selected value if column has a
3114
- * velocity of 0. If it does not, then the
3115
- * column is animating might land on
3116
- * a value different than the value at
3117
- * selectedIndex
3118
- */
3119
- if (this.velocity !== 0) {
3120
- return;
3121
- }
3122
- const selectedIndex = helpers.clamp(min, (_a = this.col.selectedIndex) !== null && _a !== void 0 ? _a : 0, max);
3123
- if (this.col.prevSelected !== selectedIndex || forceRefresh) {
3124
- const y = selectedIndex * this.optHeight * -1;
3125
- const duration = animated ? TRANSITION_DURATION : 0;
3126
- this.velocity = 0;
3127
- this.update(y, duration, true);
3128
- }
3129
- }
3130
- onDomChange(forceRefresh, animated) {
3131
- const colEl = this.optsEl;
3132
- if (colEl) {
3133
- // DOM READ
3134
- // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the column has changed
3135
- this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
3136
- }
3137
- this.refresh(forceRefresh, animated);
3138
- }
3139
- render() {
3140
- const col = this.col;
3141
- const mode = ionicGlobal.getIonMode(this);
3142
- return (index.h(index.Host, { key: '86125e95f18837dfd021db01777d72a1562d8ee3', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, theme.getClassMap(col.cssClass)), style: {
3143
- 'max-width': this.col.columnWidth,
3144
- } }, col.prefix && (index.h("div", { key: 'b0f3d39e0bd128781066ffefb7a1e40d12a9e76d', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), index.h("div", { key: '0b106ac4d56916eaaa7f09d1b68348b3754b7bba', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index$1) => (index.h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index$1 }, o.text)))), col.suffix && (index.h("div", { key: '00ff2f9dbb4561787e5a5223327c6a2a33f8362e', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
3145
- }
3146
- get el() { return index.getElement(this); }
3147
- static get watchers() { return {
3148
- "col": [{
3149
- "colChanged": 0
3150
- }]
3151
- }; }
3152
- };
3153
- const PICKER_OPT_SELECTED = 'picker-opt-selected';
3154
- const DECELERATION_FRICTION = 0.97;
3155
- const MAX_PICKER_SPEED = 90;
3156
- const TRANSITION_DURATION = 150;
3157
- PickerColumnCmp.style = {
3158
- ios: pickerColumnIosCss(),
3159
- md: pickerColumnMdCss()
3160
- };
3161
-
3162
2520
  exports.ion_datetime = Datetime;
3163
- exports.ion_picker_legacy = Picker;
3164
- exports.ion_picker_legacy_column = PickerColumnCmp;