@ionic/core 8.8.10 → 8.8.11-dev.11781186446.19d9a1cc

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 (288) hide show
  1. package/components/index.js +1 -1
  2. package/components/ion-action-sheet.js +1 -1
  3. package/components/ion-alert.js +1 -1
  4. package/components/ion-back-button.js +1 -1
  5. package/components/ion-button.js +1 -1
  6. package/components/ion-card.js +1 -1
  7. package/components/ion-chip.js +1 -1
  8. package/components/ion-datetime-button.js +1 -1
  9. package/components/ion-datetime.js +1 -1
  10. package/components/ion-fab-button.js +1 -1
  11. package/components/ion-infinite-scroll-content.js +1 -1
  12. package/components/ion-input-password-toggle.js +1 -1
  13. package/components/ion-input.js +1 -1
  14. package/components/ion-item-option.js +1 -1
  15. package/components/ion-item.js +1 -1
  16. package/components/ion-loading.js +1 -1
  17. package/components/ion-menu-button.js +1 -1
  18. package/components/ion-menu.js +1 -1
  19. package/components/ion-modal.js +1 -1
  20. package/components/ion-popover.js +1 -1
  21. package/components/ion-progress-bar.js +1 -1
  22. package/components/ion-radio.js +1 -1
  23. package/components/ion-range.js +1 -1
  24. package/components/ion-refresher-content.js +1 -1
  25. package/components/ion-refresher.js +1 -1
  26. package/components/ion-reorder-group.js +1 -1
  27. package/components/ion-reorder.js +1 -1
  28. package/components/ion-ripple-effect.js +1 -1
  29. package/components/ion-router-link.js +1 -1
  30. package/components/ion-router-outlet.js +1 -1
  31. package/components/ion-row.js +1 -1
  32. package/components/ion-searchbar.js +1 -1
  33. package/components/ion-segment-button.js +1 -1
  34. package/components/ion-segment-content.js +1 -1
  35. package/components/ion-segment-view.js +1 -1
  36. package/components/ion-segment.js +1 -1
  37. package/components/ion-select-modal.js +1 -1
  38. package/components/ion-select-option.js +1 -1
  39. package/components/ion-select-popover.js +1 -1
  40. package/components/ion-select.js +1 -1
  41. package/components/ion-skeleton-text.js +1 -1
  42. package/components/ion-spinner.js +1 -1
  43. package/components/ion-split-pane.js +1 -1
  44. package/components/ion-tab-bar.js +1 -1
  45. package/components/ion-tab-button.js +1 -1
  46. package/components/ion-tab.js +1 -1
  47. package/components/ion-tabs.js +1 -1
  48. package/components/ion-text.js +1 -1
  49. package/components/ion-textarea.js +1 -1
  50. package/components/ion-thumbnail.js +1 -1
  51. package/components/ion-title.js +1 -1
  52. package/components/ion-toast.js +1 -1
  53. package/components/ion-toggle.js +1 -1
  54. package/components/ion-toolbar.js +1 -1
  55. package/components/{p-nQi4oKcG.js → p-B8U2xbtx.js} +1 -1
  56. package/components/p-BpCi7xHq.js +4 -0
  57. package/components/p-CHzfYZbv.js +4 -0
  58. package/components/{p-DDWp95gH.js → p-Ck2wcXbv.js} +1 -1
  59. package/components/{p-C2lKgrXx.js → p-DEBD4LvH.js} +1 -1
  60. package/components/p-DH50pr9O.js +4 -0
  61. package/components/{p-BSEgsdFI.js → p-DhkITZ-y.js} +1 -1
  62. package/components/p-DmpBvltk.js +4 -0
  63. package/components/{p-5bE_Wz4Y.js → p-DpV-p5Xs.js} +1 -1
  64. package/components/{p-Cfx4M1Bn.js → p-Dz74mwlk.js} +1 -1
  65. package/components/{p-BLmJ0zRm.js → p-XJWMAP8m.js} +1 -1
  66. package/components/p-djQLE88P.js +4 -0
  67. package/components/{p-B60hm8Qv.js → p-r0aq7dpt.js} +1 -1
  68. package/components/{p-rCa2eL0j.js → p-wk2QqrAo.js} +1 -1
  69. package/dist/cjs/index.cjs.js +1 -2
  70. package/dist/cjs/ion-action-sheet.cjs.entry.js +8 -4
  71. package/dist/cjs/ion-alert.cjs.entry.js +7 -3
  72. package/dist/cjs/ion-app_8.cjs.entry.js +23 -9
  73. package/dist/cjs/ion-avatar_3.cjs.entry.js +1 -1
  74. package/dist/cjs/ion-col_3.cjs.entry.js +1 -1
  75. package/dist/cjs/{ion-datetime_3.cjs.entry.js → ion-datetime.cjs.entry.js} +1 -639
  76. package/dist/cjs/ion-input.cjs.entry.js +4 -4
  77. package/dist/cjs/ion-item_8.cjs.entry.js +2 -2
  78. package/dist/cjs/ion-loading.cjs.entry.js +7 -3
  79. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  80. package/dist/cjs/ion-modal.cjs.entry.js +9 -5
  81. package/dist/cjs/ion-popover.cjs.entry.js +7 -3
  82. package/dist/cjs/ion-progress-bar.cjs.entry.js +1 -1
  83. package/dist/cjs/ion-radio_2.cjs.entry.js +3 -3
  84. package/dist/cjs/ion-range.cjs.entry.js +3 -3
  85. package/dist/cjs/ion-refresher_2.cjs.entry.js +2 -2
  86. package/dist/cjs/ion-reorder_2.cjs.entry.js +2 -2
  87. package/dist/cjs/ion-ripple-effect.cjs.entry.js +1 -1
  88. package/dist/cjs/ion-route_4.cjs.entry.js +2 -2
  89. package/dist/cjs/ion-searchbar.cjs.entry.js +5 -5
  90. package/dist/cjs/ion-segment-content.cjs.entry.js +1 -1
  91. package/dist/cjs/ion-segment-view.cjs.entry.js +2 -2
  92. package/dist/cjs/ion-segment_2.cjs.entry.js +4 -4
  93. package/dist/cjs/ion-select-modal.cjs.entry.js +2 -2
  94. package/dist/cjs/ion-select_3.cjs.entry.js +36 -5
  95. package/dist/cjs/ion-spinner.cjs.entry.js +1 -1
  96. package/dist/cjs/ion-split-pane.cjs.entry.js +2 -2
  97. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +4 -4
  98. package/dist/cjs/ion-tab_2.cjs.entry.js +3 -3
  99. package/dist/cjs/ion-text.cjs.entry.js +2 -2
  100. package/dist/cjs/ion-textarea.cjs.entry.js +2 -2
  101. package/dist/cjs/ion-toast.cjs.entry.js +3 -3
  102. package/dist/cjs/ion-toggle.cjs.entry.js +3 -3
  103. package/dist/cjs/ionic.cjs.js +1 -1
  104. package/dist/cjs/loader.cjs.js +1 -1
  105. package/dist/cjs/{overlays-TbKsuC-K.js → overlays-DSmSrd_4.js} +26 -7
  106. package/dist/collection/collection-manifest.json +5 -9
  107. package/dist/collection/components/action-sheet/action-sheet.js +8 -4
  108. package/dist/collection/components/alert/alert.js +7 -3
  109. package/dist/collection/components/input/input.js +8 -8
  110. package/dist/collection/components/loading/loading.js +7 -3
  111. package/dist/collection/components/modal/modal.js +9 -5
  112. package/dist/collection/components/popover/popover.js +7 -3
  113. package/dist/collection/components/progress-bar/progress-bar.js +1 -1
  114. package/dist/collection/components/radio/radio.js +4 -4
  115. package/dist/collection/components/range/range.js +3 -3
  116. package/dist/collection/components/refresher/refresher.js +1 -1
  117. package/dist/collection/components/refresher-content/refresher-content.js +1 -1
  118. package/dist/collection/components/reorder/reorder.js +1 -1
  119. package/dist/collection/components/reorder-group/reorder-group.js +1 -1
  120. package/dist/collection/components/ripple-effect/ripple-effect.js +1 -1
  121. package/dist/collection/components/router-link/router-link.js +2 -2
  122. package/dist/collection/components/router-outlet/router-outlet.js +38 -5
  123. package/dist/collection/components/row/row.js +1 -1
  124. package/dist/collection/components/searchbar/searchbar.js +9 -9
  125. package/dist/collection/components/segment/segment.js +2 -2
  126. package/dist/collection/components/segment-button/segment-button.js +2 -2
  127. package/dist/collection/components/segment-content/segment-content.js +1 -1
  128. package/dist/collection/components/segment-view/segment-view.js +2 -2
  129. package/dist/collection/components/select/select.js +33 -2
  130. package/dist/collection/components/select-modal/select-modal.js +1 -1
  131. package/dist/collection/components/select-option/select-option.js +1 -1
  132. package/dist/collection/components/select-popover/select-popover.js +1 -1
  133. package/dist/collection/components/skeleton-text/skeleton-text.js +2 -2
  134. package/dist/collection/components/spinner/spinner.js +1 -1
  135. package/dist/collection/components/split-pane/split-pane.js +2 -2
  136. package/dist/collection/components/tab/tab.js +2 -2
  137. package/dist/collection/components/tab-bar/tab-bar.js +2 -2
  138. package/dist/collection/components/tab-button/tab-button.js +2 -2
  139. package/dist/collection/components/tabs/tabs.js +1 -1
  140. package/dist/collection/components/text/text.js +2 -2
  141. package/dist/collection/components/textarea/textarea.js +2 -2
  142. package/dist/collection/components/thumbnail/thumbnail.js +1 -1
  143. package/dist/collection/components/title/title.js +2 -2
  144. package/dist/collection/components/toast/toast.js +2 -2
  145. package/dist/collection/components/toggle/toggle.js +3 -3
  146. package/dist/collection/components/toolbar/toolbar.js +2 -2
  147. package/dist/collection/index.js +1 -1
  148. package/dist/collection/utils/overlays.js +25 -6
  149. package/dist/docs.json +247 -1170
  150. package/dist/esm/{index-DV3sJJW8.js → index-AlrZKoWR.js} +1 -1
  151. package/dist/esm/index.js +1 -1
  152. package/dist/esm/ion-accordion_2.entry.js +1 -1
  153. package/dist/esm/ion-action-sheet.entry.js +8 -4
  154. package/dist/esm/ion-alert.entry.js +7 -3
  155. package/dist/esm/ion-app_8.entry.js +23 -9
  156. package/dist/esm/ion-avatar_3.entry.js +1 -1
  157. package/dist/esm/ion-back-button.entry.js +1 -1
  158. package/dist/esm/ion-breadcrumb_2.entry.js +1 -1
  159. package/dist/esm/ion-col_3.entry.js +1 -1
  160. package/dist/esm/{ion-datetime_3.entry.js → ion-datetime.entry.js} +5 -641
  161. package/dist/esm/ion-fab_3.entry.js +1 -1
  162. package/dist/esm/ion-input-password-toggle.entry.js +1 -1
  163. package/dist/esm/ion-input.entry.js +5 -5
  164. package/dist/esm/ion-item_8.entry.js +3 -3
  165. package/dist/esm/ion-loading.entry.js +7 -3
  166. package/dist/esm/ion-menu_3.entry.js +2 -2
  167. package/dist/esm/ion-modal.entry.js +9 -5
  168. package/dist/esm/ion-popover.entry.js +7 -3
  169. package/dist/esm/ion-progress-bar.entry.js +1 -1
  170. package/dist/esm/ion-radio_2.entry.js +3 -3
  171. package/dist/esm/ion-range.entry.js +3 -3
  172. package/dist/esm/ion-refresher_2.entry.js +3 -3
  173. package/dist/esm/ion-reorder_2.entry.js +3 -3
  174. package/dist/esm/ion-ripple-effect.entry.js +1 -1
  175. package/dist/esm/ion-route_4.entry.js +2 -2
  176. package/dist/esm/ion-searchbar.entry.js +6 -6
  177. package/dist/esm/ion-segment-content.entry.js +1 -1
  178. package/dist/esm/ion-segment-view.entry.js +2 -2
  179. package/dist/esm/ion-segment_2.entry.js +4 -4
  180. package/dist/esm/ion-select-modal.entry.js +2 -2
  181. package/dist/esm/ion-select_3.entry.js +38 -7
  182. package/dist/esm/ion-spinner.entry.js +1 -1
  183. package/dist/esm/ion-split-pane.entry.js +2 -2
  184. package/dist/esm/ion-tab-bar_2.entry.js +4 -4
  185. package/dist/esm/ion-tab_2.entry.js +3 -3
  186. package/dist/esm/ion-text.entry.js +2 -2
  187. package/dist/esm/ion-textarea.entry.js +2 -2
  188. package/dist/esm/ion-toast.entry.js +3 -3
  189. package/dist/esm/ion-toggle.entry.js +4 -4
  190. package/dist/esm/ionic.js +1 -1
  191. package/dist/esm/loader.js +1 -1
  192. package/dist/esm/{overlays-TbiM4mdr.js → overlays-DLNOHWNc.js} +26 -7
  193. package/dist/html.html-data.json +6 -77
  194. package/dist/ionic/index.esm.js +1 -1
  195. package/dist/ionic/ionic.esm.js +1 -1
  196. package/dist/ionic/{p-aa5d6b8f.entry.js → p-03aa786d.entry.js} +1 -1
  197. package/dist/ionic/{p-8fce95d5.entry.js → p-14095ba5.entry.js} +1 -1
  198. package/dist/ionic/{p-3a126bca.entry.js → p-259d0d98.entry.js} +1 -1
  199. package/dist/ionic/{p-e847a888.entry.js → p-2a6d6565.entry.js} +1 -1
  200. package/dist/ionic/{p-fabcce6c.entry.js → p-341032b3.entry.js} +1 -1
  201. package/dist/ionic/{p-a21add2f.entry.js → p-441fbb13.entry.js} +1 -1
  202. package/dist/ionic/{p-3a7d1e91.entry.js → p-4502a274.entry.js} +1 -1
  203. package/dist/ionic/p-4621c387.entry.js +4 -0
  204. package/dist/ionic/p-4bb3eb60.entry.js +4 -0
  205. package/dist/ionic/{p-874b4bd8.entry.js → p-51cd1643.entry.js} +1 -1
  206. package/dist/ionic/p-5c3ec490.entry.js +4 -0
  207. package/dist/ionic/{p-3ae5f277.entry.js → p-627fabd9.entry.js} +1 -1
  208. package/dist/ionic/{p-e0be05c5.entry.js → p-629e4703.entry.js} +1 -1
  209. package/dist/ionic/{p-5d1da0a2.entry.js → p-76e92a84.entry.js} +1 -1
  210. package/dist/ionic/{p-9f1103ce.entry.js → p-7a37b3ce.entry.js} +1 -1
  211. package/dist/ionic/p-7aed7726.entry.js +4 -0
  212. package/dist/ionic/p-7ebd980c.entry.js +4 -0
  213. package/dist/ionic/{p-3353c229.entry.js → p-80b44b3c.entry.js} +1 -1
  214. package/dist/ionic/p-8d624ee5.entry.js +4 -0
  215. package/dist/ionic/{p-390ca786.entry.js → p-9177f4ac.entry.js} +1 -1
  216. package/dist/ionic/p-944c8939.entry.js +4 -0
  217. package/dist/ionic/p-9c6a5a8d.entry.js +4 -0
  218. package/dist/ionic/{p-DV3sJJW8.js → p-AlrZKoWR.js} +1 -1
  219. package/dist/ionic/p-Cg5-OQYy.js +4 -0
  220. package/dist/ionic/p-a2e51c5d.entry.js +4 -0
  221. package/dist/ionic/{p-4858af1f.entry.js → p-a5213260.entry.js} +1 -1
  222. package/dist/ionic/{p-37e720da.entry.js → p-a7628bc7.entry.js} +1 -1
  223. package/dist/ionic/{p-ef4c3bee.entry.js → p-b1599fca.entry.js} +1 -1
  224. package/dist/ionic/p-b16be471.entry.js +4 -0
  225. package/dist/ionic/{p-84d5ce05.entry.js → p-b9ac1fe0.entry.js} +1 -1
  226. package/dist/ionic/{p-94f2a736.entry.js → p-c93553d2.entry.js} +1 -1
  227. package/dist/ionic/{p-75dc25ba.entry.js → p-d2c7f046.entry.js} +1 -1
  228. package/dist/ionic/{p-c4d8641b.entry.js → p-d8387b99.entry.js} +1 -1
  229. package/dist/ionic/p-d8ac9eea.entry.js +4 -0
  230. package/dist/ionic/{p-9a65ac7f.entry.js → p-db1b6738.entry.js} +1 -1
  231. package/dist/ionic/p-ed797c72.entry.js +4 -0
  232. package/dist/ionic/{p-8eb8ee76.entry.js → p-ef93ca92.entry.js} +1 -1
  233. package/dist/ionic/p-f09f9642.entry.js +4 -0
  234. package/dist/ionic/p-f1c06f82.entry.js +4 -0
  235. package/dist/ionic/{p-0fa9c382.entry.js → p-fe4aa1db.entry.js} +1 -1
  236. package/dist/types/components/input/input.d.ts +1 -1
  237. package/dist/types/components/router-outlet/router-outlet.d.ts +7 -0
  238. package/dist/types/components/searchbar/searchbar.d.ts +1 -1
  239. package/dist/types/components/select/select.d.ts +1 -0
  240. package/dist/types/components.d.ts +19 -282
  241. package/dist/types/index.d.ts +1 -1
  242. package/dist/types/interface.d.ts +0 -1
  243. package/dist/types/utils/config.d.ts +0 -8
  244. package/dist/types/utils/overlays.d.ts +11 -9
  245. package/hydrate/index.js +202 -795
  246. package/hydrate/index.mjs +202 -795
  247. package/package.json +37 -5
  248. package/components/ion-picker-legacy-column.d.ts +0 -11
  249. package/components/ion-picker-legacy-column.js +0 -4
  250. package/components/ion-picker-legacy.d.ts +0 -11
  251. package/components/ion-picker-legacy.js +0 -4
  252. package/components/p-0NRupjzW.js +0 -4
  253. package/components/p-Bth-EzJ0.js +0 -4
  254. package/components/p-CU5rbWAW.js +0 -4
  255. package/components/p-W9CZ2mWX.js +0 -4
  256. package/components/p-dhLYXa7A.js +0 -4
  257. package/components/p-uVRyUM3z.js +0 -4
  258. package/dist/collection/components/picker-legacy/animations/ios.enter.js +0 -27
  259. package/dist/collection/components/picker-legacy/animations/ios.leave.js +0 -23
  260. package/dist/collection/components/picker-legacy/picker-interface.js +0 -1
  261. package/dist/collection/components/picker-legacy/picker.ios.css +0 -300
  262. package/dist/collection/components/picker-legacy/picker.js +0 -890
  263. package/dist/collection/components/picker-legacy/picker.md.css +0 -287
  264. package/dist/collection/components/picker-legacy-column/picker-column.ios.css +0 -231
  265. package/dist/collection/components/picker-legacy-column/picker-column.js +0 -422
  266. package/dist/collection/components/picker-legacy-column/picker-column.md.css +0 -222
  267. package/dist/collection/components/picker-legacy-column/test/test.utils.js +0 -43
  268. package/dist/ionic/p-00dbb17e.entry.js +0 -4
  269. package/dist/ionic/p-01f81ea5.entry.js +0 -4
  270. package/dist/ionic/p-0d005398.entry.js +0 -4
  271. package/dist/ionic/p-27d30585.entry.js +0 -4
  272. package/dist/ionic/p-2bb2cb18.entry.js +0 -4
  273. package/dist/ionic/p-2f55dc1a.entry.js +0 -4
  274. package/dist/ionic/p-30bf9737.entry.js +0 -4
  275. package/dist/ionic/p-3a541154.entry.js +0 -4
  276. package/dist/ionic/p-485fda23.entry.js +0 -4
  277. package/dist/ionic/p-4baa5b82.entry.js +0 -4
  278. package/dist/ionic/p-4dc1c33c.entry.js +0 -4
  279. package/dist/ionic/p-5fc7e542.entry.js +0 -4
  280. package/dist/ionic/p-e686695b.entry.js +0 -4
  281. package/dist/ionic/p-ec090e0a.entry.js +0 -4
  282. package/dist/ionic/p-xOfi7-Zn.js +0 -4
  283. package/dist/types/components/picker-legacy/animations/ios.enter.d.ts +0 -5
  284. package/dist/types/components/picker-legacy/animations/ios.leave.d.ts +0 -5
  285. package/dist/types/components/picker-legacy/picker-interface.d.ts +0 -52
  286. package/dist/types/components/picker-legacy/picker.d.ts +0 -158
  287. package/dist/types/components/picker-legacy-column/picker-column.d.ts +0 -46
  288. 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-TbKsuC-K.js');
9
+ var overlays = require('./overlays-DSmSrd_4.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
13
  var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
14
14
  var data = require('./data-DLTUw-KF.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
  const isYearDisabled = (refYear, minParts, maxParts) => {
25
21
  if (minParts && minParts.year > refYear) {
@@ -1986,638 +1982,4 @@ Datetime.style = {
1986
1982
  md: datetimeMdCss()
1987
1983
  };
1988
1984
 
1989
- /**
1990
- * iOS Picker Enter Animation
1991
- */
1992
- const iosEnterAnimation = (baseEl) => {
1993
- const baseAnimation = animation.createAnimation();
1994
- const backdropAnimation = animation.createAnimation();
1995
- const wrapperAnimation = animation.createAnimation();
1996
- backdropAnimation
1997
- .addElement(baseEl.querySelector('ion-backdrop'))
1998
- .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
1999
- .beforeStyles({
2000
- 'pointer-events': 'none',
2001
- })
2002
- .afterClearStyles(['pointer-events']);
2003
- wrapperAnimation
2004
- .addElement(baseEl.querySelector('.picker-wrapper'))
2005
- .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
2006
- return baseAnimation
2007
- .addElement(baseEl)
2008
- .easing('cubic-bezier(.36,.66,.04,1)')
2009
- .duration(400)
2010
- .addAnimation([backdropAnimation, wrapperAnimation]);
2011
- };
2012
-
2013
- /**
2014
- * iOS Picker Leave Animation
2015
- */
2016
- const iosLeaveAnimation = (baseEl) => {
2017
- const baseAnimation = animation.createAnimation();
2018
- const backdropAnimation = animation.createAnimation();
2019
- const wrapperAnimation = animation.createAnimation();
2020
- backdropAnimation
2021
- .addElement(baseEl.querySelector('ion-backdrop'))
2022
- .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
2023
- wrapperAnimation
2024
- .addElement(baseEl.querySelector('.picker-wrapper'))
2025
- .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
2026
- return baseAnimation
2027
- .addElement(baseEl)
2028
- .easing('cubic-bezier(.36,.66,.04,1)')
2029
- .duration(400)
2030
- .addAnimation([backdropAnimation, wrapperAnimation]);
2031
- };
2032
-
2033
- 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}`;
2034
-
2035
- 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}`;
2036
-
2037
- const Picker = class {
2038
- constructor(hostRef) {
2039
- index.registerInstance(this, hostRef);
2040
- this.didPresent = index.createEvent(this, "ionPickerDidPresent", 7);
2041
- this.willPresent = index.createEvent(this, "ionPickerWillPresent", 7);
2042
- this.willDismiss = index.createEvent(this, "ionPickerWillDismiss", 7);
2043
- this.didDismiss = index.createEvent(this, "ionPickerDidDismiss", 7);
2044
- this.didPresentShorthand = index.createEvent(this, "didPresent", 7);
2045
- this.willPresentShorthand = index.createEvent(this, "willPresent", 7);
2046
- this.willDismissShorthand = index.createEvent(this, "willDismiss", 7);
2047
- this.didDismissShorthand = index.createEvent(this, "didDismiss", 7);
2048
- this.delegateController = overlays.createDelegateController(this);
2049
- this.lockController = lockController.createLockController();
2050
- this.triggerController = overlays.createTriggerController();
2051
- this.presented = false;
2052
- /** @internal */
2053
- this.hasController = false;
2054
- /**
2055
- * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
2056
- */
2057
- this.keyboardClose = true;
2058
- /**
2059
- * Array of buttons to be displayed at the top of the picker.
2060
- */
2061
- this.buttons = [];
2062
- /**
2063
- * Array of columns to be displayed in the picker.
2064
- */
2065
- this.columns = [];
2066
- /**
2067
- * Number of milliseconds to wait before dismissing the picker.
2068
- */
2069
- this.duration = 0;
2070
- /**
2071
- * If `true`, a backdrop will be displayed behind the picker.
2072
- */
2073
- this.showBackdrop = true;
2074
- /**
2075
- * If `true`, the picker will be dismissed when the backdrop is clicked.
2076
- */
2077
- this.backdropDismiss = true;
2078
- /**
2079
- * If `true`, the picker will animate.
2080
- */
2081
- this.animated = true;
2082
- /**
2083
- * If `true`, the picker will open. If `false`, the picker will close.
2084
- * Use this if you need finer grained control over presentation, otherwise
2085
- * just use the pickerController or the `trigger` property.
2086
- * Note: `isOpen` will not automatically be set back to `false` when
2087
- * the picker dismisses. You will need to do that in your code.
2088
- */
2089
- this.isOpen = false;
2090
- this.onBackdropTap = () => {
2091
- this.dismiss(undefined, overlays.BACKDROP);
2092
- };
2093
- this.dispatchCancelHandler = (ev) => {
2094
- const role = ev.detail.role;
2095
- if (overlays.isCancel(role)) {
2096
- const cancelButton = this.buttons.find((b) => b.role === 'cancel');
2097
- this.callButtonHandler(cancelButton);
2098
- }
2099
- };
2100
- }
2101
- onIsOpenChange(newValue, oldValue) {
2102
- if (newValue === true && oldValue === false) {
2103
- this.present();
2104
- }
2105
- else if (newValue === false && oldValue === true) {
2106
- this.dismiss();
2107
- }
2108
- }
2109
- triggerChanged() {
2110
- const { trigger, el, triggerController } = this;
2111
- if (trigger) {
2112
- triggerController.addClickListener(el, trigger);
2113
- }
2114
- }
2115
- connectedCallback() {
2116
- overlays.prepareOverlay(this.el);
2117
- this.triggerChanged();
2118
- }
2119
- disconnectedCallback() {
2120
- this.triggerController.removeClickListener();
2121
- }
2122
- componentWillLoad() {
2123
- var _a;
2124
- if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
2125
- overlays.setOverlayId(this.el);
2126
- }
2127
- }
2128
- componentDidLoad() {
2129
- 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);
2130
- /**
2131
- * If picker was rendered with isOpen="true"
2132
- * then we should open picker immediately.
2133
- */
2134
- if (this.isOpen === true) {
2135
- helpers.raf(() => this.present());
2136
- }
2137
- /**
2138
- * When binding values in frameworks such as Angular
2139
- * it is possible for the value to be set after the Web Component
2140
- * initializes but before the value watcher is set up in Stencil.
2141
- * As a result, the watcher callback may not be fired.
2142
- * We work around this by manually calling the watcher
2143
- * callback when the component has loaded and the watcher
2144
- * is configured.
2145
- */
2146
- this.triggerChanged();
2147
- }
2148
- /**
2149
- * Present the picker overlay after it has been created.
2150
- */
2151
- async present() {
2152
- const unlock = await this.lockController.lock();
2153
- await this.delegateController.attachViewToDom();
2154
- await overlays.present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
2155
- if (this.duration > 0) {
2156
- this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
2157
- }
2158
- unlock();
2159
- }
2160
- /**
2161
- * Dismiss the picker overlay after it has been presented.
2162
- *
2163
- * @param data Any data to emit in the dismiss events.
2164
- * @param role The role of the element that is dismissing the picker.
2165
- * This can be useful in a button handler for determining which button was
2166
- * clicked to dismiss the picker.
2167
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
2168
- */
2169
- async dismiss(data, role) {
2170
- const unlock = await this.lockController.lock();
2171
- if (this.durationTimeout) {
2172
- clearTimeout(this.durationTimeout);
2173
- }
2174
- const dismissed = await overlays.dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
2175
- if (dismissed) {
2176
- this.delegateController.removeViewFromDom();
2177
- }
2178
- unlock();
2179
- return dismissed;
2180
- }
2181
- /**
2182
- * Returns a promise that resolves when the picker did dismiss.
2183
- */
2184
- onDidDismiss() {
2185
- return overlays.eventMethod(this.el, 'ionPickerDidDismiss');
2186
- }
2187
- /**
2188
- * Returns a promise that resolves when the picker will dismiss.
2189
- */
2190
- onWillDismiss() {
2191
- return overlays.eventMethod(this.el, 'ionPickerWillDismiss');
2192
- }
2193
- /**
2194
- * Get the column that matches the specified name.
2195
- *
2196
- * @param name The name of the column.
2197
- */
2198
- getColumn(name) {
2199
- return Promise.resolve(this.columns.find((column) => column.name === name));
2200
- }
2201
- async buttonClick(button) {
2202
- const role = button.role;
2203
- if (overlays.isCancel(role)) {
2204
- return this.dismiss(undefined, role);
2205
- }
2206
- const shouldDismiss = await this.callButtonHandler(button);
2207
- if (shouldDismiss) {
2208
- return this.dismiss(this.getSelected(), button.role);
2209
- }
2210
- return Promise.resolve();
2211
- }
2212
- async callButtonHandler(button) {
2213
- if (button) {
2214
- // a handler has been provided, execute it
2215
- // pass the handler the values from the inputs
2216
- const rtn = await overlays.safeCall(button.handler, this.getSelected());
2217
- if (rtn === false) {
2218
- // if the return value of the handler is false then do not dismiss
2219
- return false;
2220
- }
2221
- }
2222
- return true;
2223
- }
2224
- getSelected() {
2225
- const selected = {};
2226
- this.columns.forEach((col, index) => {
2227
- const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined;
2228
- selected[col.name] = {
2229
- text: selectedColumn ? selectedColumn.text : undefined,
2230
- value: selectedColumn ? selectedColumn.value : undefined,
2231
- columnIndex: index,
2232
- };
2233
- });
2234
- return selected;
2235
- }
2236
- render() {
2237
- const { htmlAttributes } = this;
2238
- const mode = ionicGlobal.getIonMode(this);
2239
- return (index.h(index.Host, Object.assign({ key: '80f66d33780d8a1352d24be9cb63a0cc03d01ab5', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
2240
- zIndex: `${20000 + this.overlayIndex}`,
2241
- }, class: Object.assign({ [mode]: true,
2242
- // Used internally for styling
2243
- [`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" })));
2244
- }
2245
- get el() { return index.getElement(this); }
2246
- static get watchers() { return {
2247
- "isOpen": [{
2248
- "onIsOpenChange": 0
2249
- }],
2250
- "trigger": [{
2251
- "triggerChanged": 0
2252
- }]
2253
- }; }
2254
- };
2255
- const buttonWrapperClass = (button) => {
2256
- return {
2257
- [`picker-toolbar-${button.role}`]: button.role !== undefined,
2258
- 'picker-toolbar-button': true,
2259
- };
2260
- };
2261
- const buttonClass = (button) => {
2262
- return Object.assign({ 'picker-button': true, 'ion-activatable': true }, theme.getClassMap(button.cssClass));
2263
- };
2264
- Picker.style = {
2265
- ios: pickerIosCss(),
2266
- md: pickerMdCss()
2267
- };
2268
-
2269
- 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}}`;
2270
-
2271
- 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)}`;
2272
-
2273
- const PickerColumnCmp = class {
2274
- constructor(hostRef) {
2275
- index.registerInstance(this, hostRef);
2276
- this.ionPickerColChange = index.createEvent(this, "ionPickerColChange", 7);
2277
- this.optHeight = 0;
2278
- this.rotateFactor = 0;
2279
- this.scaleFactor = 1;
2280
- this.velocity = 0;
2281
- this.y = 0;
2282
- this.noAnimate = true;
2283
- // `colDidChange` is a flag that gets set when the column is changed
2284
- // dynamically. When this flag is set, the column will refresh
2285
- // after the component re-renders to incorporate the new column data.
2286
- // This is necessary because `this.refresh` queries for the option elements,
2287
- // so it needs to wait for the latest elements to be available in the DOM.
2288
- // Ex: column is created with 3 options. User updates the column data
2289
- // to have 5 options. The column will still think it only has 3 options.
2290
- this.colDidChange = false;
2291
- }
2292
- colChanged() {
2293
- this.colDidChange = true;
2294
- }
2295
- async connectedCallback() {
2296
- let pickerRotateFactor = 0;
2297
- let pickerScaleFactor = 0.81;
2298
- const mode = ionicGlobal.getIonMode(this);
2299
- if (mode === 'ios') {
2300
- pickerRotateFactor = -0.46;
2301
- pickerScaleFactor = 1;
2302
- }
2303
- this.rotateFactor = pickerRotateFactor;
2304
- this.scaleFactor = pickerScaleFactor;
2305
- this.gesture = (await Promise.resolve().then(function () { return require('./index-CAvQ7Tka.js'); })).createGesture({
2306
- el: this.el,
2307
- gestureName: 'picker-swipe',
2308
- gesturePriority: 100,
2309
- threshold: 0,
2310
- passive: false,
2311
- onStart: (ev) => this.onStart(ev),
2312
- onMove: (ev) => this.onMove(ev),
2313
- onEnd: (ev) => this.onEnd(ev),
2314
- });
2315
- this.gesture.enable();
2316
- // Options have not been initialized yet
2317
- // Animation must be disabled through the `noAnimate` flag
2318
- // Otherwise, the options will render
2319
- // at the top of the column and transition down
2320
- this.tmrId = setTimeout(() => {
2321
- this.noAnimate = false;
2322
- // After initialization, `refresh()` will be called
2323
- // At this point, animation will be enabled. The options will
2324
- // animate as they are being selected.
2325
- this.refresh(true);
2326
- }, 250);
2327
- }
2328
- componentDidLoad() {
2329
- this.onDomChange();
2330
- }
2331
- componentDidUpdate() {
2332
- // Options may have changed since last update.
2333
- if (this.colDidChange) {
2334
- // Animation must be disabled through the `onDomChange` parameter.
2335
- // Otherwise, the recently added options will render
2336
- // at the top of the column and transition down
2337
- this.onDomChange(true, false);
2338
- this.colDidChange = false;
2339
- }
2340
- }
2341
- disconnectedCallback() {
2342
- if (this.rafId !== undefined)
2343
- cancelAnimationFrame(this.rafId);
2344
- if (this.tmrId)
2345
- clearTimeout(this.tmrId);
2346
- if (this.gesture) {
2347
- this.gesture.destroy();
2348
- this.gesture = undefined;
2349
- }
2350
- }
2351
- emitColChange() {
2352
- this.ionPickerColChange.emit(this.col);
2353
- }
2354
- setSelected(selectedIndex, duration) {
2355
- // if there is a selected index, then figure out it's y position
2356
- // if there isn't a selected index, then just use the top y position
2357
- const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
2358
- this.velocity = 0;
2359
- // set what y position we're at
2360
- if (this.rafId !== undefined)
2361
- cancelAnimationFrame(this.rafId);
2362
- this.update(y, duration, true);
2363
- this.emitColChange();
2364
- }
2365
- update(y, duration, saveY) {
2366
- if (!this.optsEl) {
2367
- return;
2368
- }
2369
- // ensure we've got a good round number :)
2370
- let translateY = 0;
2371
- let translateZ = 0;
2372
- const { col, rotateFactor } = this;
2373
- const prevSelected = col.selectedIndex;
2374
- const selectedIndex = (col.selectedIndex = this.indexForY(-y));
2375
- const durationStr = duration === 0 ? '' : duration + 'ms';
2376
- const scaleStr = `scale(${this.scaleFactor})`;
2377
- const children = this.optsEl.children;
2378
- for (let i = 0; i < children.length; i++) {
2379
- const button = children[i];
2380
- const opt = col.options[i];
2381
- const optOffset = i * this.optHeight + y;
2382
- let transform = '';
2383
- if (rotateFactor !== 0) {
2384
- const rotateX = optOffset * rotateFactor;
2385
- if (Math.abs(rotateX) <= 90) {
2386
- translateY = 0;
2387
- translateZ = 90;
2388
- transform = `rotateX(${rotateX}deg) `;
2389
- }
2390
- else {
2391
- translateY = -9999;
2392
- }
2393
- }
2394
- else {
2395
- translateZ = 0;
2396
- translateY = optOffset;
2397
- }
2398
- const selected = selectedIndex === i;
2399
- transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
2400
- if (this.scaleFactor !== 1 && !selected) {
2401
- transform += scaleStr;
2402
- }
2403
- // Update transition duration
2404
- if (this.noAnimate) {
2405
- opt.duration = 0;
2406
- button.style.transitionDuration = '';
2407
- }
2408
- else if (duration !== opt.duration) {
2409
- opt.duration = duration;
2410
- button.style.transitionDuration = durationStr;
2411
- }
2412
- // Update transform
2413
- if (transform !== opt.transform) {
2414
- opt.transform = transform;
2415
- }
2416
- button.style.transform = transform;
2417
- /**
2418
- * Ensure that the select column
2419
- * item has the selected class
2420
- */
2421
- opt.selected = selected;
2422
- if (selected) {
2423
- button.classList.add(PICKER_OPT_SELECTED);
2424
- }
2425
- else {
2426
- button.classList.remove(PICKER_OPT_SELECTED);
2427
- }
2428
- }
2429
- this.col.prevSelected = prevSelected;
2430
- if (saveY) {
2431
- this.y = y;
2432
- }
2433
- if (this.lastIndex !== selectedIndex) {
2434
- // have not set a last index yet
2435
- haptic.hapticSelectionChanged();
2436
- this.lastIndex = selectedIndex;
2437
- }
2438
- }
2439
- decelerate() {
2440
- if (this.velocity !== 0) {
2441
- // still decelerating
2442
- this.velocity *= DECELERATION_FRICTION;
2443
- // do not let it go slower than a velocity of 1
2444
- this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
2445
- let y = this.y + this.velocity;
2446
- if (y > this.minY) {
2447
- // whoops, it's trying to scroll up farther than the options we have!
2448
- y = this.minY;
2449
- this.velocity = 0;
2450
- }
2451
- else if (y < this.maxY) {
2452
- // gahh, it's trying to scroll down farther than we can!
2453
- y = this.maxY;
2454
- this.velocity = 0;
2455
- }
2456
- this.update(y, 0, true);
2457
- const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1;
2458
- if (notLockedIn) {
2459
- // isn't locked in yet, keep decelerating until it is
2460
- this.rafId = requestAnimationFrame(() => this.decelerate());
2461
- }
2462
- else {
2463
- this.velocity = 0;
2464
- this.emitColChange();
2465
- haptic.hapticSelectionEnd();
2466
- }
2467
- }
2468
- else if (this.y % this.optHeight !== 0) {
2469
- // needs to still get locked into a position so options line up
2470
- const currentPos = Math.abs(this.y % this.optHeight);
2471
- // create a velocity in the direction it needs to scroll
2472
- this.velocity = currentPos > this.optHeight / 2 ? 1 : -1;
2473
- this.decelerate();
2474
- }
2475
- }
2476
- indexForY(y) {
2477
- return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
2478
- }
2479
- onStart(detail) {
2480
- // We have to prevent default in order to block scrolling under the picker
2481
- // but we DO NOT have to stop propagation, since we still want
2482
- // some "click" events to capture
2483
- if (detail.event.cancelable) {
2484
- detail.event.preventDefault();
2485
- }
2486
- detail.event.stopPropagation();
2487
- haptic.hapticSelectionStart();
2488
- // reset everything
2489
- if (this.rafId !== undefined)
2490
- cancelAnimationFrame(this.rafId);
2491
- const options = this.col.options;
2492
- let minY = options.length - 1;
2493
- let maxY = 0;
2494
- for (let i = 0; i < options.length; i++) {
2495
- if (!options[i].disabled) {
2496
- minY = Math.min(minY, i);
2497
- maxY = Math.max(maxY, i);
2498
- }
2499
- }
2500
- this.minY = -(minY * this.optHeight);
2501
- this.maxY = -(maxY * this.optHeight);
2502
- }
2503
- onMove(detail) {
2504
- if (detail.event.cancelable) {
2505
- detail.event.preventDefault();
2506
- }
2507
- detail.event.stopPropagation();
2508
- // update the scroll position relative to pointer start position
2509
- let y = this.y + detail.deltaY;
2510
- if (y > this.minY) {
2511
- // scrolling up higher than scroll area
2512
- y = Math.pow(y, 0.8);
2513
- this.bounceFrom = y;
2514
- }
2515
- else if (y < this.maxY) {
2516
- // scrolling down below scroll area
2517
- y += Math.pow(this.maxY - y, 0.9);
2518
- this.bounceFrom = y;
2519
- }
2520
- else {
2521
- this.bounceFrom = 0;
2522
- }
2523
- this.update(y, 0, false);
2524
- }
2525
- onEnd(detail) {
2526
- if (this.bounceFrom > 0) {
2527
- // bounce back up
2528
- this.update(this.minY, 100, true);
2529
- this.emitColChange();
2530
- return;
2531
- }
2532
- else if (this.bounceFrom < 0) {
2533
- // bounce back down
2534
- this.update(this.maxY, 100, true);
2535
- this.emitColChange();
2536
- return;
2537
- }
2538
- this.velocity = helpers.clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
2539
- if (this.velocity === 0 && detail.deltaY === 0) {
2540
- const opt = detail.event.target.closest('.picker-opt');
2541
- if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) {
2542
- this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
2543
- }
2544
- }
2545
- else {
2546
- this.y += detail.deltaY;
2547
- if (Math.abs(detail.velocityY) < 0.05) {
2548
- const isScrollingUp = detail.deltaY > 0;
2549
- const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
2550
- if (isScrollingUp && optHeightFraction > 0.5) {
2551
- this.velocity = Math.abs(this.velocity) * -1;
2552
- }
2553
- else if (!isScrollingUp && optHeightFraction <= 0.5) {
2554
- this.velocity = Math.abs(this.velocity);
2555
- }
2556
- }
2557
- this.decelerate();
2558
- }
2559
- }
2560
- refresh(forceRefresh, animated) {
2561
- var _a;
2562
- let min = this.col.options.length - 1;
2563
- let max = 0;
2564
- const options = this.col.options;
2565
- for (let i = 0; i < options.length; i++) {
2566
- if (!options[i].disabled) {
2567
- min = Math.min(min, i);
2568
- max = Math.max(max, i);
2569
- }
2570
- }
2571
- /**
2572
- * Only update selected value if column has a
2573
- * velocity of 0. If it does not, then the
2574
- * column is animating might land on
2575
- * a value different than the value at
2576
- * selectedIndex
2577
- */
2578
- if (this.velocity !== 0) {
2579
- return;
2580
- }
2581
- const selectedIndex = helpers.clamp(min, (_a = this.col.selectedIndex) !== null && _a !== void 0 ? _a : 0, max);
2582
- if (this.col.prevSelected !== selectedIndex || forceRefresh) {
2583
- const y = selectedIndex * this.optHeight * -1;
2584
- const duration = animated ? TRANSITION_DURATION : 0;
2585
- this.velocity = 0;
2586
- this.update(y, duration, true);
2587
- }
2588
- }
2589
- onDomChange(forceRefresh, animated) {
2590
- const colEl = this.optsEl;
2591
- if (colEl) {
2592
- // DOM READ
2593
- // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the column has changed
2594
- this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
2595
- }
2596
- this.refresh(forceRefresh, animated);
2597
- }
2598
- render() {
2599
- const col = this.col;
2600
- const mode = ionicGlobal.getIonMode(this);
2601
- 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: {
2602
- 'max-width': this.col.columnWidth,
2603
- } }, 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))));
2604
- }
2605
- get el() { return index.getElement(this); }
2606
- static get watchers() { return {
2607
- "col": [{
2608
- "colChanged": 0
2609
- }]
2610
- }; }
2611
- };
2612
- const PICKER_OPT_SELECTED = 'picker-opt-selected';
2613
- const DECELERATION_FRICTION = 0.97;
2614
- const MAX_PICKER_SPEED = 90;
2615
- const TRANSITION_DURATION = 150;
2616
- PickerColumnCmp.style = {
2617
- ios: pickerColumnIosCss(),
2618
- md: pickerColumnMdCss()
2619
- };
2620
-
2621
1985
  exports.ion_datetime = Datetime;
2622
- exports.ion_picker_legacy = Picker;
2623
- exports.ion_picker_legacy_column = PickerColumnCmp;