@sparkle-learning/core 0.0.35 → 0.0.38

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 (405) hide show
  1. package/dist/cjs/{header-mobile-collapse_2.cjs.entry.js → header-mobile-collapse.cjs.entry.js} +0 -22
  2. package/dist/cjs/ion-avatar.cjs.entry.js +25 -0
  3. package/dist/cjs/ion-button.cjs.entry.js +129 -0
  4. package/dist/cjs/ion-card-title.cjs.entry.js +30 -0
  5. package/dist/cjs/ion-card_2.cjs.entry.js +91 -0
  6. package/dist/cjs/ion-icon_13.cjs.entry.js +1505 -0
  7. package/dist/cjs/ion-input_2.cjs.entry.js +313 -0
  8. package/dist/cjs/ion-label_2.cjs.entry.js +126 -0
  9. package/dist/cjs/ion-spinner.cjs.entry.js +64 -0
  10. package/dist/cjs/ion-textarea.cjs.entry.js +248 -0
  11. package/dist/cjs/ion-toggle.cjs.entry.js +177 -0
  12. package/dist/cjs/loader.cjs.js +1 -1
  13. package/dist/cjs/sparkle-core.cjs.js +1 -1
  14. package/dist/cjs/sparkle-feed-post.cjs.entry.js +120 -0
  15. package/dist/cjs/{sparkle-quiz.cjs.entry.js → sparkle-quiz-v1.cjs.entry.js} +4 -4
  16. package/dist/collection/collection-manifest.json +2 -1
  17. package/dist/collection/components/sparkle-feed-post/sparkle-feed-post.js +30 -28
  18. package/dist/collection/components/sparkle-quiz/{sparkle-quiz.css → sparkle-quiz/sparkle-quiz.css} +0 -0
  19. package/dist/collection/components/sparkle-quiz/sparkle-quiz/sparkle-quiz.js +327 -0
  20. package/dist/collection/components/sparkle-quiz/sparkle-quiz-v1.css +48 -0
  21. package/dist/collection/components/sparkle-quiz/{sparkle-quiz.js → sparkle-quiz-v1.js} +4 -4
  22. package/dist/esm/{PrivateRoute-530ef873.js → PrivateRoute-7b526801.js} +2 -2
  23. package/dist/esm/{active-router-9843e205.js → active-router-fc9e4e06.js} +1 -1
  24. package/dist/esm/{animation-d98d3e81.js → animation-e0716b39.js} +1 -1
  25. package/dist/esm/{app-globals-08edc964.js → app-globals-3f0347b0.js} +1 -1
  26. package/dist/esm/{auth.service-79389d86.js → auth.service-9fb86455.js} +3 -3
  27. package/dist/esm/{auth.store-b812b34b.js → auth.store-633e8414.js} +1 -1
  28. package/dist/esm/compass-svg.entry.js +1 -1
  29. package/dist/esm/context-consumer.entry.js +1 -1
  30. package/dist/esm/course-select.entry.js +1 -1
  31. package/dist/esm/{dom-utils-8e73e88b.js → dom-utils-109a7d75.js} +1 -1
  32. package/dist/esm/{facilitator.service-7babc526.js → facilitator.service-8fd435bf.js} +2 -2
  33. package/dist/esm/{feed.service-80fbe79d.js → feed.service-ace049e5.js} +2 -2
  34. package/dist/esm/{framework-delegate-9b329182.js → framework-delegate-e4f8013b.js} +1 -1
  35. package/dist/esm/{haptic-3a76a65c.js → haptic-522f76f2.js} +1 -1
  36. package/dist/esm/{header-mobile-collapse_2.entry.js → header-mobile-collapse.entry.js} +3 -24
  37. package/dist/esm/{helpers-94a5855b.js → helpers-03073fe4.js} +1 -1
  38. package/dist/esm/{httpService-b2b7a1ad.js → httpService-61864992.js} +2 -2
  39. package/dist/esm/{icons-16f1a80b.js → icons-90b957ab.js} +1 -1
  40. package/dist/esm/{index-c23a1826.js → index-37004831.js} +2 -2
  41. package/dist/esm/{index-4ec6b9c2.js → index-4044fde9.js} +1 -1
  42. package/dist/esm/{index-230a26c9.js → index-a2d2941d.js} +1 -1
  43. package/dist/esm/{index-478745be.js → index-b4b4e503.js} +4 -4
  44. package/dist/esm/{index-9db08224.js → index-c04b9ed5.js} +1 -1
  45. package/dist/esm/{index-95307148.js → index-dedabca0.js} +3 -3
  46. package/dist/esm/{index-ab1c6a9f.js → index-f9b9ba5d.js} +2 -2
  47. package/dist/esm/{index.es-1c3b1ef3.js → index.es-283fbd2e.js} +2 -2
  48. package/dist/esm/index.js +8 -8
  49. package/dist/esm/{injectHistory-4bfff188.js → injectHistory-968f626d.js} +1 -1
  50. package/dist/esm/{input-shims-ce5c01df.js → input-shims-cc3720a0.js} +2 -2
  51. package/dist/esm/ion-accordion-group.entry.js +2 -2
  52. package/dist/esm/ion-accordion.entry.js +4 -4
  53. package/dist/esm/ion-action-sheet_4.entry.js +8 -8
  54. package/dist/esm/ion-app.entry.js +5 -5
  55. package/dist/esm/ion-avatar.entry.js +21 -0
  56. package/dist/esm/ion-back-button.entry.js +4 -4
  57. package/dist/esm/ion-backdrop.entry.js +2 -2
  58. package/dist/esm/ion-badge.entry.js +2 -2
  59. package/dist/esm/ion-breadcrumb.entry.js +4 -4
  60. package/dist/esm/ion-breadcrumbs.entry.js +2 -2
  61. package/dist/esm/ion-button.entry.js +125 -0
  62. package/dist/esm/ion-buttons_3.entry.js +2 -2
  63. package/dist/esm/ion-card-header.entry.js +2 -2
  64. package/dist/esm/ion-card-subtitle.entry.js +2 -2
  65. package/dist/esm/ion-card-title.entry.js +26 -0
  66. package/dist/esm/ion-card_2.entry.js +86 -0
  67. package/dist/esm/ion-checkbox_4.entry.js +3 -3
  68. package/dist/esm/ion-chip.entry.js +2 -2
  69. package/dist/esm/ion-col_3.entry.js +2 -2
  70. package/dist/esm/ion-content_2.entry.js +4 -4
  71. package/dist/esm/ion-datetime-button.entry.js +3 -3
  72. package/dist/esm/ion-datetime.entry.js +4 -4
  73. package/dist/esm/ion-fab-button.entry.js +4 -4
  74. package/dist/esm/ion-fab-list.entry.js +2 -2
  75. package/dist/esm/ion-fab.entry.js +2 -2
  76. package/dist/esm/ion-footer.entry.js +4 -4
  77. package/dist/esm/ion-icon_13.entry.js +1489 -0
  78. package/dist/esm/ion-img.entry.js +3 -3
  79. package/dist/esm/ion-infinite-scroll-content.entry.js +2 -2
  80. package/dist/esm/ion-infinite-scroll.entry.js +4 -4
  81. package/dist/esm/ion-input_2.entry.js +308 -0
  82. package/dist/esm/ion-item-divider.entry.js +2 -2
  83. package/dist/esm/ion-item-group.entry.js +2 -2
  84. package/dist/esm/ion-item-option.entry.js +2 -2
  85. package/dist/esm/ion-item-options.entry.js +3 -3
  86. package/dist/esm/ion-item-sliding.entry.js +4 -4
  87. package/dist/esm/ion-label_2.entry.js +121 -0
  88. package/dist/esm/ion-loading.entry.js +5 -5
  89. package/dist/esm/ion-menu-button.entry.js +7 -7
  90. package/dist/esm/ion-menu-toggle.entry.js +6 -6
  91. package/dist/esm/ion-menu.entry.js +6 -6
  92. package/dist/esm/ion-modal.entry.js +8 -8
  93. package/dist/esm/ion-nav-link.entry.js +1 -1
  94. package/dist/esm/ion-nav.entry.js +6 -6
  95. package/dist/esm/ion-picker-column-internal_2.entry.js +4 -4
  96. package/dist/esm/ion-picker-column.entry.js +4 -4
  97. package/dist/esm/ion-picker.entry.js +5 -5
  98. package/dist/esm/ion-progress-bar.entry.js +3 -3
  99. package/dist/esm/ion-refresher-content.entry.js +3 -3
  100. package/dist/esm/ion-refresher.entry.js +6 -6
  101. package/dist/esm/ion-reorder-group.entry.js +5 -5
  102. package/dist/esm/ion-reorder.entry.js +3 -3
  103. package/dist/esm/ion-route-redirect.entry.js +1 -1
  104. package/dist/esm/ion-route.entry.js +1 -1
  105. package/dist/esm/ion-router-link.entry.js +2 -2
  106. package/dist/esm/ion-router-outlet.entry.js +6 -6
  107. package/dist/esm/ion-router.entry.js +2 -2
  108. package/dist/esm/ion-searchbar.entry.js +4 -4
  109. package/dist/esm/ion-segment-button.entry.js +3 -3
  110. package/dist/esm/ion-segment.entry.js +3 -3
  111. package/dist/esm/ion-select_2.entry.js +4 -4
  112. package/dist/esm/ion-skeleton-text.entry.js +2 -2
  113. package/dist/esm/ion-slide.entry.js +2 -2
  114. package/dist/esm/ion-slides.entry.js +3 -3
  115. package/dist/esm/ion-spinner.entry.js +60 -0
  116. package/dist/esm/ion-split-pane.entry.js +2 -2
  117. package/dist/esm/ion-tab-bar.entry.js +2 -2
  118. package/dist/esm/ion-tab-button.entry.js +2 -2
  119. package/dist/esm/ion-tab.entry.js +3 -3
  120. package/dist/esm/ion-tabs.entry.js +1 -1
  121. package/dist/esm/ion-textarea.entry.js +244 -0
  122. package/dist/esm/ion-thumbnail.entry.js +2 -2
  123. package/dist/esm/ion-toast.entry.js +5 -5
  124. package/dist/esm/ion-toggle.entry.js +173 -0
  125. package/dist/esm/ion-virtual-scroll.entry.js +2 -2
  126. package/dist/esm/{ionic-global-293e882b.js → ionic-global-4903e23e.js} +1 -1
  127. package/dist/esm/{ios.transition-7cd34deb.js → ios.transition-3a6179bb.js} +4 -4
  128. package/dist/esm/loader.js +4 -4
  129. package/dist/esm/{md.transition-2589a5b1.js → md.transition-cff16bf3.js} +4 -4
  130. package/dist/esm/{menu-toggle-util-f92ba2f0.js → menu-toggle-util-59241733.js} +1 -1
  131. package/dist/esm/{overlays-dfa730c8.js → overlays-bdd9344a.js} +2 -2
  132. package/dist/esm/{purify-79af871f.js → purify-7085b248.js} +1 -1
  133. package/dist/esm/sparkle-animation-player.entry.js +1 -1
  134. package/dist/esm/sparkle-card_3.entry.js +2 -2
  135. package/dist/esm/sparkle-character-intro.entry.js +1 -1
  136. package/dist/esm/sparkle-code.entry.js +2 -2
  137. package/dist/esm/sparkle-compass-post.entry.js +1 -1
  138. package/dist/esm/sparkle-compass.entry.js +1 -1
  139. package/dist/esm/sparkle-core.js +4 -4
  140. package/dist/esm/sparkle-course-root.entry.js +11 -11
  141. package/dist/esm/sparkle-dropdown.entry.js +2 -2
  142. package/dist/esm/sparkle-emoji.entry.js +1 -1
  143. package/dist/esm/sparkle-export-lessons_6.entry.js +11 -11
  144. package/dist/esm/sparkle-facilitator-header_19.entry.js +17 -17
  145. package/dist/esm/sparkle-facilitator-notes-form.entry.js +7 -7
  146. package/dist/esm/sparkle-feed-post.entry.js +116 -0
  147. package/dist/esm/sparkle-feedback.entry.js +8 -8
  148. package/dist/esm/sparkle-goal-form.entry.js +7 -7
  149. package/dist/esm/sparkle-goal-progress.entry.js +1 -1
  150. package/dist/esm/sparkle-gww-comment-list.entry.js +1 -1
  151. package/dist/esm/sparkle-gww-graph.entry.js +1 -1
  152. package/dist/esm/sparkle-gww-item.entry.js +4 -4
  153. package/dist/esm/sparkle-intro.entry.js +1 -1
  154. package/dist/esm/sparkle-lower-content-nav.entry.js +1 -1
  155. package/dist/esm/sparkle-menu-collapsible.entry.js +2 -2
  156. package/dist/esm/sparkle-menu-toggle_3.entry.js +3 -3
  157. package/dist/esm/sparkle-modal-image.entry.js +1 -1
  158. package/dist/esm/sparkle-notfound-page.entry.js +1 -1
  159. package/dist/esm/sparkle-overlay.entry.js +1 -1
  160. package/dist/esm/sparkle-poll.entry.js +1 -1
  161. package/dist/esm/sparkle-quiz-container.entry.js +1 -1
  162. package/dist/esm/{sparkle-quiz.entry.js → sparkle-quiz-v1.entry.js} +5 -5
  163. package/dist/esm/sparkle-select.entry.js +1 -1
  164. package/dist/esm/sparkle-sidebar.entry.js +1 -1
  165. package/dist/esm/sparkle-tab.entry.js +1 -1
  166. package/dist/esm/sparkle-table-of-contents.entry.js +1 -1
  167. package/dist/esm/sparkle-tabs.entry.js +1 -1
  168. package/dist/esm/sparkle-validation-error.entry.js +1 -1
  169. package/dist/esm/sparkle-youtube.entry.js +1 -1
  170. package/dist/esm/{status-tap-79b6199d.js → status-tap-463d0f87.js} +3 -3
  171. package/dist/esm/stencil-async-content.entry.js +1 -1
  172. package/dist/esm/stencil-route-title.entry.js +2 -2
  173. package/dist/esm/stencil-router-prompt.entry.js +2 -2
  174. package/dist/esm/stencil-router-redirect.entry.js +2 -2
  175. package/dist/esm/{student.service-0caed0f4.js → student.service-e6eb1f99.js} +2 -2
  176. package/dist/esm/{swipe-back-ad7a0361.js → swipe-back-f8765ac9.js} +1 -1
  177. package/dist/esm/{user.store-8477642a.js → user.store-b8645067.js} +1 -1
  178. package/dist/sparkle-core/index.esm.js +1 -1
  179. package/dist/sparkle-core/p-0147266a.js +1 -0
  180. package/dist/sparkle-core/{p-4c9e010d.entry.js → p-014b5707.entry.js} +1 -1
  181. package/dist/sparkle-core/p-03585916.js +1 -0
  182. package/dist/sparkle-core/{p-9ef14088.entry.js → p-04c7b276.entry.js} +1 -1
  183. package/dist/sparkle-core/{p-4af496a8.entry.js → p-06642405.entry.js} +1 -1
  184. package/dist/sparkle-core/{p-0b92326d.entry.js → p-06c7d0f2.entry.js} +1 -1
  185. package/dist/sparkle-core/p-08d97c59.entry.js +1 -0
  186. package/dist/sparkle-core/p-0bb0cf41.entry.js +1 -0
  187. package/dist/sparkle-core/{p-136b93d5.entry.js → p-0c0f8acd.entry.js} +1 -1
  188. package/dist/sparkle-core/p-0ea2518d.entry.js +1 -0
  189. package/dist/sparkle-core/{p-fe3a7bca.js → p-1019ebc3.js} +1 -1
  190. package/dist/sparkle-core/p-162bff1a.entry.js +1 -0
  191. package/dist/sparkle-core/{p-27075abe.js → p-17eb4633.js} +1 -1
  192. package/dist/sparkle-core/p-1b1ba156.entry.js +1 -0
  193. package/dist/sparkle-core/{p-b00d0a47.entry.js → p-1e4782af.entry.js} +1 -1
  194. package/dist/sparkle-core/{p-c8ad5a5b.entry.js → p-1f0b3ff9.entry.js} +2 -2
  195. package/dist/sparkle-core/{p-3ef53ebf.entry.js → p-214d1229.entry.js} +1 -1
  196. package/dist/sparkle-core/p-25e556cc.entry.js +1 -0
  197. package/dist/sparkle-core/{p-bae8cd7d.entry.js → p-27fbabc3.entry.js} +1 -1
  198. package/dist/sparkle-core/{p-e6d39f6e.entry.js → p-285ab4ed.entry.js} +1 -1
  199. package/dist/sparkle-core/{p-d220a642.entry.js → p-2ba70507.entry.js} +1 -1
  200. package/dist/sparkle-core/{p-5a3de051.entry.js → p-2d4a5ddf.entry.js} +2 -2
  201. package/dist/sparkle-core/p-2d9659e2.entry.js +1 -0
  202. package/dist/sparkle-core/p-2e035338.entry.js +1 -0
  203. package/dist/sparkle-core/{p-c9f474d0.js → p-2e2b813c.js} +1 -1
  204. package/dist/sparkle-core/{p-df5efe0d.entry.js → p-2f10208d.entry.js} +1 -1
  205. package/dist/sparkle-core/p-2fba9a3a.entry.js +1 -0
  206. package/dist/sparkle-core/p-317037de.entry.js +1 -0
  207. package/dist/sparkle-core/p-32762a44.entry.js +1 -0
  208. package/dist/sparkle-core/p-32f4e565.entry.js +1 -0
  209. package/dist/sparkle-core/{p-23d713e2.js → p-340754ed.js} +1 -1
  210. package/dist/sparkle-core/{p-7b21bd70.entry.js → p-352677e6.entry.js} +1 -1
  211. package/dist/sparkle-core/p-370609ba.entry.js +1 -0
  212. package/dist/sparkle-core/{p-fea20ec2.entry.js → p-38b7cf68.entry.js} +1 -1
  213. package/dist/sparkle-core/{p-c5eb4404.entry.js → p-3963e02b.entry.js} +1 -1
  214. package/dist/sparkle-core/p-3bc68dd0.js +1 -0
  215. package/dist/sparkle-core/p-3c133235.entry.js +1 -0
  216. package/dist/sparkle-core/{p-308517b3.js → p-3f85e1ca.js} +2 -2
  217. package/dist/sparkle-core/p-4053ecdb.entry.js +1 -0
  218. package/dist/sparkle-core/{p-1394cbb8.js → p-405f7c58.js} +2 -2
  219. package/dist/sparkle-core/{p-d6a3a639.entry.js → p-4320dac0.entry.js} +1 -1
  220. package/dist/sparkle-core/p-44f813b7.entry.js +1 -0
  221. package/dist/sparkle-core/p-46869031.entry.js +1 -0
  222. package/dist/sparkle-core/{p-17aef6f9.js → p-4a5f2b2b.js} +1 -1
  223. package/dist/sparkle-core/p-4ae75caa.entry.js +1 -0
  224. package/dist/sparkle-core/{p-a05871e6.js → p-4c6a7e52.js} +1 -1
  225. package/dist/sparkle-core/{p-d6637b48.entry.js → p-5096739e.entry.js} +1 -1
  226. package/dist/sparkle-core/p-5322c920.entry.js +1 -0
  227. package/dist/sparkle-core/p-539bf742.js +4 -0
  228. package/dist/sparkle-core/{p-2bd4c60e.js → p-53bcbd1d.js} +1 -1
  229. package/dist/sparkle-core/{p-11ed6b7f.entry.js → p-54ada5e3.entry.js} +1 -1
  230. package/dist/sparkle-core/{p-5979f253.entry.js → p-5519d283.entry.js} +1 -1
  231. package/dist/sparkle-core/p-554da5b8.entry.js +1 -0
  232. package/dist/sparkle-core/{p-8d630960.js → p-56a2e8a2.js} +1 -1
  233. package/dist/sparkle-core/{p-d0d0e5e5.entry.js → p-5893bbe5.entry.js} +1 -1
  234. package/dist/sparkle-core/{p-b8ba8164.entry.js → p-594a6982.entry.js} +1 -1
  235. package/dist/sparkle-core/{p-34ebfc8a.entry.js → p-5c435d5a.entry.js} +1 -1
  236. package/dist/sparkle-core/p-5da2d95a.entry.js +1 -0
  237. package/dist/sparkle-core/{p-1c2aee9c.js → p-5fc26938.js} +1 -1
  238. package/dist/sparkle-core/{p-16b7974e.entry.js → p-601397df.entry.js} +1 -1
  239. package/dist/sparkle-core/{p-dff8325e.js → p-604a7987.js} +1 -1
  240. package/dist/sparkle-core/{p-58f74119.entry.js → p-616941c6.entry.js} +1 -1
  241. package/dist/sparkle-core/{p-fe214d79.entry.js → p-6316d124.entry.js} +1 -1
  242. package/dist/sparkle-core/p-63f69cdc.entry.js +1 -0
  243. package/dist/sparkle-core/p-63f71ada.entry.js +1 -0
  244. package/dist/sparkle-core/p-64e814b9.entry.js +1 -0
  245. package/dist/sparkle-core/{p-0c603495.entry.js → p-66a85393.entry.js} +1 -1
  246. package/dist/sparkle-core/{p-ea4a9f0d.entry.js → p-69487d90.entry.js} +1 -1
  247. package/dist/sparkle-core/p-6b05a1d3.entry.js +1 -0
  248. package/dist/sparkle-core/{p-9dc42d70.entry.js → p-6c894fa2.entry.js} +1 -1
  249. package/dist/sparkle-core/p-6ea246fe.js +4 -0
  250. package/dist/sparkle-core/p-6ed0236e.entry.js +1 -0
  251. package/dist/sparkle-core/{p-34d93a39.entry.js → p-6f0545b3.entry.js} +1 -1
  252. package/dist/sparkle-core/{p-8cbe019a.entry.js → p-727e1c28.entry.js} +1 -1
  253. package/dist/sparkle-core/p-81714d94.entry.js +1 -0
  254. package/dist/sparkle-core/{p-3d2c0e24.entry.js → p-82ad4e7c.entry.js} +2 -2
  255. package/dist/sparkle-core/p-859563db.entry.js +1 -0
  256. package/dist/sparkle-core/p-865f36a8.entry.js +1 -0
  257. package/dist/sparkle-core/{p-01743e3e.js → p-871106e0.js} +1 -1
  258. package/dist/sparkle-core/p-8a41b502.entry.js +1 -0
  259. package/dist/sparkle-core/p-8c74cbb6.entry.js +1 -0
  260. package/dist/sparkle-core/p-91accfc1.js +1 -0
  261. package/dist/sparkle-core/p-93e74f1b.entry.js +1 -0
  262. package/dist/sparkle-core/{p-6ae9c743.entry.js → p-975b99ee.entry.js} +1 -1
  263. package/dist/sparkle-core/p-99ee9919.js +1 -0
  264. package/dist/sparkle-core/{p-3fd92216.entry.js → p-9e309b3e.entry.js} +1 -1
  265. package/dist/sparkle-core/p-9e7fee8f.entry.js +1 -0
  266. package/dist/sparkle-core/{p-280e938d.js → p-a019ad0c.js} +1 -1
  267. package/dist/sparkle-core/{p-06af1bc8.entry.js → p-a2638250.entry.js} +1 -1
  268. package/dist/sparkle-core/{p-e1743d82.entry.js → p-a2ebcf0a.entry.js} +1 -1
  269. package/dist/sparkle-core/p-a5c5da9a.entry.js +1 -0
  270. package/dist/sparkle-core/{p-966817ec.js → p-a85598ad.js} +1 -1
  271. package/dist/sparkle-core/p-a8a77bec.entry.js +1 -0
  272. package/dist/sparkle-core/{p-ba775d8e.entry.js → p-a98d7ebe.entry.js} +1 -1
  273. package/dist/sparkle-core/{p-ed3dfd89.js → p-ad102371.js} +2 -2
  274. package/dist/sparkle-core/{p-bd2c8e30.entry.js → p-b236d258.entry.js} +2 -2
  275. package/dist/sparkle-core/{p-0127a61a.entry.js → p-b4b01fa2.entry.js} +1 -1
  276. package/dist/sparkle-core/{p-9a383065.entry.js → p-b4bc8b02.entry.js} +2 -2
  277. package/dist/sparkle-core/{p-767c9db8.entry.js → p-b5ec8fb0.entry.js} +1 -1
  278. package/dist/sparkle-core/{p-0798d46a.entry.js → p-b83444c7.entry.js} +1 -1
  279. package/dist/sparkle-core/{p-fde96f7c.js → p-b9933822.js} +1 -1
  280. package/dist/sparkle-core/p-b9b1d4da.entry.js +1 -0
  281. package/dist/sparkle-core/{p-3810777d.js → p-be28346b.js} +1 -1
  282. package/dist/sparkle-core/{p-3c752205.entry.js → p-c278db5f.entry.js} +1 -1
  283. package/dist/sparkle-core/p-c2990b24.entry.js +1 -0
  284. package/dist/sparkle-core/{p-a6c1a55a.entry.js → p-c2bbaf55.entry.js} +1 -1
  285. package/dist/sparkle-core/{p-16c81890.entry.js → p-c4af184b.entry.js} +1 -1
  286. package/dist/sparkle-core/p-c71cbbf7.entry.js +1 -0
  287. package/dist/sparkle-core/p-c8c73fa7.js +4 -0
  288. package/dist/sparkle-core/p-c8fe45df.entry.js +1 -0
  289. package/dist/sparkle-core/{p-7b3d1457.js → p-c9cd4ff1.js} +1 -1
  290. package/dist/sparkle-core/{p-a19b42f0.js → p-ca4c8a10.js} +1 -1
  291. package/dist/sparkle-core/p-cab3da3c.entry.js +1 -0
  292. package/dist/sparkle-core/p-cc518c36.entry.js +1 -0
  293. package/dist/sparkle-core/p-cd832fbf.entry.js +1 -0
  294. package/dist/sparkle-core/{p-085eb951.entry.js → p-ce94efdb.entry.js} +1 -1
  295. package/dist/sparkle-core/p-cffd4817.entry.js +1 -0
  296. package/dist/sparkle-core/{p-e09de7ac.js → p-d0ac5f17.js} +1 -1
  297. package/dist/sparkle-core/{p-9cd95e7e.entry.js → p-d0adf726.entry.js} +1 -1
  298. package/dist/sparkle-core/p-d1fcbfc2.js +4 -0
  299. package/dist/sparkle-core/p-d20e4fcf.entry.js +1 -0
  300. package/dist/sparkle-core/p-d24e53ab.entry.js +1 -0
  301. package/dist/sparkle-core/p-d288e6c1.entry.js +1 -0
  302. package/dist/sparkle-core/p-d432d3ac.entry.js +1 -0
  303. package/dist/sparkle-core/{p-785f1879.entry.js → p-d601810e.entry.js} +1 -1
  304. package/dist/sparkle-core/{p-ea7d7a3b.js → p-d81a0680.js} +1 -1
  305. package/dist/sparkle-core/{p-58389020.entry.js → p-d969f7d0.entry.js} +3 -3
  306. package/dist/sparkle-core/p-dabc80c4.entry.js +1 -0
  307. package/dist/sparkle-core/{p-351b82a8.entry.js → p-db8387eb.entry.js} +1 -1
  308. package/dist/sparkle-core/{p-4e0502b8.entry.js → p-dca90a55.entry.js} +1 -1
  309. package/dist/sparkle-core/{p-506f3c5f.js → p-dd2e7f84.js} +2 -2
  310. package/dist/sparkle-core/p-e0429a19.entry.js +1 -0
  311. package/dist/sparkle-core/{p-d5b8302f.entry.js → p-e249aebf.entry.js} +1 -1
  312. package/dist/sparkle-core/p-e3e36ce9.entry.js +1 -0
  313. package/dist/sparkle-core/{p-fdb9a613.entry.js → p-e421d638.entry.js} +1 -1
  314. package/dist/sparkle-core/p-e65c72cc.entry.js +1 -0
  315. package/dist/sparkle-core/{p-b2827978.entry.js → p-e7066c64.entry.js} +1 -1
  316. package/dist/sparkle-core/{p-4338e1e3.js → p-e7568d4b.js} +1 -1
  317. package/dist/sparkle-core/{p-efe37368.entry.js → p-e8988989.entry.js} +1 -1
  318. package/dist/sparkle-core/{p-6a337ad1.entry.js → p-ea962e1b.entry.js} +1 -1
  319. package/dist/sparkle-core/p-eb40a191.entry.js +1 -0
  320. package/dist/sparkle-core/{p-bb575dba.entry.js → p-ecdea569.entry.js} +1 -1
  321. package/dist/sparkle-core/p-ed9f48c4.entry.js +1 -0
  322. package/dist/sparkle-core/{p-6a5ace01.js → p-ee1e0eb4.js} +1 -1
  323. package/dist/sparkle-core/{p-a111c567.entry.js → p-ef6c2352.entry.js} +1 -1
  324. package/dist/sparkle-core/p-f0cf4a8f.entry.js +1 -0
  325. package/dist/sparkle-core/{p-defeaa5c.entry.js → p-f4b0b6a4.entry.js} +1 -1
  326. package/dist/sparkle-core/{p-1701723e.entry.js → p-fc965b88.entry.js} +1 -1
  327. package/dist/sparkle-core/p-fd8d0738.entry.js +4 -0
  328. package/dist/sparkle-core/{p-63d8a5b7.entry.js → p-fda95b6e.entry.js} +1 -1
  329. package/dist/sparkle-core/{p-9b4979b5.entry.js → p-fde382f0.entry.js} +1 -1
  330. package/dist/sparkle-core/{p-3eb56165.entry.js → p-fe6dc976.entry.js} +1 -1
  331. package/dist/sparkle-core/{p-f63a13d8.entry.js → p-ff0e0d4e.entry.js} +1 -1
  332. package/dist/sparkle-core/sparkle-core.esm.js +1 -1
  333. package/dist/types/components/sparkle-quiz/sparkle-quiz/sparkle-quiz.d.ts +42 -0
  334. package/dist/types/components/sparkle-quiz/sparkle-quiz-v1.d.ts +41 -0
  335. package/dist/types/components/sparkle-quiz/sparkle-quiz.d.ts +36 -36
  336. package/dist/types/components.d.ts +37 -1
  337. package/package.json +1 -1
  338. package/dist/cjs/ion-avatar_16.cjs.entry.js +0 -1907
  339. package/dist/cjs/ion-range.cjs.entry.js +0 -515
  340. package/dist/cjs/ion-text.cjs.entry.js +0 -24
  341. package/dist/cjs/sparkle-quiz-feedback_5.cjs.entry.js +0 -117
  342. package/dist/cjs/stencil-route-link.cjs.entry.js +0 -77
  343. package/dist/esm/ion-avatar_16.entry.js +0 -1888
  344. package/dist/esm/ion-range.entry.js +0 -511
  345. package/dist/esm/ion-text.entry.js +0 -20
  346. package/dist/esm/sparkle-quiz-feedback_5.entry.js +0 -109
  347. package/dist/esm/stencil-route-link.entry.js +0 -73
  348. package/dist/sparkle-core/p-0d7cceaa.entry.js +0 -1
  349. package/dist/sparkle-core/p-0d813026.entry.js +0 -1
  350. package/dist/sparkle-core/p-122427b7.entry.js +0 -1
  351. package/dist/sparkle-core/p-12c4f45c.entry.js +0 -1
  352. package/dist/sparkle-core/p-14340143.entry.js +0 -4
  353. package/dist/sparkle-core/p-14a06a91.entry.js +0 -1
  354. package/dist/sparkle-core/p-180857a2.entry.js +0 -1
  355. package/dist/sparkle-core/p-1acc7870.entry.js +0 -1
  356. package/dist/sparkle-core/p-1cd4c3cc.entry.js +0 -1
  357. package/dist/sparkle-core/p-21d9833d.js +0 -1
  358. package/dist/sparkle-core/p-25c13612.entry.js +0 -1
  359. package/dist/sparkle-core/p-2699868a.entry.js +0 -1
  360. package/dist/sparkle-core/p-2c89a6c2.entry.js +0 -1
  361. package/dist/sparkle-core/p-3227afcb.entry.js +0 -1
  362. package/dist/sparkle-core/p-363a2d6d.js +0 -4
  363. package/dist/sparkle-core/p-36c48760.entry.js +0 -1
  364. package/dist/sparkle-core/p-384911d7.entry.js +0 -1
  365. package/dist/sparkle-core/p-3b618eda.entry.js +0 -1
  366. package/dist/sparkle-core/p-442eadcf.entry.js +0 -1
  367. package/dist/sparkle-core/p-4d0dfbc9.js +0 -1
  368. package/dist/sparkle-core/p-524a6174.entry.js +0 -1
  369. package/dist/sparkle-core/p-53aac9d7.entry.js +0 -1
  370. package/dist/sparkle-core/p-56700a40.entry.js +0 -1
  371. package/dist/sparkle-core/p-5722be24.entry.js +0 -1
  372. package/dist/sparkle-core/p-5a850731.entry.js +0 -1
  373. package/dist/sparkle-core/p-5dcf33fb.entry.js +0 -1
  374. package/dist/sparkle-core/p-5e8fa1ac.entry.js +0 -1
  375. package/dist/sparkle-core/p-5ef50959.js +0 -1
  376. package/dist/sparkle-core/p-615b8f64.entry.js +0 -1
  377. package/dist/sparkle-core/p-76206f80.entry.js +0 -1
  378. package/dist/sparkle-core/p-76a6e202.entry.js +0 -1
  379. package/dist/sparkle-core/p-788735b9.entry.js +0 -1
  380. package/dist/sparkle-core/p-8e42e634.entry.js +0 -1
  381. package/dist/sparkle-core/p-8e56f9ee.entry.js +0 -1
  382. package/dist/sparkle-core/p-8ed0cefb.entry.js +0 -1
  383. package/dist/sparkle-core/p-9484e34b.entry.js +0 -1
  384. package/dist/sparkle-core/p-969e98e5.entry.js +0 -1
  385. package/dist/sparkle-core/p-98f3925b.js +0 -4
  386. package/dist/sparkle-core/p-99231c00.js +0 -4
  387. package/dist/sparkle-core/p-9eea81f2.js +0 -1
  388. package/dist/sparkle-core/p-a2f7c751.entry.js +0 -1
  389. package/dist/sparkle-core/p-a458b415.entry.js +0 -1
  390. package/dist/sparkle-core/p-ab3a8f5e.entry.js +0 -1
  391. package/dist/sparkle-core/p-ac0e4d8c.entry.js +0 -1
  392. package/dist/sparkle-core/p-bb3e3482.entry.js +0 -1
  393. package/dist/sparkle-core/p-c48352cf.js +0 -4
  394. package/dist/sparkle-core/p-ca0edc9b.entry.js +0 -1
  395. package/dist/sparkle-core/p-cb04b18a.entry.js +0 -1
  396. package/dist/sparkle-core/p-d38a2511.entry.js +0 -1
  397. package/dist/sparkle-core/p-d5ba8e80.entry.js +0 -1
  398. package/dist/sparkle-core/p-d6788642.entry.js +0 -1
  399. package/dist/sparkle-core/p-d86f8633.entry.js +0 -1
  400. package/dist/sparkle-core/p-df5cfa7f.entry.js +0 -1
  401. package/dist/sparkle-core/p-e28a106d.entry.js +0 -1
  402. package/dist/sparkle-core/p-e566c0b3.entry.js +0 -1
  403. package/dist/sparkle-core/p-f187d129.entry.js +0 -1
  404. package/dist/sparkle-core/p-f5e7bfa5.js +0 -1
  405. package/dist/sparkle-core/p-ff26d891.entry.js +0 -1
@@ -1,1907 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-51e8292e.js');
6
- const ionicGlobal = require('./ionic-global-2cde9d3a.js');
7
- const helpers = require('./helpers-c2496722.js');
8
- const theme = require('./theme-b0b295c1.js');
9
- const index$1 = require('./index-975586fd.js');
10
- const index$2 = require('./index-e56e09b8.js');
11
- const spinnerConfigs = require('./spinner-configs-0ac05f2d.js');
12
- const haptic = require('./haptic-780f33c4.js');
13
- const dir = require('./dir-5af5259a.js');
14
- const environmentConfig_service = require('./environment-config.service-0e02b049.js');
15
- require('./auth.store-1e630a7d.js');
16
-
17
- let CACHED_MAP;
18
- const getIconMap = () => {
19
- if (typeof window === 'undefined') {
20
- return new Map();
21
- }
22
- else {
23
- if (!CACHED_MAP) {
24
- const win = window;
25
- win.Ionicons = win.Ionicons || {};
26
- CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();
27
- }
28
- return CACHED_MAP;
29
- }
30
- };
31
- const getUrl = (i) => {
32
- let url = getSrc(i.src);
33
- if (url) {
34
- return url;
35
- }
36
- url = getName(i.name, i.icon, i.mode, i.ios, i.md);
37
- if (url) {
38
- return getNamedUrl(url);
39
- }
40
- if (i.icon) {
41
- url = getSrc(i.icon);
42
- if (url) {
43
- return url;
44
- }
45
- url = getSrc(i.icon[i.mode]);
46
- if (url) {
47
- return url;
48
- }
49
- }
50
- return null;
51
- };
52
- const getNamedUrl = (iconName) => {
53
- const url = getIconMap().get(iconName);
54
- if (url) {
55
- return url;
56
- }
57
- return index.getAssetPath(`svg/${iconName}.svg`);
58
- };
59
- const getName = (iconName, icon, mode, ios, md) => {
60
- // default to "md" if somehow the mode wasn't set
61
- mode = (mode && toLower(mode)) === 'ios' ? 'ios' : 'md';
62
- // if an icon was passed in using the ios or md attributes
63
- // set the iconName to whatever was passed in
64
- if (ios && mode === 'ios') {
65
- iconName = toLower(ios);
66
- }
67
- else if (md && mode === 'md') {
68
- iconName = toLower(md);
69
- }
70
- else {
71
- if (!iconName && icon && !isSrc(icon)) {
72
- iconName = icon;
73
- }
74
- if (isStr(iconName)) {
75
- iconName = toLower(iconName);
76
- }
77
- }
78
- if (!isStr(iconName) || iconName.trim() === '') {
79
- return null;
80
- }
81
- // only allow alpha characters and dash
82
- const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
83
- if (invalidChars !== '') {
84
- return null;
85
- }
86
- return iconName;
87
- };
88
- const getSrc = (src) => {
89
- if (isStr(src)) {
90
- src = src.trim();
91
- if (isSrc(src)) {
92
- return src;
93
- }
94
- }
95
- return null;
96
- };
97
- const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
98
- const isStr = (val) => typeof val === 'string';
99
- const toLower = (val) => val.toLowerCase();
100
- /**
101
- * Elements inside of web components sometimes need to inherit global attributes
102
- * set on the host. For example, the inner input in `ion-input` should inherit
103
- * the `title` attribute that developers set directly on `ion-input`. This
104
- * helper function should be called in componentWillLoad and assigned to a variable
105
- * that is later used in the render function.
106
- *
107
- * This does not need to be reactive as changing attributes on the host element
108
- * does not trigger a re-render.
109
- */
110
- const inheritAttributes = (el, attributes = []) => {
111
- const attributeObject = {};
112
- attributes.forEach(attr => {
113
- if (el.hasAttribute(attr)) {
114
- const value = el.getAttribute(attr);
115
- if (value !== null) {
116
- attributeObject[attr] = el.getAttribute(attr);
117
- }
118
- el.removeAttribute(attr);
119
- }
120
- });
121
- return attributeObject;
122
- };
123
-
124
- const avatarIosCss = ":host{border-radius:var(--border-radius);display:block}::slotted(ion-img),::slotted(img){border-radius:var(--border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}:host{--border-radius:50%;width:48px;height:48px}";
125
-
126
- const avatarMdCss = ":host{border-radius:var(--border-radius);display:block}::slotted(ion-img),::slotted(img){border-radius:var(--border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}:host{--border-radius:50%;width:64px;height:64px}";
127
-
128
- const Avatar = class {
129
- constructor(hostRef) {
130
- index.registerInstance(this, hostRef);
131
- }
132
- render() {
133
- return (index.h(index.Host, { class: ionicGlobal.getIonMode(this) }, index.h("slot", null)));
134
- }
135
- };
136
- Avatar.style = {
137
- ios: avatarIosCss,
138
- md: avatarMdCss
139
- };
140
-
141
- const buttonIosCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;display:block;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;display:block;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;box-sizing:border-box;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.button-native::-moz-focus-inner{border:0}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted(ion-icon){font-size:1.4em;pointer-events:none}::slotted(ion-icon[slot=start]){margin-left:-0.3em;margin-right:0.3em;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em}}::slotted(ion-icon[slot=end]){margin-left:0.3em;margin-right:-0.2em;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em}}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host{--border-radius:10px;--padding-top:0;--padding-bottom:0;--padding-start:1em;--padding-end:1em;--transition:background-color, opacity 100ms linear;margin-left:2px;margin-right:2px;margin-top:4px;margin-bottom:4px;height:2.8em;font-size:16px;font-weight:500;letter-spacing:-0.03em}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}:host(.button-solid){--background-activated:var(--ion-color-primary-shade, #3171e0);--background-focused:var(--ion-color-primary-shade, #3171e0);--background-hover:var(--ion-color-primary-tint, #4c8dff);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1}:host(.button-outline){--border-radius:10px;--border-width:1px;--border-style:solid;--background-activated:var(--ion-color-primary, #3880ff);--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;--color-activated:var(--ion-color-primary-contrast, #fff)}:host(.button-clear){--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;font-size:17px;font-weight:normal;letter-spacing:0}:host(.button-large){--border-radius:12px;--padding-top:0;--padding-start:1em;--padding-end:1em;--padding-bottom:0;height:2.8em;font-size:20px}:host(.button-small){--border-radius:6px;--padding-top:0;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:0;height:2.1em;font-size:13px}:host(.button-round){--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-strong){font-weight:600}:host(.button-clear.ion-activated){opacity:0.4}:host(.button-outline.ion-activated.ion-color) .button-native{color:var(--ion-color-contrast)}:host(.button-outline.ion-activated.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}:host(.button-outline.ion-focused.ion-color) .button-native,:host(.button-clear.ion-focused.ion-color) .button-native{color:var(--ion-color-base)}:host(.button-outline.ion-focused.ion-color) .button-native::after,:host(.button-clear.ion-focused.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.button-clear:hover),:host(.button-outline:hover){opacity:0.6}:host(.button-clear.ion-color:hover) .button-native,:host(.button-outline.ion-color:hover) .button-native{color:var(--ion-color-base)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:transparent}:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native::after{background:#fff;opacity:0.1}}";
142
-
143
- const buttonMdCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;display:block;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;display:block;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;box-sizing:border-box;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.button-native::-moz-focus-inner{border:0}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted(ion-icon){font-size:1.4em;pointer-events:none}::slotted(ion-icon[slot=start]){margin-left:-0.3em;margin-right:0.3em;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em}}::slotted(ion-icon[slot=end]){margin-left:0.3em;margin-right:-0.2em;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em}}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host{--border-radius:4px;--padding-top:0;--padding-bottom:0;--padding-start:1.1em;--padding-end:1.1em;--transition:box-shadow 280ms cubic-bezier(.4, 0, .2, 1),\n background-color 15ms linear,\n color 15ms linear;margin-left:2px;margin-right:2px;margin-top:4px;margin-bottom:4px;height:36px;font-size:14px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}:host(.button-solid){--background-activated:transparent;--background-hover:var(--ion-color-primary-contrast, #fff);--background-focused:var(--ion-color-primary-contrast, #fff);--background-activated-opacity:0;--background-focused-opacity:.24;--background-hover-opacity:.08;--box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}:host(.button-solid.ion-activated){--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)}:host(.button-outline){--border-width:2px;--border-style:solid;--box-shadow:none;--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-outline.ion-activated.ion-color) .button-native{background:transparent}:host(.button-clear){--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-round){--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-large){--padding-top:0;--padding-start:1em;--padding-end:1em;--padding-bottom:0;height:2.8em;font-size:20px}:host(.button-small){--padding-top:0;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:0;height:2.1em;font-size:13px}:host(.button-strong){font-weight:bold}::slotted(ion-icon[slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color.ion-focused) .button-native::after,:host(.button-outline.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}";
144
-
145
- const Button = class {
146
- constructor(hostRef) {
147
- index.registerInstance(this, hostRef);
148
- this.ionFocus = index.createEvent(this, "ionFocus", 7);
149
- this.ionBlur = index.createEvent(this, "ionBlur", 7);
150
- this.inItem = false;
151
- this.inListHeader = false;
152
- this.inToolbar = false;
153
- this.inheritedAttributes = {};
154
- /**
155
- * The type of button.
156
- */
157
- this.buttonType = 'button';
158
- /**
159
- * If `true`, the user cannot interact with the button.
160
- */
161
- this.disabled = false;
162
- /**
163
- * When using a router, it specifies the transition direction when navigating to
164
- * another page using `href`.
165
- */
166
- this.routerDirection = 'forward';
167
- /**
168
- * If `true`, activates a button with a heavier font weight.
169
- */
170
- this.strong = false;
171
- /**
172
- * The type of the button.
173
- */
174
- this.type = 'button';
175
- this.handleClick = (ev) => {
176
- if (this.type === 'button') {
177
- theme.openURL(this.href, ev, this.routerDirection, this.routerAnimation);
178
- }
179
- else if (helpers.hasShadowDom(this.el)) {
180
- // this button wants to specifically submit a form
181
- // climb up the dom to see if we're in a <form>
182
- // and if so, then use JS to submit it
183
- const form = this.el.closest('form');
184
- if (form) {
185
- ev.preventDefault();
186
- const fakeButton = document.createElement('button');
187
- fakeButton.type = this.type;
188
- fakeButton.style.display = 'none';
189
- form.appendChild(fakeButton);
190
- fakeButton.click();
191
- fakeButton.remove();
192
- }
193
- }
194
- };
195
- this.onFocus = () => {
196
- this.ionFocus.emit();
197
- };
198
- this.onBlur = () => {
199
- this.ionBlur.emit();
200
- };
201
- }
202
- componentWillLoad() {
203
- this.inToolbar = !!this.el.closest('ion-buttons');
204
- this.inListHeader = !!this.el.closest('ion-list-header');
205
- this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
206
- this.inheritedAttributes = helpers.inheritAriaAttributes(this.el);
207
- }
208
- get hasIconOnly() {
209
- return !!this.el.querySelector('[slot="icon-only"]');
210
- }
211
- get rippleType() {
212
- const hasClearFill = this.fill === undefined || this.fill === 'clear';
213
- // If the button is in a toolbar, has a clear fill (which is the default)
214
- // and only has an icon we use the unbounded "circular" ripple effect
215
- if (hasClearFill && this.hasIconOnly && this.inToolbar) {
216
- return 'unbounded';
217
- }
218
- return 'bounded';
219
- }
220
- render() {
221
- const mode = ionicGlobal.getIonMode(this);
222
- const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes, } = this;
223
- const finalSize = size === undefined && this.inItem ? 'small' : size;
224
- const TagType = href === undefined ? 'button' : 'a';
225
- const attrs = TagType === 'button'
226
- ? { type }
227
- : {
228
- download: this.download,
229
- href,
230
- rel,
231
- target,
232
- };
233
- let fill = this.fill;
234
- if (fill === undefined) {
235
- fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
236
- }
237
- return (index.h(index.Host, { onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: theme.createColorClasses(color, {
238
- [mode]: true,
239
- [buttonType]: true,
240
- [`${buttonType}-${expand}`]: expand !== undefined,
241
- [`${buttonType}-${finalSize}`]: finalSize !== undefined,
242
- [`${buttonType}-${shape}`]: shape !== undefined,
243
- [`${buttonType}-${fill}`]: true,
244
- [`${buttonType}-strong`]: strong,
245
- 'in-toolbar': theme.hostContext('ion-toolbar', this.el),
246
- 'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
247
- 'button-has-icon-only': hasIconOnly,
248
- 'button-disabled': disabled,
249
- 'ion-activatable': true,
250
- 'ion-focusable': true,
251
- }) }, index.h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), index.h("span", { class: "button-inner" }, index.h("slot", { name: "icon-only" }), index.h("slot", { name: "start" }), index.h("slot", null), index.h("slot", { name: "end" })), mode === 'md' && index.h("ion-ripple-effect", { type: this.rippleType }))));
252
- }
253
- get el() { return index.getElement(this); }
254
- };
255
- Button.style = {
256
- ios: buttonIosCss,
257
- md: buttonMdCss
258
- };
259
-
260
- const cardIosCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, #666666)));margin-left:16px;margin-right:16px;margin-top:24px;margin-bottom:24px;border-radius:8px;transform:translateZ(0);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);font-size:14px;box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}:host(.ion-activated){transform:scale3d(0.97, 0.97, 1)}";
261
-
262
- const cardMdCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, #737373)));margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px;border-radius:4px;font-size:14px;box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}";
263
-
264
- const Card = class {
265
- constructor(hostRef) {
266
- index.registerInstance(this, hostRef);
267
- /**
268
- * If `true`, a button tag will be rendered and the card will be tappable.
269
- */
270
- this.button = false;
271
- /**
272
- * The type of the button. Only used when an `onclick` or `button` property is present.
273
- */
274
- this.type = 'button';
275
- /**
276
- * If `true`, the user cannot interact with the card.
277
- */
278
- this.disabled = false;
279
- /**
280
- * When using a router, it specifies the transition direction when navigating to
281
- * another page using `href`.
282
- */
283
- this.routerDirection = 'forward';
284
- }
285
- isClickable() {
286
- return this.href !== undefined || this.button;
287
- }
288
- renderCard(mode) {
289
- const clickable = this.isClickable();
290
- if (!clickable) {
291
- return [index.h("slot", null)];
292
- }
293
- const { href, routerAnimation, routerDirection } = this;
294
- const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
295
- const attrs = TagType === 'button'
296
- ? { type: this.type }
297
- : {
298
- download: this.download,
299
- href: this.href,
300
- rel: this.rel,
301
- target: this.target,
302
- };
303
- return (index.h(TagType, Object.assign({}, attrs, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => theme.openURL(href, ev, routerDirection, routerAnimation) }), index.h("slot", null), clickable && mode === 'md' && index.h("ion-ripple-effect", null)));
304
- }
305
- render() {
306
- const mode = ionicGlobal.getIonMode(this);
307
- return (index.h(index.Host, { class: theme.createColorClasses(this.color, {
308
- [mode]: true,
309
- 'card-disabled': this.disabled,
310
- 'ion-activatable': this.isClickable(),
311
- }) }, this.renderCard(mode)));
312
- }
313
- };
314
- Card.style = {
315
- ios: cardIosCss,
316
- md: cardMdCss
317
- };
318
-
319
- const cardContentIosCss = "ion-card-content{display:block;position:relative}.card-content-ios{padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;font-size:16px;line-height:1.4}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.card-content-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}.card-content-ios h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.card-content-ios h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.card-content-ios h3,.card-content-ios h4,.card-content-ios h5,.card-content-ios h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal}.card-content-ios p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px}ion-card-header+.card-content-ios{padding-top:0}";
320
-
321
- const cardContentMdCss = "ion-card-content{display:block;position:relative}.card-content-md{padding-left:16px;padding-right:16px;padding-top:13px;padding-bottom:13px;font-size:14px;line-height:1.5}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.card-content-md{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.card-content-md h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.card-content-md h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.card-content-md h3,.card-content-md h4,.card-content-md h5,.card-content-md h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal}.card-content-md p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;font-weight:normal;line-height:1.5}ion-card-header+.card-content-md{padding-top:0}";
322
-
323
- const CardContent = class {
324
- constructor(hostRef) {
325
- index.registerInstance(this, hostRef);
326
- }
327
- render() {
328
- const mode = ionicGlobal.getIonMode(this);
329
- return (index.h(index.Host, { class: {
330
- [mode]: true,
331
- // Used internally for styling
332
- [`card-content-${mode}`]: true,
333
- } }));
334
- }
335
- };
336
- CardContent.style = {
337
- ios: cardContentIosCss,
338
- md: cardContentMdCss
339
- };
340
-
341
- const cardTitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-text-color, #000);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:28px;font-weight:700;line-height:1.2}";
342
-
343
- const cardTitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-850, #262626);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:20px;font-weight:500;line-height:1.2}";
344
-
345
- const CardTitle = class {
346
- constructor(hostRef) {
347
- index.registerInstance(this, hostRef);
348
- }
349
- render() {
350
- const mode = ionicGlobal.getIonMode(this);
351
- return (index.h(index.Host, { role: "heading", "aria-level": "2", class: theme.createColorClasses(this.color, {
352
- 'ion-inherit-color': true,
353
- [mode]: true,
354
- }) }, index.h("slot", null)));
355
- }
356
- };
357
- CardTitle.style = {
358
- ios: cardTitleIosCss,
359
- md: cardTitleMdCss
360
- };
361
-
362
- const validateContent = (svgContent) => {
363
- const div = document.createElement('div');
364
- div.innerHTML = svgContent;
365
- // setup this way to ensure it works on our buddy IE
366
- for (let i = div.childNodes.length - 1; i >= 0; i--) {
367
- if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
368
- div.removeChild(div.childNodes[i]);
369
- }
370
- }
371
- // must only have 1 root element
372
- const svgElm = div.firstElementChild;
373
- if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
374
- const svgClass = svgElm.getAttribute('class') || '';
375
- svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());
376
- // root element must be an svg
377
- // lets double check we've got valid elements
378
- // do not allow scripts
379
- if (isValid(svgElm)) {
380
- return div.innerHTML;
381
- }
382
- }
383
- return '';
384
- };
385
- const isValid = (elm) => {
386
- if (elm.nodeType === 1) {
387
- if (elm.nodeName.toLowerCase() === 'script') {
388
- return false;
389
- }
390
- for (let i = 0; i < elm.attributes.length; i++) {
391
- const val = elm.attributes[i].value;
392
- if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {
393
- return false;
394
- }
395
- }
396
- for (let i = 0; i < elm.childNodes.length; i++) {
397
- if (!isValid(elm.childNodes[i])) {
398
- return false;
399
- }
400
- }
401
- }
402
- return true;
403
- };
404
-
405
- const ioniconContent = new Map();
406
- const requests = new Map();
407
- const getSvgContent = (url, sanitize) => {
408
- // see if we already have a request for this url
409
- let req = requests.get(url);
410
- if (!req) {
411
- if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
412
- // we don't already have a request
413
- req = fetch(url).then((rsp) => {
414
- if (rsp.ok) {
415
- return rsp.text().then((svgContent) => {
416
- if (svgContent && sanitize !== false) {
417
- svgContent = validateContent(svgContent);
418
- }
419
- ioniconContent.set(url, svgContent || '');
420
- });
421
- }
422
- ioniconContent.set(url, '');
423
- });
424
- // cache for the same requests
425
- requests.set(url, req);
426
- }
427
- else {
428
- // set to empty for ssr scenarios and resolve promise
429
- ioniconContent.set(url, '');
430
- return Promise.resolve();
431
- }
432
- }
433
- return req;
434
- };
435
-
436
- const iconCss = ":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";
437
-
438
- const Icon = class {
439
- constructor(hostRef) {
440
- index.registerInstance(this, hostRef);
441
- this.iconName = null;
442
- this.inheritedAttributes = {};
443
- this.isVisible = false;
444
- /**
445
- * The mode determines which platform styles to use.
446
- */
447
- this.mode = getIonMode();
448
- /**
449
- * If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
450
- * Default, `false`.
451
- */
452
- this.lazy = false;
453
- /**
454
- * When set to `false`, SVG content that is HTTP fetched will not be checked
455
- * if the response SVG content has any `<script>` elements, or any attributes
456
- * that start with `on`, such as `onclick`.
457
- * @default true
458
- */
459
- this.sanitize = true;
460
- this.hasAriaHidden = () => {
461
- const { el } = this;
462
- return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
463
- };
464
- }
465
- componentWillLoad() {
466
- this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
467
- }
468
- connectedCallback() {
469
- // purposely do not return the promise here because loading
470
- // the svg file should not hold up loading the app
471
- // only load the svg if it's visible
472
- this.waitUntilVisible(this.el, '50px', () => {
473
- this.isVisible = true;
474
- this.loadIcon();
475
- });
476
- }
477
- disconnectedCallback() {
478
- if (this.io) {
479
- this.io.disconnect();
480
- this.io = undefined;
481
- }
482
- }
483
- waitUntilVisible(el, rootMargin, cb) {
484
- if (this.lazy && typeof window !== 'undefined' && window.IntersectionObserver) {
485
- const io = (this.io = new window.IntersectionObserver((data) => {
486
- if (data[0].isIntersecting) {
487
- io.disconnect();
488
- this.io = undefined;
489
- cb();
490
- }
491
- }, { rootMargin }));
492
- io.observe(el);
493
- }
494
- else {
495
- // browser doesn't support IntersectionObserver
496
- // so just fallback to always show it
497
- cb();
498
- }
499
- }
500
- loadIcon() {
501
- if (this.isVisible) {
502
- const url = getUrl(this);
503
- if (url) {
504
- if (ioniconContent.has(url)) {
505
- // sync if it's already loaded
506
- this.svgContent = ioniconContent.get(url);
507
- }
508
- else {
509
- // async if it hasn't been loaded
510
- getSvgContent(url, this.sanitize).then(() => (this.svgContent = ioniconContent.get(url)));
511
- }
512
- }
513
- }
514
- const label = this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
515
- /**
516
- * Come up with a default label
517
- * in case user does not provide their own.
518
- */
519
- if (label) {
520
- this.ariaLabel = label.replace(/\-/g, ' ');
521
- }
522
- }
523
- render() {
524
- const { iconName, ariaLabel, inheritedAttributes } = this;
525
- const mode = this.mode || 'md';
526
- const flipRtl = this.flipRtl ||
527
- (iconName &&
528
- (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) &&
529
- this.flipRtl !== false);
530
- /**
531
- * Only set the aria-label if a) we have generated
532
- * one for the icon and if aria-hidden is not set to "true".
533
- * If developer wants to set their own aria-label, then
534
- * inheritedAttributes down below will override whatever
535
- * default label we have set.
536
- */
537
- return (index.h(index.Host, Object.assign({ "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, role: "img", class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': !!flipRtl && this.el.ownerDocument.dir === 'rtl' }) }, inheritedAttributes), this.svgContent ? (index.h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (index.h("div", { class: "icon-inner" }))));
538
- }
539
- static get assetsDirs() { return ["svg"]; }
540
- get el() { return index.getElement(this); }
541
- static get watchers() { return {
542
- "name": ["loadIcon"],
543
- "src": ["loadIcon"],
544
- "icon": ["loadIcon"]
545
- }; }
546
- };
547
- const getIonMode = () => (typeof document !== 'undefined' && document.documentElement.getAttribute('mode')) || 'md';
548
- const createColorClasses = (color) => {
549
- return color
550
- ? {
551
- 'ion-color': true,
552
- [`ion-color-${color}`]: true,
553
- }
554
- : null;
555
- };
556
- Icon.style = iconCss;
557
-
558
- const inputIosCss = ".sc-ion-input-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--background:transparent;--color:initial;display:flex;position:relative;flex:1;align-items:center;width:100%;padding:0 !important;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}ion-item.sc-ion-input-ios-h:not(.item-label),ion-item:not(.item-label) .sc-ion-input-ios-h{--padding-start:0}.ion-color.sc-ion-input-ios-h{color:var(--ion-color-base)}.native-input.sc-ion-input-ios{border-radius:var(--border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;box-sizing:border-box;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.native-input.sc-ion-input-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-input.sc-ion-input-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-ios:invalid{box-shadow:none}.native-input.sc-ion-input-ios::-ms-clear{display:none}.native-input[disabled].sc-ion-input-ios{opacity:0.4}.cloned-input.sc-ion-input-ios{left:0;top:0;position:absolute;pointer-events:none}[dir=rtl].sc-ion-input-ios .cloned-input.sc-ion-input-ios,[dir=rtl].sc-ion-input-ios-h .cloned-input.sc-ion-input-ios,[dir=rtl] .sc-ion-input-ios-h .cloned-input.sc-ion-input-ios{left:unset;right:unset;right:0}.input-clear-icon.sc-ion-input-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;appearance:none}.input-clear-icon.sc-ion-input-ios:focus{opacity:0.5}.has-value.sc-ion-input-ios-h .input-clear-icon.sc-ion-input-ios{visibility:visible}.has-focus.sc-ion-input-ios-h{pointer-events:none}.has-focus.sc-ion-input-ios-h input.sc-ion-input-ios,.has-focus.sc-ion-input-ios-h a.sc-ion-input-ios,.has-focus.sc-ion-input-ios-h button.sc-ion-input-ios{pointer-events:auto}.item-label-floating.item-has-placeholder.sc-ion-input-ios-h:not(.item-has-value),.item-label-floating.item-has-placeholder:not(.item-has-value) .sc-ion-input-ios-h{opacity:0}.item-label-floating.item-has-placeholder.sc-ion-input-ios-h:not(.item-has-value).item-has-focus,.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus .sc-ion-input-ios-h{transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:1}.sc-ion-input-ios-h{--padding-top:10px;--padding-end:10px;--padding-bottom:10px;--padding-start:0;font-size:inherit}.item-label-stacked.sc-ion-input-ios-h,.item-label-stacked .sc-ion-input-ios-h,.item-label-floating.sc-ion-input-ios-h,.item-label-floating .sc-ion-input-ios-h{--padding-top:8px;--padding-bottom:8px;--padding-start:0px}.input-clear-icon.sc-ion-input-ios{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='var(--ion-color-step-600,%20%23666666)'%20d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z%20M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>\");width:30px;height:30px;background-size:18px}";
559
-
560
- const inputMdCss = ".sc-ion-input-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--background:transparent;--color:initial;display:flex;position:relative;flex:1;align-items:center;width:100%;padding:0 !important;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}ion-item.sc-ion-input-md-h:not(.item-label),ion-item:not(.item-label) .sc-ion-input-md-h{--padding-start:0}.ion-color.sc-ion-input-md-h{color:var(--ion-color-base)}.native-input.sc-ion-input-md{border-radius:var(--border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;box-sizing:border-box;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.native-input.sc-ion-input-md{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-input.sc-ion-input-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-md:invalid{box-shadow:none}.native-input.sc-ion-input-md::-ms-clear{display:none}.native-input[disabled].sc-ion-input-md{opacity:0.4}.cloned-input.sc-ion-input-md{left:0;top:0;position:absolute;pointer-events:none}[dir=rtl].sc-ion-input-md .cloned-input.sc-ion-input-md,[dir=rtl].sc-ion-input-md-h .cloned-input.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h .cloned-input.sc-ion-input-md{left:unset;right:unset;right:0}.input-clear-icon.sc-ion-input-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;appearance:none}.input-clear-icon.sc-ion-input-md:focus{opacity:0.5}.has-value.sc-ion-input-md-h .input-clear-icon.sc-ion-input-md{visibility:visible}.has-focus.sc-ion-input-md-h{pointer-events:none}.has-focus.sc-ion-input-md-h input.sc-ion-input-md,.has-focus.sc-ion-input-md-h a.sc-ion-input-md,.has-focus.sc-ion-input-md-h button.sc-ion-input-md{pointer-events:auto}.item-label-floating.item-has-placeholder.sc-ion-input-md-h:not(.item-has-value),.item-label-floating.item-has-placeholder:not(.item-has-value) .sc-ion-input-md-h{opacity:0}.item-label-floating.item-has-placeholder.sc-ion-input-md-h:not(.item-has-value).item-has-focus,.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus .sc-ion-input-md-h{transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:1}.sc-ion-input-md-h{--padding-top:10px;--padding-end:0;--padding-bottom:10px;--padding-start:8px;font-size:inherit}.item-label-stacked.sc-ion-input-md-h,.item-label-stacked .sc-ion-input-md-h,.item-label-floating.sc-ion-input-md-h,.item-label-floating .sc-ion-input-md-h{--padding-top:8px;--padding-bottom:8px;--padding-start:0}.input-clear-icon.sc-ion-input-md{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><polygon%20fill='var(--ion-color-step-600,%20%23666666)'%20points='405,136.798%20375.202,107%20256,226.202%20136.798,107%20107,136.798%20226.202,256%20107,375.202%20136.798,405%20256,285.798%20375.202,405%20405,375.202%20285.798,256'/></svg>\");width:30px;height:30px;background-size:22px}";
561
-
562
- const Input = class {
563
- constructor(hostRef) {
564
- index.registerInstance(this, hostRef);
565
- this.ionInput = index.createEvent(this, "ionInput", 7);
566
- this.ionChange = index.createEvent(this, "ionChange", 7);
567
- this.ionBlur = index.createEvent(this, "ionBlur", 7);
568
- this.ionFocus = index.createEvent(this, "ionFocus", 7);
569
- this.ionStyle = index.createEvent(this, "ionStyle", 7);
570
- this.inputId = `ion-input-${inputIds++}`;
571
- this.didBlurAfterEdit = false;
572
- this.inheritedAttributes = {};
573
- this.isComposing = false;
574
- /**
575
- * This is required for a WebKit bug which requires us to
576
- * blur and focus an input to properly focus the input in
577
- * an item with delegatesFocus. It will no longer be needed
578
- * with iOS 14.
579
- *
580
- * @internal
581
- */
582
- this.fireFocusEvents = true;
583
- this.hasFocus = false;
584
- /**
585
- * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
586
- * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
587
- */
588
- this.autocapitalize = 'off';
589
- /**
590
- * Indicates whether the value of the control can be automatically completed by the browser.
591
- */
592
- this.autocomplete = 'off';
593
- /**
594
- * Whether auto correction should be enabled when the user is entering/editing the text value.
595
- */
596
- this.autocorrect = 'off';
597
- /**
598
- * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
599
- */
600
- this.autofocus = false;
601
- /**
602
- * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
603
- */
604
- this.clearInput = false;
605
- /**
606
- * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
607
- */
608
- this.debounce = 0;
609
- /**
610
- * If `true`, the user cannot interact with the input.
611
- */
612
- this.disabled = false;
613
- /**
614
- * The name of the control, which is submitted with the form data.
615
- */
616
- this.name = this.inputId;
617
- /**
618
- * If `true`, the user cannot modify the value.
619
- */
620
- this.readonly = false;
621
- /**
622
- * If `true`, the user must fill in a value before submitting a form.
623
- */
624
- this.required = false;
625
- /**
626
- * If `true`, the element will have its spelling and grammar checked.
627
- */
628
- this.spellcheck = false;
629
- /**
630
- * The type of control to display. The default type is text.
631
- */
632
- this.type = 'text';
633
- /**
634
- * The value of the input.
635
- */
636
- this.value = '';
637
- this.onInput = (ev) => {
638
- const input = ev.target;
639
- if (input) {
640
- this.value = input.value || '';
641
- }
642
- this.ionInput.emit(ev);
643
- };
644
- this.onBlur = (ev) => {
645
- this.hasFocus = false;
646
- this.focusChanged();
647
- this.emitStyle();
648
- if (this.fireFocusEvents) {
649
- this.ionBlur.emit(ev);
650
- }
651
- };
652
- this.onFocus = (ev) => {
653
- this.hasFocus = true;
654
- this.focusChanged();
655
- this.emitStyle();
656
- if (this.fireFocusEvents) {
657
- this.ionFocus.emit(ev);
658
- }
659
- };
660
- this.onKeydown = (ev) => {
661
- if (this.shouldClearOnEdit()) {
662
- // Did the input value change after it was blurred and edited?
663
- // Do not clear if user is hitting Enter to submit form
664
- if (this.didBlurAfterEdit && this.hasValue() && ev.key !== 'Enter') {
665
- // Clear the input
666
- this.clearTextInput();
667
- }
668
- // Reset the flag
669
- this.didBlurAfterEdit = false;
670
- }
671
- };
672
- this.onCompositionStart = () => {
673
- this.isComposing = true;
674
- };
675
- this.onCompositionEnd = () => {
676
- this.isComposing = false;
677
- };
678
- this.clearTextOnEnter = (ev) => {
679
- if (ev.key === 'Enter') {
680
- this.clearTextInput(ev);
681
- }
682
- };
683
- this.clearTextInput = (ev) => {
684
- if (this.clearInput && !this.readonly && !this.disabled && ev) {
685
- ev.preventDefault();
686
- ev.stopPropagation();
687
- // Attempt to focus input again after pressing clear button
688
- this.setFocus();
689
- }
690
- this.value = '';
691
- /**
692
- * This is needed for clearOnEdit
693
- * Otherwise the value will not be cleared
694
- * if user is inside the input
695
- */
696
- if (this.nativeInput) {
697
- this.nativeInput.value = '';
698
- }
699
- };
700
- }
701
- debounceChanged() {
702
- this.ionChange = helpers.debounceEvent(this.ionChange, this.debounce);
703
- }
704
- disabledChanged() {
705
- this.emitStyle();
706
- }
707
- /**
708
- * Update the item classes when the placeholder changes
709
- */
710
- placeholderChanged() {
711
- this.emitStyle();
712
- }
713
- /**
714
- * Update the native input element when the value changes
715
- */
716
- valueChanged() {
717
- const nativeInput = this.nativeInput;
718
- const value = this.getValue();
719
- if (nativeInput && nativeInput.value !== value && !this.isComposing) {
720
- /**
721
- * Assigning the native input's value on attribute
722
- * value change, allows `ionInput` implementations
723
- * to override the control's value.
724
- *
725
- * Used for patterns such as input trimming (removing whitespace),
726
- * or input masking.
727
- */
728
- nativeInput.value = value;
729
- }
730
- this.emitStyle();
731
- this.ionChange.emit({ value: this.value == null ? this.value : this.value.toString() });
732
- }
733
- componentWillLoad() {
734
- this.inheritedAttributes = Object.assign(Object.assign({}, helpers.inheritAriaAttributes(this.el)), helpers.inheritAttributes(this.el, ['tabindex', 'title']));
735
- }
736
- connectedCallback() {
737
- this.emitStyle();
738
- this.debounceChanged();
739
- {
740
- document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
741
- detail: this.el,
742
- }));
743
- }
744
- }
745
- componentDidLoad() {
746
- const nativeInput = this.nativeInput;
747
- if (nativeInput) {
748
- // TODO: FW-729 Update to JSX bindings when Stencil resolves bug with:
749
- // https://github.com/ionic-team/stencil/issues/3235
750
- nativeInput.addEventListener('compositionstart', this.onCompositionStart);
751
- nativeInput.addEventListener('compositionend', this.onCompositionEnd);
752
- }
753
- }
754
- disconnectedCallback() {
755
- {
756
- document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
757
- detail: this.el,
758
- }));
759
- }
760
- const nativeInput = this.nativeInput;
761
- if (nativeInput) {
762
- nativeInput.removeEventListener('compositionstart', this.onCompositionStart);
763
- nativeInput.removeEventListener('compositionEnd', this.onCompositionEnd);
764
- }
765
- }
766
- /**
767
- * Sets focus on the native `input` in `ion-input`. Use this method instead of the global
768
- * `input.focus()`.
769
- */
770
- async setFocus() {
771
- if (this.nativeInput) {
772
- this.nativeInput.focus();
773
- }
774
- }
775
- /**
776
- * Sets blur on the native `input` in `ion-input`. Use this method instead of the global
777
- * `input.blur()`.
778
- * @internal
779
- */
780
- async setBlur() {
781
- if (this.nativeInput) {
782
- this.nativeInput.blur();
783
- }
784
- }
785
- /**
786
- * Returns the native `<input>` element used under the hood.
787
- */
788
- getInputElement() {
789
- return Promise.resolve(this.nativeInput);
790
- }
791
- shouldClearOnEdit() {
792
- const { type, clearOnEdit } = this;
793
- return clearOnEdit === undefined ? type === 'password' : clearOnEdit;
794
- }
795
- getValue() {
796
- return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
797
- }
798
- emitStyle() {
799
- this.ionStyle.emit({
800
- interactive: true,
801
- input: true,
802
- 'has-placeholder': this.placeholder !== undefined,
803
- 'has-value': this.hasValue(),
804
- 'has-focus': this.hasFocus,
805
- 'interactive-disabled': this.disabled,
806
- });
807
- }
808
- focusChanged() {
809
- // If clearOnEdit is enabled and the input blurred but has a value, set a flag
810
- if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {
811
- this.didBlurAfterEdit = true;
812
- }
813
- }
814
- hasValue() {
815
- return this.getValue().length > 0;
816
- }
817
- render() {
818
- const mode = ionicGlobal.getIonMode(this);
819
- const value = this.getValue();
820
- const labelId = this.inputId + '-lbl';
821
- const label = helpers.findItemLabel(this.el);
822
- if (label) {
823
- label.id = labelId;
824
- }
825
- return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
826
- [mode]: true,
827
- 'has-value': this.hasValue(),
828
- 'has-focus': this.hasFocus,
829
- }) }, index.h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.clearInput && !this.readonly && !this.disabled && (index.h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: this.clearTextInput, onKeyDown: this.clearTextOnEnter }))));
830
- }
831
- get el() { return index.getElement(this); }
832
- static get watchers() { return {
833
- "debounce": ["debounceChanged"],
834
- "disabled": ["disabledChanged"],
835
- "placeholder": ["placeholderChanged"],
836
- "value": ["valueChanged"]
837
- }; }
838
- };
839
- let inputIds = 0;
840
- Input.style = {
841
- ios: inputIosCss,
842
- md: inputMdCss
843
- };
844
-
845
- const itemIosCss = ":host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--show-full-highlight:0;--show-inset-highlight:0;--detail-icon-color:initial;--detail-icon-font-size:20px;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native,:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;box-sizing:border-box;z-index:1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-native{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;transition:var(--transition);z-index:-1}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--inner-padding-start);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow);overflow:inherit;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-inner{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--inner-padding-start);padding-inline-start:var(--inner-padding-start);-webkit-padding-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-inline-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end))}}.item-bottom{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--inner-padding-end);padding-top:0;padding-bottom:0;display:flex;justify-content:space-between}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-bottom{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--inner-padding-end);padding-inline-end:var(--inner-padding-end)}}.item-detail-icon{color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){flex:1}:host(.item-input){align-items:center}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{flex:1;flex-direction:column}.item-highlight,.item-inner-highlight{left:0;right:0;top:0;bottom:0;border-radius:inherit;position:absolute;width:100%;height:100%;transform:scaleX(0);transition:transform 200ms, border-bottom-width 200ms;z-index:2;box-sizing:border-box;pointer-events:none}:host(.item-interactive.item-has-focus) .item-native{caret-color:var(--highlight-background)}:host(.item-interactive.ion-focused),:host(.item-interactive.item-has-focus),:host(.item-interactive.ion-touched.ion-invalid){--full-highlight-height:calc(var(--highlight-height) * var(--show-full-highlight));--inset-highlight-height:calc(var(--highlight-height) * var(--show-inset-highlight))}:host(.item-interactive.ion-focused),:host(.item-interactive.item-has-focus){--highlight-background:var(--highlight-color-focused)}:host(.item-interactive.ion-valid){--highlight-background:var(--highlight-color-valid)}:host(.item-interactive.ion-invalid){--highlight-background:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=helper]){display:none}::slotted([slot=error]){display:none;color:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=error]){display:block}:host(:not(.item-label)) ::slotted(ion-select){--padding-start:0;max-width:none}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0;align-self:stretch;width:100%;max-width:100%}:host(:not(.item-label)) ::slotted(ion-datetime){--padding-start:0}:host(.item-label-stacked) ::slotted(ion-datetime),:host(.item-label-floating) ::slotted(ion-datetime){--padding-start:0;width:100%}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio),:host(.item-multiple-inputs) ::slotted(ion-select){position:relative}:host(.item-textarea){align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted([slot=helper]),::slotted([slot=error]),.item-counter{padding-top:5px;font-size:12px;z-index:1}.item-counter{margin-left:auto;color:var(--ion-color-step-550, #737373);white-space:nowrap;padding-inline-start:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-counter{margin-left:unset;-webkit-margin-start:auto;margin-inline-start:auto}}@media (prefers-reduced-motion: reduce){.item-highlight,.item-inner-highlight{transition:none}}:host{--min-height:44px;--transition:background-color 200ms linear, opacity 200ms linear;--padding-start:20px;--inner-padding-end:10px;--inner-border-width:0px 0px 0.55px 0px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:#000;--background-focused:#000;--background-hover:currentColor;--background-activated-opacity:.12;--background-focused-opacity:.15;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--color:var(--ion-item-color, var(--ion-text-color, #000));--highlight-height:0px;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);--bottom-padding-start:0px;font-size:17px}:host(.ion-activated){--transition:none}:host(.ion-color.ion-focused) .item-native::after{background:#000;opacity:0.15}:host(.ion-color.ion-activated) .item-native::after{background:#000;opacity:0.12}:host(.item-interactive){--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-full){--border-width:0px 0px 0.55px 0px;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-inset){--inner-border-width:0px 0px 0.55px 0px;--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0px;--show-full-highlight:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0px;--show-inset-highlight:0}.item-highlight,.item-inner-highlight{transition:none}:host(.item-has-focus) .item-inner-highlight,:host(.item-has-focus) .item-highlight{border-top:none;border-right:none;border-left:none}::slotted([slot=start]){margin-left:0;margin-right:20px;margin-top:2px;margin-bottom:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:20px;margin-inline-end:20px}}::slotted([slot=end]){margin-left:10px;margin-right:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]){margin-top:7px;margin-bottom:7px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}::slotted(.button-small){--padding-top:0px;--padding-bottom:0px;--padding-start:.5em;--padding-end:.5em;height:24px;font-size:13px}::slotted(ion-avatar){width:36px;height:36px}::slotted(ion-thumbnail){width:56px;height:56px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){margin-left:0px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){margin-left:unset;-webkit-margin-start:0px;margin-inline-start:0px}}::slotted(ion-label){margin-left:0;margin-right:8px;margin-top:10px;margin-bottom:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px}}:host(.item-label-floating),:host(.item-label-stacked){--min-height:68px}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0px}:host(.item-label-fixed) ::slotted(ion-select),:host(.item-label-fixed) ::slotted(ion-datetime){--padding-start:0}";
846
-
847
- const itemMdCss = ":host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--show-full-highlight:0;--show-inset-highlight:0;--detail-icon-color:initial;--detail-icon-font-size:20px;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native,:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;box-sizing:border-box;z-index:1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-native{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;transition:var(--transition);z-index:-1}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--inner-padding-start);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow);overflow:inherit;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-inner{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--inner-padding-start);padding-inline-start:var(--inner-padding-start);-webkit-padding-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-inline-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end))}}.item-bottom{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--inner-padding-end);padding-top:0;padding-bottom:0;display:flex;justify-content:space-between}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-bottom{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--inner-padding-end);padding-inline-end:var(--inner-padding-end)}}.item-detail-icon{color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){flex:1}:host(.item-input){align-items:center}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{flex:1;flex-direction:column}.item-highlight,.item-inner-highlight{left:0;right:0;top:0;bottom:0;border-radius:inherit;position:absolute;width:100%;height:100%;transform:scaleX(0);transition:transform 200ms, border-bottom-width 200ms;z-index:2;box-sizing:border-box;pointer-events:none}:host(.item-interactive.item-has-focus) .item-native{caret-color:var(--highlight-background)}:host(.item-interactive.ion-focused),:host(.item-interactive.item-has-focus),:host(.item-interactive.ion-touched.ion-invalid){--full-highlight-height:calc(var(--highlight-height) * var(--show-full-highlight));--inset-highlight-height:calc(var(--highlight-height) * var(--show-inset-highlight))}:host(.item-interactive.ion-focused),:host(.item-interactive.item-has-focus){--highlight-background:var(--highlight-color-focused)}:host(.item-interactive.ion-valid){--highlight-background:var(--highlight-color-valid)}:host(.item-interactive.ion-invalid){--highlight-background:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=helper]){display:none}::slotted([slot=error]){display:none;color:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=error]){display:block}:host(:not(.item-label)) ::slotted(ion-select){--padding-start:0;max-width:none}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0;align-self:stretch;width:100%;max-width:100%}:host(:not(.item-label)) ::slotted(ion-datetime){--padding-start:0}:host(.item-label-stacked) ::slotted(ion-datetime),:host(.item-label-floating) ::slotted(ion-datetime){--padding-start:0;width:100%}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio),:host(.item-multiple-inputs) ::slotted(ion-select){position:relative}:host(.item-textarea){align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted([slot=helper]),::slotted([slot=error]),.item-counter{padding-top:5px;font-size:12px;z-index:1}.item-counter{margin-left:auto;color:var(--ion-color-step-550, #737373);white-space:nowrap;padding-inline-start:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-counter{margin-left:unset;-webkit-margin-start:auto;margin-inline-start:auto}}@media (prefers-reduced-motion: reduce){.item-highlight,.item-inner-highlight{transition:none}}:host{--min-height:48px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--color:var(--ion-item-color, var(--ion-text-color, #000));--transition:opacity 15ms linear, background-color 15ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0 0 1px 0;--highlight-height:1px;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);font-size:16px;font-weight:normal;text-transform:none}:host(.item-fill-outline){--highlight-height:2px}:host(.item-fill-none.item-interactive.ion-focus) .item-highlight,:host(.item-fill-none.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-highlight{transform:scaleX(1);border-width:0 0 var(--full-highlight-height) 0;border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-none.item-interactive.ion-focus) .item-native,:host(.item-fill-none.item-interactive.item-has-focus) .item-native,:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-native{border-bottom-color:var(--highlight-background)}:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight,:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight{transform:scaleX(1)}:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight,:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-highlight{border-width:var(--full-highlight-height);border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-native{border-color:var(--highlight-background)}:host(.item-fill-solid.item-interactive.ion-focus) .item-highlight,:host(.item-fill-solid.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-highlight{transform:scaleX(1);border-width:0 0 var(--full-highlight-height) 0;border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-solid.item-interactive.ion-focus) .item-native,:host(.item-fill-solid.item-interactive.item-has-focus) .item-native,:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-native{border-bottom-color:var(--highlight-background)}:host(.ion-color.ion-activated) .item-native::after{background:transparent}:host(.item-has-focus) .item-native{caret-color:var(--highlight-color-focused)}:host(.item-interactive){--border-width:0 0 1px 0;--inner-border-width:0;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-full){--border-width:0 0 1px 0;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-inset){--inner-border-width:0 0 1px 0;--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0;--show-full-highlight:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0;--show-inset-highlight:0}:host(.item-fill-outline) .item-highlight{--position-offset:calc(-1 * var(--border-width));left:var(--position-offset);top:var(--position-offset);width:calc(100% + 2 * var(--border-width));height:calc(100% + 2 * var(--border-width));transition:none}:host-context([dir=rtl]):host(.item-fill-outline) .item-highlight,:host-context([dir=rtl]).item-fill-outline .item-highlight{left:unset;right:unset;right:var(--position-offset)}:host(.item-fill-outline.ion-focused) .item-native,:host(.item-fill-outline.item-has-focus) .item-native{border-color:transparent}:host(.item-multi-line) ::slotted([slot=start]),:host(.item-multi-line) ::slotted([slot=end]){margin-top:16px;margin-bottom:16px;align-self:flex-start}::slotted([slot=start]){margin-right:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-right:unset;-webkit-margin-end:32px;margin-inline-end:32px}}::slotted([slot=end]){margin-left:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;-webkit-margin-start:32px;margin-inline-start:32px}}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);font-size:24px}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) ::slotted(ion-icon){color:var(--ion-color-contrast)}::slotted(ion-icon[slot]){margin-top:12px;margin-bottom:12px}::slotted(ion-icon[slot=start]){margin-right:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:32px;margin-inline-end:32px}}::slotted(ion-icon[slot=end]){margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}:host(.item-fill-solid) ::slotted(ion-icon[slot=start]),:host(.item-fill-outline) ::slotted(ion-icon[slot=start]){margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-fill-solid) ::slotted(ion-icon[slot=start]),:host(.item-fill-outline) ::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}::slotted(ion-note){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;align-self:flex-start;font-size:11px}::slotted(ion-note[slot]:not([slot=helper]):not([slot=error])){padding-left:0;padding-right:0;padding-top:18px;padding-bottom:10px}::slotted(ion-note[slot=start]){padding-right:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-note[slot=start]){padding-right:unset;-webkit-padding-end:16px;padding-inline-end:16px}}::slotted(ion-note[slot=end]){padding-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-note[slot=end]){padding-left:unset;-webkit-padding-start:16px;padding-inline-start:16px}}::slotted(ion-avatar){width:40px;height:40px}::slotted(ion-thumbnail){width:56px;height:56px}::slotted(ion-avatar),::slotted(ion-thumbnail){margin-top:8px;margin-bottom:8px}::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){margin-right:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){margin-right:unset;-webkit-margin-end:16px;margin-inline-end:16px}}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:10px;margin-bottom:10px}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}:host(.item-label-fixed) ::slotted(ion-select),:host(.item-label-fixed) ::slotted(ion-datetime){--padding-start:8px}:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){margin-left:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}::slotted(.button-small){--padding-top:0;--padding-bottom:0;--padding-start:.6em;--padding-end:.6em;height:25px;font-size:12px}:host(.item-label-floating),:host(.item-label-stacked){--min-height:55px}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0}:host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),:host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating){color:var(--ion-color-primary, #3880ff)}:host(.ion-color){--highlight-color-focused:var(--ion-color-contrast)}:host(.item-label-color){--highlight-color-focused:var(--ion-color-base)}:host(.item-fill-solid.ion-color),:host(.item-fill-outline.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.item-fill-solid){--background:var(--ion-color-step-50, #f2f2f2);--background-hover:var(--ion-color-step-100, #e6e6e6);--background-focused:var(--ion-color-step-150, #d9d9d9);--border-width:0 0 1px 0;--inner-border-width:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.item-fill-solid),:host-context([dir=rtl]).item-fill-solid{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host(.item-fill-solid) .item-native{--border-color:var(--ion-color-step-500, gray)}:host(.item-fill-solid.ion-focused) .item-native,:host(.item-fill-solid.item-has-focus) .item-native{--background:var(--background-focused)}:host(.item-fill-solid.item-shape-round){border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.item-fill-solid.item-shape-round),:host-context([dir=rtl]).item-fill-solid.item-shape-round{border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-right-radius:0;border-bottom-left-radius:0}@media (any-hover: hover){:host(.item-fill-solid:hover) .item-native{--background:var(--background-hover);--border-color:var(--ion-color-step-750, #404040)}}:host(.item-fill-outline){--ripple-color:transparent;--background-focused:transparent;--background-hover:transparent;--border-color:var(--ion-color-step-500, gray);--border-width:1px;border:none;overflow:visible}:host(.item-fill-outline) .item-native{--native-padding-left:16px;border-radius:4px}:host(.item-fill-outline.item-shape-round) .item-native{--inner-padding-start:16px;border-radius:28px}:host(.item-fill-outline.item-shape-round) .item-bottom{padding-left:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-fill-outline.item-shape-round) .item-bottom{padding-left:unset;-webkit-padding-start:32px;padding-inline-start:32px}}:host(.item-fill-outline.item-label-floating.ion-focused) .item-native ::slotted(ion-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.ion-focused) .item-native ::slotted(ion-textarea:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-textarea:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-textarea:not(:first-child)){transform:translateY(-14px)}@media (any-hover: hover){:host(.item-fill-outline:hover) .item-native{--border-color:var(--ion-color-step-750, #404040)}}.item-counter{letter-spacing:0.0333333333em}";
848
-
849
- const Item = class {
850
- constructor(hostRef) {
851
- index.registerInstance(this, hostRef);
852
- this.labelColorStyles = {};
853
- this.itemStyles = new Map();
854
- this.multipleInputs = false;
855
- this.focusable = true;
856
- /**
857
- * If `true`, a button tag will be rendered and the item will be tappable.
858
- */
859
- this.button = false;
860
- /**
861
- * The icon to use when `detail` is set to `true`.
862
- */
863
- this.detailIcon = index$1.chevronForward;
864
- /**
865
- * If `true`, the user cannot interact with the item.
866
- */
867
- this.disabled = false;
868
- /**
869
- * If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.
870
- */
871
- this.counter = false;
872
- /**
873
- * When using a router, it specifies the transition direction when navigating to
874
- * another page using `href`.
875
- */
876
- this.routerDirection = 'forward';
877
- /**
878
- * The type of the button. Only used when an `onclick` or `button` property is present.
879
- */
880
- this.type = 'button';
881
- }
882
- counterFormatterChanged() {
883
- this.updateCounterOutput(this.getFirstInput());
884
- }
885
- handleIonChange(ev) {
886
- if (this.counter && ev.target === this.getFirstInput()) {
887
- this.updateCounterOutput(ev.target);
888
- }
889
- }
890
- labelColorChanged(ev) {
891
- const { color } = this;
892
- // There will be a conflict with item color if
893
- // we apply the label color to item, so we ignore
894
- // the label color if the user sets a color on item
895
- if (color === undefined) {
896
- this.labelColorStyles = ev.detail;
897
- }
898
- }
899
- itemStyle(ev) {
900
- ev.stopPropagation();
901
- const tagName = ev.target.tagName;
902
- const updatedStyles = ev.detail;
903
- const newStyles = {};
904
- const childStyles = this.itemStyles.get(tagName) || {};
905
- let hasStyleChange = false;
906
- Object.keys(updatedStyles).forEach((key) => {
907
- if (updatedStyles[key]) {
908
- const itemKey = `item-${key}`;
909
- if (!childStyles[itemKey]) {
910
- hasStyleChange = true;
911
- }
912
- newStyles[itemKey] = true;
913
- }
914
- });
915
- if (!hasStyleChange && Object.keys(newStyles).length !== Object.keys(childStyles).length) {
916
- hasStyleChange = true;
917
- }
918
- if (hasStyleChange) {
919
- this.itemStyles.set(tagName, newStyles);
920
- index.forceUpdate(this);
921
- }
922
- }
923
- connectedCallback() {
924
- if (this.counter) {
925
- this.updateCounterOutput(this.getFirstInput());
926
- }
927
- this.hasStartEl();
928
- }
929
- componentDidUpdate() {
930
- // Do not use @Listen here to avoid making all items
931
- // appear as clickable to screen readers
932
- // https://github.com/ionic-team/ionic-framework/issues/22011
933
- const input = this.getFirstInput();
934
- if (input && !this.clickListener) {
935
- this.clickListener = (ev) => this.delegateFocus(ev, input);
936
- this.el.addEventListener('click', this.clickListener);
937
- }
938
- }
939
- disconnectedCallback() {
940
- const input = this.getFirstInput();
941
- if (input && this.clickListener) {
942
- this.el.removeEventListener('click', this.clickListener);
943
- this.clickListener = undefined;
944
- }
945
- }
946
- componentDidLoad() {
947
- helpers.raf(() => {
948
- this.setMultipleInputs();
949
- this.focusable = this.isFocusable();
950
- });
951
- }
952
- // If the item contains multiple clickable elements and/or inputs, then the item
953
- // should not have a clickable input cover over the entire item to prevent
954
- // interfering with their individual click events
955
- setMultipleInputs() {
956
- // The following elements have a clickable cover that is relative to the entire item
957
- const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
958
- // The following elements can accept focus alongside the previous elements
959
- // therefore if these elements are also a child of item, we don't want the
960
- // input cover on top of those interfering with their clicks
961
- const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
962
- // The following elements should also stay clickable when an input with cover is present
963
- const clickables = this.el.querySelectorAll('ion-anchor, ion-button, a, button');
964
- // Check for multiple inputs to change the position of the input cover to relative
965
- // for all of the covered inputs above
966
- this.multipleInputs =
967
- covers.length + inputs.length > 1 ||
968
- covers.length + clickables.length > 1 ||
969
- (covers.length > 0 && this.isClickable());
970
- }
971
- // If the item contains an input including a checkbox, datetime, select, or radio
972
- // then the item will have a clickable input cover that covers the item
973
- // that should get the hover, focused and activated states UNLESS it has multiple
974
- // inputs, then those need to individually get each click
975
- hasCover() {
976
- const inputs = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
977
- return inputs.length === 1 && !this.multipleInputs;
978
- }
979
- // If the item has an href or button property it will render a native
980
- // anchor or button that is clickable
981
- isClickable() {
982
- return this.href !== undefined || this.button;
983
- }
984
- canActivate() {
985
- return this.isClickable() || this.hasCover();
986
- }
987
- isFocusable() {
988
- const focusableChild = this.el.querySelector('.ion-focusable');
989
- return this.canActivate() || focusableChild !== null;
990
- }
991
- getFirstInput() {
992
- const inputs = this.el.querySelectorAll('ion-input, ion-textarea');
993
- return inputs[0];
994
- }
995
- // This is needed for WebKit due to a delegatesFocus bug where
996
- // clicking on the left padding of an item is not focusing the input
997
- // but is opening the keyboard. It will no longer be needed with
998
- // iOS 14.
999
- delegateFocus(ev, input) {
1000
- const clickedItem = ev.target.tagName === 'ION-ITEM';
1001
- let firstActive = false;
1002
- // If the first input is the same as the active element we need
1003
- // to focus the first input again, but if the active element
1004
- // is another input inside of the item we shouldn't switch focus
1005
- if (document.activeElement) {
1006
- firstActive = input.querySelector('input, textarea') === document.activeElement;
1007
- }
1008
- // Only focus the first input if we clicked on an ion-item
1009
- // and the first input exists
1010
- if (clickedItem && (firstActive || !this.multipleInputs)) {
1011
- input.fireFocusEvents = false;
1012
- input.setBlur();
1013
- input.setFocus();
1014
- helpers.raf(() => {
1015
- input.fireFocusEvents = true;
1016
- });
1017
- }
1018
- }
1019
- updateCounterOutput(inputEl) {
1020
- var _a, _b;
1021
- const { counter, counterFormatter, defaultCounterFormatter } = this;
1022
- if (counter && !this.multipleInputs && (inputEl === null || inputEl === void 0 ? void 0 : inputEl.maxlength) !== undefined) {
1023
- const length = (_b = (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
1024
- if (counterFormatter === undefined) {
1025
- this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
1026
- }
1027
- else {
1028
- try {
1029
- this.counterString = counterFormatter(length, inputEl.maxlength);
1030
- }
1031
- catch (e) {
1032
- index$2.printIonError('Exception in provided `counterFormatter`.', e);
1033
- // Fallback to the default counter formatter when an exception happens
1034
- this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
1035
- }
1036
- }
1037
- }
1038
- }
1039
- defaultCounterFormatter(length, maxlength) {
1040
- return `${length} / ${maxlength}`;
1041
- }
1042
- hasStartEl() {
1043
- const startEl = this.el.querySelector('[slot="start"]');
1044
- if (startEl !== null) {
1045
- this.el.classList.add('item-has-start-slot');
1046
- }
1047
- }
1048
- render() {
1049
- const { counterString, detail, detailIcon, download, fill, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection, } = this;
1050
- const childStyles = {};
1051
- const mode = ionicGlobal.getIonMode(this);
1052
- const clickable = this.isClickable();
1053
- const canActivate = this.canActivate();
1054
- const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
1055
- const attrs = TagType === 'button'
1056
- ? { type: this.type }
1057
- : {
1058
- download,
1059
- href,
1060
- rel,
1061
- target,
1062
- };
1063
- // Only set onClick if the item is clickable to prevent screen
1064
- // readers from reading all items as clickable
1065
- const clickFn = clickable
1066
- ? {
1067
- onClick: (ev) => {
1068
- theme.openURL(href, ev, routerDirection, routerAnimation);
1069
- },
1070
- }
1071
- : {};
1072
- const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
1073
- this.itemStyles.forEach((value) => {
1074
- Object.assign(childStyles, value);
1075
- });
1076
- const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null;
1077
- const fillValue = fill || 'none';
1078
- const inList = theme.hostContext('ion-list', this.el);
1079
- return (index.h(index.Host, { "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), theme.createColorClasses(this.color, {
1080
- item: true,
1081
- [mode]: true,
1082
- [`item-lines-${lines}`]: lines !== undefined,
1083
- [`item-fill-${fillValue}`]: true,
1084
- [`item-shape-${shape}`]: shape !== undefined,
1085
- 'item-disabled': disabled,
1086
- 'in-list': inList,
1087
- 'item-multiple-inputs': this.multipleInputs,
1088
- 'ion-activatable': canActivate,
1089
- 'ion-focusable': this.focusable,
1090
- 'item-rtl': document.dir === 'rtl',
1091
- })), role: inList ? 'listitem' : null }, index.h(TagType, Object.assign({}, attrs, { class: "item-native", part: "native", disabled: disabled }, clickFn), index.h("slot", { name: "start" }), index.h("div", { class: "item-inner" }, index.h("div", { class: "input-wrapper" }, index.h("slot", null)), index.h("slot", { name: "end" }), showDetail && (index.h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === index$1.chevronForward })), index.h("div", { class: "item-inner-highlight" })), canActivate && mode === 'md' && index.h("ion-ripple-effect", null), index.h("div", { class: "item-highlight" })), index.h("div", { class: "item-bottom" }, index.h("slot", { name: "error" }), index.h("slot", { name: "helper" }), counterString && index.h("ion-note", { class: "item-counter" }, counterString))));
1092
- }
1093
- static get delegatesFocus() { return true; }
1094
- get el() { return index.getElement(this); }
1095
- static get watchers() { return {
1096
- "counterFormatter": ["counterFormatterChanged"]
1097
- }; }
1098
- };
1099
- Item.style = {
1100
- ios: itemIosCss,
1101
- md: itemMdCss
1102
- };
1103
-
1104
- const labelIosCss = ".item.sc-ion-label-ios-h,.item .sc-ion-label-ios-h{--color:initial;display:block;color:var(--color);font-family:var(--ion-font-family, inherit);font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}.ion-color.sc-ion-label-ios-h{color:var(--ion-color-base)}.ion-text-wrap.sc-ion-label-ios-h,[text-wrap].sc-ion-label-ios-h{white-space:normal}.item-interactive-disabled.sc-ion-label-ios-h:not(.item-multiple-inputs),.item-interactive-disabled:not(.item-multiple-inputs) .sc-ion-label-ios-h{cursor:default;opacity:0.3;pointer-events:none}.item-input.sc-ion-label-ios-h,.item-input .sc-ion-label-ios-h{flex:initial;max-width:200px;pointer-events:none}.item-textarea.sc-ion-label-ios-h,.item-textarea .sc-ion-label-ios-h{align-self:baseline}.label-fixed.sc-ion-label-ios-h{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.label-stacked.sc-ion-label-ios-h,.label-floating.sc-ion-label-ios-h{margin-bottom:0;align-self:stretch;width:auto;max-width:100%}.label-no-animate.label-floating.sc-ion-label-ios-h{transition:none}.sc-ion-label-ios-s h1,.sc-ion-label-ios-s h2,.sc-ion-label-ios-s h3,.sc-ion-label-ios-s h4,.sc-ion-label-ios-s h5,.sc-ion-label-ios-s h6{text-overflow:inherit;overflow:inherit}.ion-text-wrap.sc-ion-label-ios-h,[text-wrap].sc-ion-label-ios-h{font-size:14px;line-height:1.5}.label-stacked.sc-ion-label-ios-h{margin-bottom:4px;font-size:14px}.label-floating.sc-ion-label-ios-h{margin-bottom:0;transform:translate(0, 29px);transform-origin:left top;transition:transform 150ms ease-in-out}[dir=rtl].sc-ion-label-ios-h -no-combinator.label-floating.sc-ion-label-ios-h,[dir=rtl] .sc-ion-label-ios-h -no-combinator.label-floating.sc-ion-label-ios-h,[dir=rtl].label-floating.sc-ion-label-ios-h,[dir=rtl] .label-floating.sc-ion-label-ios-h{transform-origin:right top}.item-textarea.label-floating.sc-ion-label-ios-h,.item-textarea .label-floating.sc-ion-label-ios-h{transform:translate(0, 28px)}.item-has-focus.label-floating.sc-ion-label-ios-h,.item-has-focus .label-floating.sc-ion-label-ios-h,.item-has-placeholder.sc-ion-label-ios-h:not(.item-input).label-floating,.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-ios-h,.item-has-value.label-floating.sc-ion-label-ios-h,.item-has-value .label-floating.sc-ion-label-ios-h{transform:scale(0.82)}.sc-ion-label-ios-s h1{margin-left:0;margin-right:0;margin-top:3px;margin-bottom:2px;font-size:22px;font-weight:normal}.sc-ion-label-ios-s h2{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:17px;font-weight:normal}.sc-ion-label-ios-s h3,.sc-ion-label-ios-s h4,.sc-ion-label-ios-s h5,.sc-ion-label-ios-s h6{margin-left:0;margin-right:0;margin-top:0;margin-bottom:3px;font-size:14px;font-weight:normal;line-height:normal}.sc-ion-label-ios-s p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;line-height:normal;text-overflow:inherit;overflow:inherit}.sc-ion-label-ios-s>p{color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4)}.sc-ion-label-ios-h.in-item-color.sc-ion-label-ios-s>p{color:inherit}.sc-ion-label-ios-s h2:last-child,.sc-ion-label-ios-s h3:last-child,.sc-ion-label-ios-s h4:last-child,.sc-ion-label-ios-s h5:last-child,.sc-ion-label-ios-s h6:last-child,.sc-ion-label-ios-s p:last-child{margin-bottom:0}";
1105
-
1106
- const labelMdCss = ".item.sc-ion-label-md-h,.item .sc-ion-label-md-h{--color:initial;display:block;color:var(--color);font-family:var(--ion-font-family, inherit);font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}.ion-color.sc-ion-label-md-h{color:var(--ion-color-base)}.ion-text-wrap.sc-ion-label-md-h,[text-wrap].sc-ion-label-md-h{white-space:normal}.item-interactive-disabled.sc-ion-label-md-h:not(.item-multiple-inputs),.item-interactive-disabled:not(.item-multiple-inputs) .sc-ion-label-md-h{cursor:default;opacity:0.3;pointer-events:none}.item-input.sc-ion-label-md-h,.item-input .sc-ion-label-md-h{flex:initial;max-width:200px;pointer-events:none}.item-textarea.sc-ion-label-md-h,.item-textarea .sc-ion-label-md-h{align-self:baseline}.label-fixed.sc-ion-label-md-h{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.label-stacked.sc-ion-label-md-h,.label-floating.sc-ion-label-md-h{margin-bottom:0;align-self:stretch;width:auto;max-width:100%}.label-no-animate.label-floating.sc-ion-label-md-h{transition:none}.sc-ion-label-md-s h1,.sc-ion-label-md-s h2,.sc-ion-label-md-s h3,.sc-ion-label-md-s h4,.sc-ion-label-md-s h5,.sc-ion-label-md-s h6{text-overflow:inherit;overflow:inherit}.ion-text-wrap.sc-ion-label-md-h,[text-wrap].sc-ion-label-md-h{line-height:1.5}.label-stacked.sc-ion-label-md-h,.label-floating.sc-ion-label-md-h{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;transform-origin:top left}.label-stacked.label-rtl.sc-ion-label-md-h,.label-floating.label-rtl.sc-ion-label-md-h{transform-origin:top right}.label-stacked.sc-ion-label-md-h{transform:translateY(50%) scale(0.75);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1)}.label-floating.sc-ion-label-md-h{transform:translateY(96%);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.ion-focused.label-floating.sc-ion-label-md-h,.ion-focused .label-floating.sc-ion-label-md-h,.item-has-focus.label-floating.sc-ion-label-md-h,.item-has-focus .label-floating.sc-ion-label-md-h,.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating,.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h,.item-has-value.label-floating.sc-ion-label-md-h,.item-has-value .label-floating.sc-ion-label-md-h{transform:translateY(50%) scale(0.75)}.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h{transform:translateY(-6px) scale(0.75);position:relative;max-width:min-content;background-color:var(--ion-item-background, var(--ion-background-color, #fff));overflow:visible;z-index:3}.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h::before,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h::before,.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h::after,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating::before,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating::after,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h::after{position:absolute;width:4px;height:100%;background-color:var(--ion-item-background, var(--ion-background-color, #fff));content:\"\"}.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h::before,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating::before,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h::before{left:calc(-1 * 4px)}.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h::after,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating::after,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h::after{right:calc(-1 * 4px)}.item-fill-outline.ion-focused.item-has-start-slot.label-floating.sc-ion-label-md-h,.item-fill-outline.ion-focused.item-has-start-slot .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-focus.item-has-start-slot.label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-focus.item-has-start-slot .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).item-has-start-slot.label-floating,.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-value.item-has-start-slot.label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-value.item-has-start-slot .label-floating.sc-ion-label-md-h{transform:translateX(-32px) translateY(-6px) scale(0.75)}.item-fill-outline.ion-focused.item-has-start-slot.label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.ion-focused.item-has-start-slot .label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-focus.item-has-start-slot.label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-focus.item-has-start-slot .label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).item-has-start-slot.label-floating.label-rtl,.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot .label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-value.item-has-start-slot.label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-value.item-has-start-slot .label-floating.label-rtl.sc-ion-label-md-h{transform:translateX(calc(-1 * -32px)) translateY(-6px) scale(0.75)}.ion-focused.label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused .label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused.label-floating.sc-ion-label-md-h:not(.ion-color),.ion-focused .label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus.label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--ion-color-primary, #3880ff)}.ion-focused.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.ion-focused.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--ion-color-contrast)}.item-fill-solid.ion-focused.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.ion-focused.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.ion-focused.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.ion-focused.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.ion-focused.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.ion-focused.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.ion-focused.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.ion-focused.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.item-has-focus.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.item-has-focus.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.item-has-focus.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.item-has-focus.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.item-has-focus.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.item-has-focus.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.item-has-focus.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.item-has-focus.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--ion-color-base)}.ion-invalid.ion-touched.label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-invalid.ion-touched .label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-invalid.ion-touched.label-floating.sc-ion-label-md-h:not(.ion-color),.ion-invalid.ion-touched .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--highlight-color-invalid)}.sc-ion-label-md-s h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.sc-ion-label-md-s h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.sc-ion-label-md-s h3,.sc-ion-label-md-s h4,.sc-ion-label-md-s h5,.sc-ion-label-md-s h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal;line-height:normal}.sc-ion-label-md-s p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;line-height:20px;text-overflow:inherit;overflow:inherit}.sc-ion-label-md-s>p{color:var(--ion-color-step-600, #666666)}.sc-ion-label-md-h.in-item-color.sc-ion-label-md-s>p{color:inherit}";
1107
-
1108
- const Label = class {
1109
- constructor(hostRef) {
1110
- index.registerInstance(this, hostRef);
1111
- this.ionColor = index.createEvent(this, "ionColor", 7);
1112
- this.ionStyle = index.createEvent(this, "ionStyle", 7);
1113
- this.inRange = false;
1114
- this.noAnimate = false;
1115
- }
1116
- componentWillLoad() {
1117
- this.inRange = !!this.el.closest('ion-range');
1118
- this.noAnimate = this.position === 'floating';
1119
- this.emitStyle();
1120
- this.emitColor();
1121
- }
1122
- componentDidLoad() {
1123
- if (this.noAnimate) {
1124
- setTimeout(() => {
1125
- this.noAnimate = false;
1126
- }, 1000);
1127
- }
1128
- }
1129
- colorChanged() {
1130
- this.emitColor();
1131
- }
1132
- positionChanged() {
1133
- this.emitStyle();
1134
- }
1135
- emitColor() {
1136
- const { color } = this;
1137
- this.ionColor.emit({
1138
- 'item-label-color': color !== undefined,
1139
- [`ion-color-${color}`]: color !== undefined,
1140
- });
1141
- }
1142
- emitStyle() {
1143
- const { inRange, position } = this;
1144
- // If the label is inside of a range we don't want
1145
- // to override the classes added by the label that
1146
- // is a direct child of the item
1147
- if (!inRange) {
1148
- this.ionStyle.emit({
1149
- label: true,
1150
- [`label-${position}`]: position !== undefined,
1151
- });
1152
- }
1153
- }
1154
- render() {
1155
- const position = this.position;
1156
- const mode = ionicGlobal.getIonMode(this);
1157
- return (index.h(index.Host, { class: theme.createColorClasses(this.color, {
1158
- [mode]: true,
1159
- 'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
1160
- [`label-${position}`]: position !== undefined,
1161
- [`label-no-animate`]: this.noAnimate,
1162
- 'label-rtl': document.dir === 'rtl',
1163
- }) }));
1164
- }
1165
- get el() { return index.getElement(this); }
1166
- static get watchers() { return {
1167
- "color": ["colorChanged"],
1168
- "position": ["positionChanged"]
1169
- }; }
1170
- };
1171
- Label.style = {
1172
- ios: labelIosCss,
1173
- md: labelMdCss
1174
- };
1175
-
1176
- const listIosCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{transform:translateZ(0);overflow:hidden}.list-ios{background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-ios.list-inset{margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px;border-radius:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.list-ios.list-inset{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}.list-ios.list-inset ion-item{--border-width:0 0 1px 0;--inner-border-width:0}.list-ios.list-inset ion-item:last-child{--border-width:0;--inner-border-width:0}.list-ios.list-inset+ion-list.list-inset{margin-top:0}.list-ios-lines-none .item{--border-width:0;--inner-border-width:0}.list-ios-lines-full .item,.list-ios .item-lines-full{--border-width:0 0 0.55px 0}.list-ios-lines-full .item{--inner-border-width:0}.list-ios-lines-inset .item,.list-ios .item-lines-inset{--inner-border-width:0 0 0.55px 0}.list-ios .item-lines-inset{--border-width:0}.list-ios .item-lines-full{--inner-border-width:0}.list-ios .item-lines-none{--border-width:0;--inner-border-width:0}ion-card .list-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
1177
-
1178
- const listMdCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{transform:translateZ(0);overflow:hidden}.list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-md>.input:last-child::after{left:0}[dir=rtl] .list-md>.input:last-child::after,:host-context([dir=rtl]) .list-md>.input:last-child::after{left:unset;right:unset;right:0}.list-md.list-inset{margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px;border-radius:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.list-md.list-inset{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}.list-md.list-inset ion-item:first-child{--border-radius:2px 2px 0 0;--border-width:0 0 1px 0}.list-md.list-inset ion-item:last-child{--border-radius:0 0 2px, 2px;--border-width:0}.list-md.list-inset .item-interactive{--padding-start:0;--padding-end:0}.list-md.list-inset+ion-list.list-inset{margin-top:0}.list-md-lines-none .item{--border-width:0;--inner-border-width:0}.list-md-lines-full .item,.list-md .item-lines-full{--border-width:0 0 1px 0}.list-md-lines-full .item{--inner-border-width:0}.list-md-lines-inset .item,.list-md .item-lines-inset{--inner-border-width:0 0 1px 0}.list-md .item-lines-inset{--border-width:0}.list-md .item-lines-full{--inner-border-width:0}.list-md .item-lines-none{--border-width:0;--inner-border-width:0}ion-card .list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
1179
-
1180
- const List = class {
1181
- constructor(hostRef) {
1182
- index.registerInstance(this, hostRef);
1183
- /**
1184
- * If `true`, the list will have margin around it and rounded corners.
1185
- */
1186
- this.inset = false;
1187
- }
1188
- /**
1189
- * If `ion-item-sliding` are used inside the list, this method closes
1190
- * any open sliding item.
1191
- *
1192
- * Returns `true` if an actual `ion-item-sliding` is closed.
1193
- */
1194
- async closeSlidingItems() {
1195
- const item = this.el.querySelector('ion-item-sliding');
1196
- if (item === null || item === void 0 ? void 0 : item.closeOpened) {
1197
- return item.closeOpened();
1198
- }
1199
- return false;
1200
- }
1201
- render() {
1202
- const mode = ionicGlobal.getIonMode(this);
1203
- const { lines, inset } = this;
1204
- return (index.h(index.Host, { role: "list", class: {
1205
- [mode]: true,
1206
- // Used internally for styling
1207
- [`list-${mode}`]: true,
1208
- 'list-inset': inset,
1209
- [`list-lines-${lines}`]: lines !== undefined,
1210
- [`list-${mode}-lines-${lines}`]: lines !== undefined,
1211
- } }));
1212
- }
1213
- get el() { return index.getElement(this); }
1214
- };
1215
- List.style = {
1216
- ios: listIosCss,
1217
- md: listMdCss
1218
- };
1219
-
1220
- const noteIosCss = ":host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-350, #a6a6a6)}";
1221
-
1222
- const noteMdCss = ":host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, #666666);font-size:14px}";
1223
-
1224
- const Note = class {
1225
- constructor(hostRef) {
1226
- index.registerInstance(this, hostRef);
1227
- }
1228
- render() {
1229
- const mode = ionicGlobal.getIonMode(this);
1230
- return (index.h(index.Host, { class: theme.createColorClasses(this.color, {
1231
- [mode]: true,
1232
- }) }, index.h("slot", null)));
1233
- }
1234
- };
1235
- Note.style = {
1236
- ios: noteIosCss,
1237
- md: noteMdCss
1238
- };
1239
-
1240
- const rippleEffectCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{transform:translate(var(--translate-end)) scale(var(--final-scale, 1));animation:150ms fadeOutAnimation forwards}@keyframes rippleAnimation{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(1)}to{transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes fadeInAnimation{from{animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeOutAnimation{from{animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
1241
-
1242
- const RippleEffect = class {
1243
- constructor(hostRef) {
1244
- index.registerInstance(this, hostRef);
1245
- /**
1246
- * Sets the type of ripple-effect:
1247
- *
1248
- * - `bounded`: the ripple effect expands from the user's click position
1249
- * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
1250
- *
1251
- * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
1252
- * while surfaces for unbounded ripples should have it set to visible.
1253
- */
1254
- this.type = 'bounded';
1255
- }
1256
- /**
1257
- * Adds the ripple effect to the parent element.
1258
- *
1259
- * @param x The horizontal coordinate of where the ripple should start.
1260
- * @param y The vertical coordinate of where the ripple should start.
1261
- */
1262
- async addRipple(x, y) {
1263
- return new Promise((resolve) => {
1264
- index.readTask(() => {
1265
- const rect = this.el.getBoundingClientRect();
1266
- const width = rect.width;
1267
- const height = rect.height;
1268
- const hypotenuse = Math.sqrt(width * width + height * height);
1269
- const maxDim = Math.max(height, width);
1270
- const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
1271
- const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
1272
- const finalScale = maxRadius / initialSize;
1273
- let posX = x - rect.left;
1274
- let posY = y - rect.top;
1275
- if (this.unbounded) {
1276
- posX = width * 0.5;
1277
- posY = height * 0.5;
1278
- }
1279
- const styleX = posX - initialSize * 0.5;
1280
- const styleY = posY - initialSize * 0.5;
1281
- const moveX = width * 0.5 - posX;
1282
- const moveY = height * 0.5 - posY;
1283
- index.writeTask(() => {
1284
- const div = document.createElement('div');
1285
- div.classList.add('ripple-effect');
1286
- const style = div.style;
1287
- style.top = styleY + 'px';
1288
- style.left = styleX + 'px';
1289
- style.width = style.height = initialSize + 'px';
1290
- style.setProperty('--final-scale', `${finalScale}`);
1291
- style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
1292
- const container = this.el.shadowRoot || this.el;
1293
- container.appendChild(div);
1294
- setTimeout(() => {
1295
- resolve(() => {
1296
- removeRipple(div);
1297
- });
1298
- }, 225 + 100);
1299
- });
1300
- });
1301
- });
1302
- }
1303
- get unbounded() {
1304
- return this.type === 'unbounded';
1305
- }
1306
- render() {
1307
- const mode = ionicGlobal.getIonMode(this);
1308
- return (index.h(index.Host, { role: "presentation", class: {
1309
- [mode]: true,
1310
- unbounded: this.unbounded,
1311
- } }));
1312
- }
1313
- get el() { return index.getElement(this); }
1314
- };
1315
- const removeRipple = (ripple) => {
1316
- ripple.classList.add('fade-out');
1317
- setTimeout(() => {
1318
- ripple.remove();
1319
- }, 200);
1320
- };
1321
- const PADDING = 10;
1322
- const INITIAL_ORIGIN_SCALE = 0.5;
1323
- RippleEffect.style = rippleEffectCss;
1324
-
1325
- const spinnerCss = ":host{display:inline-block;position:relative;width:28px;height:28px;color:var(--color);user-select:none}:host(.ion-color){color:var(--ion-color-base)}svg{transform-origin:center;position:absolute;top:0;left:0;width:100%;height:100%;transform:translateZ(0)}[dir=rtl] svg,:host-context([dir=rtl]) svg{transform-origin:calc(100% - center)}:host(.spinner-lines) line,:host(.spinner-lines-small) line{stroke-width:7px}:host(.spinner-lines-sharp) line,:host(.spinner-lines-sharp-small) line{stroke-width:4px}:host(.spinner-lines) line,:host(.spinner-lines-small) line,:host(.spinner-lines-sharp) line,:host(.spinner-lines-sharp-small) line{stroke-linecap:round;stroke:currentColor}:host(.spinner-lines) svg,:host(.spinner-lines-small) svg,:host(.spinner-lines-sharp) svg,:host(.spinner-lines-sharp-small) svg{animation:spinner-fade-out 1s linear infinite}:host(.spinner-bubbles) svg{animation:spinner-scale-out 1s linear infinite;fill:currentColor}:host(.spinner-circles) svg{animation:spinner-fade-out 1s linear infinite;fill:currentColor}:host(.spinner-crescent) circle{fill:transparent;stroke-width:4px;stroke-dasharray:128px;stroke-dashoffset:82px;stroke:currentColor}:host(.spinner-crescent) svg{animation:spinner-rotate 1s linear infinite}:host(.spinner-dots) circle{stroke-width:0;fill:currentColor}:host(.spinner-dots) svg{animation:spinner-dots 1s linear infinite}:host(.spinner-circular) svg{animation:spinner-circular linear infinite}:host(.spinner-circular) circle{animation:spinner-circular-inner ease-in-out infinite;stroke:currentColor;stroke-dasharray:80px, 200px;stroke-dashoffset:0px;stroke-width:5.6;fill:none}:host(.spinner-paused),:host(.spinner-paused) svg,:host(.spinner-paused) circle{animation-play-state:paused}@keyframes spinner-fade-out{0%{opacity:1}100%{opacity:0}}@keyframes spinner-scale-out{0%{transform:scale(1, 1)}100%{transform:scale(0, 0)}}@keyframes spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spinner-dots{0%{transform:scale(1, 1);opacity:0.9}50%{transform:scale(0.4, 0.4);opacity:0.3}100%{transform:scale(1, 1);opacity:0.9}}@keyframes spinner-circular{100%{transform:rotate(360deg)}}@keyframes spinner-circular-inner{0%{stroke-dasharray:1px, 200px;stroke-dashoffset:0px}50%{stroke-dasharray:100px, 200px;stroke-dashoffset:-15px}100%{stroke-dasharray:100px, 200px;stroke-dashoffset:-125px}}";
1326
-
1327
- const Spinner = class {
1328
- constructor(hostRef) {
1329
- index.registerInstance(this, hostRef);
1330
- /**
1331
- * If `true`, the spinner's animation will be paused.
1332
- */
1333
- this.paused = false;
1334
- }
1335
- getName() {
1336
- const spinnerName = this.name || ionicGlobal.config.get('spinner');
1337
- const mode = ionicGlobal.getIonMode(this);
1338
- if (spinnerName) {
1339
- return spinnerName;
1340
- }
1341
- return mode === 'ios' ? 'lines' : 'circular';
1342
- }
1343
- render() {
1344
- const self = this;
1345
- const mode = ionicGlobal.getIonMode(self);
1346
- const spinnerName = self.getName();
1347
- const spinner = spinnerConfigs.SPINNERS[spinnerName] || spinnerConfigs.SPINNERS['lines'];
1348
- const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
1349
- const svgs = [];
1350
- if (spinner.circles !== undefined) {
1351
- for (let i = 0; i < spinner.circles; i++) {
1352
- svgs.push(buildCircle(spinner, duration, i, spinner.circles));
1353
- }
1354
- }
1355
- else if (spinner.lines !== undefined) {
1356
- for (let i = 0; i < spinner.lines; i++) {
1357
- svgs.push(buildLine(spinner, duration, i, spinner.lines));
1358
- }
1359
- }
1360
- return (index.h(index.Host, { class: theme.createColorClasses(self.color, {
1361
- [mode]: true,
1362
- [`spinner-${spinnerName}`]: true,
1363
- 'spinner-paused': self.paused || ionicGlobal.config.getBoolean('_testing'),
1364
- }), role: "progressbar", style: spinner.elmDuration ? { animationDuration: duration + 'ms' } : {} }, svgs));
1365
- }
1366
- };
1367
- const buildCircle = (spinner, duration, index$1, total) => {
1368
- const data = spinner.fn(duration, index$1, total);
1369
- data.style['animation-duration'] = duration + 'ms';
1370
- return (index.h("svg", { viewBox: data.viewBox || '0 0 64 64', style: data.style }, index.h("circle", { transform: data.transform || 'translate(32,32)', cx: data.cx, cy: data.cy, r: data.r, style: spinner.elmDuration ? { animationDuration: duration + 'ms' } : {} })));
1371
- };
1372
- const buildLine = (spinner, duration, index$1, total) => {
1373
- const data = spinner.fn(duration, index$1, total);
1374
- data.style['animation-duration'] = duration + 'ms';
1375
- return (index.h("svg", { viewBox: data.viewBox || '0 0 64 64', style: data.style }, index.h("line", { transform: "translate(32,32)", y1: data.y1, y2: data.y2 })));
1376
- };
1377
- Spinner.style = spinnerCss;
1378
-
1379
- const textareaIosCss = ".sc-ion-textarea-ios-h{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:0.5;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--border-radius:0;display:block;position:relative;flex:1;width:100%;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);white-space:pre-wrap;z-index:2;box-sizing:border-box}.ion-color.sc-ion-textarea-ios-h{background:initial}.ion-color.sc-ion-textarea-ios-h{color:var(--ion-color-base)}ion-item.sc-ion-textarea-ios-h,ion-item .sc-ion-textarea-ios-h{align-self:baseline}ion-item.sc-ion-textarea-ios-h:not(.item-label),ion-item:not(.item-label) .sc-ion-textarea-ios-h{--padding-start:0}.textarea-wrapper.sc-ion-textarea-ios{display:grid;min-width:inherit;max-width:inherit;min-height:inherit;max-height:inherit}.textarea-wrapper.sc-ion-textarea-ios::after{white-space:pre-wrap;content:attr(data-replicated-value) \" \";visibility:hidden}.native-textarea.sc-ion-textarea-ios,.textarea-wrapper.sc-ion-textarea-ios::after{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;grid-area:1/1/2/2}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.native-textarea.sc-ion-textarea-ios,.textarea-wrapper.sc-ion-textarea-ios::after{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-textarea.sc-ion-textarea-ios{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;box-sizing:border-box;resize:none;appearance:none;overflow:hidden}.native-textarea.sc-ion-textarea-ios::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea[disabled].sc-ion-textarea-ios{opacity:0.4}.cloned-input.sc-ion-textarea-ios{left:0;top:0;position:absolute;pointer-events:none}[dir=rtl].sc-ion-textarea-ios .cloned-input.sc-ion-textarea-ios,[dir=rtl].sc-ion-textarea-ios-h .cloned-input.sc-ion-textarea-ios,[dir=rtl] .sc-ion-textarea-ios-h .cloned-input.sc-ion-textarea-ios{left:unset;right:unset;right:0}[auto-grow].sc-ion-textarea-ios-h .cloned-input.sc-ion-textarea-ios{height:100%}.item-label-floating.item-has-placeholder.sc-ion-textarea-ios-h:not(.item-has-value),.item-label-floating.item-has-placeholder:not(.item-has-value) .sc-ion-textarea-ios-h{opacity:0}.item-label-floating.item-has-placeholder.sc-ion-textarea-ios-h:not(.item-has-value).item-has-focus,.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus .sc-ion-textarea-ios-h{transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:1}.sc-ion-textarea-ios-h{--padding-top:10px;--padding-end:10px;--padding-bottom:10px;--padding-start:0;font-size:inherit}.item-label-stacked.sc-ion-textarea-ios-h,.item-label-stacked .sc-ion-textarea-ios-h,.item-label-floating.sc-ion-textarea-ios-h,.item-label-floating .sc-ion-textarea-ios-h{--padding-top:8px;--padding-bottom:8px;--padding-start:0px}";
1380
-
1381
- const textareaMdCss = ".sc-ion-textarea-md-h{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:0.5;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--border-radius:0;display:block;position:relative;flex:1;width:100%;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);white-space:pre-wrap;z-index:2;box-sizing:border-box}.ion-color.sc-ion-textarea-md-h{background:initial}.ion-color.sc-ion-textarea-md-h{color:var(--ion-color-base)}ion-item.sc-ion-textarea-md-h,ion-item .sc-ion-textarea-md-h{align-self:baseline}ion-item.sc-ion-textarea-md-h:not(.item-label),ion-item:not(.item-label) .sc-ion-textarea-md-h{--padding-start:0}.textarea-wrapper.sc-ion-textarea-md{display:grid;min-width:inherit;max-width:inherit;min-height:inherit;max-height:inherit}.textarea-wrapper.sc-ion-textarea-md::after{white-space:pre-wrap;content:attr(data-replicated-value) \" \";visibility:hidden}.native-textarea.sc-ion-textarea-md,.textarea-wrapper.sc-ion-textarea-md::after{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;grid-area:1/1/2/2}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.native-textarea.sc-ion-textarea-md,.textarea-wrapper.sc-ion-textarea-md::after{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-textarea.sc-ion-textarea-md{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;box-sizing:border-box;resize:none;appearance:none;overflow:hidden}.native-textarea.sc-ion-textarea-md::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea[disabled].sc-ion-textarea-md{opacity:0.4}.cloned-input.sc-ion-textarea-md{left:0;top:0;position:absolute;pointer-events:none}[dir=rtl].sc-ion-textarea-md .cloned-input.sc-ion-textarea-md,[dir=rtl].sc-ion-textarea-md-h .cloned-input.sc-ion-textarea-md,[dir=rtl] .sc-ion-textarea-md-h .cloned-input.sc-ion-textarea-md{left:unset;right:unset;right:0}[auto-grow].sc-ion-textarea-md-h .cloned-input.sc-ion-textarea-md{height:100%}.item-label-floating.item-has-placeholder.sc-ion-textarea-md-h:not(.item-has-value),.item-label-floating.item-has-placeholder:not(.item-has-value) .sc-ion-textarea-md-h{opacity:0}.item-label-floating.item-has-placeholder.sc-ion-textarea-md-h:not(.item-has-value).item-has-focus,.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus .sc-ion-textarea-md-h{transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:1}.sc-ion-textarea-md-h{--padding-top:10px;--padding-end:0;--padding-bottom:11px;--padding-start:8px;margin-left:0;margin-right:0;margin-top:8px;margin-bottom:0;font-size:inherit}.item-label-stacked.sc-ion-textarea-md-h,.item-label-stacked .sc-ion-textarea-md-h,.item-label-floating.sc-ion-textarea-md-h,.item-label-floating .sc-ion-textarea-md-h{--padding-top:8px;--padding-bottom:8px;--padding-start:0}";
1382
-
1383
- const Textarea = class {
1384
- constructor(hostRef) {
1385
- index.registerInstance(this, hostRef);
1386
- this.ionChange = index.createEvent(this, "ionChange", 7);
1387
- this.ionInput = index.createEvent(this, "ionInput", 7);
1388
- this.ionStyle = index.createEvent(this, "ionStyle", 7);
1389
- this.ionBlur = index.createEvent(this, "ionBlur", 7);
1390
- this.ionFocus = index.createEvent(this, "ionFocus", 7);
1391
- this.inputId = `ion-textarea-${textareaIds++}`;
1392
- this.didBlurAfterEdit = false;
1393
- this.inheritedAttributes = {};
1394
- /**
1395
- * This is required for a WebKit bug which requires us to
1396
- * blur and focus an input to properly focus the input in
1397
- * an item with delegatesFocus. It will no longer be needed
1398
- * with iOS 14.
1399
- *
1400
- * @internal
1401
- */
1402
- this.fireFocusEvents = true;
1403
- this.hasFocus = false;
1404
- /**
1405
- * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
1406
- * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
1407
- */
1408
- this.autocapitalize = 'none';
1409
- /**
1410
- * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
1411
- */
1412
- this.autofocus = false;
1413
- /**
1414
- * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
1415
- */
1416
- this.clearOnEdit = false;
1417
- /**
1418
- * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
1419
- */
1420
- this.debounce = 0;
1421
- /**
1422
- * If `true`, the user cannot interact with the textarea.
1423
- */
1424
- this.disabled = false;
1425
- /**
1426
- * The name of the control, which is submitted with the form data.
1427
- */
1428
- this.name = this.inputId;
1429
- /**
1430
- * If `true`, the user cannot modify the value.
1431
- */
1432
- this.readonly = false;
1433
- /**
1434
- * If `true`, the user must fill in a value before submitting a form.
1435
- */
1436
- this.required = false;
1437
- /**
1438
- * If `true`, the element will have its spelling and grammar checked.
1439
- */
1440
- this.spellcheck = false;
1441
- /**
1442
- * If `true`, the textarea container will grow and shrink based
1443
- * on the contents of the textarea.
1444
- */
1445
- this.autoGrow = false;
1446
- /**
1447
- * The value of the textarea.
1448
- */
1449
- this.value = '';
1450
- this.onInput = (ev) => {
1451
- if (this.nativeInput) {
1452
- this.value = this.nativeInput.value;
1453
- }
1454
- this.emitStyle();
1455
- this.ionInput.emit(ev);
1456
- };
1457
- this.onFocus = (ev) => {
1458
- this.hasFocus = true;
1459
- this.focusChange();
1460
- if (this.fireFocusEvents) {
1461
- this.ionFocus.emit(ev);
1462
- }
1463
- };
1464
- this.onBlur = (ev) => {
1465
- this.hasFocus = false;
1466
- this.focusChange();
1467
- if (this.fireFocusEvents) {
1468
- this.ionBlur.emit(ev);
1469
- }
1470
- };
1471
- this.onKeyDown = () => {
1472
- this.checkClearOnEdit();
1473
- };
1474
- }
1475
- debounceChanged() {
1476
- this.ionChange = helpers.debounceEvent(this.ionChange, this.debounce);
1477
- }
1478
- disabledChanged() {
1479
- this.emitStyle();
1480
- }
1481
- /**
1482
- * Update the native input element when the value changes
1483
- */
1484
- valueChanged() {
1485
- const nativeInput = this.nativeInput;
1486
- const value = this.getValue();
1487
- if (nativeInput && nativeInput.value !== value) {
1488
- nativeInput.value = value;
1489
- }
1490
- this.runAutoGrow();
1491
- this.emitStyle();
1492
- this.ionChange.emit({ value });
1493
- }
1494
- connectedCallback() {
1495
- this.emitStyle();
1496
- this.debounceChanged();
1497
- {
1498
- document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
1499
- detail: this.el,
1500
- }));
1501
- }
1502
- }
1503
- disconnectedCallback() {
1504
- {
1505
- document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
1506
- detail: this.el,
1507
- }));
1508
- }
1509
- }
1510
- componentWillLoad() {
1511
- this.inheritedAttributes = Object.assign(Object.assign({}, helpers.inheritAriaAttributes(this.el)), helpers.inheritAttributes(this.el, ['title']));
1512
- }
1513
- componentDidLoad() {
1514
- this.runAutoGrow();
1515
- }
1516
- /**
1517
- * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
1518
- * `textarea.focus()`.
1519
- */
1520
- async setFocus() {
1521
- if (this.nativeInput) {
1522
- this.nativeInput.focus();
1523
- }
1524
- }
1525
- /**
1526
- * Sets blur on the native `textarea` in `ion-textarea`. Use this method instead of the global
1527
- * `textarea.blur()`.
1528
- * @internal
1529
- */
1530
- async setBlur() {
1531
- if (this.nativeInput) {
1532
- this.nativeInput.blur();
1533
- }
1534
- }
1535
- /**
1536
- * Returns the native `<textarea>` element used under the hood.
1537
- */
1538
- getInputElement() {
1539
- return Promise.resolve(this.nativeInput);
1540
- }
1541
- emitStyle() {
1542
- this.ionStyle.emit({
1543
- interactive: true,
1544
- textarea: true,
1545
- input: true,
1546
- 'interactive-disabled': this.disabled,
1547
- 'has-placeholder': this.placeholder !== undefined,
1548
- 'has-value': this.hasValue(),
1549
- 'has-focus': this.hasFocus,
1550
- });
1551
- }
1552
- runAutoGrow() {
1553
- if (this.nativeInput && this.autoGrow) {
1554
- index.writeTask(() => {
1555
- var _a;
1556
- if (this.textareaWrapper) {
1557
- // Replicated value is an attribute to be used in the stylesheet
1558
- // to set the inner contents of a pseudo element.
1559
- this.textareaWrapper.dataset.replicatedValue = (_a = this.value) !== null && _a !== void 0 ? _a : '';
1560
- }
1561
- });
1562
- }
1563
- }
1564
- /**
1565
- * Check if we need to clear the text input if clearOnEdit is enabled
1566
- */
1567
- checkClearOnEdit() {
1568
- if (!this.clearOnEdit) {
1569
- return;
1570
- }
1571
- // Did the input value change after it was blurred and edited?
1572
- if (this.didBlurAfterEdit && this.hasValue()) {
1573
- // Clear the input
1574
- this.value = '';
1575
- }
1576
- // Reset the flag
1577
- this.didBlurAfterEdit = false;
1578
- }
1579
- focusChange() {
1580
- // If clearOnEdit is enabled and the input blurred but has a value, set a flag
1581
- if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {
1582
- this.didBlurAfterEdit = true;
1583
- }
1584
- this.emitStyle();
1585
- }
1586
- hasValue() {
1587
- return this.getValue() !== '';
1588
- }
1589
- getValue() {
1590
- return this.value || '';
1591
- }
1592
- render() {
1593
- const mode = ionicGlobal.getIonMode(this);
1594
- const value = this.getValue();
1595
- const labelId = this.inputId + '-lbl';
1596
- const label = helpers.findItemLabel(this.el);
1597
- if (label) {
1598
- label.id = labelId;
1599
- }
1600
- return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
1601
- [mode]: true,
1602
- }) }, index.h("div", { class: "textarea-wrapper", ref: (el) => (this.textareaWrapper = el) }, index.h("textarea", Object.assign({ class: "native-textarea", "aria-labelledby": label ? labelId : null, ref: (el) => (this.nativeInput = el), autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value))));
1603
- }
1604
- get el() { return index.getElement(this); }
1605
- static get watchers() { return {
1606
- "debounce": ["debounceChanged"],
1607
- "disabled": ["disabledChanged"],
1608
- "value": ["valueChanged"]
1609
- }; }
1610
- };
1611
- let textareaIds = 0;
1612
- Textarea.style = {
1613
- ios: textareaIosCss,
1614
- md: textareaMdCss
1615
- };
1616
-
1617
- const toggleIosCss = ":host{box-sizing:content-box !important;display:inline-block;position:relative;outline:none;contain:content;cursor:pointer;touch-action:none;user-select:none;z-index:2}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0;pointer-events:none}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.toggle-icon-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%;transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--background);pointer-events:none;overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--background-checked)}.toggle-inner{left:var(--handle-spacing);border-radius:var(--handle-border-radius);position:absolute;width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);transition:var(--handle-transition);background:var(--handle-background);box-shadow:var(--handle-box-shadow);contain:strict}[dir=rtl] .toggle-inner,:host-context([dir=rtl]) .toggle-inner{left:unset;right:unset;right:var(--handle-spacing)}:host(.toggle-checked) .toggle-icon-wrapper{transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host-context([dir=rtl]):host(.toggle-checked) .toggle-icon-wrapper,:host-context([dir=rtl]).toggle-checked .toggle-icon-wrapper{transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);background:var(--handle-background-checked)}:host-context([dir=rtl]):host(.toggle-checked) .toggle-inner,:host-context([dir=rtl]).toggle-checked .toggle-inner{transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);--background-checked:var(--ion-color-primary, #3880ff);--border-radius:16px;--handle-background:#ffffff;--handle-background-checked:#ffffff;--handle-border-radius:25.5px;--handle-box-shadow:0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1);--handle-height:calc(32px - (2px * 2));--handle-max-height:calc(100% - var(--handle-spacing) * 2);--handle-width:calc(32px - (2px * 2));--handle-spacing:2px;--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;width:51px;height:32px;contain:strict;overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.toggle-activated) .toggle-switch-icon{opacity:0}.toggle-icon{transform:translate3d(0, 0, 0);transition:background-color 300ms}.toggle-inner{will-change:transform}.toggle-switch-icon{position:absolute;top:50%;width:11px;height:11px;transform:translateY(-50%);transition:opacity 300ms, color 300ms}.toggle-switch-icon{right:6px;position:absolute;color:var(--ion-color-dark)}[dir=rtl] .toggle-switch-icon,:host-context([dir=rtl]) .toggle-switch-icon{right:initial;left:6px;}:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked{color:var(--ion-color-contrast, #fff)}:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked){opacity:0}.toggle-switch-icon-checked{right:initial;left:4px;position:absolute;width:15px;height:15px;transform:translateY(-50%) rotate(90deg)}[dir=rtl] .toggle-switch-icon-checked,:host-context([dir=rtl]) .toggle-switch-icon-checked{right:4px}:host(.toggle-activated) .toggle-icon::before,:host(.toggle-checked) .toggle-icon::before{transform:scale3d(0, 0, 0)}:host(.toggle-activated.toggle-checked) .toggle-inner::before{transform:scale3d(0, 0, 0)}:host(.toggle-activated) .toggle-inner{width:calc(var(--handle-width) + 6px)}:host(.toggle-activated.toggle-checked) .toggle-icon-wrapper{transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0)}:host-context([dir=rtl]):host(.toggle-activated.toggle-checked) .toggle-icon-wrapper,:host-context([dir=rtl]).toggle-activated.toggle-checked .toggle-icon-wrapper{transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0)}:host(.toggle-disabled){opacity:0.3}:host(.in-item[slot]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:20px;padding-right:10px;padding-top:6px;padding-bottom:5px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot]){padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:10px;padding-inline-end:10px}}:host(.in-item[slot=start]){padding-left:0;padding-right:16px;padding-top:6px;padding-bottom:5px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:16px;padding-inline-end:16px}}";
1618
-
1619
- const toggleMdCss = ":host{box-sizing:content-box !important;display:inline-block;position:relative;outline:none;contain:content;cursor:pointer;touch-action:none;user-select:none;z-index:2}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0;pointer-events:none}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.toggle-icon-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%;transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--background);pointer-events:none;overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--background-checked)}.toggle-inner{left:var(--handle-spacing);border-radius:var(--handle-border-radius);position:absolute;width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);transition:var(--handle-transition);background:var(--handle-background);box-shadow:var(--handle-box-shadow);contain:strict}[dir=rtl] .toggle-inner,:host-context([dir=rtl]) .toggle-inner{left:unset;right:unset;right:var(--handle-spacing)}:host(.toggle-checked) .toggle-icon-wrapper{transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host-context([dir=rtl]):host(.toggle-checked) .toggle-icon-wrapper,:host-context([dir=rtl]).toggle-checked .toggle-icon-wrapper{transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);background:var(--handle-background-checked)}:host-context([dir=rtl]):host(.toggle-checked) .toggle-inner,:host-context([dir=rtl]).toggle-checked .toggle-inner{transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);--background-checked:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5);--border-radius:14px;--handle-background:#ffffff;--handle-background-checked:var(--ion-color-primary, #3880ff);--handle-border-radius:50%;--handle-box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--handle-width:20px;--handle-height:20px;--handle-max-height:calc(100% + 6px);--handle-spacing:0;--handle-transition:transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;width:36px;height:14px;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.ion-color.toggle-checked) .toggle-icon{background:rgba(var(--ion-color-base-rgb), 0.5)}:host(.ion-color.toggle-checked) .toggle-inner{background:var(--ion-color-base)}:host(.toggle-checked) .toggle-inner{color:var(--ion-color-contrast, #fff)}.toggle-icon{transition:background-color 160ms}.toggle-inner{will-change:background-color, transform;display:flex;align-items:center;justify-content:center;color:#000}.toggle-inner .toggle-switch-icon{padding-left:1px;padding-right:1px;padding-top:1px;padding-bottom:1px;width:100%;height:100%}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toggle-inner .toggle-switch-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:1px;padding-inline-start:1px;-webkit-padding-end:1px;padding-inline-end:1px}}:host(.toggle-disabled){opacity:0.3}:host(.in-item[slot]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:16px;padding-right:0;padding-top:12px;padding-bottom:12px;cursor:pointer}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot]){padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:0;padding-inline-end:0}}:host(.in-item[slot=start]){padding-left:2px;padding-right:18px;padding-top:12px;padding-bottom:12px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){padding-left:unset;padding-right:unset;-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:18px;padding-inline-end:18px}}";
1620
-
1621
- const Toggle = class {
1622
- constructor(hostRef) {
1623
- index.registerInstance(this, hostRef);
1624
- this.ionChange = index.createEvent(this, "ionChange", 7);
1625
- this.ionFocus = index.createEvent(this, "ionFocus", 7);
1626
- this.ionBlur = index.createEvent(this, "ionBlur", 7);
1627
- this.ionStyle = index.createEvent(this, "ionStyle", 7);
1628
- this.inputId = `ion-tg-${toggleIds++}`;
1629
- this.lastDrag = 0;
1630
- this.activated = false;
1631
- /**
1632
- * The name of the control, which is submitted with the form data.
1633
- */
1634
- this.name = this.inputId;
1635
- /**
1636
- * If `true`, the toggle is selected.
1637
- */
1638
- this.checked = false;
1639
- /**
1640
- * If `true`, the user cannot interact with the toggle.
1641
- */
1642
- this.disabled = false;
1643
- /**
1644
- * The value of the toggle does not mean if it's checked or not, use the `checked`
1645
- * property for that.
1646
- *
1647
- * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
1648
- * it's only used when the toggle participates in a native `<form>`.
1649
- */
1650
- this.value = 'on';
1651
- /**
1652
- * Enables the on/off accessibility switch labels within the toggle.
1653
- */
1654
- this.enableOnOffLabels = undefined;
1655
- this.onClick = (ev) => {
1656
- ev.preventDefault();
1657
- if (this.lastDrag + 300 < Date.now()) {
1658
- this.checked = !this.checked;
1659
- }
1660
- };
1661
- this.onFocus = () => {
1662
- this.ionFocus.emit();
1663
- };
1664
- this.onBlur = () => {
1665
- this.ionBlur.emit();
1666
- };
1667
- this.getSwitchLabelIcon = (mode, checked) => {
1668
- if (mode === 'md') {
1669
- return checked ? index$1.checkmarkOutline : index$1.removeOutline;
1670
- }
1671
- return checked ? index$1.removeOutline : index$1.ellipseOutline;
1672
- };
1673
- }
1674
- checkedChanged(isChecked) {
1675
- this.ionChange.emit({
1676
- checked: isChecked,
1677
- value: this.value,
1678
- });
1679
- }
1680
- disabledChanged() {
1681
- this.emitStyle();
1682
- if (this.gesture) {
1683
- this.gesture.enable(!this.disabled);
1684
- }
1685
- }
1686
- async connectedCallback() {
1687
- this.gesture = (await Promise.resolve().then(function () { return require('./index-12082cba.js'); })).createGesture({
1688
- el: this.el,
1689
- gestureName: 'toggle',
1690
- gesturePriority: 100,
1691
- threshold: 5,
1692
- passive: false,
1693
- onStart: () => this.onStart(),
1694
- onMove: (ev) => this.onMove(ev),
1695
- onEnd: (ev) => this.onEnd(ev),
1696
- });
1697
- this.disabledChanged();
1698
- }
1699
- disconnectedCallback() {
1700
- if (this.gesture) {
1701
- this.gesture.destroy();
1702
- this.gesture = undefined;
1703
- }
1704
- }
1705
- componentWillLoad() {
1706
- this.emitStyle();
1707
- }
1708
- emitStyle() {
1709
- this.ionStyle.emit({
1710
- 'interactive-disabled': this.disabled,
1711
- });
1712
- }
1713
- onStart() {
1714
- this.activated = true;
1715
- // touch-action does not work in iOS
1716
- this.setFocus();
1717
- }
1718
- onMove(detail) {
1719
- if (shouldToggle(dir.isRTL(this.el), this.checked, detail.deltaX, -10)) {
1720
- this.checked = !this.checked;
1721
- haptic.hapticSelection();
1722
- }
1723
- }
1724
- onEnd(ev) {
1725
- this.activated = false;
1726
- this.lastDrag = Date.now();
1727
- ev.event.preventDefault();
1728
- ev.event.stopImmediatePropagation();
1729
- }
1730
- getValue() {
1731
- return this.value || '';
1732
- }
1733
- setFocus() {
1734
- if (this.focusEl) {
1735
- this.focusEl.focus();
1736
- }
1737
- }
1738
- renderOnOffSwitchLabels(mode, checked) {
1739
- const icon = this.getSwitchLabelIcon(mode, checked);
1740
- return (index.h("ion-icon", { class: {
1741
- 'toggle-switch-icon': true,
1742
- 'toggle-switch-icon-checked': checked,
1743
- }, icon: icon }));
1744
- }
1745
- render() {
1746
- const { activated, color, checked, disabled, el, inputId, name, enableOnOffLabels } = this;
1747
- const mode = ionicGlobal.getIonMode(this);
1748
- const { label, labelId, labelText } = helpers.getAriaLabel(el, inputId);
1749
- const value = this.getValue();
1750
- helpers.renderHiddenInput(true, el, name, checked ? value : '', disabled);
1751
- return (index.h(index.Host, { onClick: this.onClick, "aria-labelledby": label ? labelId : null, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "switch", class: theme.createColorClasses(color, {
1752
- [mode]: true,
1753
- 'in-item': theme.hostContext('ion-item', el),
1754
- 'toggle-activated': activated,
1755
- 'toggle-checked': checked,
1756
- 'toggle-disabled': disabled,
1757
- interactive: true,
1758
- }) }, index.h("div", { class: "toggle-icon", part: "track" }, enableOnOffLabels &&
1759
- mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)], index.h("div", { class: "toggle-icon-wrapper" }, index.h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)))), index.h("label", { htmlFor: inputId }, labelText), index.h("input", { type: "checkbox", role: "switch", "aria-checked": `${checked}`, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));
1760
- }
1761
- get el() { return index.getElement(this); }
1762
- static get watchers() { return {
1763
- "checked": ["checkedChanged"],
1764
- "disabled": ["disabledChanged"]
1765
- }; }
1766
- };
1767
- const shouldToggle = (rtl, checked, deltaX, margin) => {
1768
- if (checked) {
1769
- return (!rtl && margin > deltaX) || (rtl && -margin < deltaX);
1770
- }
1771
- else {
1772
- return (!rtl && -margin < deltaX) || (rtl && margin > deltaX);
1773
- }
1774
- };
1775
- let toggleIds = 0;
1776
- Toggle.style = {
1777
- ios: toggleIosCss,
1778
- md: toggleMdCss
1779
- };
1780
-
1781
- const sparkleFeedPostCss = ":host{display:block}.post-footer{display:flex;justify-content:space-between}.error{color:red}.success{color:green}.uploaded-image{display:block;max-height:140px;width:auto !important}";
1782
-
1783
- const SparkleFeedPost = class {
1784
- constructor(hostRef) {
1785
- index.registerInstance(this, hostRef);
1786
- }
1787
- // @Prop({ connect: 'ion-toast-controller' })
1788
- // toastCtrl: HTMLIonToastControllerElement;
1789
- componentDidLoad() {
1790
- this.postText = this.textValue;
1791
- }
1792
- setText(text) {
1793
- this.postText = text;
1794
- }
1795
- // async postToFeed() {
1796
- // const sparkleConfig: EnvironmentSparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
1797
- // const tocData = await AssetsService.getInstance().loadJsonFile<ICourse>(sparkleConfig.tocPath);
1798
- // var model = {
1799
- // CourseId: tocData.id,
1800
- // MiniAppId: SparkleGlobal.MY_GOALS_APP_ID,
1801
- // PostText: MyGoalTemplate(this.name.value, this.goalUpdateText.value, this.progress),
1802
- // PostTextJSON: MyGoalTemplateJSON(this.name.value, this.goalUpdateText.value, this.progress),
1803
- // IsPublic: this.public,
1804
- // ExternalResourceUrl: "",
1805
- // }
1806
- // const result = await FeedService.getInstance().createPost(model);
1807
- // if (result.Succeeded) {
1808
- // //show success toast
1809
- // }
1810
- // }
1811
- isAuthenticated() {
1812
- try {
1813
- var sparkleConfig = environmentConfig_service.EnvironmentConfigService.getInstance().get('sparkle');
1814
- if (!!sparkleConfig && !!sparkleConfig.auth && !!sparkleConfig.auth.getToken()) {
1815
- return true;
1816
- }
1817
- }
1818
- catch (_a) {
1819
- return false;
1820
- }
1821
- }
1822
- submitPost() {
1823
- this.errorMessage = '';
1824
- this.successMessage = '';
1825
- //let formData = new FormData(this.el.querySelector("form")) as any;
1826
- //var postText = this.el.getElementsByClassName("PostText")[0] as HTMLInputElement;
1827
- this.el.getElementsByClassName('PostExternalUrl')[0];
1828
- this.el.getElementsByClassName('IsPublic')[0];
1829
- // this.dataSvc.saveData(data, '/api/class/feed').subscribe(
1830
- // x => {
1831
- // this.successMessage = 'Posted Successfully.';
1832
- // // this.presentToast('Success');
1833
- // },
1834
- // error => {
1835
- // this.errorMessage = 'There is an error while posting.';
1836
- // // this.presentToast('There is an error');
1837
- // },
1838
- // );
1839
- //TODO can we return data from the dataSvc so we know if it's successful and can update the form? (Perhaps replace it with the post itself?)
1840
- // if (this.assignmentName) {
1841
- // data.AssignmentData = JSON.stringify({ text: data.PostText, url: data.ExternalResourceUrl });
1842
- // this.dataSvc.saveData(data, '/api/student/assignment-response').subscribe(
1843
- // x => {
1844
- // this.successMessage = 'Posted Successfully.';
1845
- // // this.presentToast('Success');
1846
- // },
1847
- // error => {
1848
- // this.errorMessage = 'There is an error while posting.';
1849
- // // this.presentToast('There is an error');
1850
- // },
1851
- // );
1852
- // }
1853
- }
1854
- uploadImage(evt) {
1855
- // this.uploadImageLoading = true;
1856
- // var files = evt.target.files;
1857
- // this.dataSvc.uploadImage(files, '/api/mediaitems/upload').subscribe(
1858
- // x => {
1859
- // this.uploadImageLoading = false;
1860
- // this.uploadedImage = x.length > 0 ? x[0].FullImageUrl : '';
1861
- // this.externalResourceUrl = x.length > 0 ? x[0].FullImageUrl : '';
1862
- // //this.successMessage = 'Posted Successfully.'
1863
- // // this.presentToast('Success');
1864
- // },
1865
- // error => {
1866
- // this.uploadImageLoading = false;
1867
- // this.errorMessage = 'There is an error while uploading an image.';
1868
- // },
1869
- // );
1870
- }
1871
- selectFile() {
1872
- var fileInput = document.getElementById('fileInput');
1873
- fileInput.click();
1874
- }
1875
- renderUserInfo() {
1876
- var tokenInfo = { Token: null, ProfileImageUrl: null };
1877
- if (tokenInfo != null && tokenInfo.Token) {
1878
- return (index.h("ion-avatar", { class: "header-avatar", slot: "end" }, index.h("img", { src: "/assets/img/avatar.png" })));
1879
- }
1880
- else {
1881
- return (index.h("ion-button", { slot: "end", href: "/login" }, "Login to Post"));
1882
- }
1883
- }
1884
- render() {
1885
- const userInfo = this.renderUserInfo();
1886
- return (index.h("ion-card", null, index.h("ion-item", { class: "header" }, index.h("ion-card-title", null, "Bulletin Board"), userInfo), index.h("ion-card-content", null, index.h("form", null, index.h("ion-list", null, index.h("ion-item", { lines: "none" }, index.h("ion-label", null, "Public"), index.h("ion-toggle", { class: "IsPublic", slot: "end", color: "primary", name: "IsPublic" })), index.h("ion-item", { class: "padding" }, index.h("ion-textarea", { class: "PostText", required: true, placeholder: "Post Text", name: "PostText", value: this.postText })), index.h("ion-item", { class: "padding" }, index.h("ion-input", { class: "PostExternalUrl", required: true, type: "text", placeholder: "URL", name: "ExternalResourceUrl", value: this.externalResourceUrl })), this.uploadedImage ? (index.h("ion-item", { class: "padding" }, index.h("img", { class: "uploaded-image", src: this.uploadedImage }))) : (''), index.h("ion-item", { lines: "none" }, index.h("input", { type: "file", id: "fileInput", onChange: evt => this.uploadImage(evt), style: { display: 'none' }, accept: "image/*" }), this.uploadImageLoading ? index.h("ion-spinner", { color: "primary" }) : '', index.h("ion-button", { slot: "start", onClick: evt => this.selectFile() }, index.h("ion-icon", { name: "add" }), "Upload Image")), index.h("ion-item", { class: "post-footer", lines: "none" }, index.h("div", null, index.h("div", { class: "error" }, this.errorMessage), index.h("div", { class: "success" }, this.successMessage)), index.h("ion-button", { slot: "end", size: "default", onClick: evt => this.submitPost(), disabled: !this.isAuthenticated() }, "Post")))))));
1887
- }
1888
- get el() { return index.getElement(this); }
1889
- };
1890
- SparkleFeedPost.style = sparkleFeedPostCss;
1891
-
1892
- exports.ion_avatar = Avatar;
1893
- exports.ion_button = Button;
1894
- exports.ion_card = Card;
1895
- exports.ion_card_content = CardContent;
1896
- exports.ion_card_title = CardTitle;
1897
- exports.ion_icon = Icon;
1898
- exports.ion_input = Input;
1899
- exports.ion_item = Item;
1900
- exports.ion_label = Label;
1901
- exports.ion_list = List;
1902
- exports.ion_note = Note;
1903
- exports.ion_ripple_effect = RippleEffect;
1904
- exports.ion_spinner = Spinner;
1905
- exports.ion_textarea = Textarea;
1906
- exports.ion_toggle = Toggle;
1907
- exports.sparkle_feed_post = SparkleFeedPost;