@usecapsule/core-components 2.0.1 → 2.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (400) hide show
  1. package/dist/capsule/_commonjsHelpers-bc8ff177.js +36 -0
  2. package/dist/capsule/_commonjsHelpers-bc8ff177.js.map +1 -0
  3. package/dist/capsule/capsule.esm.js +52 -1
  4. package/dist/capsule/capsule.esm.js.map +1 -1
  5. package/dist/capsule/cpsl-alert.entry.js +31 -0
  6. package/dist/capsule/cpsl-alert.entry.js.map +1 -0
  7. package/dist/{esm → capsule}/cpsl-animation.entry.js +114 -20
  8. package/dist/capsule/cpsl-animation.entry.js.map +1 -0
  9. package/dist/capsule/cpsl-button.entry.js +24 -0
  10. package/dist/capsule/cpsl-button.entry.js.map +1 -0
  11. package/dist/capsule/cpsl-code-input.entry.js +106 -0
  12. package/dist/capsule/cpsl-code-input.entry.js.map +1 -0
  13. package/dist/{esm → capsule}/cpsl-col.entry.js +3 -4
  14. package/dist/capsule/cpsl-col.entry.js.map +1 -0
  15. package/dist/capsule/cpsl-divider.entry.js +17 -0
  16. package/dist/capsule/cpsl-divider.entry.js.map +1 -0
  17. package/dist/{esm → capsule}/cpsl-grid.entry.js +4 -5
  18. package/dist/capsule/cpsl-grid.entry.js.map +1 -0
  19. package/dist/capsule/cpsl-icon.entry.js +20 -0
  20. package/dist/capsule/cpsl-icon.entry.js.map +1 -0
  21. package/dist/{esm → capsule}/cpsl-info-box.entry.js +3 -4
  22. package/dist/capsule/cpsl-info-box.entry.js.map +1 -0
  23. package/dist/capsule/cpsl-input.entry.js +124 -0
  24. package/dist/capsule/cpsl-input.entry.js.map +1 -0
  25. package/dist/capsule/cpsl-modal.entry.js +3338 -0
  26. package/dist/capsule/cpsl-modal.entry.js.map +1 -0
  27. package/dist/capsule/cpsl-overlay.entry.js +44 -0
  28. package/dist/capsule/cpsl-overlay.entry.js.map +1 -0
  29. package/dist/capsule/cpsl-pill.entry.js +18 -0
  30. package/dist/capsule/cpsl-pill.entry.js.map +1 -0
  31. package/dist/capsule/cpsl-progress-indicator.entry.js +29 -0
  32. package/dist/capsule/cpsl-progress-indicator.entry.js.map +1 -0
  33. package/dist/capsule/cpsl-qr-code.entry.js +56 -0
  34. package/dist/capsule/cpsl-qr-code.entry.js.map +1 -0
  35. package/dist/capsule/cpsl-row.entry.js +17 -0
  36. package/dist/capsule/cpsl-row.entry.js.map +1 -0
  37. package/dist/capsule/cpsl-slide-button.entry.js +130 -0
  38. package/dist/capsule/cpsl-slide-button.entry.js.map +1 -0
  39. package/dist/capsule/cpsl-spinner.entry.js +25 -0
  40. package/dist/capsule/cpsl-spinner.entry.js.map +1 -0
  41. package/dist/capsule/cpsl-tab.entry.js +37 -0
  42. package/dist/capsule/cpsl-tab.entry.js.map +1 -0
  43. package/dist/capsule/cpsl-tabs.entry.js +71 -0
  44. package/dist/capsule/cpsl-tabs.entry.js.map +1 -0
  45. package/dist/capsule/cpsl-text.entry.js +66 -0
  46. package/dist/capsule/cpsl-text.entry.js.map +1 -0
  47. package/dist/capsule/cpsl-tile-button.entry.js +19 -0
  48. package/dist/capsule/cpsl-tile-button.entry.js.map +1 -0
  49. package/dist/capsule/index-3ac1b9e9.js +617 -0
  50. package/dist/capsule/index-3ac1b9e9.js.map +1 -0
  51. package/dist/capsule/index-3ad00c7e.js +6064 -0
  52. package/dist/capsule/index-3ad00c7e.js.map +1 -0
  53. package/dist/capsule/index-f19e63df.js +4148 -0
  54. package/dist/capsule/index-f19e63df.js.map +1 -0
  55. package/dist/capsule/index.esm.js +572 -1
  56. package/dist/capsule/index.esm.js.map +1 -1
  57. package/dist/capsule/shadow-css-bc9e2af8.js +478 -0
  58. package/dist/capsule/shadow-css-bc9e2af8.js.map +1 -0
  59. package/dist/types/components/cpsl-text/cpsl-text.d.ts +4 -0
  60. package/dist/types/index.d.ts +1 -1
  61. package/dist/types/interface.d.ts +15 -0
  62. package/dist/types/utils/theme/generateFont.d.ts +1 -1
  63. package/dist/types/utils/theme/generateTheme.d.ts +1 -2
  64. package/package.json +2 -2
  65. package/dist/capsule/p-0462f723.js +0 -2
  66. package/dist/capsule/p-0462f723.js.map +0 -1
  67. package/dist/capsule/p-654cb899.entry.js +0 -29
  68. package/dist/capsule/p-654cb899.entry.js.map +0 -1
  69. package/dist/capsule/p-68c73705.entry.js +0 -2
  70. package/dist/capsule/p-68c73705.entry.js.map +0 -1
  71. package/dist/capsule/p-6fb7c4d1.js +0 -3
  72. package/dist/capsule/p-6fb7c4d1.js.map +0 -1
  73. package/dist/capsule/p-91412151.entry.js +0 -2
  74. package/dist/capsule/p-91412151.entry.js.map +0 -1
  75. package/dist/capsule/p-a95ec4df.entry.js +0 -2
  76. package/dist/capsule/p-a95ec4df.entry.js.map +0 -1
  77. package/dist/capsule/p-c2bf050b.js +0 -2
  78. package/dist/capsule/p-c2bf050b.js.map +0 -1
  79. package/dist/capsule/p-d7be092d.entry.js +0 -10
  80. package/dist/capsule/p-d7be092d.entry.js.map +0 -1
  81. package/dist/capsule/p-e1255160.js +0 -2
  82. package/dist/capsule/p-e1255160.js.map +0 -1
  83. package/dist/capsule/p-f604b591.entry.js +0 -2
  84. package/dist/capsule/p-f604b591.entry.js.map +0 -1
  85. package/dist/cjs/_commonjsHelpers-b3309d7b.js +0 -12
  86. package/dist/cjs/_commonjsHelpers-b3309d7b.js.map +0 -1
  87. package/dist/cjs/app-globals-3a1e7e63.js +0 -7
  88. package/dist/cjs/app-globals-3a1e7e63.js.map +0 -1
  89. package/dist/cjs/capsule.cjs.js +0 -27
  90. package/dist/cjs/capsule.cjs.js.map +0 -1
  91. package/dist/cjs/constants-4bb85cc5.js +0 -12
  92. package/dist/cjs/constants-4bb85cc5.js.map +0 -1
  93. package/dist/cjs/cpsl-alert_17.cjs.entry.js +0 -10711
  94. package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +0 -1
  95. package/dist/cjs/cpsl-animation.cjs.entry.js +0 -20129
  96. package/dist/cjs/cpsl-animation.cjs.entry.js.map +0 -1
  97. package/dist/cjs/cpsl-col.cjs.entry.js +0 -125
  98. package/dist/cjs/cpsl-col.cjs.entry.js.map +0 -1
  99. package/dist/cjs/cpsl-grid.cjs.entry.js +0 -25
  100. package/dist/cjs/cpsl-grid.cjs.entry.js.map +0 -1
  101. package/dist/cjs/cpsl-info-box.cjs.entry.js +0 -22
  102. package/dist/cjs/cpsl-info-box.cjs.entry.js.map +0 -1
  103. package/dist/cjs/cpsl-row.cjs.entry.js +0 -22
  104. package/dist/cjs/cpsl-row.cjs.entry.js.map +0 -1
  105. package/dist/cjs/index-3fccb5b4.js +0 -2012
  106. package/dist/cjs/index-3fccb5b4.js.map +0 -1
  107. package/dist/cjs/index.cjs.js +0 -342
  108. package/dist/cjs/index.cjs.js.map +0 -1
  109. package/dist/cjs/loader.cjs.js +0 -17
  110. package/dist/cjs/loader.cjs.js.map +0 -1
  111. package/dist/collection/assets/icons/alert-circle.svg +0 -3
  112. package/dist/collection/assets/icons/angel-list-brand.svg +0 -3
  113. package/dist/collection/assets/icons/angel-list.svg +0 -3
  114. package/dist/collection/assets/icons/apple-brand.svg +0 -3
  115. package/dist/collection/assets/icons/apple.svg +0 -3
  116. package/dist/collection/assets/icons/arrow-narrow.svg +0 -3
  117. package/dist/collection/assets/icons/arrow.svg +0 -3
  118. package/dist/collection/assets/icons/backup-kit.svg +0 -4
  119. package/dist/collection/assets/icons/capsule-logo.svg +0 -18
  120. package/dist/collection/assets/icons/capsule-rings-dark.svg +0 -34
  121. package/dist/collection/assets/icons/capsule-rings.svg +0 -34
  122. package/dist/collection/assets/icons/capsule.svg +0 -4
  123. package/dist/collection/assets/icons/check.svg +0 -3
  124. package/dist/collection/assets/icons/clock.svg +0 -3
  125. package/dist/collection/assets/icons/close.svg +0 -4
  126. package/dist/collection/assets/icons/clubhouse-brand.svg +0 -4
  127. package/dist/collection/assets/icons/clubhouse.svg +0 -4
  128. package/dist/collection/assets/icons/copy.svg +0 -3
  129. package/dist/collection/assets/icons/discord-brand.svg +0 -4
  130. package/dist/collection/assets/icons/discord.svg +0 -4
  131. package/dist/collection/assets/icons/download-cloud.svg +0 -3
  132. package/dist/collection/assets/icons/dribbble-brand.svg +0 -4
  133. package/dist/collection/assets/icons/dribbble.svg +0 -3
  134. package/dist/collection/assets/icons/eye-off.svg +0 -3
  135. package/dist/collection/assets/icons/eye.svg +0 -4
  136. package/dist/collection/assets/icons/facebook-brand.svg +0 -11
  137. package/dist/collection/assets/icons/facebook.svg +0 -10
  138. package/dist/collection/assets/icons/figma-brand.svg +0 -14
  139. package/dist/collection/assets/icons/figma.svg +0 -3
  140. package/dist/collection/assets/icons/github-brand.svg +0 -10
  141. package/dist/collection/assets/icons/github.svg +0 -10
  142. package/dist/collection/assets/icons/google-brand.svg +0 -13
  143. package/dist/collection/assets/icons/google.svg +0 -10
  144. package/dist/collection/assets/icons/help-circle.svg +0 -3
  145. package/dist/collection/assets/icons/hero-email.svg +0 -12
  146. package/dist/collection/assets/icons/hero-lock.svg +0 -4
  147. package/dist/collection/assets/icons/hero-passkey.svg +0 -12
  148. package/dist/collection/assets/icons/hero-phone.svg +0 -4
  149. package/dist/collection/assets/icons/hero-wallet.svg +0 -5
  150. package/dist/collection/assets/icons/index.js +0 -70
  151. package/dist/collection/assets/icons/index.js.map +0 -1
  152. package/dist/collection/assets/icons/info-circle.svg +0 -3
  153. package/dist/collection/assets/icons/instagram-brand.svg +0 -12
  154. package/dist/collection/assets/icons/instagram.svg +0 -12
  155. package/dist/collection/assets/icons/key.svg +0 -3
  156. package/dist/collection/assets/icons/linkedin-brand.svg +0 -10
  157. package/dist/collection/assets/icons/linkedin.svg +0 -10
  158. package/dist/collection/assets/icons/mail.svg +0 -3
  159. package/dist/collection/assets/icons/more-login-options.svg +0 -13
  160. package/dist/collection/assets/icons/phone.svg +0 -3
  161. package/dist/collection/assets/icons/pintrest-brand.svg +0 -11
  162. package/dist/collection/assets/icons/pintrest.svg +0 -10
  163. package/dist/collection/assets/icons/plus-circle.svg +0 -5
  164. package/dist/collection/assets/icons/reddit-brand.svg +0 -11
  165. package/dist/collection/assets/icons/reddit.svg +0 -3
  166. package/dist/collection/assets/icons/signal-brand.svg +0 -3
  167. package/dist/collection/assets/icons/signal.svg +0 -3
  168. package/dist/collection/assets/icons/snapchat-brand.svg +0 -4
  169. package/dist/collection/assets/icons/snapchat.svg +0 -3
  170. package/dist/collection/assets/icons/telegram-brand.svg +0 -15
  171. package/dist/collection/assets/icons/telegram.svg +0 -10
  172. package/dist/collection/assets/icons/tik-tok-brand.svg +0 -5
  173. package/dist/collection/assets/icons/tik-tok.svg +0 -3
  174. package/dist/collection/assets/icons/tumblr-brand.svg +0 -10
  175. package/dist/collection/assets/icons/tumblr.svg +0 -10
  176. package/dist/collection/assets/icons/twitter-brand.svg +0 -3
  177. package/dist/collection/assets/icons/twitter.svg +0 -3
  178. package/dist/collection/assets/icons/wallet.svg +0 -5
  179. package/dist/collection/assets/icons/youtube-brand.svg +0 -11
  180. package/dist/collection/assets/icons/youtube.svg +0 -3
  181. package/dist/collection/collection-manifest.json +0 -33
  182. package/dist/collection/components/cpsl-alert/cpsl-alert.css +0 -98
  183. package/dist/collection/components/cpsl-alert/cpsl-alert.js +0 -80
  184. package/dist/collection/components/cpsl-alert/cpsl-alert.js.map +0 -1
  185. package/dist/collection/components/cpsl-alert/test/cpsl-alert.e2e.js +0 -29
  186. package/dist/collection/components/cpsl-alert/test/cpsl-alert.e2e.js.map +0 -1
  187. package/dist/collection/components/cpsl-alert/test/cpsl-alert.spec.js +0 -37
  188. package/dist/collection/components/cpsl-alert/test/cpsl-alert.spec.js.map +0 -1
  189. package/dist/collection/components/cpsl-animation/cpsl-animation.css +0 -17
  190. package/dist/collection/components/cpsl-animation/cpsl-animation.js +0 -102
  191. package/dist/collection/components/cpsl-animation/cpsl-animation.js.map +0 -1
  192. package/dist/collection/components/cpsl-animation/test/cpsl-animation.e2e.js +0 -29
  193. package/dist/collection/components/cpsl-animation/test/cpsl-animation.e2e.js.map +0 -1
  194. package/dist/collection/components/cpsl-animation/test/cpsl-animation.spec.js +0 -37
  195. package/dist/collection/components/cpsl-animation/test/cpsl-animation.spec.js.map +0 -1
  196. package/dist/collection/components/cpsl-button/cpsl-button.css +0 -162
  197. package/dist/collection/components/cpsl-button/cpsl-button.js +0 -68
  198. package/dist/collection/components/cpsl-button/cpsl-button.js.map +0 -1
  199. package/dist/collection/components/cpsl-button/test/cpsl-button.e2e.js +0 -29
  200. package/dist/collection/components/cpsl-button/test/cpsl-button.e2e.js.map +0 -1
  201. package/dist/collection/components/cpsl-button/test/cpsl-button.spec.js +0 -37
  202. package/dist/collection/components/cpsl-button/test/cpsl-button.spec.js.map +0 -1
  203. package/dist/collection/components/cpsl-code-input/code-change-interface.js +0 -2
  204. package/dist/collection/components/cpsl-code-input/code-change-interface.js.map +0 -1
  205. package/dist/collection/components/cpsl-code-input/cpsl-code-input.css +0 -134
  206. package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +0 -223
  207. package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map +0 -1
  208. package/dist/collection/components/cpsl-code-input/test/cpsl-code-input.e2e.js +0 -29
  209. package/dist/collection/components/cpsl-code-input/test/cpsl-code-input.e2e.js.map +0 -1
  210. package/dist/collection/components/cpsl-code-input/test/cpsl-code-input.spec.js +0 -37
  211. package/dist/collection/components/cpsl-code-input/test/cpsl-code-input.spec.js.map +0 -1
  212. package/dist/collection/components/cpsl-col/cpsl-col.css +0 -200
  213. package/dist/collection/components/cpsl-col/cpsl-col.js +0 -528
  214. package/dist/collection/components/cpsl-col/cpsl-col.js.map +0 -1
  215. package/dist/collection/components/cpsl-col/test/cpsl-col.e2e.js +0 -29
  216. package/dist/collection/components/cpsl-col/test/cpsl-col.e2e.js.map +0 -1
  217. package/dist/collection/components/cpsl-col/test/cpsl-col.spec.js +0 -37
  218. package/dist/collection/components/cpsl-col/test/cpsl-col.spec.js.map +0 -1
  219. package/dist/collection/components/cpsl-divider/cpsl-divider.css +0 -73
  220. package/dist/collection/components/cpsl-divider/cpsl-divider.js +0 -19
  221. package/dist/collection/components/cpsl-divider/cpsl-divider.js.map +0 -1
  222. package/dist/collection/components/cpsl-divider/test/cpsl-divider.e2e.js +0 -29
  223. package/dist/collection/components/cpsl-divider/test/cpsl-divider.e2e.js.map +0 -1
  224. package/dist/collection/components/cpsl-divider/test/cpsl-divider.spec.js +0 -37
  225. package/dist/collection/components/cpsl-divider/test/cpsl-divider.spec.js.map +0 -1
  226. package/dist/collection/components/cpsl-grid/cpsl-grid.css +0 -235
  227. package/dist/collection/components/cpsl-grid/cpsl-grid.js +0 -46
  228. package/dist/collection/components/cpsl-grid/cpsl-grid.js.map +0 -1
  229. package/dist/collection/components/cpsl-grid/test/cpsl-grid.e2e.js +0 -29
  230. package/dist/collection/components/cpsl-grid/test/cpsl-grid.e2e.js.map +0 -1
  231. package/dist/collection/components/cpsl-grid/test/cpsl-grid.spec.js +0 -37
  232. package/dist/collection/components/cpsl-grid/test/cpsl-grid.spec.js.map +0 -1
  233. package/dist/collection/components/cpsl-icon/cpsl-icon.css +0 -95
  234. package/dist/collection/components/cpsl-icon/cpsl-icon.js +0 -68
  235. package/dist/collection/components/cpsl-icon/cpsl-icon.js.map +0 -1
  236. package/dist/collection/components/cpsl-icon/test/cpsl-icon.e2e.js +0 -29
  237. package/dist/collection/components/cpsl-icon/test/cpsl-icon.e2e.js.map +0 -1
  238. package/dist/collection/components/cpsl-icon/test/cpsl-icon.spec.js +0 -37
  239. package/dist/collection/components/cpsl-icon/test/cpsl-icon.spec.js.map +0 -1
  240. package/dist/collection/components/cpsl-info-box/cpsl-info-box.css +0 -77
  241. package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +0 -19
  242. package/dist/collection/components/cpsl-info-box/cpsl-info-box.js.map +0 -1
  243. package/dist/collection/components/cpsl-info-box/test/cpsl-info-box.e2e.js +0 -29
  244. package/dist/collection/components/cpsl-info-box/test/cpsl-info-box.e2e.js.map +0 -1
  245. package/dist/collection/components/cpsl-info-box/test/cpsl-info-box.spec.js +0 -37
  246. package/dist/collection/components/cpsl-info-box/test/cpsl-info-box.spec.js.map +0 -1
  247. package/dist/collection/components/cpsl-input/cpsl-input.css +0 -194
  248. package/dist/collection/components/cpsl-input/cpsl-input.js +0 -708
  249. package/dist/collection/components/cpsl-input/cpsl-input.js.map +0 -1
  250. package/dist/collection/components/cpsl-input/input-interface.js +0 -2
  251. package/dist/collection/components/cpsl-input/input-interface.js.map +0 -1
  252. package/dist/collection/components/cpsl-input/test/cpsl-input.e2e.js +0 -29
  253. package/dist/collection/components/cpsl-input/test/cpsl-input.e2e.js.map +0 -1
  254. package/dist/collection/components/cpsl-input/test/cpsl-input.spec.js +0 -37
  255. package/dist/collection/components/cpsl-input/test/cpsl-input.spec.js.map +0 -1
  256. package/dist/collection/components/cpsl-modal/cpsl-modal.css +0 -172
  257. package/dist/collection/components/cpsl-modal/cpsl-modal.js +0 -430
  258. package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +0 -1
  259. package/dist/collection/components/cpsl-modal/test/cpsl-modal.e2e.js +0 -29
  260. package/dist/collection/components/cpsl-modal/test/cpsl-modal.e2e.js.map +0 -1
  261. package/dist/collection/components/cpsl-modal/test/cpsl-modal.spec.js +0 -37
  262. package/dist/collection/components/cpsl-modal/test/cpsl-modal.spec.js.map +0 -1
  263. package/dist/collection/components/cpsl-overlay/cpsl-overlay.css +0 -11
  264. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +0 -108
  265. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js.map +0 -1
  266. package/dist/collection/components/cpsl-overlay/test/cpsl-overlay.e2e.js +0 -29
  267. package/dist/collection/components/cpsl-overlay/test/cpsl-overlay.e2e.js.map +0 -1
  268. package/dist/collection/components/cpsl-overlay/test/cpsl-overlay.spec.js +0 -37
  269. package/dist/collection/components/cpsl-overlay/test/cpsl-overlay.spec.js.map +0 -1
  270. package/dist/collection/components/cpsl-pill/cpsl-pill.css +0 -92
  271. package/dist/collection/components/cpsl-pill/cpsl-pill.js +0 -43
  272. package/dist/collection/components/cpsl-pill/cpsl-pill.js.map +0 -1
  273. package/dist/collection/components/cpsl-pill/test/cpsl-pill.e2e.js +0 -29
  274. package/dist/collection/components/cpsl-pill/test/cpsl-pill.e2e.js.map +0 -1
  275. package/dist/collection/components/cpsl-pill/test/cpsl-pill.spec.js +0 -37
  276. package/dist/collection/components/cpsl-pill/test/cpsl-pill.spec.js.map +0 -1
  277. package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.css +0 -82
  278. package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.js +0 -71
  279. package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.js.map +0 -1
  280. package/dist/collection/components/cpsl-progress-indicator/progress-indicator-interface.js +0 -2
  281. package/dist/collection/components/cpsl-progress-indicator/progress-indicator-interface.js.map +0 -1
  282. package/dist/collection/components/cpsl-progress-indicator/test/cpsl-progress-indicator.e2e.js +0 -29
  283. package/dist/collection/components/cpsl-progress-indicator/test/cpsl-progress-indicator.e2e.js.map +0 -1
  284. package/dist/collection/components/cpsl-progress-indicator/test/cpsl-progress-indicator.spec.js +0 -37
  285. package/dist/collection/components/cpsl-progress-indicator/test/cpsl-progress-indicator.spec.js.map +0 -1
  286. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css +0 -81
  287. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +0 -107
  288. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js.map +0 -1
  289. package/dist/collection/components/cpsl-qr-code/test/cpsl-qr-code.e2e.js +0 -29
  290. package/dist/collection/components/cpsl-qr-code/test/cpsl-qr-code.e2e.js.map +0 -1
  291. package/dist/collection/components/cpsl-qr-code/test/cpsl-qr-code.spec.js +0 -37
  292. package/dist/collection/components/cpsl-qr-code/test/cpsl-qr-code.spec.js.map +0 -1
  293. package/dist/collection/components/cpsl-row/cpsl-row.css +0 -136
  294. package/dist/collection/components/cpsl-row/cpsl-row.js +0 -19
  295. package/dist/collection/components/cpsl-row/cpsl-row.js.map +0 -1
  296. package/dist/collection/components/cpsl-row/test/cpsl-row.e2e.js +0 -29
  297. package/dist/collection/components/cpsl-row/test/cpsl-row.e2e.js.map +0 -1
  298. package/dist/collection/components/cpsl-row/test/cpsl-row.spec.js +0 -37
  299. package/dist/collection/components/cpsl-row/test/cpsl-row.spec.js.map +0 -1
  300. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.css +0 -175
  301. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +0 -252
  302. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js.map +0 -1
  303. package/dist/collection/components/cpsl-slide-button/test/cpsl-slide-button.e2e.js +0 -29
  304. package/dist/collection/components/cpsl-slide-button/test/cpsl-slide-button.e2e.js.map +0 -1
  305. package/dist/collection/components/cpsl-slide-button/test/cpsl-slide-button.spec.js +0 -37
  306. package/dist/collection/components/cpsl-slide-button/test/cpsl-slide-button.spec.js.map +0 -1
  307. package/dist/collection/components/cpsl-spinner/cpsl-spinner.css +0 -68
  308. package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +0 -69
  309. package/dist/collection/components/cpsl-spinner/cpsl-spinner.js.map +0 -1
  310. package/dist/collection/components/cpsl-spinner/test/cpsl-spinner.e2e.js +0 -29
  311. package/dist/collection/components/cpsl-spinner/test/cpsl-spinner.e2e.js.map +0 -1
  312. package/dist/collection/components/cpsl-spinner/test/cpsl-spinner.spec.js +0 -37
  313. package/dist/collection/components/cpsl-spinner/test/cpsl-spinner.spec.js.map +0 -1
  314. package/dist/collection/components/cpsl-tab/cpsl-tab.css +0 -23
  315. package/dist/collection/components/cpsl-tab/cpsl-tab.js +0 -121
  316. package/dist/collection/components/cpsl-tab/cpsl-tab.js.map +0 -1
  317. package/dist/collection/components/cpsl-tab/tab-interface.js +0 -2
  318. package/dist/collection/components/cpsl-tab/tab-interface.js.map +0 -1
  319. package/dist/collection/components/cpsl-tab/test/cpsl-tab.e2e.js +0 -29
  320. package/dist/collection/components/cpsl-tab/test/cpsl-tab.e2e.js.map +0 -1
  321. package/dist/collection/components/cpsl-tab/test/cpsl-tab.spec.js +0 -37
  322. package/dist/collection/components/cpsl-tab/test/cpsl-tab.spec.js.map +0 -1
  323. package/dist/collection/components/cpsl-tabs/cpsl-tabs.css +0 -111
  324. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +0 -170
  325. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js.map +0 -1
  326. package/dist/collection/components/cpsl-tabs/tabs-interface.js +0 -2
  327. package/dist/collection/components/cpsl-tabs/tabs-interface.js.map +0 -1
  328. package/dist/collection/components/cpsl-tabs/test/cpsl-tabs.e2e.js +0 -29
  329. package/dist/collection/components/cpsl-tabs/test/cpsl-tabs.e2e.js.map +0 -1
  330. package/dist/collection/components/cpsl-tabs/test/cpsl-tabs.spec.js +0 -37
  331. package/dist/collection/components/cpsl-tabs/test/cpsl-tabs.spec.js.map +0 -1
  332. package/dist/collection/components/cpsl-text/cpsl-text.css +0 -59
  333. package/dist/collection/components/cpsl-text/cpsl-text.js +0 -19
  334. package/dist/collection/components/cpsl-text/cpsl-text.js.map +0 -1
  335. package/dist/collection/components/cpsl-text/test/cpsl-text.e2e.js +0 -29
  336. package/dist/collection/components/cpsl-text/test/cpsl-text.e2e.js.map +0 -1
  337. package/dist/collection/components/cpsl-text/test/cpsl-text.spec.js +0 -37
  338. package/dist/collection/components/cpsl-text/test/cpsl-text.spec.js.map +0 -1
  339. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.css +0 -97
  340. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +0 -67
  341. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js.map +0 -1
  342. package/dist/collection/components/cpsl-tile-button/test/cpsl-tile-button.e2e.js +0 -29
  343. package/dist/collection/components/cpsl-tile-button/test/cpsl-tile-button.e2e.js.map +0 -1
  344. package/dist/collection/components/cpsl-tile-button/test/cpsl-tile-button.spec.js +0 -37
  345. package/dist/collection/components/cpsl-tile-button/test/cpsl-tile-button.spec.js.map +0 -1
  346. package/dist/collection/constants.js +0 -6
  347. package/dist/collection/constants.js.map +0 -1
  348. package/dist/collection/index.js +0 -3
  349. package/dist/collection/index.js.map +0 -1
  350. package/dist/collection/interface.js +0 -2
  351. package/dist/collection/interface.js.map +0 -1
  352. package/dist/collection/utils/media.js +0 -18
  353. package/dist/collection/utils/media.js.map +0 -1
  354. package/dist/collection/utils/theme/generateBorderRadii.js +0 -56
  355. package/dist/collection/utils/theme/generateBorderRadii.js.map +0 -1
  356. package/dist/collection/utils/theme/generateFont.js +0 -7
  357. package/dist/collection/utils/theme/generateFont.js.map +0 -1
  358. package/dist/collection/utils/theme/generatePalette.js +0 -46
  359. package/dist/collection/utils/theme/generatePalette.js.map +0 -1
  360. package/dist/collection/utils/theme/generateTheme.js +0 -12
  361. package/dist/collection/utils/theme/generateTheme.js.map +0 -1
  362. package/dist/collection/utils/theme/utils.js +0 -21
  363. package/dist/collection/utils/theme/utils.js.map +0 -1
  364. package/dist/esm/_commonjsHelpers-1789f0cf.js +0 -9
  365. package/dist/esm/_commonjsHelpers-1789f0cf.js.map +0 -1
  366. package/dist/esm/capsule.js +0 -22
  367. package/dist/esm/capsule.js.map +0 -1
  368. package/dist/esm/cpsl-alert_17.entry.js +0 -10691
  369. package/dist/esm/cpsl-alert_17.entry.js.map +0 -1
  370. package/dist/esm/cpsl-animation.entry.js.map +0 -1
  371. package/dist/esm/cpsl-col.entry.js.map +0 -1
  372. package/dist/esm/cpsl-grid.entry.js.map +0 -1
  373. package/dist/esm/cpsl-info-box.entry.js.map +0 -1
  374. package/dist/esm/cpsl-row.entry.js +0 -18
  375. package/dist/esm/cpsl-row.entry.js.map +0 -1
  376. package/dist/esm/index-f00e090c.js +0 -1982
  377. package/dist/esm/index-f00e090c.js.map +0 -1
  378. package/dist/esm/index.js +0 -338
  379. package/dist/esm/index.js.map +0 -1
  380. package/dist/esm/loader.js +0 -13
  381. package/dist/esm/loader.js.map +0 -1
  382. package/dist/esm/polyfills/core-js.js +0 -11
  383. package/dist/esm/polyfills/dom.js +0 -79
  384. package/dist/esm/polyfills/es5-html-element.js +0 -1
  385. package/dist/esm/polyfills/index.js +0 -34
  386. package/dist/esm/polyfills/system.js +0 -6
  387. package/dist/index.cjs.js +0 -1
  388. package/dist/index.js +0 -1
  389. package/dist/loader/cdn.js +0 -3
  390. package/dist/loader/index.cjs.js +0 -3
  391. package/dist/loader/index.d.ts +0 -21
  392. package/dist/loader/index.es2017.js +0 -3
  393. package/dist/loader/index.js +0 -4
  394. package/dist/loader/package.json +0 -11
  395. package/dist/scripts/buildIconLibrary.js +0 -33
  396. package/dist/scripts/buildIconLibrary.js.map +0 -1
  397. /package/dist/{esm → capsule}/app-globals-0f993ce5.js +0 -0
  398. /package/dist/{esm → capsule}/app-globals-0f993ce5.js.map +0 -0
  399. /package/dist/{esm → capsule}/constants-7b49abd5.js +0 -0
  400. /package/dist/{esm → capsule}/constants-7b49abd5.js.map +0 -0
@@ -0,0 +1,4148 @@
1
+ const NAMESPACE = 'capsule';
2
+ const BUILD = /* capsule */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: false, cssAnnotations: true, devTools: true, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: true, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: true, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
3
+ const Env = /* capsule */ {};
4
+
5
+ /**
6
+ * Virtual DOM patching algorithm based on Snabbdom by
7
+ * Simon Friis Vindum (@paldepind)
8
+ * Licensed under the MIT License
9
+ * https://github.com/snabbdom/snabbdom/blob/master/LICENSE
10
+ *
11
+ * Modified for Stencil's renderer and slot projection
12
+ */
13
+ let scopeId;
14
+ let contentRef;
15
+ let hostTagName;
16
+ let customError;
17
+ let i = 0;
18
+ let useNativeShadowDom = false;
19
+ let checkSlotFallbackVisibility = false;
20
+ let checkSlotRelocate = false;
21
+ let isSvgMode = false;
22
+ let renderingRef = null;
23
+ let queueCongestion = 0;
24
+ let queuePending = false;
25
+ const Build = {
26
+ isDev: BUILD.isDev ? true : false,
27
+ isBrowser: true,
28
+ isServer: false,
29
+ isTesting: BUILD.isTesting ? true : false,
30
+ };
31
+ const getAssetPath = (path) => {
32
+ const assetUrl = new URL(path, plt.$resourcesUrl$);
33
+ return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
34
+ };
35
+ const setAssetPath = (path) => (plt.$resourcesUrl$ = path);
36
+ const createTime = (fnName, tagName = '') => {
37
+ if (BUILD.profile && performance.mark) {
38
+ const key = `st:${fnName}:${tagName}:${i++}`;
39
+ // Start
40
+ performance.mark(key);
41
+ // End
42
+ return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key);
43
+ }
44
+ else {
45
+ return () => {
46
+ return;
47
+ };
48
+ }
49
+ };
50
+ const uniqueTime = (key, measureText) => {
51
+ if (BUILD.profile && performance.mark) {
52
+ if (performance.getEntriesByName(key, 'mark').length === 0) {
53
+ performance.mark(key);
54
+ }
55
+ return () => {
56
+ if (performance.getEntriesByName(measureText, 'measure').length === 0) {
57
+ performance.measure(measureText, key);
58
+ }
59
+ };
60
+ }
61
+ else {
62
+ return () => {
63
+ return;
64
+ };
65
+ }
66
+ };
67
+ const inspect = (ref) => {
68
+ const hostRef = getHostRef(ref);
69
+ if (!hostRef) {
70
+ return undefined;
71
+ }
72
+ const flags = hostRef.$flags$;
73
+ const hostElement = hostRef.$hostElement$;
74
+ return {
75
+ renderCount: hostRef.$renderCount$,
76
+ flags: {
77
+ hasRendered: !!(flags & 2 /* HOST_FLAGS.hasRendered */),
78
+ hasConnected: !!(flags & 1 /* HOST_FLAGS.hasConnected */),
79
+ isWaitingForChildren: !!(flags & 4 /* HOST_FLAGS.isWaitingForChildren */),
80
+ isConstructingInstance: !!(flags & 8 /* HOST_FLAGS.isConstructingInstance */),
81
+ isQueuedForUpdate: !!(flags & 16 /* HOST_FLAGS.isQueuedForUpdate */),
82
+ hasInitializedComponent: !!(flags & 32 /* HOST_FLAGS.hasInitializedComponent */),
83
+ hasLoadedComponent: !!(flags & 64 /* HOST_FLAGS.hasLoadedComponent */),
84
+ isWatchReady: !!(flags & 128 /* HOST_FLAGS.isWatchReady */),
85
+ isListenReady: !!(flags & 256 /* HOST_FLAGS.isListenReady */),
86
+ needsRerender: !!(flags & 512 /* HOST_FLAGS.needsRerender */),
87
+ },
88
+ instanceValues: hostRef.$instanceValues$,
89
+ ancestorComponent: hostRef.$ancestorComponent$,
90
+ hostElement,
91
+ lazyInstance: hostRef.$lazyInstance$,
92
+ vnode: hostRef.$vnode$,
93
+ modeName: hostRef.$modeName$,
94
+ onReadyPromise: hostRef.$onReadyPromise$,
95
+ onReadyResolve: hostRef.$onReadyResolve$,
96
+ onInstancePromise: hostRef.$onInstancePromise$,
97
+ onInstanceResolve: hostRef.$onInstanceResolve$,
98
+ onRenderResolve: hostRef.$onRenderResolve$,
99
+ queuedListeners: hostRef.$queuedListeners$,
100
+ rmListeners: hostRef.$rmListeners$,
101
+ ['s-id']: hostElement['s-id'],
102
+ ['s-cr']: hostElement['s-cr'],
103
+ ['s-lr']: hostElement['s-lr'],
104
+ ['s-p']: hostElement['s-p'],
105
+ ['s-rc']: hostElement['s-rc'],
106
+ ['s-sc']: hostElement['s-sc'],
107
+ };
108
+ };
109
+ const installDevTools = () => {
110
+ if (BUILD.devTools) {
111
+ const stencil = (win.stencil = win.stencil || {});
112
+ const originalInspect = stencil.inspect;
113
+ stencil.inspect = (ref) => {
114
+ let result = inspect(ref);
115
+ if (!result && typeof originalInspect === 'function') {
116
+ result = originalInspect(ref);
117
+ }
118
+ return result;
119
+ };
120
+ }
121
+ };
122
+ const CONTENT_REF_ID = 'r';
123
+ const ORG_LOCATION_ID = 'o';
124
+ const SLOT_NODE_ID = 's';
125
+ const TEXT_NODE_ID = 't';
126
+ const HYDRATE_ID = 's-id';
127
+ const HYDRATED_STYLE_ID = 'sty-id';
128
+ const HYDRATE_CHILD_ID = 'c-id';
129
+ const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
130
+ /**
131
+ * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
132
+ *
133
+ * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
134
+ * support as of Stencil v4.
135
+ */
136
+ const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
137
+ const XLINK_NS = 'http://www.w3.org/1999/xlink';
138
+ const FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
139
+ 'formAssociatedCallback',
140
+ 'formResetCallback',
141
+ 'formDisabledCallback',
142
+ 'formStateRestoreCallback',
143
+ ];
144
+ /**
145
+ * Default style mode id
146
+ */
147
+ /**
148
+ * Reusable empty obj/array
149
+ * Don't add values to these!!
150
+ */
151
+ const EMPTY_OBJ = {};
152
+ /**
153
+ * Namespaces
154
+ */
155
+ const SVG_NS = 'http://www.w3.org/2000/svg';
156
+ const HTML_NS = 'http://www.w3.org/1999/xhtml';
157
+ const isDef = (v) => v != null;
158
+ /**
159
+ * Check whether a value is a 'complex type', defined here as an object or a
160
+ * function.
161
+ *
162
+ * @param o the value to check
163
+ * @returns whether it's a complex type or not
164
+ */
165
+ const isComplexType = (o) => {
166
+ // https://jsperf.com/typeof-fn-object/5
167
+ o = typeof o;
168
+ return o === 'object' || o === 'function';
169
+ };
170
+ /**
171
+ * Helper method for querying a `meta` tag that contains a nonce value
172
+ * out of a DOM's head.
173
+ *
174
+ * @param doc The DOM containing the `head` to query against
175
+ * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
176
+ * exists or the tag has no content.
177
+ */
178
+ function queryNonceMetaTagContent(doc) {
179
+ var _a, _b, _c;
180
+ return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;
181
+ }
182
+ /**
183
+ * Production h() function based on Preact by
184
+ * Jason Miller (@developit)
185
+ * Licensed under the MIT License
186
+ * https://github.com/developit/preact/blob/master/LICENSE
187
+ *
188
+ * Modified for Stencil's compiler and vdom
189
+ */
190
+ // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
191
+ // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
192
+ const h = (nodeName, vnodeData, ...children) => {
193
+ let child = null;
194
+ let key = null;
195
+ let slotName = null;
196
+ let simple = false;
197
+ let lastSimple = false;
198
+ const vNodeChildren = [];
199
+ const walk = (c) => {
200
+ for (let i = 0; i < c.length; i++) {
201
+ child = c[i];
202
+ if (Array.isArray(child)) {
203
+ walk(child);
204
+ }
205
+ else if (child != null && typeof child !== 'boolean') {
206
+ if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {
207
+ child = String(child);
208
+ }
209
+ else if (BUILD.isDev && typeof nodeName !== 'function' && child.$flags$ === undefined) {
210
+ consoleDevError(`vNode passed as children has unexpected type.
211
+ Make sure it's using the correct h() function.
212
+ Empty objects can also be the cause, look for JSX comments that became objects.`);
213
+ }
214
+ if (simple && lastSimple) {
215
+ // If the previous child was simple (string), we merge both
216
+ vNodeChildren[vNodeChildren.length - 1].$text$ += child;
217
+ }
218
+ else {
219
+ // Append a new vNode, if it's text, we create a text vNode
220
+ vNodeChildren.push(simple ? newVNode(null, child) : child);
221
+ }
222
+ lastSimple = simple;
223
+ }
224
+ }
225
+ };
226
+ walk(children);
227
+ if (vnodeData) {
228
+ if (BUILD.isDev && nodeName === 'input') {
229
+ validateInputProperties(vnodeData);
230
+ }
231
+ if (BUILD.vdomKey && vnodeData.key) {
232
+ key = vnodeData.key;
233
+ }
234
+ if (BUILD.slotRelocation && vnodeData.name) {
235
+ slotName = vnodeData.name;
236
+ }
237
+ // normalize class / className attributes
238
+ if (BUILD.vdomClass) {
239
+ const classData = vnodeData.className || vnodeData.class;
240
+ if (classData) {
241
+ vnodeData.class =
242
+ typeof classData !== 'object'
243
+ ? classData
244
+ : Object.keys(classData)
245
+ .filter((k) => classData[k])
246
+ .join(' ');
247
+ }
248
+ }
249
+ }
250
+ if (BUILD.isDev && vNodeChildren.some(isHost)) {
251
+ consoleDevError(`The <Host> must be the single root component. Make sure:
252
+ - You are NOT using hostData() and <Host> in the same component.
253
+ - <Host> is used once, and it's the single root component of the render() function.`);
254
+ }
255
+ if (BUILD.vdomFunctional && typeof nodeName === 'function') {
256
+ // nodeName is a functional component
257
+ return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
258
+ }
259
+ const vnode = newVNode(nodeName, null);
260
+ vnode.$attrs$ = vnodeData;
261
+ if (vNodeChildren.length > 0) {
262
+ vnode.$children$ = vNodeChildren;
263
+ }
264
+ if (BUILD.vdomKey) {
265
+ vnode.$key$ = key;
266
+ }
267
+ if (BUILD.slotRelocation) {
268
+ vnode.$name$ = slotName;
269
+ }
270
+ return vnode;
271
+ };
272
+ /**
273
+ * A utility function for creating a virtual DOM node from a tag and some
274
+ * possible text content.
275
+ *
276
+ * @param tag the tag for this element
277
+ * @param text possible text content for the node
278
+ * @returns a newly-minted virtual DOM node
279
+ */
280
+ const newVNode = (tag, text) => {
281
+ const vnode = {
282
+ $flags$: 0,
283
+ $tag$: tag,
284
+ $text$: text,
285
+ $elm$: null,
286
+ $children$: null,
287
+ };
288
+ if (BUILD.vdomAttribute) {
289
+ vnode.$attrs$ = null;
290
+ }
291
+ if (BUILD.vdomKey) {
292
+ vnode.$key$ = null;
293
+ }
294
+ if (BUILD.slotRelocation) {
295
+ vnode.$name$ = null;
296
+ }
297
+ return vnode;
298
+ };
299
+ const Host = {};
300
+ /**
301
+ * Check whether a given node is a Host node or not
302
+ *
303
+ * @param node the virtual DOM node to check
304
+ * @returns whether it's a Host node or not
305
+ */
306
+ const isHost = (node) => node && node.$tag$ === Host;
307
+ /**
308
+ * Implementation of {@link d.FunctionalUtilities} for Stencil's VDom.
309
+ *
310
+ * Note that these functions convert from {@link d.VNode} to
311
+ * {@link d.ChildNode} to give functional component developers a friendly
312
+ * interface.
313
+ */
314
+ const vdomFnUtils = {
315
+ forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
316
+ map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate),
317
+ };
318
+ /**
319
+ * Convert a {@link d.VNode} to a {@link d.ChildNode} in order to present a
320
+ * friendlier public interface (hence, 'convertToPublic').
321
+ *
322
+ * @param node the virtual DOM node to convert
323
+ * @returns a converted child node
324
+ */
325
+ const convertToPublic = (node) => ({
326
+ vattrs: node.$attrs$,
327
+ vchildren: node.$children$,
328
+ vkey: node.$key$,
329
+ vname: node.$name$,
330
+ vtag: node.$tag$,
331
+ vtext: node.$text$,
332
+ });
333
+ /**
334
+ * Convert a {@link d.ChildNode} back to an equivalent {@link d.VNode} in
335
+ * order to use the resulting object in the virtual DOM. The initial object was
336
+ * likely created as part of presenting a public API, so converting it back
337
+ * involved making it 'private' again (hence, `convertToPrivate`).
338
+ *
339
+ * @param node the child node to convert
340
+ * @returns a converted virtual DOM node
341
+ */
342
+ const convertToPrivate = (node) => {
343
+ if (typeof node.vtag === 'function') {
344
+ const vnodeData = Object.assign({}, node.vattrs);
345
+ if (node.vkey) {
346
+ vnodeData.key = node.vkey;
347
+ }
348
+ if (node.vname) {
349
+ vnodeData.name = node.vname;
350
+ }
351
+ return h(node.vtag, vnodeData, ...(node.vchildren || []));
352
+ }
353
+ const vnode = newVNode(node.vtag, node.vtext);
354
+ vnode.$attrs$ = node.vattrs;
355
+ vnode.$children$ = node.vchildren;
356
+ vnode.$key$ = node.vkey;
357
+ vnode.$name$ = node.vname;
358
+ return vnode;
359
+ };
360
+ /**
361
+ * Validates the ordering of attributes on an input element
362
+ *
363
+ * @param inputElm the element to validate
364
+ */
365
+ const validateInputProperties = (inputElm) => {
366
+ const props = Object.keys(inputElm);
367
+ const value = props.indexOf('value');
368
+ if (value === -1) {
369
+ return;
370
+ }
371
+ const typeIndex = props.indexOf('type');
372
+ const minIndex = props.indexOf('min');
373
+ const maxIndex = props.indexOf('max');
374
+ const stepIndex = props.indexOf('step');
375
+ if (value < typeIndex || value < minIndex || value < maxIndex || value < stepIndex) {
376
+ consoleDevWarn(`The "value" prop of <input> should be set after "min", "max", "type" and "step"`);
377
+ }
378
+ };
379
+ /**
380
+ * Entrypoint of the client-side hydration process. Facilitates calls to hydrate the
381
+ * document and all its nodes.
382
+ *
383
+ * This process will also reconstruct the shadow root and slot DOM nodes for components using shadow DOM.
384
+ *
385
+ * @param hostElm The element to hydrate.
386
+ * @param tagName The element's tag name.
387
+ * @param hostId The host ID assigned to the element by the server.
388
+ * @param hostRef The host reference for the element.
389
+ */
390
+ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
391
+ const endHydrate = createTime('hydrateClient', tagName);
392
+ const shadowRoot = hostElm.shadowRoot;
393
+ const childRenderNodes = [];
394
+ const slotNodes = [];
395
+ const shadowRootNodes = BUILD.shadowDom && shadowRoot ? [] : null;
396
+ const vnode = (hostRef.$vnode$ = newVNode(tagName, null));
397
+ if (!plt.$orgLocNodes$) {
398
+ initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));
399
+ }
400
+ hostElm[HYDRATE_ID] = hostId;
401
+ hostElm.removeAttribute(HYDRATE_ID);
402
+ clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
403
+ childRenderNodes.map((c) => {
404
+ const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
405
+ const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
406
+ const node = c.$elm$;
407
+ // Put the node back in its original location since the native Shadow DOM
408
+ // can handle rendering it its correct location now
409
+ if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
410
+ orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
411
+ }
412
+ if (!shadowRoot) {
413
+ node['s-hn'] = tagName;
414
+ if (orgLocationNode) {
415
+ node['s-ol'] = orgLocationNode;
416
+ node['s-ol']['s-nr'] = node;
417
+ }
418
+ }
419
+ plt.$orgLocNodes$.delete(orgLocationId);
420
+ });
421
+ if (BUILD.shadowDom && shadowRoot) {
422
+ shadowRootNodes.map((shadowRootNode) => {
423
+ if (shadowRootNode) {
424
+ shadowRoot.appendChild(shadowRootNode);
425
+ }
426
+ });
427
+ }
428
+ endHydrate();
429
+ };
430
+ /**
431
+ * Recursively constructs the virtual node tree for a host element and its children.
432
+ * The tree is constructed by parsing the annotations set on the nodes by the server.
433
+ *
434
+ * In addition to constructing the vNode tree, we also track information about the node's
435
+ * descendants like which are slots, which should exist in the shadow root, and which
436
+ * are nodes that should be rendered as children of the parent node.
437
+ *
438
+ * @param parentVNode The vNode representing the parent node.
439
+ * @param childRenderNodes An array of all child nodes in the parent's node tree.
440
+ * @param slotNodes An array of all slot nodes in the parent's node tree.
441
+ * @param shadowRootNodes An array all nodes that should be rendered in the shadow root in the parent's node tree.
442
+ * @param hostElm The parent element.
443
+ * @param node The node to construct the vNode tree for.
444
+ * @param hostId The host ID assigned to the element by the server.
445
+ */
446
+ const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
447
+ let childNodeType;
448
+ let childIdSplt;
449
+ let childVNode;
450
+ let i;
451
+ if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
452
+ childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
453
+ if (childNodeType) {
454
+ // got the node data from the element's attribute
455
+ // `${hostId}.${nodeId}.${depth}.${index}`
456
+ childIdSplt = childNodeType.split('.');
457
+ if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
458
+ childVNode = {
459
+ $flags$: 0,
460
+ $hostId$: childIdSplt[0],
461
+ $nodeId$: childIdSplt[1],
462
+ $depth$: childIdSplt[2],
463
+ $index$: childIdSplt[3],
464
+ $tag$: node.tagName.toLowerCase(),
465
+ $elm$: node,
466
+ $attrs$: null,
467
+ $children$: null,
468
+ $key$: null,
469
+ $name$: null,
470
+ $text$: null,
471
+ };
472
+ childRenderNodes.push(childVNode);
473
+ node.removeAttribute(HYDRATE_CHILD_ID);
474
+ // this is a new child vnode
475
+ // so ensure its parent vnode has the vchildren array
476
+ if (!parentVNode.$children$) {
477
+ parentVNode.$children$ = [];
478
+ }
479
+ // add our child vnode to a specific index of the vnode's children
480
+ parentVNode.$children$[childVNode.$index$] = childVNode;
481
+ // this is now the new parent vnode for all the next child checks
482
+ parentVNode = childVNode;
483
+ if (shadowRootNodes && childVNode.$depth$ === '0') {
484
+ shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
485
+ }
486
+ }
487
+ }
488
+ // recursively drill down, end to start so we can remove nodes
489
+ for (i = node.childNodes.length - 1; i >= 0; i--) {
490
+ clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);
491
+ }
492
+ if (node.shadowRoot) {
493
+ // keep drilling down through the shadow root nodes
494
+ for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
495
+ clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);
496
+ }
497
+ }
498
+ }
499
+ else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
500
+ // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`
501
+ childIdSplt = node.nodeValue.split('.');
502
+ if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
503
+ // comment node for either the host id or a 0 host id
504
+ childNodeType = childIdSplt[0];
505
+ childVNode = {
506
+ $flags$: 0,
507
+ $hostId$: childIdSplt[1],
508
+ $nodeId$: childIdSplt[2],
509
+ $depth$: childIdSplt[3],
510
+ $index$: childIdSplt[4],
511
+ $elm$: node,
512
+ $attrs$: null,
513
+ $children$: null,
514
+ $key$: null,
515
+ $name$: null,
516
+ $tag$: null,
517
+ $text$: null,
518
+ };
519
+ if (childNodeType === TEXT_NODE_ID) {
520
+ childVNode.$elm$ = node.nextSibling;
521
+ if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* NODE_TYPE.TextNode */) {
522
+ childVNode.$text$ = childVNode.$elm$.textContent;
523
+ childRenderNodes.push(childVNode);
524
+ // remove the text comment since it's no longer needed
525
+ node.remove();
526
+ if (!parentVNode.$children$) {
527
+ parentVNode.$children$ = [];
528
+ }
529
+ parentVNode.$children$[childVNode.$index$] = childVNode;
530
+ if (shadowRootNodes && childVNode.$depth$ === '0') {
531
+ shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
532
+ }
533
+ }
534
+ }
535
+ else if (childVNode.$hostId$ === hostId) {
536
+ // this comment node is specifically for this host id
537
+ if (childNodeType === SLOT_NODE_ID) {
538
+ // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
539
+ childVNode.$tag$ = 'slot';
540
+ if (childIdSplt[5]) {
541
+ node['s-sn'] = childVNode.$name$ = childIdSplt[5];
542
+ }
543
+ else {
544
+ node['s-sn'] = '';
545
+ }
546
+ node['s-sr'] = true;
547
+ if (BUILD.shadowDom && shadowRootNodes) {
548
+ // browser support shadowRoot and this is a shadow dom component
549
+ // create an actual slot element
550
+ childVNode.$elm$ = doc.createElement(childVNode.$tag$);
551
+ if (childVNode.$name$) {
552
+ // add the slot name attribute
553
+ childVNode.$elm$.setAttribute('name', childVNode.$name$);
554
+ }
555
+ // insert the new slot element before the slot comment
556
+ node.parentNode.insertBefore(childVNode.$elm$, node);
557
+ // remove the slot comment since it's not needed for shadow
558
+ node.remove();
559
+ if (childVNode.$depth$ === '0') {
560
+ shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
561
+ }
562
+ }
563
+ slotNodes.push(childVNode);
564
+ if (!parentVNode.$children$) {
565
+ parentVNode.$children$ = [];
566
+ }
567
+ parentVNode.$children$[childVNode.$index$] = childVNode;
568
+ }
569
+ else if (childNodeType === CONTENT_REF_ID) {
570
+ // `${CONTENT_REF_ID}.${hostId}`;
571
+ if (BUILD.shadowDom && shadowRootNodes) {
572
+ // remove the content ref comment since it's not needed for shadow
573
+ node.remove();
574
+ }
575
+ else if (BUILD.slotRelocation) {
576
+ hostElm['s-cr'] = node;
577
+ node['s-cn'] = true;
578
+ }
579
+ }
580
+ }
581
+ }
582
+ }
583
+ else if (parentVNode && parentVNode.$tag$ === 'style') {
584
+ const vnode = newVNode(null, node.textContent);
585
+ vnode.$elm$ = node;
586
+ vnode.$index$ = '0';
587
+ parentVNode.$children$ = [vnode];
588
+ }
589
+ };
590
+ /**
591
+ * Recursively locate any comments representing an original location for a node in a node's
592
+ * children or shadowRoot children.
593
+ *
594
+ * @param node The node to search.
595
+ * @param orgLocNodes A map of the original location annotation and the current node being searched.
596
+ */
597
+ const initializeDocumentHydrate = (node, orgLocNodes) => {
598
+ if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
599
+ let i = 0;
600
+ for (; i < node.childNodes.length; i++) {
601
+ initializeDocumentHydrate(node.childNodes[i], orgLocNodes);
602
+ }
603
+ if (node.shadowRoot) {
604
+ for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
605
+ initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
606
+ }
607
+ }
608
+ }
609
+ else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
610
+ const childIdSplt = node.nodeValue.split('.');
611
+ if (childIdSplt[0] === ORG_LOCATION_ID) {
612
+ orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
613
+ node.nodeValue = '';
614
+ // useful to know if the original location is
615
+ // the root light-dom of a shadow dom component
616
+ node['s-en'] = childIdSplt[3];
617
+ }
618
+ }
619
+ };
620
+ // Private
621
+ const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
622
+ // Public
623
+ const setMode = (handler) => modeResolutionChain.push(handler);
624
+ const getMode = (ref) => getHostRef(ref).$modeName$;
625
+ /**
626
+ * Parse a new property value for a given property type.
627
+ *
628
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
629
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
630
+ * 1. `any`, the type given to `propValue` in the function signature
631
+ * 2. the type stored from `propType`.
632
+ *
633
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
634
+ *
635
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
636
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
637
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
638
+ * ```tsx
639
+ * <my-cmp prop-val={0}></my-cmp>
640
+ * ```
641
+ *
642
+ * HTML prop values on the other hand, will always a string
643
+ *
644
+ * @param propValue the new value to coerce to some type
645
+ * @param propType the type of the prop, expressed as a binary number
646
+ * @returns the parsed/coerced value
647
+ */
648
+ const parsePropertyValue = (propValue, propType) => {
649
+ // ensure this value is of the correct prop type
650
+ if (propValue != null && !isComplexType(propValue)) {
651
+ if (BUILD.propBoolean && propType & 4 /* MEMBER_FLAGS.Boolean */) {
652
+ // per the HTML spec, any string value means it is a boolean true value
653
+ // but we'll cheat here and say that the string "false" is the boolean false
654
+ return propValue === 'false' ? false : propValue === '' || !!propValue;
655
+ }
656
+ if (BUILD.propNumber && propType & 2 /* MEMBER_FLAGS.Number */) {
657
+ // force it to be a number
658
+ return parseFloat(propValue);
659
+ }
660
+ if (BUILD.propString && propType & 1 /* MEMBER_FLAGS.String */) {
661
+ // could have been passed as a number or boolean
662
+ // but we still want it as a string
663
+ return String(propValue);
664
+ }
665
+ // redundant return here for better minification
666
+ return propValue;
667
+ }
668
+ // not sure exactly what type we want
669
+ // so no need to change to a different type
670
+ return propValue;
671
+ };
672
+ const getElement = (ref) => (BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref);
673
+ const createEvent = (ref, name, flags) => {
674
+ const elm = getElement(ref);
675
+ return {
676
+ emit: (detail) => {
677
+ if (BUILD.isDev && !elm.isConnected) {
678
+ consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
679
+ }
680
+ return emitEvent(elm, name, {
681
+ bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
682
+ composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
683
+ cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
684
+ detail,
685
+ });
686
+ },
687
+ };
688
+ };
689
+ /**
690
+ * Helper function to create & dispatch a custom Event on a provided target
691
+ * @param elm the target of the Event
692
+ * @param name the name to give the custom Event
693
+ * @param opts options for configuring a custom Event
694
+ * @returns the custom Event
695
+ */
696
+ const emitEvent = (elm, name, opts) => {
697
+ const ev = plt.ce(name, opts);
698
+ elm.dispatchEvent(ev);
699
+ return ev;
700
+ };
701
+ const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
702
+ const registerStyle = (scopeId, cssText, allowCS) => {
703
+ let style = styles.get(scopeId);
704
+ if (supportsConstructableStylesheets && allowCS) {
705
+ style = (style || new CSSStyleSheet());
706
+ if (typeof style === 'string') {
707
+ style = cssText;
708
+ }
709
+ else {
710
+ style.replaceSync(cssText);
711
+ }
712
+ }
713
+ else {
714
+ style = cssText;
715
+ }
716
+ styles.set(scopeId, style);
717
+ };
718
+ const addStyle = (styleContainerNode, cmpMeta, mode) => {
719
+ var _a;
720
+ const scopeId = getScopeId(cmpMeta, mode);
721
+ const style = styles.get(scopeId);
722
+ if (!BUILD.attachStyles) {
723
+ return scopeId;
724
+ }
725
+ // if an element is NOT connected then getRootNode() will return the wrong root node
726
+ // so the fallback is to always use the document for the root node in those cases
727
+ styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
728
+ if (style) {
729
+ if (typeof style === 'string') {
730
+ styleContainerNode = styleContainerNode.head || styleContainerNode;
731
+ let appliedStyles = rootAppliedStyles.get(styleContainerNode);
732
+ let styleElm;
733
+ if (!appliedStyles) {
734
+ rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
735
+ }
736
+ if (!appliedStyles.has(scopeId)) {
737
+ if (BUILD.hydrateClientSide &&
738
+ styleContainerNode.host &&
739
+ (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) {
740
+ // This is only happening on native shadow-dom, do not needs CSS var shim
741
+ styleElm.innerHTML = style;
742
+ }
743
+ else {
744
+ styleElm = doc.createElement('style');
745
+ styleElm.innerHTML = style;
746
+ // Apply CSP nonce to the style tag if it exists
747
+ const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
748
+ if (nonce != null) {
749
+ styleElm.setAttribute('nonce', nonce);
750
+ }
751
+ if (BUILD.hydrateServerSide || BUILD.hotModuleReplacement) {
752
+ styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
753
+ }
754
+ styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
755
+ }
756
+ // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
757
+ if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
758
+ styleElm.innerHTML += SLOT_FB_CSS;
759
+ }
760
+ if (appliedStyles) {
761
+ appliedStyles.add(scopeId);
762
+ }
763
+ }
764
+ }
765
+ else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
766
+ styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
767
+ }
768
+ }
769
+ return scopeId;
770
+ };
771
+ const attachStyles = (hostRef) => {
772
+ const cmpMeta = hostRef.$cmpMeta$;
773
+ const elm = hostRef.$hostElement$;
774
+ const flags = cmpMeta.$flags$;
775
+ const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
776
+ const scopeId = addStyle(BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$);
777
+ if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
778
+ // only required when we're NOT using native shadow dom (slot)
779
+ // or this browser doesn't support native shadow dom
780
+ // and this host element was NOT created with SSR
781
+ // let's pick out the inner content for slot projection
782
+ // create a node to represent where the original
783
+ // content was first placed, which is useful later on
784
+ // DOM WRITE!!
785
+ elm['s-sc'] = scopeId;
786
+ elm.classList.add(scopeId + '-h');
787
+ if (BUILD.scoped && flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
788
+ elm.classList.add(scopeId + '-s');
789
+ }
790
+ }
791
+ endAttachStyles();
792
+ };
793
+ const getScopeId = (cmp, mode) => 'sc-' + (BUILD.mode && mode && cmp.$flags$ & 32 /* CMP_FLAGS.hasMode */ ? cmp.$tagName$ + '-' + mode : cmp.$tagName$);
794
+ const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
795
+ /**
796
+ * Production setAccessor() function based on Preact by
797
+ * Jason Miller (@developit)
798
+ * Licensed under the MIT License
799
+ * https://github.com/developit/preact/blob/master/LICENSE
800
+ *
801
+ * Modified for Stencil's compiler and vdom
802
+ */
803
+ /**
804
+ * When running a VDom render set properties present on a VDom node onto the
805
+ * corresponding HTML element.
806
+ *
807
+ * Note that this function has special functionality for the `class`,
808
+ * `style`, `key`, and `ref` attributes, as well as event handlers (like
809
+ * `onClick`, etc). All others are just passed through as-is.
810
+ *
811
+ * @param elm the HTMLElement onto which attributes should be set
812
+ * @param memberName the name of the attribute to set
813
+ * @param oldValue the old value for the attribute
814
+ * @param newValue the new value for the attribute
815
+ * @param isSvg whether we're in an svg context or not
816
+ * @param flags bitflags for Vdom variables
817
+ */
818
+ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
819
+ if (oldValue !== newValue) {
820
+ let isProp = isMemberInElement(elm, memberName);
821
+ let ln = memberName.toLowerCase();
822
+ if (BUILD.vdomClass && memberName === 'class') {
823
+ const classList = elm.classList;
824
+ const oldClasses = parseClassList(oldValue);
825
+ const newClasses = parseClassList(newValue);
826
+ classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
827
+ classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
828
+ }
829
+ else if (BUILD.vdomStyle && memberName === 'style') {
830
+ // update style attribute, css properties and values
831
+ if (BUILD.updatable) {
832
+ for (const prop in oldValue) {
833
+ if (!newValue || newValue[prop] == null) {
834
+ if (!BUILD.hydrateServerSide && prop.includes('-')) {
835
+ elm.style.removeProperty(prop);
836
+ }
837
+ else {
838
+ elm.style[prop] = '';
839
+ }
840
+ }
841
+ }
842
+ }
843
+ for (const prop in newValue) {
844
+ if (!oldValue || newValue[prop] !== oldValue[prop]) {
845
+ if (!BUILD.hydrateServerSide && prop.includes('-')) {
846
+ elm.style.setProperty(prop, newValue[prop]);
847
+ }
848
+ else {
849
+ elm.style[prop] = newValue[prop];
850
+ }
851
+ }
852
+ }
853
+ }
854
+ else if (BUILD.vdomKey && memberName === 'key')
855
+ ;
856
+ else if (BUILD.vdomRef && memberName === 'ref') {
857
+ // minifier will clean this up
858
+ if (newValue) {
859
+ newValue(elm);
860
+ }
861
+ }
862
+ else if (BUILD.vdomListener &&
863
+ (BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) &&
864
+ memberName[0] === 'o' &&
865
+ memberName[1] === 'n') {
866
+ // Event Handlers
867
+ // so if the member name starts with "on" and the 3rd characters is
868
+ // a capital letter, and it's not already a member on the element,
869
+ // then we're assuming it's an event listener
870
+ if (memberName[2] === '-') {
871
+ // on- prefixed events
872
+ // allows to be explicit about the dom event to listen without any magic
873
+ // under the hood:
874
+ // <my-cmp on-click> // listens for "click"
875
+ // <my-cmp on-Click> // listens for "Click"
876
+ // <my-cmp on-ionChange> // listens for "ionChange"
877
+ // <my-cmp on-EVENTS> // listens for "EVENTS"
878
+ memberName = memberName.slice(3);
879
+ }
880
+ else if (isMemberInElement(win, ln)) {
881
+ // standard event
882
+ // the JSX attribute could have been "onMouseOver" and the
883
+ // member name "onmouseover" is on the window's prototype
884
+ // so let's add the listener "mouseover", which is all lowercased
885
+ memberName = ln.slice(2);
886
+ }
887
+ else {
888
+ // custom event
889
+ // the JSX attribute could have been "onMyCustomEvent"
890
+ // so let's trim off the "on" prefix and lowercase the first character
891
+ // and add the listener "myCustomEvent"
892
+ // except for the first character, we keep the event name case
893
+ memberName = ln[2] + memberName.slice(3);
894
+ }
895
+ if (oldValue || newValue) {
896
+ // Need to account for "capture" events.
897
+ // If the event name ends with "Capture", we'll update the name to remove
898
+ // the "Capture" suffix and make sure the event listener is setup to handle the capture event.
899
+ const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
900
+ // Make sure we only replace the last instance of "Capture"
901
+ memberName = memberName.replace(CAPTURE_EVENT_REGEX, '');
902
+ if (oldValue) {
903
+ plt.rel(elm, memberName, oldValue, capture);
904
+ }
905
+ if (newValue) {
906
+ plt.ael(elm, memberName, newValue, capture);
907
+ }
908
+ }
909
+ }
910
+ else if (BUILD.vdomPropOrAttr) {
911
+ // Set property if it exists and it's not a SVG
912
+ const isComplex = isComplexType(newValue);
913
+ if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
914
+ try {
915
+ if (!elm.tagName.includes('-')) {
916
+ const n = newValue == null ? '' : newValue;
917
+ // Workaround for Safari, moving the <input> caret when re-assigning the same valued
918
+ if (memberName === 'list') {
919
+ isProp = false;
920
+ }
921
+ else if (oldValue == null || elm[memberName] != n) {
922
+ elm[memberName] = n;
923
+ }
924
+ }
925
+ else {
926
+ elm[memberName] = newValue;
927
+ }
928
+ }
929
+ catch (e) {
930
+ /**
931
+ * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
932
+ */
933
+ }
934
+ }
935
+ /**
936
+ * Need to manually update attribute if:
937
+ * - memberName is not an attribute
938
+ * - if we are rendering the host element in order to reflect attribute
939
+ * - if it's a SVG, since properties might not work in <svg>
940
+ * - if the newValue is null/undefined or 'false'.
941
+ */
942
+ let xlink = false;
943
+ if (BUILD.vdomXlink) {
944
+ if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
945
+ memberName = ln;
946
+ xlink = true;
947
+ }
948
+ }
949
+ if (newValue == null || newValue === false) {
950
+ if (newValue !== false || elm.getAttribute(memberName) === '') {
951
+ if (BUILD.vdomXlink && xlink) {
952
+ elm.removeAttributeNS(XLINK_NS, memberName);
953
+ }
954
+ else {
955
+ elm.removeAttribute(memberName);
956
+ }
957
+ }
958
+ }
959
+ else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
960
+ newValue = newValue === true ? '' : newValue;
961
+ if (BUILD.vdomXlink && xlink) {
962
+ elm.setAttributeNS(XLINK_NS, memberName, newValue);
963
+ }
964
+ else {
965
+ elm.setAttribute(memberName, newValue);
966
+ }
967
+ }
968
+ }
969
+ }
970
+ };
971
+ const parseClassListRegex = /\s/;
972
+ /**
973
+ * Parsed a string of classnames into an array
974
+ * @param value className string, e.g. "foo bar baz"
975
+ * @returns list of classes, e.g. ["foo", "bar", "baz"]
976
+ */
977
+ const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
978
+ const CAPTURE_EVENT_SUFFIX = 'Capture';
979
+ const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
980
+ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
981
+ // if the element passed in is a shadow root, which is a document fragment
982
+ // then we want to be adding attrs/props to the shadow root's "host" element
983
+ // if it's not a shadow root, then we add attrs/props to the same element
984
+ const elm = newVnode.$elm$.nodeType === 11 /* NODE_TYPE.DocumentFragment */ && newVnode.$elm$.host
985
+ ? newVnode.$elm$.host
986
+ : newVnode.$elm$;
987
+ const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
988
+ const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
989
+ if (BUILD.updatable) {
990
+ // remove attributes no longer present on the vnode by setting them to undefined
991
+ for (memberName in oldVnodeAttrs) {
992
+ if (!(memberName in newVnodeAttrs)) {
993
+ setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
994
+ }
995
+ }
996
+ }
997
+ // add new & update changed attributes
998
+ for (memberName in newVnodeAttrs) {
999
+ setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
1000
+ }
1001
+ };
1002
+ /**
1003
+ * Create a DOM Node corresponding to one of the children of a given VNode.
1004
+ *
1005
+ * @param oldParentVNode the parent VNode from the previous render
1006
+ * @param newParentVNode the parent VNode from the current render
1007
+ * @param childIndex the index of the VNode, in the _new_ parent node's
1008
+ * children, for which we will create a new DOM node
1009
+ * @param parentElm the parent DOM node which our new node will be a child of
1010
+ * @returns the newly created node
1011
+ */
1012
+ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
1013
+ // tslint:disable-next-line: prefer-const
1014
+ const newVNode = newParentVNode.$children$[childIndex];
1015
+ let i = 0;
1016
+ let elm;
1017
+ let childNode;
1018
+ let oldVNode;
1019
+ if (BUILD.slotRelocation && !useNativeShadowDom) {
1020
+ // remember for later we need to check to relocate nodes
1021
+ checkSlotRelocate = true;
1022
+ if (newVNode.$tag$ === 'slot') {
1023
+ if (scopeId) {
1024
+ // scoped css needs to add its scoped id to the parent element
1025
+ parentElm.classList.add(scopeId + '-s');
1026
+ }
1027
+ newVNode.$flags$ |= newVNode.$children$
1028
+ ? // slot element has fallback content
1029
+ 2 /* VNODE_FLAGS.isSlotFallback */
1030
+ : // slot element does not have fallback content
1031
+ 1 /* VNODE_FLAGS.isSlotReference */;
1032
+ }
1033
+ }
1034
+ if (BUILD.isDev && newVNode.$elm$) {
1035
+ consoleDevError(`The JSX ${newVNode.$text$ !== null ? `"${newVNode.$text$}" text` : `"${newVNode.$tag$}" element`} node should not be shared within the same renderer. The renderer caches element lookups in order to improve performance. However, a side effect from this is that the exact same JSX node should not be reused. For more information please see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes`);
1036
+ }
1037
+ if (BUILD.vdomText && newVNode.$text$ !== null) {
1038
+ // create text node
1039
+ elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
1040
+ }
1041
+ else if (BUILD.slotRelocation && newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) {
1042
+ // create a slot reference node
1043
+ elm = newVNode.$elm$ =
1044
+ BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : doc.createTextNode('');
1045
+ }
1046
+ else {
1047
+ if (BUILD.svg && !isSvgMode) {
1048
+ isSvgMode = newVNode.$tag$ === 'svg';
1049
+ }
1050
+ // create element
1051
+ elm = newVNode.$elm$ = (BUILD.svg
1052
+ ? doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, BUILD.slotRelocation && newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */
1053
+ ? 'slot-fb'
1054
+ : newVNode.$tag$)
1055
+ : doc.createElement(BUILD.slotRelocation && newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */
1056
+ ? 'slot-fb'
1057
+ : newVNode.$tag$));
1058
+ if (BUILD.svg && isSvgMode && newVNode.$tag$ === 'foreignObject') {
1059
+ isSvgMode = false;
1060
+ }
1061
+ // add css classes, attrs, props, listeners, etc.
1062
+ if (BUILD.vdomAttribute) {
1063
+ updateElement(null, newVNode, isSvgMode);
1064
+ }
1065
+ if ((BUILD.shadowDom || BUILD.scoped) && isDef(scopeId) && elm['s-si'] !== scopeId) {
1066
+ // if there is a scopeId and this is the initial render
1067
+ // then let's add the scopeId as a css class
1068
+ elm.classList.add((elm['s-si'] = scopeId));
1069
+ }
1070
+ if (newVNode.$children$) {
1071
+ for (i = 0; i < newVNode.$children$.length; ++i) {
1072
+ // create the node
1073
+ childNode = createElm(oldParentVNode, newVNode, i, elm);
1074
+ // return node could have been null
1075
+ if (childNode) {
1076
+ // append our new node
1077
+ elm.appendChild(childNode);
1078
+ }
1079
+ }
1080
+ }
1081
+ if (BUILD.svg) {
1082
+ if (newVNode.$tag$ === 'svg') {
1083
+ // Only reset the SVG context when we're exiting <svg> element
1084
+ isSvgMode = false;
1085
+ }
1086
+ else if (elm.tagName === 'foreignObject') {
1087
+ // Reenter SVG context when we're exiting <foreignObject> element
1088
+ isSvgMode = true;
1089
+ }
1090
+ }
1091
+ }
1092
+ // This needs to always happen so we can hide nodes that are projected
1093
+ // to another component but don't end up in a slot
1094
+ elm['s-hn'] = hostTagName;
1095
+ if (BUILD.slotRelocation) {
1096
+ if (newVNode.$flags$ & (2 /* VNODE_FLAGS.isSlotFallback */ | 1 /* VNODE_FLAGS.isSlotReference */)) {
1097
+ // remember the content reference comment
1098
+ elm['s-sr'] = true;
1099
+ // remember the content reference comment
1100
+ elm['s-cr'] = contentRef;
1101
+ // remember the slot name, or empty string for default slot
1102
+ elm['s-sn'] = newVNode.$name$ || '';
1103
+ // check if we've got an old vnode for this slot
1104
+ oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
1105
+ if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
1106
+ if (BUILD.experimentalSlotFixes) {
1107
+ // we've got an old slot vnode and the wrapper is being replaced
1108
+ // so let's move the old slot content to the root of the element currently being rendered
1109
+ relocateToHostRoot(oldParentVNode.$elm$);
1110
+ }
1111
+ else {
1112
+ // we've got an old slot vnode and the wrapper is being replaced
1113
+ // so let's move the old slot content back to its original location
1114
+ putBackInOriginalLocation(oldParentVNode.$elm$, false);
1115
+ }
1116
+ }
1117
+ }
1118
+ }
1119
+ return elm;
1120
+ };
1121
+ /**
1122
+ * Relocates all child nodes of an element that were a part of a previous slot relocation
1123
+ * to the root of the Stencil component currently being rendered. This happens when a parent
1124
+ * element of a slot reference node dynamically changes and triggers a re-render. We cannot use
1125
+ * `putBackInOriginalLocation()` because that may relocate nodes to elements that will not be re-rendered
1126
+ * and so they will not be relocated again.
1127
+ *
1128
+ * @param parentElm The element potentially containing relocated nodes.
1129
+ */
1130
+ const relocateToHostRoot = (parentElm) => {
1131
+ plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
1132
+ const host = parentElm.closest(hostTagName.toLowerCase());
1133
+ if (host != null) {
1134
+ const contentRefNode = Array.from(host.childNodes).find((ref) => ref['s-cr']);
1135
+ const childNodeArray = Array.from(parentElm.childNodes);
1136
+ // If we have a content ref, we need to invert the order of the nodes we're relocating
1137
+ // to preserve the correct order of elements in the DOM on future relocations
1138
+ for (const childNode of contentRefNode ? childNodeArray.reverse() : childNodeArray) {
1139
+ // Only relocate nodes that were slotted in
1140
+ if (childNode['s-sh'] != null) {
1141
+ host.insertBefore(childNode, contentRefNode !== null && contentRefNode !== void 0 ? contentRefNode : null);
1142
+ // Reset so we can correctly move the node around again.
1143
+ childNode['s-sh'] = undefined;
1144
+ // Need to tell the render pipeline to check to relocate slot content again
1145
+ checkSlotRelocate = true;
1146
+ }
1147
+ }
1148
+ }
1149
+ plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
1150
+ };
1151
+ const putBackInOriginalLocation = (parentElm, recursive) => {
1152
+ plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
1153
+ const oldSlotChildNodes = parentElm.childNodes;
1154
+ for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
1155
+ const childNode = oldSlotChildNodes[i];
1156
+ if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
1157
+ // and relocate it back to it's original location
1158
+ parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
1159
+ // remove the old original location comment entirely
1160
+ // later on the patch function will know what to do
1161
+ // and move this to the correct spot if need be
1162
+ childNode['s-ol'].remove();
1163
+ childNode['s-ol'] = undefined;
1164
+ // Reset so we can correctly move the node around again.
1165
+ childNode['s-sh'] = undefined;
1166
+ checkSlotRelocate = true;
1167
+ }
1168
+ if (recursive) {
1169
+ putBackInOriginalLocation(childNode, recursive);
1170
+ }
1171
+ }
1172
+ plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
1173
+ };
1174
+ /**
1175
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
1176
+ * add them to the DOM in the appropriate place.
1177
+ *
1178
+ * @param parentElm the DOM node which should be used as a parent for the new
1179
+ * DOM nodes
1180
+ * @param before a child of the `parentElm` which the new children should be
1181
+ * inserted before (optional)
1182
+ * @param parentVNode the parent virtual DOM node
1183
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
1184
+ * @param startIdx the index in the child virtual DOM nodes at which to start
1185
+ * creating DOM nodes (inclusive)
1186
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
1187
+ * creating DOM nodes (inclusive)
1188
+ */
1189
+ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
1190
+ let containerElm = ((BUILD.slotRelocation && parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
1191
+ let childNode;
1192
+ if (BUILD.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
1193
+ containerElm = containerElm.shadowRoot;
1194
+ }
1195
+ for (; startIdx <= endIdx; ++startIdx) {
1196
+ if (vnodes[startIdx]) {
1197
+ childNode = createElm(null, parentVNode, startIdx, parentElm);
1198
+ if (childNode) {
1199
+ vnodes[startIdx].$elm$ = childNode;
1200
+ containerElm.insertBefore(childNode, BUILD.slotRelocation ? referenceNode(before) : before);
1201
+ }
1202
+ }
1203
+ }
1204
+ };
1205
+ /**
1206
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
1207
+ * This can be used to, for instance, clean up after a list of children which
1208
+ * should no longer be shown.
1209
+ *
1210
+ * This function also handles some of Stencil's slot relocation logic.
1211
+ *
1212
+ * @param vnodes a list of virtual DOM nodes to remove
1213
+ * @param startIdx the index at which to start removing nodes (inclusive)
1214
+ * @param endIdx the index at which to stop removing nodes (inclusive)
1215
+ */
1216
+ const removeVnodes = (vnodes, startIdx, endIdx) => {
1217
+ for (let index = startIdx; index <= endIdx; ++index) {
1218
+ const vnode = vnodes[index];
1219
+ if (vnode) {
1220
+ const elm = vnode.$elm$;
1221
+ nullifyVNodeRefs(vnode);
1222
+ if (elm) {
1223
+ if (BUILD.slotRelocation) {
1224
+ // we're removing this element
1225
+ // so it's possible we need to show slot fallback content now
1226
+ checkSlotFallbackVisibility = true;
1227
+ if (elm['s-ol']) {
1228
+ // remove the original location comment
1229
+ elm['s-ol'].remove();
1230
+ }
1231
+ else {
1232
+ // it's possible that child nodes of the node
1233
+ // that's being removed are slot nodes
1234
+ putBackInOriginalLocation(elm, true);
1235
+ }
1236
+ }
1237
+ // remove the vnode's element from the dom
1238
+ elm.remove();
1239
+ }
1240
+ }
1241
+ }
1242
+ };
1243
+ /**
1244
+ * Reconcile the children of a new VNode with the children of an old VNode by
1245
+ * traversing the two collections of children, identifying nodes that are
1246
+ * conserved or changed, calling out to `patch` to make any necessary
1247
+ * updates to the DOM, and rearranging DOM nodes as needed.
1248
+ *
1249
+ * The algorithm for reconciling children works by analyzing two 'windows' onto
1250
+ * the two arrays of children (`oldCh` and `newCh`). We keep track of the
1251
+ * 'windows' by storing start and end indices and references to the
1252
+ * corresponding array entries. Initially the two 'windows' are basically equal
1253
+ * to the entire array, but we progressively narrow the windows until there are
1254
+ * no children left to update by doing the following:
1255
+ *
1256
+ * 1. Skip any `null` entries at the beginning or end of the two arrays, so
1257
+ * that if we have an initial array like the following we'll end up dealing
1258
+ * only with a window bounded by the highlighted elements:
1259
+ *
1260
+ * [null, null, VNode1 , ... , VNode2, null, null]
1261
+ * ^^^^^^ ^^^^^^
1262
+ *
1263
+ * 2. Check to see if the elements at the head and tail positions are equal
1264
+ * across the windows. This will basically detect elements which haven't
1265
+ * been added, removed, or changed position, i.e. if you had the following
1266
+ * VNode elements (represented as HTML):
1267
+ *
1268
+ * oldVNode: `<div><p><span>HEY</span></p></div>`
1269
+ * newVNode: `<div><p><span>THERE</span></p></div>`
1270
+ *
1271
+ * Then when comparing the children of the `<div>` tag we check the equality
1272
+ * of the VNodes corresponding to the `<p>` tags and, since they are the
1273
+ * same tag in the same position, we'd be able to avoid completely
1274
+ * re-rendering the subtree under them with a new DOM element and would just
1275
+ * call out to `patch` to handle reconciling their children and so on.
1276
+ *
1277
+ * 3. Check, for both windows, to see if the element at the beginning of the
1278
+ * window corresponds to the element at the end of the other window. This is
1279
+ * a heuristic which will let us identify _some_ situations in which
1280
+ * elements have changed position, for instance it _should_ detect that the
1281
+ * children nodes themselves have not changed but merely moved in the
1282
+ * following example:
1283
+ *
1284
+ * oldVNode: `<div><element-one /><element-two /></div>`
1285
+ * newVNode: `<div><element-two /><element-one /></div>`
1286
+ *
1287
+ * If we find cases like this then we also need to move the concrete DOM
1288
+ * elements corresponding to the moved children to write the re-order to the
1289
+ * DOM.
1290
+ *
1291
+ * 4. Finally, if VNodes have the `key` attribute set on them we check for any
1292
+ * nodes in the old children which have the same key as the first element in
1293
+ * our window on the new children. If we find such a node we handle calling
1294
+ * out to `patch`, moving relevant DOM nodes, and so on, in accordance with
1295
+ * what we find.
1296
+ *
1297
+ * Finally, once we've narrowed our 'windows' to the point that either of them
1298
+ * collapse (i.e. they have length 0) we then handle any remaining VNode
1299
+ * insertion or deletion that needs to happen to get a DOM state that correctly
1300
+ * reflects the new child VNodes. If, for instance, after our window on the old
1301
+ * children has collapsed we still have more nodes on the new children that
1302
+ * we haven't dealt with yet then we need to add them, or if the new children
1303
+ * collapse but we still have unhandled _old_ children then we need to make
1304
+ * sure the corresponding DOM nodes are removed.
1305
+ *
1306
+ * @param parentElm the node into which the parent VNode is rendered
1307
+ * @param oldCh the old children of the parent node
1308
+ * @param newVNode the new VNode which will replace the parent
1309
+ * @param newCh the new children of the parent node
1310
+ * @param isInitialRender whether or not this is the first render of the vdom
1311
+ */
1312
+ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
1313
+ let oldStartIdx = 0;
1314
+ let newStartIdx = 0;
1315
+ let idxInOld = 0;
1316
+ let i = 0;
1317
+ let oldEndIdx = oldCh.length - 1;
1318
+ let oldStartVnode = oldCh[0];
1319
+ let oldEndVnode = oldCh[oldEndIdx];
1320
+ let newEndIdx = newCh.length - 1;
1321
+ let newStartVnode = newCh[0];
1322
+ let newEndVnode = newCh[newEndIdx];
1323
+ let node;
1324
+ let elmToMove;
1325
+ while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
1326
+ if (oldStartVnode == null) {
1327
+ // VNode might have been moved left
1328
+ oldStartVnode = oldCh[++oldStartIdx];
1329
+ }
1330
+ else if (oldEndVnode == null) {
1331
+ oldEndVnode = oldCh[--oldEndIdx];
1332
+ }
1333
+ else if (newStartVnode == null) {
1334
+ newStartVnode = newCh[++newStartIdx];
1335
+ }
1336
+ else if (newEndVnode == null) {
1337
+ newEndVnode = newCh[--newEndIdx];
1338
+ }
1339
+ else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
1340
+ // if the start nodes are the same then we should patch the new VNode
1341
+ // onto the old one, and increment our `newStartIdx` and `oldStartIdx`
1342
+ // indices to reflect that. We don't need to move any DOM Nodes around
1343
+ // since things are matched up in order.
1344
+ patch(oldStartVnode, newStartVnode, isInitialRender);
1345
+ oldStartVnode = oldCh[++oldStartIdx];
1346
+ newStartVnode = newCh[++newStartIdx];
1347
+ }
1348
+ else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
1349
+ // likewise, if the end nodes are the same we patch new onto old and
1350
+ // decrement our end indices, and also likewise in this case we don't
1351
+ // need to move any DOM Nodes.
1352
+ patch(oldEndVnode, newEndVnode, isInitialRender);
1353
+ oldEndVnode = oldCh[--oldEndIdx];
1354
+ newEndVnode = newCh[--newEndIdx];
1355
+ }
1356
+ else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
1357
+ // case: "Vnode moved right"
1358
+ //
1359
+ // We've found that the last node in our window on the new children is
1360
+ // the same VNode as the _first_ node in our window on the old children
1361
+ // we're dealing with now. Visually, this is the layout of these two
1362
+ // nodes:
1363
+ //
1364
+ // newCh: [..., newStartVnode , ... , newEndVnode , ...]
1365
+ // ^^^^^^^^^^^
1366
+ // oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]
1367
+ // ^^^^^^^^^^^^^
1368
+ //
1369
+ // In this situation we need to patch `newEndVnode` onto `oldStartVnode`
1370
+ // and move the DOM element for `oldStartVnode`.
1371
+ if (BUILD.slotRelocation && (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
1372
+ putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
1373
+ }
1374
+ patch(oldStartVnode, newEndVnode, isInitialRender);
1375
+ // We need to move the element for `oldStartVnode` into a position which
1376
+ // will be appropriate for `newEndVnode`. For this we can use
1377
+ // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
1378
+ // sibling for `oldEndVnode.$elm$` then we want to move the DOM node for
1379
+ // `oldStartVnode` between `oldEndVnode` and it's sibling, like so:
1380
+ //
1381
+ // <old-start-node />
1382
+ // <some-intervening-node />
1383
+ // <old-end-node />
1384
+ // <!-- -> <-- `oldStartVnode.$elm$` should be inserted here
1385
+ // <next-sibling />
1386
+ //
1387
+ // If instead `oldEndVnode.$elm$` has no sibling then we just want to put
1388
+ // the node for `oldStartVnode` at the end of the children of
1389
+ // `parentElm`. Luckily, `Node.nextSibling` will return `null` if there
1390
+ // aren't any siblings, and passing `null` to `Node.insertBefore` will
1391
+ // append it to the children of the parent element.
1392
+ parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
1393
+ oldStartVnode = oldCh[++oldStartIdx];
1394
+ newEndVnode = newCh[--newEndIdx];
1395
+ }
1396
+ else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
1397
+ // case: "Vnode moved left"
1398
+ //
1399
+ // We've found that the first node in our window on the new children is
1400
+ // the same VNode as the _last_ node in our window on the old children.
1401
+ // Visually, this is the layout of these two nodes:
1402
+ //
1403
+ // newCh: [..., newStartVnode , ... , newEndVnode , ...]
1404
+ // ^^^^^^^^^^^^^
1405
+ // oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]
1406
+ // ^^^^^^^^^^^
1407
+ //
1408
+ // In this situation we need to patch `newStartVnode` onto `oldEndVnode`
1409
+ // (which will handle updating any changed attributes, reconciling their
1410
+ // children etc) but we also need to move the DOM node to which
1411
+ // `oldEndVnode` corresponds.
1412
+ if (BUILD.slotRelocation && (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
1413
+ putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
1414
+ }
1415
+ patch(oldEndVnode, newStartVnode, isInitialRender);
1416
+ // We've already checked above if `oldStartVnode` and `newStartVnode` are
1417
+ // the same node, so since we're here we know that they are not. Thus we
1418
+ // can move the element for `oldEndVnode` _before_ the element for
1419
+ // `oldStartVnode`, leaving `oldStartVnode` to be reconciled in the
1420
+ // future.
1421
+ parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
1422
+ oldEndVnode = oldCh[--oldEndIdx];
1423
+ newStartVnode = newCh[++newStartIdx];
1424
+ }
1425
+ else {
1426
+ // Here we do some checks to match up old and new nodes based on the
1427
+ // `$key$` attribute, which is set by putting a `key="my-key"` attribute
1428
+ // in the JSX for a DOM element in the implementation of a Stencil
1429
+ // component.
1430
+ //
1431
+ // First we check to see if there are any nodes in the array of old
1432
+ // children which have the same key as the first node in the new
1433
+ // children.
1434
+ idxInOld = -1;
1435
+ if (BUILD.vdomKey) {
1436
+ for (i = oldStartIdx; i <= oldEndIdx; ++i) {
1437
+ if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
1438
+ idxInOld = i;
1439
+ break;
1440
+ }
1441
+ }
1442
+ }
1443
+ if (BUILD.vdomKey && idxInOld >= 0) {
1444
+ // We found a node in the old children which matches up with the first
1445
+ // node in the new children! So let's deal with that
1446
+ elmToMove = oldCh[idxInOld];
1447
+ if (elmToMove.$tag$ !== newStartVnode.$tag$) {
1448
+ // the tag doesn't match so we'll need a new DOM element
1449
+ node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
1450
+ }
1451
+ else {
1452
+ patch(elmToMove, newStartVnode, isInitialRender);
1453
+ // invalidate the matching old node so that we won't try to update it
1454
+ // again later on
1455
+ oldCh[idxInOld] = undefined;
1456
+ node = elmToMove.$elm$;
1457
+ }
1458
+ newStartVnode = newCh[++newStartIdx];
1459
+ }
1460
+ else {
1461
+ // We either didn't find an element in the old children that matches
1462
+ // the key of the first new child OR the build is not using `key`
1463
+ // attributes at all. In either case we need to create a new element
1464
+ // for the new node.
1465
+ node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
1466
+ newStartVnode = newCh[++newStartIdx];
1467
+ }
1468
+ if (node) {
1469
+ // if we created a new node then handle inserting it to the DOM
1470
+ if (BUILD.slotRelocation) {
1471
+ parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
1472
+ }
1473
+ else {
1474
+ oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
1475
+ }
1476
+ }
1477
+ }
1478
+ }
1479
+ if (oldStartIdx > oldEndIdx) {
1480
+ // we have some more new nodes to add which don't match up with old nodes
1481
+ addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
1482
+ }
1483
+ else if (BUILD.updatable && newStartIdx > newEndIdx) {
1484
+ // there are nodes in the `oldCh` array which no longer correspond to nodes
1485
+ // in the new array, so lets remove them (which entails cleaning up the
1486
+ // relevant DOM nodes)
1487
+ removeVnodes(oldCh, oldStartIdx, oldEndIdx);
1488
+ }
1489
+ };
1490
+ /**
1491
+ * Compare two VNodes to determine if they are the same
1492
+ *
1493
+ * **NB**: This function is an equality _heuristic_ based on the available
1494
+ * information set on the two VNodes and can be misleading under certain
1495
+ * circumstances. In particular, if the two nodes do not have `key` attrs
1496
+ * (available under `$key$` on VNodes) then the function falls back on merely
1497
+ * checking that they have the same tag.
1498
+ *
1499
+ * So, in other words, if `key` attrs are not set on VNodes which may be
1500
+ * changing order within a `children` array or something along those lines then
1501
+ * we could obtain a false negative and then have to do needless re-rendering
1502
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
1503
+ *
1504
+ * @param leftVNode the first VNode to check
1505
+ * @param rightVNode the second VNode to check
1506
+ * @param isInitialRender whether or not this is the first render of the vdom
1507
+ * @returns whether they're equal or not
1508
+ */
1509
+ const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
1510
+ // compare if two vnode to see if they're "technically" the same
1511
+ // need to have the same element tag, and same key to be the same
1512
+ if (leftVNode.$tag$ === rightVNode.$tag$) {
1513
+ if (BUILD.slotRelocation && leftVNode.$tag$ === 'slot') {
1514
+ return leftVNode.$name$ === rightVNode.$name$;
1515
+ }
1516
+ // this will be set if JSX tags in the build have `key` attrs set on them
1517
+ // we only want to check this if we're not on the first render since on
1518
+ // first render `leftVNode.$key$` will always be `null`, so we can be led
1519
+ // astray and, for instance, accidentally delete a DOM node that we want to
1520
+ // keep around.
1521
+ if (BUILD.vdomKey && !isInitialRender) {
1522
+ return leftVNode.$key$ === rightVNode.$key$;
1523
+ }
1524
+ return true;
1525
+ }
1526
+ return false;
1527
+ };
1528
+ const referenceNode = (node) => {
1529
+ // this node was relocated to a new location in the dom
1530
+ // because of some other component's slot
1531
+ // but we still have an html comment in place of where
1532
+ // it's original location was according to it's original vdom
1533
+ return (node && node['s-ol']) || node;
1534
+ };
1535
+ const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
1536
+ /**
1537
+ * Handle reconciling an outdated VNode with a new one which corresponds to
1538
+ * it. This function handles flushing updates to the DOM and reconciling the
1539
+ * children of the two nodes (if any).
1540
+ *
1541
+ * @param oldVNode an old VNode whose DOM element and children we want to update
1542
+ * @param newVNode a new VNode representing an updated version of the old one
1543
+ * @param isInitialRender whether or not this is the first render of the vdom
1544
+ */
1545
+ const patch = (oldVNode, newVNode, isInitialRender = false) => {
1546
+ const elm = (newVNode.$elm$ = oldVNode.$elm$);
1547
+ const oldChildren = oldVNode.$children$;
1548
+ const newChildren = newVNode.$children$;
1549
+ const tag = newVNode.$tag$;
1550
+ const text = newVNode.$text$;
1551
+ let defaultHolder;
1552
+ if (!BUILD.vdomText || text === null) {
1553
+ if (BUILD.svg) {
1554
+ // test if we're rendering an svg element, or still rendering nodes inside of one
1555
+ // only add this to the when the compiler sees we're using an svg somewhere
1556
+ isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
1557
+ }
1558
+ if (BUILD.vdomAttribute || BUILD.reflect) {
1559
+ if (BUILD.slot && tag === 'slot' && !useNativeShadowDom) {
1560
+ if (BUILD.experimentalSlotFixes && oldVNode.$name$ !== newVNode.$name$) {
1561
+ newVNode.$elm$['s-sn'] = newVNode.$name$ || '';
1562
+ relocateToHostRoot(newVNode.$elm$.parentElement);
1563
+ }
1564
+ }
1565
+ else {
1566
+ // either this is the first render of an element OR it's an update
1567
+ // AND we already know it's possible it could have changed
1568
+ // this updates the element's css classes, attrs, props, listeners, etc.
1569
+ updateElement(oldVNode, newVNode, isSvgMode);
1570
+ }
1571
+ }
1572
+ if (BUILD.updatable && oldChildren !== null && newChildren !== null) {
1573
+ // looks like there's child vnodes for both the old and new vnodes
1574
+ // so we need to call `updateChildren` to reconcile them
1575
+ updateChildren(elm, oldChildren, newVNode, newChildren, isInitialRender);
1576
+ }
1577
+ else if (newChildren !== null) {
1578
+ // no old child vnodes, but there are new child vnodes to add
1579
+ if (BUILD.updatable && BUILD.vdomText && oldVNode.$text$ !== null) {
1580
+ // the old vnode was text, so be sure to clear it out
1581
+ elm.textContent = '';
1582
+ }
1583
+ // add the new vnode children
1584
+ addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
1585
+ }
1586
+ else if (BUILD.updatable && oldChildren !== null) {
1587
+ // no new child vnodes, but there are old child vnodes to remove
1588
+ removeVnodes(oldChildren, 0, oldChildren.length - 1);
1589
+ }
1590
+ if (BUILD.svg && isSvgMode && tag === 'svg') {
1591
+ isSvgMode = false;
1592
+ }
1593
+ }
1594
+ else if (BUILD.vdomText && BUILD.slotRelocation && (defaultHolder = elm['s-cr'])) {
1595
+ // this element has slotted content
1596
+ defaultHolder.parentNode.textContent = text;
1597
+ }
1598
+ else if (BUILD.vdomText && oldVNode.$text$ !== text) {
1599
+ // update the text content for the text only vnode
1600
+ // and also only if the text is different than before
1601
+ elm.data = text;
1602
+ }
1603
+ };
1604
+ /**
1605
+ * Adjust the `.hidden` property as-needed on any nodes in a DOM subtree which
1606
+ * are slot fallbacks nodes.
1607
+ *
1608
+ * A slot fallback node should be visible by default. Then, it should be
1609
+ * conditionally hidden if:
1610
+ *
1611
+ * - it has a sibling with a `slot` property set to its slot name or if
1612
+ * - it is a default fallback slot node, in which case we hide if it has any
1613
+ * content
1614
+ *
1615
+ * @param elm the element of interest
1616
+ */
1617
+ const updateFallbackSlotVisibility = (elm) => {
1618
+ const childNodes = elm.childNodes;
1619
+ for (const childNode of childNodes) {
1620
+ if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
1621
+ if (childNode['s-sr']) {
1622
+ // this is a slot fallback node
1623
+ // get the slot name for this slot reference node
1624
+ const slotName = childNode['s-sn'];
1625
+ // by default always show a fallback slot node
1626
+ // then hide it if there are other slots in the light dom
1627
+ childNode.hidden = false;
1628
+ // we need to check all of its sibling nodes in order to see if
1629
+ // `childNode` should be hidden
1630
+ for (const siblingNode of childNodes) {
1631
+ // Don't check the node against itself
1632
+ if (siblingNode !== childNode) {
1633
+ if (siblingNode['s-hn'] !== childNode['s-hn'] || slotName !== '') {
1634
+ // this sibling node is from a different component OR is a named
1635
+ // fallback slot node
1636
+ if (siblingNode.nodeType === 1 /* NODE_TYPE.ElementNode */ &&
1637
+ (slotName === siblingNode.getAttribute('slot') || slotName === siblingNode['s-sn'])) {
1638
+ childNode.hidden = true;
1639
+ break;
1640
+ }
1641
+ }
1642
+ else {
1643
+ // this is a default fallback slot node
1644
+ // any element or text node (with content)
1645
+ // should hide the default fallback slot node
1646
+ if (siblingNode.nodeType === 1 /* NODE_TYPE.ElementNode */ ||
1647
+ (siblingNode.nodeType === 3 /* NODE_TYPE.TextNode */ && siblingNode.textContent.trim() !== '')) {
1648
+ childNode.hidden = true;
1649
+ break;
1650
+ }
1651
+ }
1652
+ }
1653
+ }
1654
+ }
1655
+ // keep drilling down
1656
+ updateFallbackSlotVisibility(childNode);
1657
+ }
1658
+ }
1659
+ };
1660
+ /**
1661
+ * Component-global information about nodes which are either currently being
1662
+ * relocated or will be shortly.
1663
+ */
1664
+ const relocateNodes = [];
1665
+ /**
1666
+ * Mark the contents of a slot for relocation via adding references to them to
1667
+ * the {@link relocateNodes} data structure. The actual work of relocating them
1668
+ * will then be handled in {@link renderVdom}.
1669
+ *
1670
+ * @param elm a render node whose child nodes need to be relocated
1671
+ */
1672
+ const markSlotContentForRelocation = (elm) => {
1673
+ // tslint:disable-next-line: prefer-const
1674
+ let node;
1675
+ let hostContentNodes;
1676
+ let j;
1677
+ for (const childNode of elm.childNodes) {
1678
+ // we need to find child nodes which are slot references so we can then try
1679
+ // to match them up with nodes that need to be relocated
1680
+ if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
1681
+ // first get the content reference comment node ('s-cr'), then we get
1682
+ // its parent, which is where all the host content is now
1683
+ hostContentNodes = node.parentNode.childNodes;
1684
+ const slotName = childNode['s-sn'];
1685
+ // iterate through all the nodes under the location where the host was
1686
+ // originally rendered
1687
+ for (j = hostContentNodes.length - 1; j >= 0; j--) {
1688
+ node = hostContentNodes[j];
1689
+ // check that the node is not a content reference node or a node
1690
+ // reference and then check that the host name does not match that of
1691
+ // childNode.
1692
+ // In addition, check that the slot either has not already been relocated, or
1693
+ // that its current location's host is not childNode's host. This is essentially
1694
+ // a check so that we don't try to relocate (and then hide) a node that is already
1695
+ // where it should be.
1696
+ if (!node['s-cn'] &&
1697
+ !node['s-nr'] &&
1698
+ node['s-hn'] !== childNode['s-hn'] &&
1699
+ (!BUILD.experimentalSlotFixes || !node['s-sh'] || node['s-sh'] !== childNode['s-hn'])) {
1700
+ // if `node` is located in the slot that `childNode` refers to (via the
1701
+ // `'s-sn'` property) then we need to relocate it from it's current spot
1702
+ // (under the host element parent) to the right slot location
1703
+ if (isNodeLocatedInSlot(node, slotName)) {
1704
+ // it's possible we've already decided to relocate this node
1705
+ let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
1706
+ // made some changes to slots
1707
+ // let's make sure we also double check
1708
+ // fallbacks are correctly hidden or shown
1709
+ checkSlotFallbackVisibility = true;
1710
+ // ensure that the slot-name attr is correct
1711
+ node['s-sn'] = node['s-sn'] || slotName;
1712
+ if (relocateNodeData) {
1713
+ relocateNodeData.$nodeToRelocate$['s-sh'] = childNode['s-hn'];
1714
+ // we marked this node for relocation previously but didn't find
1715
+ // out the slot reference node to which it needs to be relocated
1716
+ // so write it down now!
1717
+ relocateNodeData.$slotRefNode$ = childNode;
1718
+ }
1719
+ else {
1720
+ node['s-sh'] = childNode['s-hn'];
1721
+ // add to our list of nodes to relocate
1722
+ relocateNodes.push({
1723
+ $slotRefNode$: childNode,
1724
+ $nodeToRelocate$: node,
1725
+ });
1726
+ }
1727
+ if (node['s-sr']) {
1728
+ relocateNodes.map((relocateNode) => {
1729
+ if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
1730
+ relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
1731
+ if (relocateNodeData && !relocateNode.$slotRefNode$) {
1732
+ relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
1733
+ }
1734
+ }
1735
+ });
1736
+ }
1737
+ }
1738
+ else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
1739
+ // the node is not found within the slot (`childNode`) that we're
1740
+ // currently looking at, so we stick it into `relocateNodes` to
1741
+ // handle later. If we never find a home for this element then
1742
+ // we'll need to hide it
1743
+ relocateNodes.push({
1744
+ $nodeToRelocate$: node,
1745
+ });
1746
+ }
1747
+ }
1748
+ }
1749
+ }
1750
+ // if we're dealing with any type of element (capable of itself being a
1751
+ // slot reference or containing one) then we recur
1752
+ if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
1753
+ markSlotContentForRelocation(childNode);
1754
+ }
1755
+ }
1756
+ };
1757
+ /**
1758
+ * Check whether a node is located in a given named slot.
1759
+ *
1760
+ * @param nodeToRelocate the node of interest
1761
+ * @param slotName the slot name to check
1762
+ * @returns whether the node is located in the slot or not
1763
+ */
1764
+ const isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
1765
+ if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
1766
+ if (nodeToRelocate.getAttribute('slot') === null && slotName === '') {
1767
+ // if the node doesn't have a slot attribute, and the slot we're checking
1768
+ // is not a named slot, then we assume the node should be within the slot
1769
+ return true;
1770
+ }
1771
+ if (nodeToRelocate.getAttribute('slot') === slotName) {
1772
+ return true;
1773
+ }
1774
+ return false;
1775
+ }
1776
+ if (nodeToRelocate['s-sn'] === slotName) {
1777
+ return true;
1778
+ }
1779
+ return slotName === '';
1780
+ };
1781
+ /**
1782
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by calling
1783
+ * them with `null`. This signals that the DOM element corresponding to the VDom
1784
+ * node has been removed from the DOM.
1785
+ *
1786
+ * @param vNode a virtual DOM node
1787
+ */
1788
+ const nullifyVNodeRefs = (vNode) => {
1789
+ if (BUILD.vdomRef) {
1790
+ vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
1791
+ vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
1792
+ }
1793
+ };
1794
+ /**
1795
+ * The main entry point for Stencil's virtual DOM-based rendering engine
1796
+ *
1797
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
1798
+ * function will handle creating a virtual DOM tree with a single root, patching
1799
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
1800
+ * relocation, and reflecting attributes.
1801
+ *
1802
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
1803
+ * the DOM node into which it should be rendered.
1804
+ * @param renderFnResults the virtual DOM nodes to be rendered
1805
+ * @param isInitialLoad whether or not this is the first call after page load
1806
+ */
1807
+ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
1808
+ var _a, _b, _c, _d, _e;
1809
+ const hostElm = hostRef.$hostElement$;
1810
+ const cmpMeta = hostRef.$cmpMeta$;
1811
+ const oldVNode = hostRef.$vnode$ || newVNode(null, null);
1812
+ // if `renderFnResults` is a Host node then we can use it directly. If not,
1813
+ // we need to call `h` again to wrap the children of our component in a
1814
+ // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
1815
+ // implicitly that the top-level vdom node is 1) an only child and 2)
1816
+ // contains attrs that need to be set on the host element.
1817
+ const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
1818
+ hostTagName = hostElm.tagName;
1819
+ // <Host> runtime check
1820
+ if (BUILD.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) {
1821
+ throw new Error(`The <Host> must be the single root component.
1822
+ Looks like the render() function of "${hostTagName.toLowerCase()}" is returning an array that contains the <Host>.
1823
+
1824
+ The render() function should look like this instead:
1825
+
1826
+ render() {
1827
+ // Do not return an array
1828
+ return (
1829
+ <Host>{content}</Host>
1830
+ );
1831
+ }
1832
+ `);
1833
+ }
1834
+ if (BUILD.reflect && cmpMeta.$attrsToReflect$) {
1835
+ rootVnode.$attrs$ = rootVnode.$attrs$ || {};
1836
+ cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
1837
+ }
1838
+ // On the first render and *only* on the first render we want to check for
1839
+ // any attributes set on the host element which are also set on the vdom
1840
+ // node. If we find them, we override the value on the VDom node attrs with
1841
+ // the value from the host element, which allows developers building apps
1842
+ // with Stencil components to override e.g. the `role` attribute on a
1843
+ // component even if it's already set on the `Host`.
1844
+ if (isInitialLoad && rootVnode.$attrs$) {
1845
+ for (const key of Object.keys(rootVnode.$attrs$)) {
1846
+ // We have a special implementation in `setAccessor` for `style` and
1847
+ // `class` which reconciles values coming from the VDom with values
1848
+ // already present on the DOM element, so we don't want to override those
1849
+ // attributes on the VDom tree with values from the host element if they
1850
+ // are present.
1851
+ //
1852
+ // Likewise, `ref` and `key` are special internal values for the Stencil
1853
+ // runtime and we don't want to override those either.
1854
+ if (hostElm.hasAttribute(key) && !['key', 'ref', 'style', 'class'].includes(key)) {
1855
+ rootVnode.$attrs$[key] = hostElm[key];
1856
+ }
1857
+ }
1858
+ }
1859
+ rootVnode.$tag$ = null;
1860
+ rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
1861
+ hostRef.$vnode$ = rootVnode;
1862
+ rootVnode.$elm$ = oldVNode.$elm$ = (BUILD.shadowDom ? hostElm.shadowRoot || hostElm : hostElm);
1863
+ if (BUILD.scoped || BUILD.shadowDom) {
1864
+ scopeId = hostElm['s-sc'];
1865
+ }
1866
+ useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
1867
+ if (BUILD.slotRelocation) {
1868
+ contentRef = hostElm['s-cr'];
1869
+ // always reset
1870
+ checkSlotFallbackVisibility = false;
1871
+ }
1872
+ // synchronous patch
1873
+ patch(oldVNode, rootVnode, isInitialLoad);
1874
+ if (BUILD.slotRelocation) {
1875
+ // while we're moving nodes around existing nodes, temporarily disable
1876
+ // the disconnectCallback from working
1877
+ plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
1878
+ if (checkSlotRelocate) {
1879
+ markSlotContentForRelocation(rootVnode.$elm$);
1880
+ for (const relocateData of relocateNodes) {
1881
+ const nodeToRelocate = relocateData.$nodeToRelocate$;
1882
+ if (!nodeToRelocate['s-ol']) {
1883
+ // add a reference node marking this node's original location
1884
+ // keep a reference to this node for later lookups
1885
+ const orgLocationNode = BUILD.isDebug || BUILD.hydrateServerSide
1886
+ ? originalLocationDebugNode(nodeToRelocate)
1887
+ : doc.createTextNode('');
1888
+ orgLocationNode['s-nr'] = nodeToRelocate;
1889
+ nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
1890
+ }
1891
+ }
1892
+ for (const relocateData of relocateNodes) {
1893
+ const nodeToRelocate = relocateData.$nodeToRelocate$;
1894
+ const slotRefNode = relocateData.$slotRefNode$;
1895
+ if (slotRefNode) {
1896
+ const parentNodeRef = slotRefNode.parentNode;
1897
+ // When determining where to insert content, the most simple case would be
1898
+ // to relocate the node immediately following the slot reference node. We do this
1899
+ // by getting a reference to the node immediately following the slot reference node
1900
+ // since we will use `insertBefore` to manipulate the DOM.
1901
+ //
1902
+ // If there is no node immediately following the slot reference node, then we will just
1903
+ // end up appending the node as the last child of the parent.
1904
+ let insertBeforeNode = slotRefNode.nextSibling;
1905
+ // If the node we're currently planning on inserting the new node before is an element,
1906
+ // we need to do some additional checks to make sure we're inserting the node in the correct order.
1907
+ // The use case here would be that we have multiple nodes being relocated to the same slot. So, we want
1908
+ // to make sure they get inserted into their new how in the same order they were declared in their original location.
1909
+ //
1910
+ // TODO(STENCIL-914): Remove `experimentalSlotFixes` check
1911
+ if (!BUILD.experimentalSlotFixes ||
1912
+ (insertBeforeNode && insertBeforeNode.nodeType === 1 /* NODE_TYPE.ElementNode */)) {
1913
+ let orgLocationNode = (_a = nodeToRelocate['s-ol']) === null || _a === void 0 ? void 0 : _a.previousSibling;
1914
+ while (orgLocationNode) {
1915
+ let refNode = (_b = orgLocationNode['s-nr']) !== null && _b !== void 0 ? _b : null;
1916
+ if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
1917
+ refNode = refNode.nextSibling;
1918
+ if (!refNode || !refNode['s-nr']) {
1919
+ insertBeforeNode = refNode;
1920
+ break;
1921
+ }
1922
+ }
1923
+ orgLocationNode = orgLocationNode.previousSibling;
1924
+ }
1925
+ }
1926
+ if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
1927
+ nodeToRelocate.nextSibling !== insertBeforeNode) {
1928
+ // we've checked that it's worth while to relocate
1929
+ // since that the node to relocate
1930
+ // has a different next sibling or parent relocated
1931
+ if (nodeToRelocate !== insertBeforeNode) {
1932
+ if (!BUILD.experimentalSlotFixes && !nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
1933
+ // probably a component in the index.html that doesn't have its hostname set
1934
+ nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
1935
+ }
1936
+ // Add it back to the dom but in its new home
1937
+ // If we get to this point and `insertBeforeNode` is `null`, that means
1938
+ // we're just going to append the node as the last child of the parent. Passing
1939
+ // `null` as the second arg here will trigger that behavior.
1940
+ parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
1941
+ // Reset the `hidden` value back to what it was defined as originally
1942
+ // This solves a problem where a `slot` is dynamically rendered and `hidden` may have
1943
+ // been set on content originally, but now it has a slot to go to so it should have
1944
+ // the value it was defined as having in the DOM, not what we overrode it to.
1945
+ if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
1946
+ nodeToRelocate.hidden = (_c = nodeToRelocate['s-ih']) !== null && _c !== void 0 ? _c : false;
1947
+ }
1948
+ }
1949
+ }
1950
+ }
1951
+ else {
1952
+ // this node doesn't have a slot home to go to, so let's hide it
1953
+ if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
1954
+ // Store the initial value of `hidden` so we can reset it later when
1955
+ // moving nodes around.
1956
+ if (isInitialLoad) {
1957
+ nodeToRelocate['s-ih'] = (_d = nodeToRelocate.hidden) !== null && _d !== void 0 ? _d : false;
1958
+ }
1959
+ nodeToRelocate.hidden = true;
1960
+ }
1961
+ }
1962
+ }
1963
+ }
1964
+ if (checkSlotFallbackVisibility) {
1965
+ updateFallbackSlotVisibility(rootVnode.$elm$);
1966
+ }
1967
+ // done moving nodes around
1968
+ // allow the disconnect callback to work again
1969
+ plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
1970
+ // always reset
1971
+ relocateNodes.length = 0;
1972
+ }
1973
+ // Hide any elements that were projected through, but don't have a slot to go to.
1974
+ // Only an issue if there were no "slots" rendered. Otherwise, nodes are hidden correctly.
1975
+ // This _only_ happens for `scoped` components!
1976
+ if (BUILD.experimentalScopedSlotChanges && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
1977
+ for (const childNode of rootVnode.$elm$.childNodes) {
1978
+ if (childNode['s-hn'] !== hostTagName && !childNode['s-sh']) {
1979
+ // Store the initial value of `hidden` so we can reset it later when
1980
+ // moving nodes around.
1981
+ if (isInitialLoad && childNode['s-ih'] == null) {
1982
+ childNode['s-ih'] = (_e = childNode.hidden) !== null && _e !== void 0 ? _e : false;
1983
+ }
1984
+ childNode.hidden = true;
1985
+ }
1986
+ }
1987
+ }
1988
+ // Clear the content ref so we don't create a memory leak
1989
+ contentRef = undefined;
1990
+ };
1991
+ // slot comment debug nodes only created with the `--debug` flag
1992
+ // otherwise these nodes are text nodes w/out content
1993
+ const slotReferenceDebugNode = (slotVNode) => doc.createComment(`<slot${slotVNode.$name$ ? ' name="' + slotVNode.$name$ + '"' : ''}> (host=${hostTagName.toLowerCase()})`);
1994
+ const originalLocationDebugNode = (nodeToRelocate) => doc.createComment(`org-location for ` +
1995
+ (nodeToRelocate.localName
1996
+ ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate['s-hn']})`
1997
+ : `[${nodeToRelocate.textContent}]`));
1998
+ const attachToAncestor = (hostRef, ancestorComponent) => {
1999
+ if (BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
2000
+ ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
2001
+ }
2002
+ };
2003
+ const scheduleUpdate = (hostRef, isInitialLoad) => {
2004
+ if (BUILD.taskQueue && BUILD.updatable) {
2005
+ hostRef.$flags$ |= 16 /* HOST_FLAGS.isQueuedForUpdate */;
2006
+ }
2007
+ if (BUILD.asyncLoading && hostRef.$flags$ & 4 /* HOST_FLAGS.isWaitingForChildren */) {
2008
+ hostRef.$flags$ |= 512 /* HOST_FLAGS.needsRerender */;
2009
+ return;
2010
+ }
2011
+ attachToAncestor(hostRef, hostRef.$ancestorComponent$);
2012
+ // there is no ancestor component or the ancestor component
2013
+ // has already fired off its lifecycle update then
2014
+ // fire off the initial update
2015
+ const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
2016
+ return BUILD.taskQueue ? writeTask(dispatch) : dispatch();
2017
+ };
2018
+ /**
2019
+ * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
2020
+ * component lifecycle methods like `componentWillLoad` as well as
2021
+ * {@link updateComponent}, which will kick off the virtual DOM re-render.
2022
+ *
2023
+ * @param hostRef a reference to a host DOM node
2024
+ * @param isInitialLoad whether we're on the initial load or not
2025
+ * @returns an empty Promise which is used to enqueue a series of operations for
2026
+ * the component
2027
+ */
2028
+ const dispatchHooks = (hostRef, isInitialLoad) => {
2029
+ const elm = hostRef.$hostElement$;
2030
+ const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
2031
+ const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
2032
+ // We're going to use this variable together with `enqueue` to implement a
2033
+ // little promise-based queue. We start out with it `undefined`. When we add
2034
+ // the first function to the queue we'll set this variable to be that
2035
+ // function's return value. When we attempt to add subsequent values to the
2036
+ // queue we'll check that value and, if it was a `Promise`, we'll then chain
2037
+ // the new function off of that `Promise` using `.then()`. This will give our
2038
+ // queue two nice properties:
2039
+ //
2040
+ // 1. If all functions added to the queue are synchronous they'll be called
2041
+ // synchronously right away.
2042
+ // 2. If all functions added to the queue are asynchronous they'll all be
2043
+ // called in order after `dispatchHooks` exits.
2044
+ let maybePromise;
2045
+ if (isInitialLoad) {
2046
+ if (BUILD.lazyLoad && BUILD.hostListener) {
2047
+ hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
2048
+ if (hostRef.$queuedListeners$) {
2049
+ hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
2050
+ hostRef.$queuedListeners$ = undefined;
2051
+ }
2052
+ }
2053
+ emitLifecycleEvent(elm, 'componentWillLoad');
2054
+ if (BUILD.cmpWillLoad) {
2055
+ // If `componentWillLoad` returns a `Promise` then we want to wait on
2056
+ // whatever's going on in that `Promise` before we launch into
2057
+ // rendering the component, doing other lifecycle stuff, etc. So
2058
+ // in that case we assign the returned promise to the variable we
2059
+ // declared above to hold a possible 'queueing' Promise
2060
+ maybePromise = safeCall(instance, 'componentWillLoad');
2061
+ }
2062
+ }
2063
+ else {
2064
+ emitLifecycleEvent(elm, 'componentWillUpdate');
2065
+ if (BUILD.cmpWillUpdate) {
2066
+ // Like `componentWillLoad` above, we allow Stencil component
2067
+ // authors to return a `Promise` from this lifecycle callback, and
2068
+ // we specify that our runtime will wait for that `Promise` to
2069
+ // resolve before the component re-renders. So if the method
2070
+ // returns a `Promise` we need to keep it around!
2071
+ maybePromise = safeCall(instance, 'componentWillUpdate');
2072
+ }
2073
+ }
2074
+ emitLifecycleEvent(elm, 'componentWillRender');
2075
+ if (BUILD.cmpWillRender) {
2076
+ maybePromise = enqueue(maybePromise, () => safeCall(instance, 'componentWillRender'));
2077
+ }
2078
+ endSchedule();
2079
+ return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
2080
+ };
2081
+ /**
2082
+ * This function uses a Promise to implement a simple first-in, first-out queue
2083
+ * of functions to be called.
2084
+ *
2085
+ * The queue is ordered on the basis of the first argument. If it's
2086
+ * `undefined`, then nothing is on the queue yet, so the provided function can
2087
+ * be called synchronously (although note that this function may return a
2088
+ * `Promise`). The idea is that then the return value of that enqueueing
2089
+ * operation is kept around, so that if it was a `Promise` then subsequent
2090
+ * functions can be enqueued by calling this function again with that `Promise`
2091
+ * as the first argument.
2092
+ *
2093
+ * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
2094
+ * @param fn a function to enqueue
2095
+ * @returns either a `Promise` or the return value of the provided function
2096
+ */
2097
+ const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
2098
+ /**
2099
+ * Check that a value is a `Promise`. To check, we first see if the value is an
2100
+ * instance of the `Promise` global. In a few circumstances, in particular if
2101
+ * the global has been overwritten, this is could be misleading, so we also do
2102
+ * a little 'duck typing' check to see if the `.then` property of the value is
2103
+ * defined and a function.
2104
+ *
2105
+ * @param maybePromise it might be a promise!
2106
+ * @returns whether it is or not
2107
+ */
2108
+ const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
2109
+ (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
2110
+ /**
2111
+ * Update a component given reference to its host elements and so on.
2112
+ *
2113
+ * @param hostRef an object containing references to the element's host node,
2114
+ * VDom nodes, and other metadata
2115
+ * @param instance a reference to the underlying host element where it will be
2116
+ * rendered
2117
+ * @param isInitialLoad whether or not this function is being called as part of
2118
+ * the first render cycle
2119
+ */
2120
+ const updateComponent = async (hostRef, instance, isInitialLoad) => {
2121
+ var _a;
2122
+ const elm = hostRef.$hostElement$;
2123
+ const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
2124
+ const rc = elm['s-rc'];
2125
+ if (BUILD.style && isInitialLoad) {
2126
+ // DOM WRITE!
2127
+ attachStyles(hostRef);
2128
+ }
2129
+ const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
2130
+ if (BUILD.isDev) {
2131
+ hostRef.$flags$ |= 1024 /* HOST_FLAGS.devOnRender */;
2132
+ }
2133
+ if (BUILD.hydrateServerSide) {
2134
+ await callRender(hostRef, instance, elm, isInitialLoad);
2135
+ }
2136
+ else {
2137
+ callRender(hostRef, instance, elm, isInitialLoad);
2138
+ }
2139
+ if (BUILD.isDev) {
2140
+ hostRef.$renderCount$ = hostRef.$renderCount$ === undefined ? 1 : hostRef.$renderCount$ + 1;
2141
+ hostRef.$flags$ &= ~1024 /* HOST_FLAGS.devOnRender */;
2142
+ }
2143
+ if (BUILD.hydrateServerSide) {
2144
+ try {
2145
+ // manually connected child components during server-side hydrate
2146
+ serverSideConnected(elm);
2147
+ if (isInitialLoad) {
2148
+ // using only during server-side hydrate
2149
+ if (hostRef.$cmpMeta$.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
2150
+ elm['s-en'] = '';
2151
+ }
2152
+ else if (hostRef.$cmpMeta$.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
2153
+ elm['s-en'] = 'c';
2154
+ }
2155
+ }
2156
+ }
2157
+ catch (e) {
2158
+ consoleError(e, elm);
2159
+ }
2160
+ }
2161
+ if (BUILD.asyncLoading && rc) {
2162
+ // ok, so turns out there are some child host elements
2163
+ // waiting on this parent element to load
2164
+ // let's fire off all update callbacks waiting
2165
+ rc.map((cb) => cb());
2166
+ elm['s-rc'] = undefined;
2167
+ }
2168
+ endRender();
2169
+ endUpdate();
2170
+ if (BUILD.asyncLoading) {
2171
+ const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
2172
+ const postUpdate = () => postUpdateComponent(hostRef);
2173
+ if (childrenPromises.length === 0) {
2174
+ postUpdate();
2175
+ }
2176
+ else {
2177
+ Promise.all(childrenPromises).then(postUpdate);
2178
+ hostRef.$flags$ |= 4 /* HOST_FLAGS.isWaitingForChildren */;
2179
+ childrenPromises.length = 0;
2180
+ }
2181
+ }
2182
+ else {
2183
+ postUpdateComponent(hostRef);
2184
+ }
2185
+ };
2186
+ /**
2187
+ * Handle making the call to the VDom renderer with the proper context given
2188
+ * various build variables
2189
+ *
2190
+ * @param hostRef an object containing references to the element's host node,
2191
+ * VDom nodes, and other metadata
2192
+ * @param instance a reference to the underlying host element where it will be
2193
+ * rendered
2194
+ * @param elm the Host element for the component
2195
+ * @param isInitialLoad whether or not this function is being called as part of
2196
+ * @returns an empty promise
2197
+ */
2198
+ const callRender = (hostRef, instance, elm, isInitialLoad) => {
2199
+ // in order for bundlers to correctly tree-shake the BUILD object
2200
+ // we need to ensure BUILD is not deoptimized within a try/catch
2201
+ // https://rollupjs.org/guide/en/#treeshake tryCatchDeoptimization
2202
+ const allRenderFn = BUILD.allRenderFn ? true : false;
2203
+ const lazyLoad = BUILD.lazyLoad ? true : false;
2204
+ const taskQueue = BUILD.taskQueue ? true : false;
2205
+ const updatable = BUILD.updatable ? true : false;
2206
+ try {
2207
+ renderingRef = instance;
2208
+ /**
2209
+ * minification optimization: `allRenderFn` is `true` if all components have a `render`
2210
+ * method, so we can call the method immediately. If not, check before calling it.
2211
+ */
2212
+ instance = allRenderFn ? instance.render() : instance.render && instance.render();
2213
+ if (updatable && taskQueue) {
2214
+ hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
2215
+ }
2216
+ if (updatable || lazyLoad) {
2217
+ hostRef.$flags$ |= 2 /* HOST_FLAGS.hasRendered */;
2218
+ }
2219
+ if (BUILD.hasRenderFn || BUILD.reflect) {
2220
+ if (BUILD.vdomRender || BUILD.reflect) {
2221
+ // looks like we've got child nodes to render into this host element
2222
+ // or we need to update the css class/attrs on the host element
2223
+ // DOM WRITE!
2224
+ if (BUILD.hydrateServerSide) {
2225
+ return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
2226
+ }
2227
+ else {
2228
+ renderVdom(hostRef, instance, isInitialLoad);
2229
+ }
2230
+ }
2231
+ else {
2232
+ const shadowRoot = elm.shadowRoot;
2233
+ if (hostRef.$cmpMeta$.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
2234
+ shadowRoot.textContent = instance;
2235
+ }
2236
+ else {
2237
+ elm.textContent = instance;
2238
+ }
2239
+ }
2240
+ }
2241
+ }
2242
+ catch (e) {
2243
+ consoleError(e, hostRef.$hostElement$);
2244
+ }
2245
+ renderingRef = null;
2246
+ return null;
2247
+ };
2248
+ const getRenderingRef = () => renderingRef;
2249
+ const postUpdateComponent = (hostRef) => {
2250
+ const tagName = hostRef.$cmpMeta$.$tagName$;
2251
+ const elm = hostRef.$hostElement$;
2252
+ const endPostUpdate = createTime('postUpdate', tagName);
2253
+ const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
2254
+ const ancestorComponent = hostRef.$ancestorComponent$;
2255
+ if (BUILD.cmpDidRender) {
2256
+ if (BUILD.isDev) {
2257
+ hostRef.$flags$ |= 1024 /* HOST_FLAGS.devOnRender */;
2258
+ }
2259
+ safeCall(instance, 'componentDidRender');
2260
+ if (BUILD.isDev) {
2261
+ hostRef.$flags$ &= ~1024 /* HOST_FLAGS.devOnRender */;
2262
+ }
2263
+ }
2264
+ emitLifecycleEvent(elm, 'componentDidRender');
2265
+ if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
2266
+ hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
2267
+ if (BUILD.asyncLoading && BUILD.cssAnnotations) {
2268
+ // DOM WRITE!
2269
+ addHydratedFlag(elm);
2270
+ }
2271
+ if (BUILD.cmpDidLoad) {
2272
+ if (BUILD.isDev) {
2273
+ hostRef.$flags$ |= 2048 /* HOST_FLAGS.devOnDidLoad */;
2274
+ }
2275
+ safeCall(instance, 'componentDidLoad');
2276
+ if (BUILD.isDev) {
2277
+ hostRef.$flags$ &= ~2048 /* HOST_FLAGS.devOnDidLoad */;
2278
+ }
2279
+ }
2280
+ emitLifecycleEvent(elm, 'componentDidLoad');
2281
+ endPostUpdate();
2282
+ if (BUILD.asyncLoading) {
2283
+ hostRef.$onReadyResolve$(elm);
2284
+ if (!ancestorComponent) {
2285
+ appDidLoad(tagName);
2286
+ }
2287
+ }
2288
+ }
2289
+ else {
2290
+ if (BUILD.cmpDidUpdate) {
2291
+ // we've already loaded this component
2292
+ // fire off the user's componentDidUpdate method (if one was provided)
2293
+ // componentDidUpdate runs AFTER render() has been called
2294
+ // and all child components have finished updating
2295
+ if (BUILD.isDev) {
2296
+ hostRef.$flags$ |= 1024 /* HOST_FLAGS.devOnRender */;
2297
+ }
2298
+ safeCall(instance, 'componentDidUpdate');
2299
+ if (BUILD.isDev) {
2300
+ hostRef.$flags$ &= ~1024 /* HOST_FLAGS.devOnRender */;
2301
+ }
2302
+ }
2303
+ emitLifecycleEvent(elm, 'componentDidUpdate');
2304
+ endPostUpdate();
2305
+ }
2306
+ if (BUILD.method && BUILD.lazyLoad) {
2307
+ hostRef.$onInstanceResolve$(elm);
2308
+ }
2309
+ // load events fire from bottom to top
2310
+ // the deepest elements load first then bubbles up
2311
+ if (BUILD.asyncLoading) {
2312
+ if (hostRef.$onRenderResolve$) {
2313
+ hostRef.$onRenderResolve$();
2314
+ hostRef.$onRenderResolve$ = undefined;
2315
+ }
2316
+ if (hostRef.$flags$ & 512 /* HOST_FLAGS.needsRerender */) {
2317
+ nextTick(() => scheduleUpdate(hostRef, false));
2318
+ }
2319
+ hostRef.$flags$ &= ~(4 /* HOST_FLAGS.isWaitingForChildren */ | 512 /* HOST_FLAGS.needsRerender */);
2320
+ }
2321
+ // ( •_•)
2322
+ // ( •_•)>⌐■-■
2323
+ // (⌐■_■)
2324
+ };
2325
+ const forceUpdate = (ref) => {
2326
+ if (BUILD.updatable && (Build.isBrowser || Build.isTesting)) {
2327
+ const hostRef = getHostRef(ref);
2328
+ const isConnected = hostRef.$hostElement$.isConnected;
2329
+ if (isConnected &&
2330
+ (hostRef.$flags$ & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
2331
+ scheduleUpdate(hostRef, false);
2332
+ }
2333
+ // Returns "true" when the forced update was successfully scheduled
2334
+ return isConnected;
2335
+ }
2336
+ return false;
2337
+ };
2338
+ const appDidLoad = (who) => {
2339
+ // on appload
2340
+ // we have finish the first big initial render
2341
+ if (BUILD.cssAnnotations) {
2342
+ addHydratedFlag(doc.documentElement);
2343
+ }
2344
+ if (BUILD.asyncQueue) {
2345
+ plt.$flags$ |= 2 /* PLATFORM_FLAGS.appLoaded */;
2346
+ }
2347
+ nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
2348
+ if (BUILD.profile && performance.measure) {
2349
+ performance.measure(`[Stencil] ${NAMESPACE} initial load (by ${who})`, 'st:app:start');
2350
+ }
2351
+ };
2352
+ /**
2353
+ * Allows to safely call a method, e.g. `componentDidLoad`, on an instance,
2354
+ * e.g. custom element node. If a build figures out that e.g. no component
2355
+ * has a `componentDidLoad` method, the instance method gets removed from the
2356
+ * output bundle and this function returns `undefined`.
2357
+ * @param instance any object that may or may not contain methods
2358
+ * @param method method name
2359
+ * @param arg single arbitrary argument
2360
+ * @returns result of method call if it exists, otherwise `undefined`
2361
+ */
2362
+ const safeCall = (instance, method, arg) => {
2363
+ if (instance && instance[method]) {
2364
+ try {
2365
+ return instance[method](arg);
2366
+ }
2367
+ catch (e) {
2368
+ consoleError(e);
2369
+ }
2370
+ }
2371
+ return undefined;
2372
+ };
2373
+ /**
2374
+ * For debugging purposes as `BUILD.lifecycleDOMEvents` is `false` by default and will
2375
+ * get removed by the compiler. Used for timing events to see how long they take.
2376
+ * @param elm the target of the Event
2377
+ * @param lifecycleName name of the event
2378
+ */
2379
+ const emitLifecycleEvent = (elm, lifecycleName) => {
2380
+ if (BUILD.lifecycleDOMEvents) {
2381
+ emitEvent(elm, 'stencil_' + lifecycleName, {
2382
+ bubbles: true,
2383
+ composed: true,
2384
+ detail: {
2385
+ namespace: NAMESPACE,
2386
+ },
2387
+ });
2388
+ }
2389
+ };
2390
+ const addHydratedFlag = (elm) => BUILD.hydratedClass
2391
+ ? elm.classList.add('hydrated')
2392
+ : BUILD.hydratedAttribute
2393
+ ? elm.setAttribute('hydrated', '')
2394
+ : undefined;
2395
+ const serverSideConnected = (elm) => {
2396
+ const children = elm.children;
2397
+ if (children != null) {
2398
+ for (let i = 0, ii = children.length; i < ii; i++) {
2399
+ const childElm = children[i];
2400
+ if (typeof childElm.connectedCallback === 'function') {
2401
+ childElm.connectedCallback();
2402
+ }
2403
+ serverSideConnected(childElm);
2404
+ }
2405
+ }
2406
+ };
2407
+ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
2408
+ const setValue = (ref, propName, newVal, cmpMeta) => {
2409
+ // check our new property value against our internal value
2410
+ const hostRef = getHostRef(ref);
2411
+ const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : ref;
2412
+ const oldVal = hostRef.$instanceValues$.get(propName);
2413
+ const flags = hostRef.$flags$;
2414
+ const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
2415
+ newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
2416
+ // explicitly check for NaN on both sides, as `NaN === NaN` is always false
2417
+ const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
2418
+ const didValueChange = newVal !== oldVal && !areBothNaN;
2419
+ if ((!BUILD.lazyLoad || !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) || oldVal === undefined) && didValueChange) {
2420
+ // gadzooks! the property's value has changed!!
2421
+ // set our new value!
2422
+ hostRef.$instanceValues$.set(propName, newVal);
2423
+ if (BUILD.isDev) {
2424
+ if (hostRef.$flags$ & 1024 /* HOST_FLAGS.devOnRender */) {
2425
+ consoleDevWarn(`The state/prop "${propName}" changed during rendering. This can potentially lead to infinite-loops and other bugs.`, '\nElement', elm, '\nNew value', newVal, '\nOld value', oldVal);
2426
+ }
2427
+ else if (hostRef.$flags$ & 2048 /* HOST_FLAGS.devOnDidLoad */) {
2428
+ consoleDevWarn(`The state/prop "${propName}" changed during "componentDidLoad()", this triggers extra re-renders, try to setup on "componentWillLoad()"`, '\nElement', elm, '\nNew value', newVal, '\nOld value', oldVal);
2429
+ }
2430
+ }
2431
+ if (!BUILD.lazyLoad || instance) {
2432
+ // get an array of method names of watch functions to call
2433
+ if (BUILD.watchCallback && cmpMeta.$watchers$ && flags & 128 /* HOST_FLAGS.isWatchReady */) {
2434
+ const watchMethods = cmpMeta.$watchers$[propName];
2435
+ if (watchMethods) {
2436
+ // this instance is watching for when this property changed
2437
+ watchMethods.map((watchMethodName) => {
2438
+ try {
2439
+ // fire off each of the watch methods that are watching this property
2440
+ instance[watchMethodName](newVal, oldVal, propName);
2441
+ }
2442
+ catch (e) {
2443
+ consoleError(e, elm);
2444
+ }
2445
+ });
2446
+ }
2447
+ }
2448
+ if (BUILD.updatable &&
2449
+ (flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
2450
+ if (BUILD.cmpShouldUpdate && instance.componentShouldUpdate) {
2451
+ if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
2452
+ return;
2453
+ }
2454
+ }
2455
+ // looks like this value actually changed, so we've got work to do!
2456
+ // but only if we've already rendered, otherwise just chill out
2457
+ // queue that we need to do an update, but don't worry about queuing
2458
+ // up millions cuz this function ensures it only runs once
2459
+ scheduleUpdate(hostRef, false);
2460
+ }
2461
+ }
2462
+ }
2463
+ };
2464
+ /**
2465
+ * Attach a series of runtime constructs to a compiled Stencil component
2466
+ * constructor, including getters and setters for the `@Prop` and `@State`
2467
+ * decorators, callbacks for when attributes change, and so on.
2468
+ *
2469
+ * @param Cstr the constructor for a component that we need to process
2470
+ * @param cmpMeta metadata collected previously about the component
2471
+ * @param flags a number used to store a series of bit flags
2472
+ * @returns a reference to the same constructor passed in (but now mutated)
2473
+ */
2474
+ const proxyComponent = (Cstr, cmpMeta, flags) => {
2475
+ var _a;
2476
+ const prototype = Cstr.prototype;
2477
+ /**
2478
+ * proxy form associated custom element lifecycle callbacks
2479
+ * @ref https://web.dev/articles/more-capable-form-controls#lifecycle_callbacks
2480
+ */
2481
+ if (BUILD.formAssociated && cmpMeta.$flags$ & 64 /* CMP_FLAGS.formAssociated */ && flags & 1 /* PROXY_FLAGS.isElementConstructor */) {
2482
+ FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach((cbName) => Object.defineProperty(prototype, cbName, {
2483
+ value(...args) {
2484
+ const hostRef = getHostRef(this);
2485
+ const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : this;
2486
+ const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
2487
+ if (!instance) {
2488
+ hostRef.$onReadyPromise$.then((instance) => {
2489
+ const cb = instance[cbName];
2490
+ typeof cb === 'function' && cb.call(instance, ...args);
2491
+ });
2492
+ }
2493
+ else {
2494
+ const cb = instance[cbName];
2495
+ typeof cb === 'function' && cb.call(instance, ...args);
2496
+ }
2497
+ },
2498
+ }));
2499
+ }
2500
+ if (BUILD.member && cmpMeta.$members$) {
2501
+ if (BUILD.watchCallback && Cstr.watchers) {
2502
+ cmpMeta.$watchers$ = Cstr.watchers;
2503
+ }
2504
+ // It's better to have a const than two Object.entries()
2505
+ const members = Object.entries(cmpMeta.$members$);
2506
+ members.map(([memberName, [memberFlags]]) => {
2507
+ if ((BUILD.prop || BUILD.state) &&
2508
+ (memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
2509
+ ((!BUILD.lazyLoad || flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
2510
+ // proxyComponent - prop
2511
+ Object.defineProperty(prototype, memberName, {
2512
+ get() {
2513
+ // proxyComponent, get value
2514
+ return getValue(this, memberName);
2515
+ },
2516
+ set(newValue) {
2517
+ // only during dev time
2518
+ if (BUILD.isDev) {
2519
+ const ref = getHostRef(this);
2520
+ if (
2521
+ // we are proxying the instance (not element)
2522
+ (flags & 1 /* PROXY_FLAGS.isElementConstructor */) === 0 &&
2523
+ // the element is not constructing
2524
+ (ref && ref.$flags$ & 8 /* HOST_FLAGS.isConstructingInstance */) === 0 &&
2525
+ // the member is a prop
2526
+ (memberFlags & 31 /* MEMBER_FLAGS.Prop */) !== 0 &&
2527
+ // the member is not mutable
2528
+ (memberFlags & 1024 /* MEMBER_FLAGS.Mutable */) === 0) {
2529
+ consoleDevWarn(`@Prop() "${memberName}" on <${cmpMeta.$tagName$}> is immutable but was modified from within the component.\nMore information: https://stenciljs.com/docs/properties#prop-mutability`);
2530
+ }
2531
+ }
2532
+ // proxyComponent, set value
2533
+ setValue(this, memberName, newValue, cmpMeta);
2534
+ },
2535
+ configurable: true,
2536
+ enumerable: true,
2537
+ });
2538
+ }
2539
+ else if (BUILD.lazyLoad &&
2540
+ BUILD.method &&
2541
+ flags & 1 /* PROXY_FLAGS.isElementConstructor */ &&
2542
+ memberFlags & 64 /* MEMBER_FLAGS.Method */) {
2543
+ // proxyComponent - method
2544
+ Object.defineProperty(prototype, memberName, {
2545
+ value(...args) {
2546
+ var _a;
2547
+ const ref = getHostRef(this);
2548
+ return (_a = ref === null || ref === void 0 ? void 0 : ref.$onInstancePromise$) === null || _a === void 0 ? void 0 : _a.then(() => { var _a; return (_a = ref.$lazyInstance$) === null || _a === void 0 ? void 0 : _a[memberName](...args); });
2549
+ },
2550
+ });
2551
+ }
2552
+ });
2553
+ if (BUILD.observeAttribute && (!BUILD.lazyLoad || flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
2554
+ const attrNameToPropName = new Map();
2555
+ prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
2556
+ plt.jmp(() => {
2557
+ var _a;
2558
+ const propName = attrNameToPropName.get(attrName);
2559
+ // In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
2560
+ // in the case where an attribute was set inline.
2561
+ // ```html
2562
+ // <my-component some-attribute="some-value"></my-component>
2563
+ // ```
2564
+ //
2565
+ // There is an edge case where a developer sets the attribute inline on a custom element and then
2566
+ // programmatically changes it before it has been upgraded as shown below:
2567
+ //
2568
+ // ```html
2569
+ // <!-- this component has _not_ been upgraded yet -->
2570
+ // <my-component id="test" some-attribute="some-value"></my-component>
2571
+ // <script>
2572
+ // // grab non-upgraded component
2573
+ // el = document.querySelector("#test");
2574
+ // el.someAttribute = "another-value";
2575
+ // // upgrade component
2576
+ // customElements.define('my-component', MyComponent);
2577
+ // </script>
2578
+ // ```
2579
+ // In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
2580
+ // will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
2581
+ // to the value that was set inline i.e. "some-value" from above example. When
2582
+ // the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
2583
+ //
2584
+ // The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
2585
+ // by connectedCallback as this attributeChangedCallback will not fire.
2586
+ //
2587
+ // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
2588
+ //
2589
+ // TODO(STENCIL-16) we should think about whether or not we actually want to be reflecting the attributes to
2590
+ // properties here given that this goes against best practices outlined here
2591
+ // https://developers.google.com/web/fundamentals/web-components/best-practices#avoid-reentrancy
2592
+ if (this.hasOwnProperty(propName)) {
2593
+ newValue = this[propName];
2594
+ delete this[propName];
2595
+ }
2596
+ else if (prototype.hasOwnProperty(propName) &&
2597
+ typeof this[propName] === 'number' &&
2598
+ this[propName] == newValue) {
2599
+ // if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native
2600
+ // APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in
2601
+ // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
2602
+ return;
2603
+ }
2604
+ else if (propName == null) {
2605
+ // At this point we should know this is not a "member", so we can treat it like watching an attribute
2606
+ // on a vanilla web component
2607
+ const hostRef = getHostRef(this);
2608
+ const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
2609
+ // We only want to trigger the callback(s) if:
2610
+ // 1. The instance is ready
2611
+ // 2. The watchers are ready
2612
+ // 3. The value has changed
2613
+ if (flags &&
2614
+ !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
2615
+ flags & 128 /* HOST_FLAGS.isWatchReady */ &&
2616
+ newValue !== oldValue) {
2617
+ const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : this;
2618
+ const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
2619
+ const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
2620
+ entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
2621
+ if (instance[callbackName] != null) {
2622
+ instance[callbackName].call(instance, newValue, oldValue, attrName);
2623
+ }
2624
+ });
2625
+ }
2626
+ return;
2627
+ }
2628
+ this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
2629
+ });
2630
+ };
2631
+ // Create an array of attributes to observe
2632
+ // This list in comprised of all strings used within a `@Watch()` decorator
2633
+ // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
2634
+ // As such, there is no way to guarantee type-safety here that a user hasn't entered
2635
+ // an invalid attribute.
2636
+ Cstr.observedAttributes = Array.from(new Set([
2637
+ ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
2638
+ ...members
2639
+ .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
2640
+ .map(([propName, m]) => {
2641
+ var _a;
2642
+ const attrName = m[1] || propName;
2643
+ attrNameToPropName.set(attrName, propName);
2644
+ if (BUILD.reflect && m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
2645
+ (_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]);
2646
+ }
2647
+ return attrName;
2648
+ }),
2649
+ ]));
2650
+ }
2651
+ }
2652
+ return Cstr;
2653
+ };
2654
+ /**
2655
+ * Initialize a Stencil component given a reference to its host element, its
2656
+ * runtime bookkeeping data structure, runtime metadata about the component,
2657
+ * and (optionally) an HMR version ID.
2658
+ *
2659
+ * @param elm a host element
2660
+ * @param hostRef the element's runtime bookkeeping object
2661
+ * @param cmpMeta runtime metadata for the Stencil component
2662
+ * @param hmrVersionId an (optional) HMR version ID
2663
+ */
2664
+ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
2665
+ let Cstr;
2666
+ // initializeComponent
2667
+ if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
2668
+ // Let the runtime know that the component has been initialized
2669
+ hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
2670
+ const bundleId = cmpMeta.$lazyBundleId$;
2671
+ if ((BUILD.lazyLoad || BUILD.hydrateClientSide) && bundleId) {
2672
+ // lazy loaded components
2673
+ // request the component's implementation to be
2674
+ // wired up with the host element
2675
+ Cstr = loadModule(cmpMeta, hostRef, hmrVersionId);
2676
+ if (Cstr.then) {
2677
+ // Await creates a micro-task avoid if possible
2678
+ const endLoad = uniqueTime(`st:load:${cmpMeta.$tagName$}:${hostRef.$modeName$}`, `[Stencil] Load module for <${cmpMeta.$tagName$}>`);
2679
+ Cstr = await Cstr;
2680
+ endLoad();
2681
+ }
2682
+ if ((BUILD.isDev || BUILD.isDebug) && !Cstr) {
2683
+ throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
2684
+ }
2685
+ if (BUILD.member && !Cstr.isProxied) {
2686
+ // we've never proxied this Constructor before
2687
+ // let's add the getters/setters to its prototype before
2688
+ // the first time we create an instance of the implementation
2689
+ if (BUILD.watchCallback) {
2690
+ cmpMeta.$watchers$ = Cstr.watchers;
2691
+ }
2692
+ proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */);
2693
+ Cstr.isProxied = true;
2694
+ }
2695
+ const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);
2696
+ // ok, time to construct the instance
2697
+ // but let's keep track of when we start and stop
2698
+ // so that the getters/setters don't incorrectly step on data
2699
+ if (BUILD.member) {
2700
+ hostRef.$flags$ |= 8 /* HOST_FLAGS.isConstructingInstance */;
2701
+ }
2702
+ // construct the lazy-loaded component implementation
2703
+ // passing the hostRef is very important during
2704
+ // construction in order to directly wire together the
2705
+ // host element and the lazy-loaded instance
2706
+ try {
2707
+ new Cstr(hostRef);
2708
+ }
2709
+ catch (e) {
2710
+ consoleError(e);
2711
+ }
2712
+ if (BUILD.member) {
2713
+ hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
2714
+ }
2715
+ if (BUILD.watchCallback) {
2716
+ hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
2717
+ }
2718
+ endNewInstance();
2719
+ fireConnectedCallback(hostRef.$lazyInstance$);
2720
+ }
2721
+ else {
2722
+ // sync constructor component
2723
+ Cstr = elm.constructor;
2724
+ // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,
2725
+ // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_
2726
+ // Stencil has completed instantiating the component.
2727
+ customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */));
2728
+ }
2729
+ if (BUILD.style && Cstr.style) {
2730
+ // this component has styles but we haven't registered them yet
2731
+ let style = Cstr.style;
2732
+ if (BUILD.mode && typeof style !== 'string') {
2733
+ style = style[(hostRef.$modeName$ = computeMode(elm))];
2734
+ if (BUILD.hydrateServerSide && hostRef.$modeName$) {
2735
+ elm.setAttribute('s-mode', hostRef.$modeName$);
2736
+ }
2737
+ }
2738
+ const scopeId = getScopeId(cmpMeta, hostRef.$modeName$);
2739
+ if (!styles.has(scopeId)) {
2740
+ const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
2741
+ if (!BUILD.hydrateServerSide &&
2742
+ BUILD.shadowDom &&
2743
+ // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
2744
+ BUILD.shadowDomShim &&
2745
+ cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) {
2746
+ style = await import('./shadow-css-bc9e2af8.js').then((m) => m.scopeCss(style, scopeId, false));
2747
+ }
2748
+ registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */));
2749
+ endRegisterStyles();
2750
+ }
2751
+ }
2752
+ }
2753
+ // we've successfully created a lazy instance
2754
+ const ancestorComponent = hostRef.$ancestorComponent$;
2755
+ const schedule = () => scheduleUpdate(hostRef, true);
2756
+ if (BUILD.asyncLoading && ancestorComponent && ancestorComponent['s-rc']) {
2757
+ // this is the initial load and this component it has an ancestor component
2758
+ // but the ancestor component has NOT fired its will update lifecycle yet
2759
+ // so let's just cool our jets and wait for the ancestor to continue first
2760
+ // this will get fired off when the ancestor component
2761
+ // finally gets around to rendering its lazy self
2762
+ // fire off the initial update
2763
+ ancestorComponent['s-rc'].push(schedule);
2764
+ }
2765
+ else {
2766
+ schedule();
2767
+ }
2768
+ };
2769
+ const fireConnectedCallback = (instance) => {
2770
+ if (BUILD.lazyLoad && BUILD.connectedCallback) {
2771
+ safeCall(instance, 'connectedCallback');
2772
+ }
2773
+ };
2774
+ const connectedCallback = (elm) => {
2775
+ if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
2776
+ const hostRef = getHostRef(elm);
2777
+ const cmpMeta = hostRef.$cmpMeta$;
2778
+ const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
2779
+ if (BUILD.hostListenerTargetParent) {
2780
+ // only run if we have listeners being attached to a parent
2781
+ addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
2782
+ }
2783
+ if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
2784
+ // first time this component has connected
2785
+ hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
2786
+ let hostId;
2787
+ if (BUILD.hydrateClientSide) {
2788
+ hostId = elm.getAttribute(HYDRATE_ID);
2789
+ if (hostId) {
2790
+ if (BUILD.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
2791
+ const scopeId = BUILD.mode
2792
+ ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute('s-mode'))
2793
+ : addStyle(elm.shadowRoot, cmpMeta);
2794
+ elm.classList.remove(scopeId + '-h', scopeId + '-s');
2795
+ }
2796
+ initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
2797
+ }
2798
+ }
2799
+ if (BUILD.slotRelocation && !hostId) {
2800
+ // initUpdate
2801
+ // if the slot polyfill is required we'll need to put some nodes
2802
+ // in here to act as original content anchors as we move nodes around
2803
+ // host element has been connected to the DOM
2804
+ if (BUILD.hydrateServerSide ||
2805
+ ((BUILD.slot || BUILD.shadowDom) &&
2806
+ // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
2807
+ cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {
2808
+ setContentReference(elm);
2809
+ }
2810
+ }
2811
+ if (BUILD.asyncLoading) {
2812
+ // find the first ancestor component (if there is one) and register
2813
+ // this component as one of the actively loading child components for its ancestor
2814
+ let ancestorComponent = elm;
2815
+ while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
2816
+ // climb up the ancestors looking for the first
2817
+ // component that hasn't finished its lifecycle update yet
2818
+ if ((BUILD.hydrateClientSide &&
2819
+ ancestorComponent.nodeType === 1 /* NODE_TYPE.ElementNode */ &&
2820
+ ancestorComponent.hasAttribute('s-id') &&
2821
+ ancestorComponent['s-p']) ||
2822
+ ancestorComponent['s-p']) {
2823
+ // we found this components first ancestor component
2824
+ // keep a reference to this component's ancestor component
2825
+ attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
2826
+ break;
2827
+ }
2828
+ }
2829
+ }
2830
+ // Lazy properties
2831
+ // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
2832
+ if (BUILD.prop && !BUILD.hydrateServerSide && cmpMeta.$members$) {
2833
+ Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
2834
+ if (memberFlags & 31 /* MEMBER_FLAGS.Prop */ && elm.hasOwnProperty(memberName)) {
2835
+ const value = elm[memberName];
2836
+ delete elm[memberName];
2837
+ elm[memberName] = value;
2838
+ }
2839
+ });
2840
+ }
2841
+ if (BUILD.initializeNextTick) {
2842
+ // connectedCallback, taskQueue, initialLoad
2843
+ // angular sets attribute AFTER connectCallback
2844
+ // https://github.com/angular/angular/issues/18909
2845
+ // https://github.com/angular/angular/issues/19940
2846
+ nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
2847
+ }
2848
+ else {
2849
+ initializeComponent(elm, hostRef, cmpMeta);
2850
+ }
2851
+ }
2852
+ else {
2853
+ // not the first time this has connected
2854
+ // reattach any event listeners to the host
2855
+ // since they would have been removed when disconnected
2856
+ addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
2857
+ // fire off connectedCallback() on component instance
2858
+ if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
2859
+ fireConnectedCallback(hostRef.$lazyInstance$);
2860
+ }
2861
+ else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
2862
+ hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));
2863
+ }
2864
+ }
2865
+ endConnected();
2866
+ }
2867
+ };
2868
+ const setContentReference = (elm) => {
2869
+ // only required when we're NOT using native shadow dom (slot)
2870
+ // or this browser doesn't support native shadow dom
2871
+ // and this host element was NOT created with SSR
2872
+ // let's pick out the inner content for slot projection
2873
+ // create a node to represent where the original
2874
+ // content was first placed, which is useful later on
2875
+ const contentRefElm = (elm['s-cr'] = doc.createComment(BUILD.isDebug ? `content-ref (host=${elm.localName})` : ''));
2876
+ contentRefElm['s-cn'] = true;
2877
+ elm.insertBefore(contentRefElm, elm.firstChild);
2878
+ };
2879
+ const disconnectInstance = (instance) => {
2880
+ if (BUILD.lazyLoad && BUILD.disconnectedCallback) {
2881
+ safeCall(instance, 'disconnectedCallback');
2882
+ }
2883
+ if (BUILD.cmpDidUnload) {
2884
+ safeCall(instance, 'componentDidUnload');
2885
+ }
2886
+ };
2887
+ const disconnectedCallback = async (elm) => {
2888
+ if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
2889
+ const hostRef = getHostRef(elm);
2890
+ if (BUILD.hostListener) {
2891
+ if (hostRef.$rmListeners$) {
2892
+ hostRef.$rmListeners$.map((rmListener) => rmListener());
2893
+ hostRef.$rmListeners$ = undefined;
2894
+ }
2895
+ }
2896
+ if (!BUILD.lazyLoad) {
2897
+ disconnectInstance(elm);
2898
+ }
2899
+ else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
2900
+ disconnectInstance(hostRef.$lazyInstance$);
2901
+ }
2902
+ else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
2903
+ hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
2904
+ }
2905
+ }
2906
+ };
2907
+ const patchPseudoShadowDom = (hostElementPrototype, descriptorPrototype) => {
2908
+ patchCloneNode(hostElementPrototype);
2909
+ patchSlotAppendChild(hostElementPrototype);
2910
+ patchSlotAppend(hostElementPrototype);
2911
+ patchSlotPrepend(hostElementPrototype);
2912
+ patchSlotInsertAdjacentElement(hostElementPrototype);
2913
+ patchSlotInsertAdjacentHTML(hostElementPrototype);
2914
+ patchSlotInsertAdjacentText(hostElementPrototype);
2915
+ patchTextContent(hostElementPrototype);
2916
+ patchChildSlotNodes(hostElementPrototype, descriptorPrototype);
2917
+ patchSlotRemoveChild(hostElementPrototype);
2918
+ };
2919
+ const patchCloneNode = (HostElementPrototype) => {
2920
+ const orgCloneNode = HostElementPrototype.cloneNode;
2921
+ HostElementPrototype.cloneNode = function (deep) {
2922
+ const srcNode = this;
2923
+ const isShadowDom = BUILD.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
2924
+ const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
2925
+ if (BUILD.slot && !isShadowDom && deep) {
2926
+ let i = 0;
2927
+ let slotted, nonStencilNode;
2928
+ const stencilPrivates = [
2929
+ 's-id',
2930
+ 's-cr',
2931
+ 's-lr',
2932
+ 's-rc',
2933
+ 's-sc',
2934
+ 's-p',
2935
+ 's-cn',
2936
+ 's-sr',
2937
+ 's-sn',
2938
+ 's-hn',
2939
+ 's-ol',
2940
+ 's-nr',
2941
+ 's-si',
2942
+ ];
2943
+ for (; i < srcNode.childNodes.length; i++) {
2944
+ slotted = srcNode.childNodes[i]['s-nr'];
2945
+ nonStencilNode = stencilPrivates.every((privateField) => !srcNode.childNodes[i][privateField]);
2946
+ if (slotted) {
2947
+ if (BUILD.appendChildSlotFix && clonedNode.__appendChild) {
2948
+ clonedNode.__appendChild(slotted.cloneNode(true));
2949
+ }
2950
+ else {
2951
+ clonedNode.appendChild(slotted.cloneNode(true));
2952
+ }
2953
+ }
2954
+ if (nonStencilNode) {
2955
+ clonedNode.appendChild(srcNode.childNodes[i].cloneNode(true));
2956
+ }
2957
+ }
2958
+ }
2959
+ return clonedNode;
2960
+ };
2961
+ };
2962
+ /**
2963
+ * Patches the `appendChild` method on a `scoped` Stencil component.
2964
+ * The patch will attempt to find a slot with the same name as the node being appended
2965
+ * and insert it into the slot reference if found. Otherwise, it falls-back to the original
2966
+ * `appendChild` method.
2967
+ *
2968
+ * @param HostElementPrototype The Stencil component to be patched
2969
+ */
2970
+ const patchSlotAppendChild = (HostElementPrototype) => {
2971
+ HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
2972
+ HostElementPrototype.appendChild = function (newChild) {
2973
+ const slotName = (newChild['s-sn'] = getSlotName(newChild));
2974
+ const slotNode = getHostSlotNode(this.childNodes, slotName);
2975
+ if (slotNode) {
2976
+ const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
2977
+ const appendAfter = slotChildNodes[slotChildNodes.length - 1];
2978
+ const insertedNode = appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
2979
+ // Check if there is fallback content that should be hidden
2980
+ updateFallbackSlotVisibility(this);
2981
+ // Force a re-render of the host element
2982
+ forceUpdate(this);
2983
+ return insertedNode;
2984
+ }
2985
+ return this.__appendChild(newChild);
2986
+ };
2987
+ };
2988
+ /**
2989
+ * Patches the `removeChild` method on a `scoped` Stencil component.
2990
+ * This patch attempts to remove the specified node from a slot reference
2991
+ * if the slot exists. Otherwise, it falls-back to the original `removeChild` method.
2992
+ *
2993
+ * @param ElementPrototype The Stencil component to be patched
2994
+ */
2995
+ const patchSlotRemoveChild = (ElementPrototype) => {
2996
+ ElementPrototype.__removeChild = ElementPrototype.removeChild;
2997
+ ElementPrototype.removeChild = function (toRemove) {
2998
+ if (toRemove && typeof toRemove['s-sn'] !== 'undefined') {
2999
+ const slotNode = getHostSlotNode(this.childNodes, toRemove['s-sn']);
3000
+ if (slotNode) {
3001
+ // Get all slot content
3002
+ const slotChildNodes = getHostSlotChildNodes(slotNode, toRemove['s-sn']);
3003
+ // See if any of the slotted content matches the node to remove
3004
+ const existingNode = slotChildNodes.find((n) => n === toRemove);
3005
+ if (existingNode) {
3006
+ existingNode.remove();
3007
+ // Check if there is fallback content that should be displayed if that
3008
+ // was the last node in the slot
3009
+ updateFallbackSlotVisibility(this);
3010
+ return;
3011
+ }
3012
+ }
3013
+ }
3014
+ return this.__removeChild(toRemove);
3015
+ };
3016
+ };
3017
+ /**
3018
+ * Patches the `prepend` method for a slotted node inside a scoped component.
3019
+ *
3020
+ * @param HostElementPrototype the `Element` to be patched
3021
+ */
3022
+ const patchSlotPrepend = (HostElementPrototype) => {
3023
+ const originalPrepend = HostElementPrototype.prepend;
3024
+ HostElementPrototype.prepend = function (...newChildren) {
3025
+ newChildren.forEach((newChild) => {
3026
+ if (typeof newChild === 'string') {
3027
+ newChild = this.ownerDocument.createTextNode(newChild);
3028
+ }
3029
+ const slotName = (newChild['s-sn'] = getSlotName(newChild));
3030
+ const slotNode = getHostSlotNode(this.childNodes, slotName);
3031
+ if (slotNode) {
3032
+ const slotPlaceholder = document.createTextNode('');
3033
+ slotPlaceholder['s-nr'] = newChild;
3034
+ slotNode['s-cr'].parentNode.__appendChild(slotPlaceholder);
3035
+ newChild['s-ol'] = slotPlaceholder;
3036
+ const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
3037
+ const appendAfter = slotChildNodes[0];
3038
+ return appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
3039
+ }
3040
+ if (newChild.nodeType === 1 && !!newChild.getAttribute('slot')) {
3041
+ newChild.hidden = true;
3042
+ }
3043
+ return originalPrepend.call(this, newChild);
3044
+ });
3045
+ };
3046
+ };
3047
+ /**
3048
+ * Patches the `append` method for a slotted node inside a scoped component. The patched method uses
3049
+ * `appendChild` under-the-hood while creating text nodes for any new children that passed as bare strings.
3050
+ *
3051
+ * @param HostElementPrototype the `Element` to be patched
3052
+ */
3053
+ const patchSlotAppend = (HostElementPrototype) => {
3054
+ HostElementPrototype.append = function (...newChildren) {
3055
+ newChildren.forEach((newChild) => {
3056
+ if (typeof newChild === 'string') {
3057
+ newChild = this.ownerDocument.createTextNode(newChild);
3058
+ }
3059
+ this.appendChild(newChild);
3060
+ });
3061
+ };
3062
+ };
3063
+ /**
3064
+ * Patches the `insertAdjacentHTML` method for a slotted node inside a scoped component. Specifically,
3065
+ * we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the element
3066
+ * gets inserted into the DOM in the correct location.
3067
+ *
3068
+ * @param HostElementPrototype the `Element` to be patched
3069
+ */
3070
+ const patchSlotInsertAdjacentHTML = (HostElementPrototype) => {
3071
+ const originalInsertAdjacentHtml = HostElementPrototype.insertAdjacentHTML;
3072
+ HostElementPrototype.insertAdjacentHTML = function (position, text) {
3073
+ if (position !== 'afterbegin' && position !== 'beforeend') {
3074
+ return originalInsertAdjacentHtml.call(this, position, text);
3075
+ }
3076
+ const container = this.ownerDocument.createElement('_');
3077
+ let node;
3078
+ container.innerHTML = text;
3079
+ if (position === 'afterbegin') {
3080
+ while ((node = container.firstChild)) {
3081
+ this.prepend(node);
3082
+ }
3083
+ }
3084
+ else if (position === 'beforeend') {
3085
+ while ((node = container.firstChild)) {
3086
+ this.append(node);
3087
+ }
3088
+ }
3089
+ };
3090
+ };
3091
+ /**
3092
+ * Patches the `insertAdjacentText` method for a slotted node inside a scoped component. Specifically,
3093
+ * we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the text node
3094
+ * gets inserted into the DOM in the correct location.
3095
+ *
3096
+ * @param HostElementPrototype the `Element` to be patched
3097
+ */
3098
+ const patchSlotInsertAdjacentText = (HostElementPrototype) => {
3099
+ HostElementPrototype.insertAdjacentText = function (position, text) {
3100
+ this.insertAdjacentHTML(position, text);
3101
+ };
3102
+ };
3103
+ /**
3104
+ * Patches the `insertAdjacentElement` method for a slotted node inside a scoped component. Specifically,
3105
+ * we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the element
3106
+ * gets inserted into the DOM in the correct location.
3107
+ *
3108
+ * @param HostElementPrototype the `Element` to be patched
3109
+ */
3110
+ const patchSlotInsertAdjacentElement = (HostElementPrototype) => {
3111
+ const originalInsertAdjacentElement = HostElementPrototype.insertAdjacentElement;
3112
+ HostElementPrototype.insertAdjacentElement = function (position, element) {
3113
+ if (position !== 'afterbegin' && position !== 'beforeend') {
3114
+ return originalInsertAdjacentElement.call(this, position, element);
3115
+ }
3116
+ if (position === 'afterbegin') {
3117
+ this.prepend(element);
3118
+ return element;
3119
+ }
3120
+ else if (position === 'beforeend') {
3121
+ this.append(element);
3122
+ return element;
3123
+ }
3124
+ return element;
3125
+ };
3126
+ };
3127
+ /**
3128
+ * Patches the text content of an unnamed slotted node inside a scoped component
3129
+ * @param hostElementPrototype the `Element` to be patched
3130
+ */
3131
+ const patchTextContent = (hostElementPrototype) => {
3132
+ const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent');
3133
+ Object.defineProperty(hostElementPrototype, '__textContent', descriptor);
3134
+ if (BUILD.experimentalScopedSlotChanges) {
3135
+ // Patch `textContent` to mimic shadow root behavior
3136
+ Object.defineProperty(hostElementPrototype, 'textContent', {
3137
+ // To mimic shadow root behavior, we need to return the text content of all
3138
+ // nodes in a slot reference node
3139
+ get() {
3140
+ const slotRefNodes = getAllChildSlotNodes(this.childNodes);
3141
+ const textContent = slotRefNodes
3142
+ .map((node) => {
3143
+ var _a, _b;
3144
+ const text = [];
3145
+ // Need to get the text content of all nodes in the slot reference node
3146
+ let slotContent = node.nextSibling;
3147
+ while (slotContent && slotContent['s-sn'] === node['s-sn']) {
3148
+ if (slotContent.nodeType === 3 /* NODE_TYPES.TEXT_NODE */ || slotContent.nodeType === 1 /* NODE_TYPES.ELEMENT_NODE */) {
3149
+ text.push((_b = (_a = slotContent.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '');
3150
+ }
3151
+ slotContent = slotContent.nextSibling;
3152
+ }
3153
+ return text.filter((ref) => ref !== '').join(' ');
3154
+ })
3155
+ .filter((text) => text !== '')
3156
+ .join(' ');
3157
+ // Pad the string to return
3158
+ return ' ' + textContent + ' ';
3159
+ },
3160
+ // To mimic shadow root behavior, we need to overwrite all nodes in a slot
3161
+ // reference node. If a default slot reference node exists, the text content will be
3162
+ // placed there. Otherwise, the new text node will be hidden
3163
+ set(value) {
3164
+ const slotRefNodes = getAllChildSlotNodes(this.childNodes);
3165
+ slotRefNodes.forEach((node) => {
3166
+ // Remove the existing content of the slot
3167
+ let slotContent = node.nextSibling;
3168
+ while (slotContent && slotContent['s-sn'] === node['s-sn']) {
3169
+ const tmp = slotContent;
3170
+ slotContent = slotContent.nextSibling;
3171
+ tmp.remove();
3172
+ }
3173
+ // If this is a default slot, add the text node in the slot location.
3174
+ // Otherwise, destroy the slot reference node
3175
+ if (node['s-sn'] === '') {
3176
+ const textNode = this.ownerDocument.createTextNode(value);
3177
+ textNode['s-sn'] = '';
3178
+ node.parentElement.insertBefore(textNode, node.nextSibling);
3179
+ }
3180
+ else {
3181
+ node.remove();
3182
+ }
3183
+ });
3184
+ },
3185
+ });
3186
+ }
3187
+ else {
3188
+ Object.defineProperty(hostElementPrototype, 'textContent', {
3189
+ get() {
3190
+ var _a;
3191
+ // get the 'default slot', which would be the first slot in a shadow tree (if we were using one), whose name is
3192
+ // the empty string
3193
+ const slotNode = getHostSlotNode(this.childNodes, '');
3194
+ // when a slot node is found, the textContent _may_ be found in the next sibling (text) node, depending on how
3195
+ // nodes were reordered during the vdom render. first try to get the text content from the sibling.
3196
+ if (((_a = slotNode === null || slotNode === void 0 ? void 0 : slotNode.nextSibling) === null || _a === void 0 ? void 0 : _a.nodeType) === 3 /* NODE_TYPES.TEXT_NODE */) {
3197
+ return slotNode.nextSibling.textContent;
3198
+ }
3199
+ else if (slotNode) {
3200
+ return slotNode.textContent;
3201
+ }
3202
+ else {
3203
+ // fallback to the original implementation
3204
+ return this.__textContent;
3205
+ }
3206
+ },
3207
+ set(value) {
3208
+ var _a;
3209
+ // get the 'default slot', which would be the first slot in a shadow tree (if we were using one), whose name is
3210
+ // the empty string
3211
+ const slotNode = getHostSlotNode(this.childNodes, '');
3212
+ // when a slot node is found, the textContent _may_ need to be placed in the next sibling (text) node,
3213
+ // depending on how nodes were reordered during the vdom render. first try to set the text content on the
3214
+ // sibling.
3215
+ if (((_a = slotNode === null || slotNode === void 0 ? void 0 : slotNode.nextSibling) === null || _a === void 0 ? void 0 : _a.nodeType) === 3 /* NODE_TYPES.TEXT_NODE */) {
3216
+ slotNode.nextSibling.textContent = value;
3217
+ }
3218
+ else if (slotNode) {
3219
+ slotNode.textContent = value;
3220
+ }
3221
+ else {
3222
+ // we couldn't find a slot, but that doesn't mean that there isn't one. if this check ran before the DOM
3223
+ // loaded, we could have missed it. check for a content reference element on the scoped component and insert
3224
+ // it there
3225
+ this.__textContent = value;
3226
+ const contentRefElm = this['s-cr'];
3227
+ if (contentRefElm) {
3228
+ this.insertBefore(contentRefElm, this.firstChild);
3229
+ }
3230
+ }
3231
+ },
3232
+ });
3233
+ }
3234
+ };
3235
+ const patchChildSlotNodes = (elm, cmpMeta) => {
3236
+ class FakeNodeList extends Array {
3237
+ item(n) {
3238
+ return this[n];
3239
+ }
3240
+ }
3241
+ // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
3242
+ if (cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) {
3243
+ const childNodesFn = elm.__lookupGetter__('childNodes');
3244
+ Object.defineProperty(elm, 'children', {
3245
+ get() {
3246
+ return this.childNodes.map((n) => n.nodeType === 1);
3247
+ },
3248
+ });
3249
+ Object.defineProperty(elm, 'childElementCount', {
3250
+ get() {
3251
+ return elm.children.length;
3252
+ },
3253
+ });
3254
+ Object.defineProperty(elm, 'childNodes', {
3255
+ get() {
3256
+ const childNodes = childNodesFn.call(this);
3257
+ if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0 &&
3258
+ getHostRef(this).$flags$ & 2 /* HOST_FLAGS.hasRendered */) {
3259
+ const result = new FakeNodeList();
3260
+ for (let i = 0; i < childNodes.length; i++) {
3261
+ const slot = childNodes[i]['s-nr'];
3262
+ if (slot) {
3263
+ result.push(slot);
3264
+ }
3265
+ }
3266
+ return result;
3267
+ }
3268
+ return FakeNodeList.from(childNodes);
3269
+ },
3270
+ });
3271
+ }
3272
+ };
3273
+ /**
3274
+ * Recursively finds all slot reference nodes ('s-sr') in a series of child nodes.
3275
+ *
3276
+ * @param childNodes The set of child nodes to search for slot reference nodes.
3277
+ * @returns An array of slot reference nodes.
3278
+ */
3279
+ const getAllChildSlotNodes = (childNodes) => {
3280
+ const slotRefNodes = [];
3281
+ for (const childNode of Array.from(childNodes)) {
3282
+ if (childNode['s-sr']) {
3283
+ slotRefNodes.push(childNode);
3284
+ }
3285
+ slotRefNodes.push(...getAllChildSlotNodes(childNode.childNodes));
3286
+ }
3287
+ return slotRefNodes;
3288
+ };
3289
+ const getSlotName = (node) => node['s-sn'] || (node.nodeType === 1 && node.getAttribute('slot')) || '';
3290
+ /**
3291
+ * Recursively searches a series of child nodes for a slot with the provided name.
3292
+ * @param childNodes the nodes to search for a slot with a specific name.
3293
+ * @param slotName the name of the slot to match on.
3294
+ * @returns a reference to the slot node that matches the provided name, `null` otherwise
3295
+ */
3296
+ const getHostSlotNode = (childNodes, slotName) => {
3297
+ let i = 0;
3298
+ let childNode;
3299
+ for (; i < childNodes.length; i++) {
3300
+ childNode = childNodes[i];
3301
+ if (childNode['s-sr'] && childNode['s-sn'] === slotName) {
3302
+ return childNode;
3303
+ }
3304
+ childNode = getHostSlotNode(childNode.childNodes, slotName);
3305
+ if (childNode) {
3306
+ return childNode;
3307
+ }
3308
+ }
3309
+ return null;
3310
+ };
3311
+ const getHostSlotChildNodes = (n, slotName) => {
3312
+ const childNodes = [n];
3313
+ while ((n = n.nextSibling) && n['s-sn'] === slotName) {
3314
+ childNodes.push(n);
3315
+ }
3316
+ return childNodes;
3317
+ };
3318
+ const defineCustomElement = (Cstr, compactMeta) => {
3319
+ customElements.define(compactMeta[1], proxyCustomElement(Cstr, compactMeta));
3320
+ };
3321
+ const proxyCustomElement = (Cstr, compactMeta) => {
3322
+ const cmpMeta = {
3323
+ $flags$: compactMeta[0],
3324
+ $tagName$: compactMeta[1],
3325
+ };
3326
+ if (BUILD.member) {
3327
+ cmpMeta.$members$ = compactMeta[2];
3328
+ }
3329
+ if (BUILD.hostListener) {
3330
+ cmpMeta.$listeners$ = compactMeta[3];
3331
+ }
3332
+ if (BUILD.watchCallback) {
3333
+ cmpMeta.$watchers$ = Cstr.$watchers$;
3334
+ }
3335
+ if (BUILD.reflect) {
3336
+ cmpMeta.$attrsToReflect$ = [];
3337
+ }
3338
+ if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
3339
+ // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
3340
+ cmpMeta.$flags$ |= 8 /* CMP_FLAGS.needsShadowDomShim */;
3341
+ }
3342
+ // TODO(STENCIL-914): this check and `else` block can go away and be replaced by just the `scoped` check
3343
+ if (BUILD.experimentalSlotFixes) {
3344
+ if (BUILD.scoped && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
3345
+ // This check is intentionally not combined with the surrounding `experimentalSlotFixes` check
3346
+ // since, moving forward, we only want to patch the pseudo shadow DOM when the component is scoped
3347
+ patchPseudoShadowDom(Cstr.prototype, cmpMeta);
3348
+ }
3349
+ }
3350
+ else {
3351
+ if (BUILD.slotChildNodesFix) {
3352
+ patchChildSlotNodes(Cstr.prototype, cmpMeta);
3353
+ }
3354
+ if (BUILD.cloneNodeFix) {
3355
+ patchCloneNode(Cstr.prototype);
3356
+ }
3357
+ if (BUILD.appendChildSlotFix) {
3358
+ patchSlotAppendChild(Cstr.prototype);
3359
+ }
3360
+ if (BUILD.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
3361
+ patchTextContent(Cstr.prototype);
3362
+ }
3363
+ }
3364
+ const originalConnectedCallback = Cstr.prototype.connectedCallback;
3365
+ const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
3366
+ Object.assign(Cstr.prototype, {
3367
+ __registerHost() {
3368
+ registerHost(this, cmpMeta);
3369
+ },
3370
+ connectedCallback() {
3371
+ connectedCallback(this);
3372
+ if (BUILD.connectedCallback && originalConnectedCallback) {
3373
+ originalConnectedCallback.call(this);
3374
+ }
3375
+ },
3376
+ disconnectedCallback() {
3377
+ disconnectedCallback(this);
3378
+ if (BUILD.disconnectedCallback && originalDisconnectedCallback) {
3379
+ originalDisconnectedCallback.call(this);
3380
+ }
3381
+ },
3382
+ __attachShadow() {
3383
+ if (supportsShadow) {
3384
+ if (BUILD.shadowDelegatesFocus) {
3385
+ this.attachShadow({
3386
+ mode: 'open',
3387
+ delegatesFocus: !!(cmpMeta.$flags$ & 16 /* CMP_FLAGS.shadowDelegatesFocus */),
3388
+ });
3389
+ }
3390
+ else {
3391
+ this.attachShadow({ mode: 'open' });
3392
+ }
3393
+ }
3394
+ else {
3395
+ this.shadowRoot = this;
3396
+ }
3397
+ },
3398
+ });
3399
+ Cstr.is = cmpMeta.$tagName$;
3400
+ return proxyComponent(Cstr, cmpMeta, 1 /* PROXY_FLAGS.isElementConstructor */ | 2 /* PROXY_FLAGS.proxyState */);
3401
+ };
3402
+ const forceModeUpdate = (elm) => {
3403
+ if (BUILD.style && BUILD.mode && !BUILD.lazyLoad) {
3404
+ const mode = computeMode(elm);
3405
+ const hostRef = getHostRef(elm);
3406
+ if (hostRef.$modeName$ !== mode) {
3407
+ const cmpMeta = hostRef.$cmpMeta$;
3408
+ const oldScopeId = elm['s-sc'];
3409
+ const scopeId = getScopeId(cmpMeta, mode);
3410
+ const style = elm.constructor.style[mode];
3411
+ const flags = cmpMeta.$flags$;
3412
+ if (style) {
3413
+ if (!styles.has(scopeId)) {
3414
+ registerStyle(scopeId, style, !!(flags & 1 /* CMP_FLAGS.shadowDomEncapsulation */));
3415
+ }
3416
+ hostRef.$modeName$ = mode;
3417
+ elm.classList.remove(oldScopeId + '-h', oldScopeId + '-s');
3418
+ attachStyles(hostRef);
3419
+ forceUpdate(elm);
3420
+ }
3421
+ }
3422
+ }
3423
+ };
3424
+ /**
3425
+ * Kick off hot-module-replacement for a component. In order to replace the
3426
+ * component in-place we:
3427
+ *
3428
+ * 1. get a reference to the {@link d.HostRef} for the element
3429
+ * 2. reset the element's runtime flags
3430
+ * 3. re-run the initialization logic for the element (via
3431
+ * {@link initializeComponent})
3432
+ *
3433
+ * @param hostElement the host element for the component which we want to start
3434
+ * doing HMR
3435
+ * @param cmpMeta runtime metadata for the component
3436
+ * @param hmrVersionId the current HMR version ID
3437
+ */
3438
+ const hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
3439
+ // ¯\_(ツ)_/¯
3440
+ const hostRef = getHostRef(hostElement);
3441
+ // reset state flags to only have been connected
3442
+ hostRef.$flags$ = 1 /* HOST_FLAGS.hasConnected */;
3443
+ // TODO
3444
+ // detach any event listeners that may have been added
3445
+ // because we're not passing an exact event name it'll
3446
+ // remove all of this element's event, which is good
3447
+ // re-initialize the component
3448
+ initializeComponent(hostElement, hostRef, cmpMeta, hmrVersionId);
3449
+ };
3450
+ const bootstrapLazy = (lazyBundles, options = {}) => {
3451
+ var _a;
3452
+ if (BUILD.profile && performance.mark) {
3453
+ performance.mark('st:app:start');
3454
+ }
3455
+ installDevTools();
3456
+ const endBootstrap = createTime('bootstrapLazy');
3457
+ const cmpTags = [];
3458
+ const exclude = options.exclude || [];
3459
+ const customElements = win.customElements;
3460
+ const head = doc.head;
3461
+ const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
3462
+ const dataStyles = /*@__PURE__*/ doc.createElement('style');
3463
+ const deferredConnectedCallbacks = [];
3464
+ const styles = /*@__PURE__*/ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
3465
+ let appLoadFallback;
3466
+ let isBootstrapping = true;
3467
+ let i = 0;
3468
+ Object.assign(plt, options);
3469
+ plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
3470
+ if (BUILD.asyncQueue) {
3471
+ if (options.syncQueue) {
3472
+ plt.$flags$ |= 4 /* PLATFORM_FLAGS.queueSync */;
3473
+ }
3474
+ }
3475
+ if (BUILD.hydrateClientSide) {
3476
+ // If the app is already hydrated there is not point to disable the
3477
+ // async queue. This will improve the first input delay
3478
+ plt.$flags$ |= 2 /* PLATFORM_FLAGS.appLoaded */;
3479
+ }
3480
+ if (BUILD.hydrateClientSide && BUILD.shadowDom) {
3481
+ for (; i < styles.length; i++) {
3482
+ registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
3483
+ }
3484
+ }
3485
+ let hasSlotRelocation = false;
3486
+ lazyBundles.map((lazyBundle) => {
3487
+ lazyBundle[1].map((compactMeta) => {
3488
+ var _a;
3489
+ const cmpMeta = {
3490
+ $flags$: compactMeta[0],
3491
+ $tagName$: compactMeta[1],
3492
+ $members$: compactMeta[2],
3493
+ $listeners$: compactMeta[3],
3494
+ };
3495
+ // Check if we are using slots outside the shadow DOM in this component.
3496
+ // We'll use this information later to add styles for `slot-fb` elements
3497
+ if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
3498
+ hasSlotRelocation = true;
3499
+ }
3500
+ if (BUILD.member) {
3501
+ cmpMeta.$members$ = compactMeta[2];
3502
+ }
3503
+ if (BUILD.hostListener) {
3504
+ cmpMeta.$listeners$ = compactMeta[3];
3505
+ }
3506
+ if (BUILD.reflect) {
3507
+ cmpMeta.$attrsToReflect$ = [];
3508
+ }
3509
+ if (BUILD.watchCallback) {
3510
+ cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {};
3511
+ }
3512
+ if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
3513
+ // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
3514
+ cmpMeta.$flags$ |= 8 /* CMP_FLAGS.needsShadowDomShim */;
3515
+ }
3516
+ const tagName = BUILD.transformTagName && options.transformTagName
3517
+ ? options.transformTagName(cmpMeta.$tagName$)
3518
+ : cmpMeta.$tagName$;
3519
+ const HostElement = class extends HTMLElement {
3520
+ // StencilLazyHost
3521
+ constructor(self) {
3522
+ // @ts-ignore
3523
+ super(self);
3524
+ self = this;
3525
+ registerHost(self, cmpMeta);
3526
+ if (BUILD.shadowDom && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
3527
+ // this component is using shadow dom
3528
+ // and this browser supports shadow dom
3529
+ // add the read-only property "shadowRoot" to the host element
3530
+ // adding the shadow root build conditionals to minimize runtime
3531
+ if (supportsShadow) {
3532
+ if (BUILD.shadowDelegatesFocus) {
3533
+ self.attachShadow({
3534
+ mode: 'open',
3535
+ delegatesFocus: !!(cmpMeta.$flags$ & 16 /* CMP_FLAGS.shadowDelegatesFocus */),
3536
+ });
3537
+ }
3538
+ else {
3539
+ self.attachShadow({ mode: 'open' });
3540
+ }
3541
+ }
3542
+ else if (!BUILD.hydrateServerSide && !('shadowRoot' in self)) {
3543
+ self.shadowRoot = self;
3544
+ }
3545
+ }
3546
+ }
3547
+ connectedCallback() {
3548
+ if (appLoadFallback) {
3549
+ clearTimeout(appLoadFallback);
3550
+ appLoadFallback = null;
3551
+ }
3552
+ if (isBootstrapping) {
3553
+ // connectedCallback will be processed once all components have been registered
3554
+ deferredConnectedCallbacks.push(this);
3555
+ }
3556
+ else {
3557
+ plt.jmp(() => connectedCallback(this));
3558
+ }
3559
+ }
3560
+ disconnectedCallback() {
3561
+ plt.jmp(() => disconnectedCallback(this));
3562
+ }
3563
+ componentOnReady() {
3564
+ return getHostRef(this).$onReadyPromise$;
3565
+ }
3566
+ };
3567
+ // TODO(STENCIL-914): this check and `else` block can go away and be replaced by just the `scoped` check
3568
+ if (BUILD.experimentalSlotFixes) {
3569
+ // This check is intentionally not combined with the surrounding `experimentalSlotFixes` check
3570
+ // since, moving forward, we only want to patch the pseudo shadow DOM when the component is scoped
3571
+ if (BUILD.scoped && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
3572
+ patchPseudoShadowDom(HostElement.prototype, cmpMeta);
3573
+ }
3574
+ }
3575
+ else {
3576
+ if (BUILD.slotChildNodesFix) {
3577
+ patchChildSlotNodes(HostElement.prototype, cmpMeta);
3578
+ }
3579
+ if (BUILD.cloneNodeFix) {
3580
+ patchCloneNode(HostElement.prototype);
3581
+ }
3582
+ if (BUILD.appendChildSlotFix) {
3583
+ patchSlotAppendChild(HostElement.prototype);
3584
+ }
3585
+ if (BUILD.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
3586
+ patchTextContent(HostElement.prototype);
3587
+ }
3588
+ }
3589
+ // if the component is formAssociated we need to set that on the host
3590
+ // element so that it will be ready for `attachInternals` to be called on
3591
+ // it later on
3592
+ if (BUILD.formAssociated && cmpMeta.$flags$ & 64 /* CMP_FLAGS.formAssociated */) {
3593
+ HostElement.formAssociated = true;
3594
+ }
3595
+ if (BUILD.hotModuleReplacement) {
3596
+ // if we're in an HMR dev build then we need to set up the callback
3597
+ // which will carry out the work of actually replacing the module for
3598
+ // this particular component
3599
+ HostElement.prototype['s-hmr'] = function (hmrVersionId) {
3600
+ hmrStart(this, cmpMeta, hmrVersionId);
3601
+ };
3602
+ }
3603
+ cmpMeta.$lazyBundleId$ = lazyBundle[0];
3604
+ if (!exclude.includes(tagName) && !customElements.get(tagName)) {
3605
+ cmpTags.push(tagName);
3606
+ customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* PROXY_FLAGS.isElementConstructor */));
3607
+ }
3608
+ });
3609
+ });
3610
+ // Only bother generating CSS if we have components
3611
+ // TODO(STENCIL-1118): Add test cases for CSS content based on conditionals
3612
+ if (cmpTags.length > 0) {
3613
+ // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
3614
+ if (hasSlotRelocation) {
3615
+ dataStyles.textContent += SLOT_FB_CSS;
3616
+ }
3617
+ // Add hydration styles
3618
+ if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) {
3619
+ dataStyles.textContent += cmpTags + HYDRATED_CSS;
3620
+ }
3621
+ // If we have styles, add them to the DOM
3622
+ if (dataStyles.innerHTML.length) {
3623
+ dataStyles.setAttribute('data-styles', '');
3624
+ // Apply CSP nonce to the style tag if it exists
3625
+ const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
3626
+ if (nonce != null) {
3627
+ dataStyles.setAttribute('nonce', nonce);
3628
+ }
3629
+ // Insert the styles into the document head
3630
+ // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
3631
+ head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
3632
+ }
3633
+ }
3634
+ // Process deferred connectedCallbacks now all components have been registered
3635
+ isBootstrapping = false;
3636
+ if (deferredConnectedCallbacks.length) {
3637
+ deferredConnectedCallbacks.map((host) => host.connectedCallback());
3638
+ }
3639
+ else {
3640
+ if (BUILD.profile) {
3641
+ plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30, 'timeout')));
3642
+ }
3643
+ else {
3644
+ plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30)));
3645
+ }
3646
+ }
3647
+ // Fallback appLoad event
3648
+ endBootstrap();
3649
+ };
3650
+ const Fragment = (_, children) => children;
3651
+ const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
3652
+ if (BUILD.hostListener && listeners) {
3653
+ // this is called immediately within the element's constructor
3654
+ // initialize our event listeners on the host element
3655
+ // we do this now so that we can listen to events that may
3656
+ // have fired even before the instance is ready
3657
+ if (BUILD.hostListenerTargetParent) {
3658
+ // this component may have event listeners that should be attached to the parent
3659
+ if (attachParentListeners) {
3660
+ // this is being ran from within the connectedCallback
3661
+ // which is important so that we know the host element actually has a parent element
3662
+ // filter out the listeners to only have the ones that ARE being attached to the parent
3663
+ listeners = listeners.filter(([flags]) => flags & 32 /* LISTENER_FLAGS.TargetParent */);
3664
+ }
3665
+ else {
3666
+ // this is being ran from within the component constructor
3667
+ // everything BUT the parent element listeners should be attached at this time
3668
+ // filter out the listeners that are NOT being attached to the parent
3669
+ listeners = listeners.filter(([flags]) => !(flags & 32 /* LISTENER_FLAGS.TargetParent */));
3670
+ }
3671
+ }
3672
+ listeners.map(([flags, name, method]) => {
3673
+ const target = BUILD.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;
3674
+ const handler = hostListenerProxy(hostRef, method);
3675
+ const opts = hostListenerOpts(flags);
3676
+ plt.ael(target, name, handler, opts);
3677
+ (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
3678
+ });
3679
+ }
3680
+ };
3681
+ const hostListenerProxy = (hostRef, methodName) => (ev) => {
3682
+ try {
3683
+ if (BUILD.lazyLoad) {
3684
+ if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
3685
+ // instance is ready, let's call it's member method for this event
3686
+ hostRef.$lazyInstance$[methodName](ev);
3687
+ }
3688
+ else {
3689
+ (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
3690
+ }
3691
+ }
3692
+ else {
3693
+ hostRef.$hostElement$[methodName](ev);
3694
+ }
3695
+ }
3696
+ catch (e) {
3697
+ consoleError(e);
3698
+ }
3699
+ };
3700
+ const getHostListenerTarget = (elm, flags) => {
3701
+ if (BUILD.hostListenerTargetDocument && flags & 4 /* LISTENER_FLAGS.TargetDocument */)
3702
+ return doc;
3703
+ if (BUILD.hostListenerTargetWindow && flags & 8 /* LISTENER_FLAGS.TargetWindow */)
3704
+ return win;
3705
+ if (BUILD.hostListenerTargetBody && flags & 16 /* LISTENER_FLAGS.TargetBody */)
3706
+ return doc.body;
3707
+ if (BUILD.hostListenerTargetParent && flags & 32 /* LISTENER_FLAGS.TargetParent */)
3708
+ return elm.parentElement;
3709
+ return elm;
3710
+ };
3711
+ // prettier-ignore
3712
+ const hostListenerOpts = (flags) => supportsListenerOptions
3713
+ ? ({
3714
+ passive: (flags & 1 /* LISTENER_FLAGS.Passive */) !== 0,
3715
+ capture: (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0,
3716
+ })
3717
+ : (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
3718
+ /**
3719
+ * Assigns the given value to the nonce property on the runtime platform object.
3720
+ * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
3721
+ * @param nonce The value to be assigned to the platform nonce property.
3722
+ * @returns void
3723
+ */
3724
+ const setNonce = (nonce) => (plt.$nonce$ = nonce);
3725
+ const setPlatformOptions = (opts) => Object.assign(plt, opts);
3726
+ /**
3727
+ * Updates the DOM generated on the server with annotations such as node attributes and
3728
+ * comment nodes to facilitate future client-side hydration. These annotations are used for things
3729
+ * like moving elements back to their original hosts if using Shadow DOM on the client, and for quickly
3730
+ * reconstructing the vNode representations of the DOM.
3731
+ *
3732
+ * @param doc The DOM generated by the server.
3733
+ * @param staticComponents Any components that should be considered static and do not need client-side hydration.
3734
+ */
3735
+ const insertVdomAnnotations = (doc, staticComponents) => {
3736
+ if (doc != null) {
3737
+ const docData = {
3738
+ hostIds: 0,
3739
+ rootLevelIds: 0,
3740
+ staticComponents: new Set(staticComponents),
3741
+ };
3742
+ const orgLocationNodes = [];
3743
+ parseVNodeAnnotations(doc, doc.body, docData, orgLocationNodes);
3744
+ orgLocationNodes.forEach((orgLocationNode) => {
3745
+ var _a, _b;
3746
+ if (orgLocationNode != null && orgLocationNode['s-nr']) {
3747
+ const nodeRef = orgLocationNode['s-nr'];
3748
+ let hostId = nodeRef['s-host-id'];
3749
+ let nodeId = nodeRef['s-node-id'];
3750
+ let childId = `${hostId}.${nodeId}`;
3751
+ if (hostId == null) {
3752
+ hostId = 0;
3753
+ docData.rootLevelIds++;
3754
+ nodeId = docData.rootLevelIds;
3755
+ childId = `${hostId}.${nodeId}`;
3756
+ if (nodeRef.nodeType === 1 /* NODE_TYPE.ElementNode */) {
3757
+ nodeRef.setAttribute(HYDRATE_CHILD_ID, childId);
3758
+ }
3759
+ else if (nodeRef.nodeType === 3 /* NODE_TYPE.TextNode */) {
3760
+ if (hostId === 0) {
3761
+ const textContent = (_a = nodeRef.nodeValue) === null || _a === void 0 ? void 0 : _a.trim();
3762
+ if (textContent === '') {
3763
+ // useless whitespace node at the document root
3764
+ orgLocationNode.remove();
3765
+ return;
3766
+ }
3767
+ }
3768
+ const commentBeforeTextNode = doc.createComment(childId);
3769
+ commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`;
3770
+ (_b = nodeRef.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(commentBeforeTextNode, nodeRef);
3771
+ }
3772
+ }
3773
+ let orgLocationNodeId = `${ORG_LOCATION_ID}.${childId}`;
3774
+ const orgLocationParentNode = orgLocationNode.parentElement;
3775
+ if (orgLocationParentNode) {
3776
+ if (orgLocationParentNode['s-en'] === '') {
3777
+ // ending with a "." means that the parent element
3778
+ // of this node's original location is a SHADOW dom element
3779
+ // and this node is apart of the root level light dom
3780
+ orgLocationNodeId += `.`;
3781
+ }
3782
+ else if (orgLocationParentNode['s-en'] === 'c') {
3783
+ // ending with a ".c" means that the parent element
3784
+ // of this node's original location is a SCOPED element
3785
+ // and this node is apart of the root level light dom
3786
+ orgLocationNodeId += `.c`;
3787
+ }
3788
+ }
3789
+ orgLocationNode.nodeValue = orgLocationNodeId;
3790
+ }
3791
+ });
3792
+ }
3793
+ };
3794
+ /**
3795
+ * Recursively parses a node generated by the server and its children to set host and child id
3796
+ * attributes read during client-side hydration. This function also tracks whether each node is
3797
+ * an original location reference node meaning that a node has been moved via slot relocation.
3798
+ *
3799
+ * @param doc The DOM generated by the server.
3800
+ * @param node The node to parse.
3801
+ * @param docData An object containing metadata about the document.
3802
+ * @param orgLocationNodes An array of nodes that have been moved via slot relocation.
3803
+ */
3804
+ const parseVNodeAnnotations = (doc, node, docData, orgLocationNodes) => {
3805
+ if (node == null) {
3806
+ return;
3807
+ }
3808
+ if (node['s-nr'] != null) {
3809
+ orgLocationNodes.push(node);
3810
+ }
3811
+ if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
3812
+ node.childNodes.forEach((childNode) => {
3813
+ const hostRef = getHostRef(childNode);
3814
+ if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) {
3815
+ const cmpData = {
3816
+ nodeIds: 0,
3817
+ };
3818
+ insertVNodeAnnotations(doc, childNode, hostRef.$vnode$, docData, cmpData);
3819
+ }
3820
+ parseVNodeAnnotations(doc, childNode, docData, orgLocationNodes);
3821
+ });
3822
+ }
3823
+ };
3824
+ /**
3825
+ * Insert attribute annotations on an element for its host ID and, potentially, its child ID.
3826
+ * Also makes calls to insert annotations on the element's children, keeping track of the depth of
3827
+ * the component tree.
3828
+ *
3829
+ * @param doc The DOM generated by the server.
3830
+ * @param hostElm The element to insert annotations for.
3831
+ * @param vnode The vNode representation of the element.
3832
+ * @param docData An object containing metadata about the document.
3833
+ * @param cmpData An object containing metadata about the component.
3834
+ */
3835
+ const insertVNodeAnnotations = (doc, hostElm, vnode, docData, cmpData) => {
3836
+ if (vnode != null) {
3837
+ const hostId = ++docData.hostIds;
3838
+ hostElm.setAttribute(HYDRATE_ID, hostId);
3839
+ if (hostElm['s-cr'] != null) {
3840
+ hostElm['s-cr'].nodeValue = `${CONTENT_REF_ID}.${hostId}`;
3841
+ }
3842
+ if (vnode.$children$ != null) {
3843
+ const depth = 0;
3844
+ vnode.$children$.forEach((vnodeChild, index) => {
3845
+ insertChildVNodeAnnotations(doc, vnodeChild, cmpData, hostId, depth, index);
3846
+ });
3847
+ }
3848
+ // If this element does not already have a child ID and has a sibling comment node
3849
+ // representing a slot, we use the content of the comment to set the child ID attribute
3850
+ // on the host element.
3851
+ if (hostElm && vnode && vnode.$elm$ && !hostElm.hasAttribute(HYDRATE_CHILD_ID)) {
3852
+ const parent = hostElm.parentElement;
3853
+ if (parent && parent.childNodes) {
3854
+ const parentChildNodes = Array.from(parent.childNodes);
3855
+ const comment = parentChildNodes.find((node) => node.nodeType === 8 /* NODE_TYPE.CommentNode */ && node['s-sr']);
3856
+ if (comment) {
3857
+ const index = parentChildNodes.indexOf(hostElm) - 1;
3858
+ vnode.$elm$.setAttribute(HYDRATE_CHILD_ID, `${comment['s-host-id']}.${comment['s-node-id']}.0.${index}`);
3859
+ }
3860
+ }
3861
+ }
3862
+ }
3863
+ };
3864
+ /**
3865
+ * Recursively analyzes the type of a child vNode and inserts annotations on the vNodes's element based on its type.
3866
+ * Element nodes receive a child ID attribute, text nodes have a comment with the child ID inserted before them,
3867
+ * and comment nodes representing a slot have their node value set to a slot node ID containing the child ID.
3868
+ *
3869
+ * @param doc The DOM generated by the server.
3870
+ * @param vnodeChild The vNode to insert annotations for.
3871
+ * @param cmpData An object containing metadata about the component.
3872
+ * @param hostId The host ID of this element's parent.
3873
+ * @param depth How deep this element sits in the component tree relative to its parent.
3874
+ * @param index The index of this element in its parent's children array.
3875
+ */
3876
+ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, index) => {
3877
+ const childElm = vnodeChild.$elm$;
3878
+ if (childElm == null) {
3879
+ return;
3880
+ }
3881
+ const nodeId = cmpData.nodeIds++;
3882
+ const childId = `${hostId}.${nodeId}.${depth}.${index}`;
3883
+ childElm['s-host-id'] = hostId;
3884
+ childElm['s-node-id'] = nodeId;
3885
+ if (childElm.nodeType === 1 /* NODE_TYPE.ElementNode */) {
3886
+ childElm.setAttribute(HYDRATE_CHILD_ID, childId);
3887
+ }
3888
+ else if (childElm.nodeType === 3 /* NODE_TYPE.TextNode */) {
3889
+ const parentNode = childElm.parentNode;
3890
+ const nodeName = parentNode === null || parentNode === void 0 ? void 0 : parentNode.nodeName;
3891
+ if (nodeName !== 'STYLE' && nodeName !== 'SCRIPT') {
3892
+ const textNodeId = `${TEXT_NODE_ID}.${childId}`;
3893
+ const commentBeforeTextNode = doc.createComment(textNodeId);
3894
+ parentNode === null || parentNode === void 0 ? void 0 : parentNode.insertBefore(commentBeforeTextNode, childElm);
3895
+ }
3896
+ }
3897
+ else if (childElm.nodeType === 8 /* NODE_TYPE.CommentNode */) {
3898
+ if (childElm['s-sr']) {
3899
+ const slotName = childElm['s-sn'] || '';
3900
+ const slotNodeId = `${SLOT_NODE_ID}.${childId}.${slotName}`;
3901
+ childElm.nodeValue = slotNodeId;
3902
+ }
3903
+ }
3904
+ if (vnodeChild.$children$ != null) {
3905
+ // Increment depth each time we recur deeper into the tree
3906
+ const childDepth = depth + 1;
3907
+ vnodeChild.$children$.forEach((vnode, index) => {
3908
+ insertChildVNodeAnnotations(doc, vnode, cmpData, hostId, childDepth, index);
3909
+ });
3910
+ }
3911
+ };
3912
+ var _a;
3913
+ /**
3914
+ * A WeakMap mapping runtime component references to their corresponding host reference
3915
+ * instances.
3916
+ *
3917
+ * **Note**: If we're in an HMR context we need to store a reference to this
3918
+ * value on `window` in order to maintain the mapping of {@link d.RuntimeRef}
3919
+ * to {@link d.HostRef} across HMR updates.
3920
+ *
3921
+ * This is necessary because when HMR updates for a component are processed by
3922
+ * the browser-side dev server client the JS bundle for that component is
3923
+ * re-fetched. Since the module containing {@link hostRefs} is included in
3924
+ * that bundle, if we do not store a reference to it the new iteration of the
3925
+ * component will not have access to the previous hostRef map, leading to a
3926
+ * bug where the new version of the component cannot properly initialize.
3927
+ */
3928
+ const hostRefs = BUILD.hotModuleReplacement
3929
+ ? ((_a = window).__STENCIL_HOSTREFS__ || (_a.__STENCIL_HOSTREFS__ = new WeakMap()))
3930
+ : new WeakMap();
3931
+ /**
3932
+ * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
3933
+ *
3934
+ * @param ref the runtime ref of interest
3935
+ * @returns the Host reference (if found) or undefined
3936
+ */
3937
+ const getHostRef = (ref) => hostRefs.get(ref);
3938
+ /**
3939
+ * Register a lazy instance with the {@link hostRefs} object so it's
3940
+ * corresponding {@link d.HostRef} can be retrieved later.
3941
+ *
3942
+ * @param lazyInstance the lazy instance of interest
3943
+ * @param hostRef that instances `HostRef` object
3944
+ * @returns a reference to the host ref WeakMap
3945
+ */
3946
+ const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
3947
+ /**
3948
+ * Register a host element for a Stencil component, setting up various metadata
3949
+ * and callbacks based on {@link BUILD} flags as well as the component's runtime
3950
+ * metadata.
3951
+ *
3952
+ * @param hostElement the host element to register
3953
+ * @param cmpMeta runtime metadata for that component
3954
+ * @returns a reference to the host ref WeakMap
3955
+ */
3956
+ const registerHost = (hostElement, cmpMeta) => {
3957
+ const hostRef = {
3958
+ $flags$: 0,
3959
+ $hostElement$: hostElement,
3960
+ $cmpMeta$: cmpMeta,
3961
+ $instanceValues$: new Map(),
3962
+ };
3963
+ if (BUILD.isDev) {
3964
+ hostRef.$renderCount$ = 0;
3965
+ }
3966
+ if (BUILD.method && BUILD.lazyLoad) {
3967
+ hostRef.$onInstancePromise$ = new Promise((r) => (hostRef.$onInstanceResolve$ = r));
3968
+ }
3969
+ if (BUILD.asyncLoading) {
3970
+ hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
3971
+ hostElement['s-p'] = [];
3972
+ hostElement['s-rc'] = [];
3973
+ }
3974
+ addHostEventListeners(hostElement, hostRef, cmpMeta.$listeners$, false);
3975
+ return hostRefs.set(hostElement, hostRef);
3976
+ };
3977
+ const isMemberInElement = (elm, memberName) => memberName in elm;
3978
+ const consoleError = (e, el) => (customError || console.error)(e, el);
3979
+ const STENCIL_DEV_MODE = BUILD.isTesting
3980
+ ? ['STENCIL:'] // E2E testing
3981
+ : [
3982
+ '%cstencil',
3983
+ 'color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px',
3984
+ ];
3985
+ const consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);
3986
+ const consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
3987
+ const consoleDevInfo = (...m) => console.info(...STENCIL_DEV_MODE, ...m);
3988
+ const setErrorHandler = (handler) => (customError = handler);
3989
+ const cmpModules = /*@__PURE__*/ new Map();
3990
+ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
3991
+ // loadModuleImport
3992
+ const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
3993
+ const bundleId = cmpMeta.$lazyBundleId$;
3994
+ if (BUILD.isDev && typeof bundleId !== 'string') {
3995
+ consoleDevError(`Trying to lazily load component <${cmpMeta.$tagName$}> with style mode "${hostRef.$modeName$}", but it does not exist.`);
3996
+ return undefined;
3997
+ }
3998
+ const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;
3999
+ if (module) {
4000
+ return module[exportName];
4001
+ }
4002
+ /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
4003
+ return import(
4004
+ /* @vite-ignore */
4005
+ /* webpackInclude: /\.entry\.js$/ */
4006
+ /* webpackExclude: /\.system\.entry\.js$/ */
4007
+ /* webpackMode: "lazy" */
4008
+ `./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''}`).then((importedModule) => {
4009
+ if (!BUILD.hotModuleReplacement) {
4010
+ cmpModules.set(bundleId, importedModule);
4011
+ }
4012
+ return importedModule[exportName];
4013
+ }, consoleError);
4014
+ };
4015
+ const styles = /*@__PURE__*/ new Map();
4016
+ const modeResolutionChain = [];
4017
+ const win = typeof window !== 'undefined' ? window : {};
4018
+ const doc = win.document || { head: {} };
4019
+ const H = (win.HTMLElement || class {
4020
+ });
4021
+ const plt = {
4022
+ $flags$: 0,
4023
+ $resourcesUrl$: '',
4024
+ jmp: (h) => h(),
4025
+ raf: (h) => requestAnimationFrame(h),
4026
+ ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
4027
+ rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
4028
+ ce: (eventName, opts) => new CustomEvent(eventName, opts),
4029
+ };
4030
+ const setPlatformHelpers = (helpers) => {
4031
+ Object.assign(plt, helpers);
4032
+ };
4033
+ const supportsShadow =
4034
+ // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
4035
+ BUILD.shadowDomShim && BUILD.shadowDom
4036
+ ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)()
4037
+ : true;
4038
+ const supportsListenerOptions = /*@__PURE__*/ (() => {
4039
+ let supportsListenerOptions = false;
4040
+ try {
4041
+ doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
4042
+ get() {
4043
+ supportsListenerOptions = true;
4044
+ },
4045
+ }));
4046
+ }
4047
+ catch (e) { }
4048
+ return supportsListenerOptions;
4049
+ })();
4050
+ const promiseResolve = (v) => Promise.resolve(v);
4051
+ const supportsConstructableStylesheets = BUILD.constructableCSS
4052
+ ? /*@__PURE__*/ (() => {
4053
+ try {
4054
+ new CSSStyleSheet();
4055
+ return typeof new CSSStyleSheet().replaceSync === 'function';
4056
+ }
4057
+ catch (e) { }
4058
+ return false;
4059
+ })()
4060
+ : false;
4061
+ const queueDomReads = [];
4062
+ const queueDomWrites = [];
4063
+ const queueDomWritesLow = [];
4064
+ const queueTask = (queue, write) => (cb) => {
4065
+ queue.push(cb);
4066
+ if (!queuePending) {
4067
+ queuePending = true;
4068
+ if (write && plt.$flags$ & 4 /* PLATFORM_FLAGS.queueSync */) {
4069
+ nextTick(flush);
4070
+ }
4071
+ else {
4072
+ plt.raf(flush);
4073
+ }
4074
+ }
4075
+ };
4076
+ const consume = (queue) => {
4077
+ for (let i = 0; i < queue.length; i++) {
4078
+ try {
4079
+ queue[i](performance.now());
4080
+ }
4081
+ catch (e) {
4082
+ consoleError(e);
4083
+ }
4084
+ }
4085
+ queue.length = 0;
4086
+ };
4087
+ const consumeTimeout = (queue, timeout) => {
4088
+ let i = 0;
4089
+ let ts = 0;
4090
+ while (i < queue.length && (ts = performance.now()) < timeout) {
4091
+ try {
4092
+ queue[i++](ts);
4093
+ }
4094
+ catch (e) {
4095
+ consoleError(e);
4096
+ }
4097
+ }
4098
+ if (i === queue.length) {
4099
+ queue.length = 0;
4100
+ }
4101
+ else if (i !== 0) {
4102
+ queue.splice(0, i);
4103
+ }
4104
+ };
4105
+ const flush = () => {
4106
+ if (BUILD.asyncQueue) {
4107
+ queueCongestion++;
4108
+ }
4109
+ // always force a bunch of medium callbacks to run, but still have
4110
+ // a throttle on how many can run in a certain time
4111
+ // DOM READS!!!
4112
+ consume(queueDomReads);
4113
+ // DOM WRITES!!!
4114
+ if (BUILD.asyncQueue) {
4115
+ const timeout = (plt.$flags$ & 6 /* PLATFORM_FLAGS.queueMask */) === 2 /* PLATFORM_FLAGS.appLoaded */
4116
+ ? performance.now() + 14 * Math.ceil(queueCongestion * (1.0 / 10.0))
4117
+ : Infinity;
4118
+ consumeTimeout(queueDomWrites, timeout);
4119
+ consumeTimeout(queueDomWritesLow, timeout);
4120
+ if (queueDomWrites.length > 0) {
4121
+ queueDomWritesLow.push(...queueDomWrites);
4122
+ queueDomWrites.length = 0;
4123
+ }
4124
+ if ((queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0)) {
4125
+ // still more to do yet, but we've run out of time
4126
+ // let's let this thing cool off and try again in the next tick
4127
+ plt.raf(flush);
4128
+ }
4129
+ else {
4130
+ queueCongestion = 0;
4131
+ }
4132
+ }
4133
+ else {
4134
+ consume(queueDomWrites);
4135
+ if ((queuePending = queueDomReads.length > 0)) {
4136
+ // still more to do yet, but we've run out of time
4137
+ // let's let this thing cool off and try again in the next tick
4138
+ plt.raf(flush);
4139
+ }
4140
+ }
4141
+ };
4142
+ const nextTick = (cb) => promiseResolve().then(cb);
4143
+ const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
4144
+ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
4145
+
4146
+ export { BUILD as B, H, NAMESPACE as N, Host as a, bootstrapLazy as b, consoleDevInfo as c, doc as d, createEvent as e, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
4147
+
4148
+ //# sourceMappingURL=index-f19e63df.js.map