@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
@@ -1,1982 +0,0 @@
1
- const NAMESPACE = 'capsule';
2
-
3
- /**
4
- * Virtual DOM patching algorithm based on Snabbdom by
5
- * Simon Friis Vindum (@paldepind)
6
- * Licensed under the MIT License
7
- * https://github.com/snabbdom/snabbdom/blob/master/LICENSE
8
- *
9
- * Modified for Stencil's renderer and slot projection
10
- */
11
- let scopeId;
12
- let hostTagName;
13
- let useNativeShadowDom = false;
14
- let isSvgMode = false;
15
- let queuePending = false;
16
- const createTime = (fnName, tagName = '') => {
17
- {
18
- return () => {
19
- return;
20
- };
21
- }
22
- };
23
- const uniqueTime = (key, measureText) => {
24
- {
25
- return () => {
26
- return;
27
- };
28
- }
29
- };
30
- const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
31
- /**
32
- * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
33
- *
34
- * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
35
- * support as of Stencil v4.
36
- */
37
- const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
38
- /**
39
- * Default style mode id
40
- */
41
- /**
42
- * Reusable empty obj/array
43
- * Don't add values to these!!
44
- */
45
- const EMPTY_OBJ = {};
46
- /**
47
- * Namespaces
48
- */
49
- const SVG_NS = 'http://www.w3.org/2000/svg';
50
- const HTML_NS = 'http://www.w3.org/1999/xhtml';
51
- const isDef = (v) => v != null;
52
- /**
53
- * Check whether a value is a 'complex type', defined here as an object or a
54
- * function.
55
- *
56
- * @param o the value to check
57
- * @returns whether it's a complex type or not
58
- */
59
- const isComplexType = (o) => {
60
- // https://jsperf.com/typeof-fn-object/5
61
- o = typeof o;
62
- return o === 'object' || o === 'function';
63
- };
64
- /**
65
- * Helper method for querying a `meta` tag that contains a nonce value
66
- * out of a DOM's head.
67
- *
68
- * @param doc The DOM containing the `head` to query against
69
- * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
70
- * exists or the tag has no content.
71
- */
72
- function queryNonceMetaTagContent(doc) {
73
- var _a, _b, _c;
74
- 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;
75
- }
76
- /**
77
- * Production h() function based on Preact by
78
- * Jason Miller (@developit)
79
- * Licensed under the MIT License
80
- * https://github.com/developit/preact/blob/master/LICENSE
81
- *
82
- * Modified for Stencil's compiler and vdom
83
- */
84
- // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
85
- // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
86
- const h = (nodeName, vnodeData, ...children) => {
87
- let child = null;
88
- let key = null;
89
- let simple = false;
90
- let lastSimple = false;
91
- const vNodeChildren = [];
92
- const walk = (c) => {
93
- for (let i = 0; i < c.length; i++) {
94
- child = c[i];
95
- if (Array.isArray(child)) {
96
- walk(child);
97
- }
98
- else if (child != null && typeof child !== 'boolean') {
99
- if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {
100
- child = String(child);
101
- }
102
- if (simple && lastSimple) {
103
- // If the previous child was simple (string), we merge both
104
- vNodeChildren[vNodeChildren.length - 1].$text$ += child;
105
- }
106
- else {
107
- // Append a new vNode, if it's text, we create a text vNode
108
- vNodeChildren.push(simple ? newVNode(null, child) : child);
109
- }
110
- lastSimple = simple;
111
- }
112
- }
113
- };
114
- walk(children);
115
- if (vnodeData) {
116
- if (vnodeData.key) {
117
- key = vnodeData.key;
118
- }
119
- // normalize class / className attributes
120
- {
121
- const classData = vnodeData.className || vnodeData.class;
122
- if (classData) {
123
- vnodeData.class =
124
- typeof classData !== 'object'
125
- ? classData
126
- : Object.keys(classData)
127
- .filter((k) => classData[k])
128
- .join(' ');
129
- }
130
- }
131
- }
132
- const vnode = newVNode(nodeName, null);
133
- vnode.$attrs$ = vnodeData;
134
- if (vNodeChildren.length > 0) {
135
- vnode.$children$ = vNodeChildren;
136
- }
137
- {
138
- vnode.$key$ = key;
139
- }
140
- return vnode;
141
- };
142
- /**
143
- * A utility function for creating a virtual DOM node from a tag and some
144
- * possible text content.
145
- *
146
- * @param tag the tag for this element
147
- * @param text possible text content for the node
148
- * @returns a newly-minted virtual DOM node
149
- */
150
- const newVNode = (tag, text) => {
151
- const vnode = {
152
- $flags$: 0,
153
- $tag$: tag,
154
- $text$: text,
155
- $elm$: null,
156
- $children$: null,
157
- };
158
- {
159
- vnode.$attrs$ = null;
160
- }
161
- {
162
- vnode.$key$ = null;
163
- }
164
- return vnode;
165
- };
166
- const Host = {};
167
- /**
168
- * Check whether a given node is a Host node or not
169
- *
170
- * @param node the virtual DOM node to check
171
- * @returns whether it's a Host node or not
172
- */
173
- const isHost = (node) => node && node.$tag$ === Host;
174
- /**
175
- * Parse a new property value for a given property type.
176
- *
177
- * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
178
- * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
179
- * 1. `any`, the type given to `propValue` in the function signature
180
- * 2. the type stored from `propType`.
181
- *
182
- * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
183
- *
184
- * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
185
- * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
186
- * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
187
- * ```tsx
188
- * <my-cmp prop-val={0}></my-cmp>
189
- * ```
190
- *
191
- * HTML prop values on the other hand, will always a string
192
- *
193
- * @param propValue the new value to coerce to some type
194
- * @param propType the type of the prop, expressed as a binary number
195
- * @returns the parsed/coerced value
196
- */
197
- const parsePropertyValue = (propValue, propType) => {
198
- // ensure this value is of the correct prop type
199
- if (propValue != null && !isComplexType(propValue)) {
200
- if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
201
- // per the HTML spec, any string value means it is a boolean true value
202
- // but we'll cheat here and say that the string "false" is the boolean false
203
- return propValue === 'false' ? false : propValue === '' || !!propValue;
204
- }
205
- if (propType & 2 /* MEMBER_FLAGS.Number */) {
206
- // force it to be a number
207
- return parseFloat(propValue);
208
- }
209
- if (propType & 1 /* MEMBER_FLAGS.String */) {
210
- // could have been passed as a number or boolean
211
- // but we still want it as a string
212
- return String(propValue);
213
- }
214
- // redundant return here for better minification
215
- return propValue;
216
- }
217
- // not sure exactly what type we want
218
- // so no need to change to a different type
219
- return propValue;
220
- };
221
- const getElement = (ref) => (getHostRef(ref).$hostElement$ );
222
- const createEvent = (ref, name, flags) => {
223
- const elm = getElement(ref);
224
- return {
225
- emit: (detail) => {
226
- return emitEvent(elm, name, {
227
- bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
228
- composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
229
- cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
230
- detail,
231
- });
232
- },
233
- };
234
- };
235
- /**
236
- * Helper function to create & dispatch a custom Event on a provided target
237
- * @param elm the target of the Event
238
- * @param name the name to give the custom Event
239
- * @param opts options for configuring a custom Event
240
- * @returns the custom Event
241
- */
242
- const emitEvent = (elm, name, opts) => {
243
- const ev = plt.ce(name, opts);
244
- elm.dispatchEvent(ev);
245
- return ev;
246
- };
247
- const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
248
- const registerStyle = (scopeId, cssText, allowCS) => {
249
- let style = styles.get(scopeId);
250
- if (supportsConstructableStylesheets && allowCS) {
251
- style = (style || new CSSStyleSheet());
252
- if (typeof style === 'string') {
253
- style = cssText;
254
- }
255
- else {
256
- style.replaceSync(cssText);
257
- }
258
- }
259
- else {
260
- style = cssText;
261
- }
262
- styles.set(scopeId, style);
263
- };
264
- const addStyle = (styleContainerNode, cmpMeta, mode) => {
265
- var _a;
266
- const scopeId = getScopeId(cmpMeta);
267
- const style = styles.get(scopeId);
268
- // if an element is NOT connected then getRootNode() will return the wrong root node
269
- // so the fallback is to always use the document for the root node in those cases
270
- styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
271
- if (style) {
272
- if (typeof style === 'string') {
273
- styleContainerNode = styleContainerNode.head || styleContainerNode;
274
- let appliedStyles = rootAppliedStyles.get(styleContainerNode);
275
- let styleElm;
276
- if (!appliedStyles) {
277
- rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
278
- }
279
- if (!appliedStyles.has(scopeId)) {
280
- {
281
- styleElm = doc.createElement('style');
282
- styleElm.innerHTML = style;
283
- // Apply CSP nonce to the style tag if it exists
284
- const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
285
- if (nonce != null) {
286
- styleElm.setAttribute('nonce', nonce);
287
- }
288
- styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
289
- }
290
- // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
291
- if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
292
- styleElm.innerHTML += SLOT_FB_CSS;
293
- }
294
- if (appliedStyles) {
295
- appliedStyles.add(scopeId);
296
- }
297
- }
298
- }
299
- else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
300
- styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
301
- }
302
- }
303
- return scopeId;
304
- };
305
- const attachStyles = (hostRef) => {
306
- const cmpMeta = hostRef.$cmpMeta$;
307
- const elm = hostRef.$hostElement$;
308
- const flags = cmpMeta.$flags$;
309
- const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
310
- const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
311
- if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
312
- // only required when we're NOT using native shadow dom (slot)
313
- // or this browser doesn't support native shadow dom
314
- // and this host element was NOT created with SSR
315
- // let's pick out the inner content for slot projection
316
- // create a node to represent where the original
317
- // content was first placed, which is useful later on
318
- // DOM WRITE!!
319
- elm['s-sc'] = scopeId;
320
- elm.classList.add(scopeId + '-h');
321
- }
322
- endAttachStyles();
323
- };
324
- const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
325
- /**
326
- * Production setAccessor() function based on Preact by
327
- * Jason Miller (@developit)
328
- * Licensed under the MIT License
329
- * https://github.com/developit/preact/blob/master/LICENSE
330
- *
331
- * Modified for Stencil's compiler and vdom
332
- */
333
- /**
334
- * When running a VDom render set properties present on a VDom node onto the
335
- * corresponding HTML element.
336
- *
337
- * Note that this function has special functionality for the `class`,
338
- * `style`, `key`, and `ref` attributes, as well as event handlers (like
339
- * `onClick`, etc). All others are just passed through as-is.
340
- *
341
- * @param elm the HTMLElement onto which attributes should be set
342
- * @param memberName the name of the attribute to set
343
- * @param oldValue the old value for the attribute
344
- * @param newValue the new value for the attribute
345
- * @param isSvg whether we're in an svg context or not
346
- * @param flags bitflags for Vdom variables
347
- */
348
- const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
349
- if (oldValue !== newValue) {
350
- let isProp = isMemberInElement(elm, memberName);
351
- let ln = memberName.toLowerCase();
352
- if (memberName === 'class') {
353
- const classList = elm.classList;
354
- const oldClasses = parseClassList(oldValue);
355
- const newClasses = parseClassList(newValue);
356
- classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
357
- classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
358
- }
359
- else if (memberName === 'style') {
360
- // update style attribute, css properties and values
361
- {
362
- for (const prop in oldValue) {
363
- if (!newValue || newValue[prop] == null) {
364
- if (prop.includes('-')) {
365
- elm.style.removeProperty(prop);
366
- }
367
- else {
368
- elm.style[prop] = '';
369
- }
370
- }
371
- }
372
- }
373
- for (const prop in newValue) {
374
- if (!oldValue || newValue[prop] !== oldValue[prop]) {
375
- if (prop.includes('-')) {
376
- elm.style.setProperty(prop, newValue[prop]);
377
- }
378
- else {
379
- elm.style[prop] = newValue[prop];
380
- }
381
- }
382
- }
383
- }
384
- else if (memberName === 'key')
385
- ;
386
- else if ((!isProp ) &&
387
- memberName[0] === 'o' &&
388
- memberName[1] === 'n') {
389
- // Event Handlers
390
- // so if the member name starts with "on" and the 3rd characters is
391
- // a capital letter, and it's not already a member on the element,
392
- // then we're assuming it's an event listener
393
- if (memberName[2] === '-') {
394
- // on- prefixed events
395
- // allows to be explicit about the dom event to listen without any magic
396
- // under the hood:
397
- // <my-cmp on-click> // listens for "click"
398
- // <my-cmp on-Click> // listens for "Click"
399
- // <my-cmp on-ionChange> // listens for "ionChange"
400
- // <my-cmp on-EVENTS> // listens for "EVENTS"
401
- memberName = memberName.slice(3);
402
- }
403
- else if (isMemberInElement(win, ln)) {
404
- // standard event
405
- // the JSX attribute could have been "onMouseOver" and the
406
- // member name "onmouseover" is on the window's prototype
407
- // so let's add the listener "mouseover", which is all lowercased
408
- memberName = ln.slice(2);
409
- }
410
- else {
411
- // custom event
412
- // the JSX attribute could have been "onMyCustomEvent"
413
- // so let's trim off the "on" prefix and lowercase the first character
414
- // and add the listener "myCustomEvent"
415
- // except for the first character, we keep the event name case
416
- memberName = ln[2] + memberName.slice(3);
417
- }
418
- if (oldValue || newValue) {
419
- // Need to account for "capture" events.
420
- // If the event name ends with "Capture", we'll update the name to remove
421
- // the "Capture" suffix and make sure the event listener is setup to handle the capture event.
422
- const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
423
- // Make sure we only replace the last instance of "Capture"
424
- memberName = memberName.replace(CAPTURE_EVENT_REGEX, '');
425
- if (oldValue) {
426
- plt.rel(elm, memberName, oldValue, capture);
427
- }
428
- if (newValue) {
429
- plt.ael(elm, memberName, newValue, capture);
430
- }
431
- }
432
- }
433
- else {
434
- // Set property if it exists and it's not a SVG
435
- const isComplex = isComplexType(newValue);
436
- if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
437
- try {
438
- if (!elm.tagName.includes('-')) {
439
- const n = newValue == null ? '' : newValue;
440
- // Workaround for Safari, moving the <input> caret when re-assigning the same valued
441
- if (memberName === 'list') {
442
- isProp = false;
443
- }
444
- else if (oldValue == null || elm[memberName] != n) {
445
- elm[memberName] = n;
446
- }
447
- }
448
- else {
449
- elm[memberName] = newValue;
450
- }
451
- }
452
- catch (e) {
453
- /**
454
- * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
455
- */
456
- }
457
- }
458
- if (newValue == null || newValue === false) {
459
- if (newValue !== false || elm.getAttribute(memberName) === '') {
460
- {
461
- elm.removeAttribute(memberName);
462
- }
463
- }
464
- }
465
- else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
466
- newValue = newValue === true ? '' : newValue;
467
- {
468
- elm.setAttribute(memberName, newValue);
469
- }
470
- }
471
- }
472
- }
473
- };
474
- const parseClassListRegex = /\s/;
475
- /**
476
- * Parsed a string of classnames into an array
477
- * @param value className string, e.g. "foo bar baz"
478
- * @returns list of classes, e.g. ["foo", "bar", "baz"]
479
- */
480
- const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
481
- const CAPTURE_EVENT_SUFFIX = 'Capture';
482
- const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
483
- const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
484
- // if the element passed in is a shadow root, which is a document fragment
485
- // then we want to be adding attrs/props to the shadow root's "host" element
486
- // if it's not a shadow root, then we add attrs/props to the same element
487
- const elm = newVnode.$elm$.nodeType === 11 /* NODE_TYPE.DocumentFragment */ && newVnode.$elm$.host
488
- ? newVnode.$elm$.host
489
- : newVnode.$elm$;
490
- const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
491
- const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
492
- {
493
- // remove attributes no longer present on the vnode by setting them to undefined
494
- for (memberName in oldVnodeAttrs) {
495
- if (!(memberName in newVnodeAttrs)) {
496
- setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
497
- }
498
- }
499
- }
500
- // add new & update changed attributes
501
- for (memberName in newVnodeAttrs) {
502
- setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
503
- }
504
- };
505
- /**
506
- * Create a DOM Node corresponding to one of the children of a given VNode.
507
- *
508
- * @param oldParentVNode the parent VNode from the previous render
509
- * @param newParentVNode the parent VNode from the current render
510
- * @param childIndex the index of the VNode, in the _new_ parent node's
511
- * children, for which we will create a new DOM node
512
- * @param parentElm the parent DOM node which our new node will be a child of
513
- * @returns the newly created node
514
- */
515
- const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
516
- // tslint:disable-next-line: prefer-const
517
- const newVNode = newParentVNode.$children$[childIndex];
518
- let i = 0;
519
- let elm;
520
- let childNode;
521
- if (newVNode.$text$ !== null) {
522
- // create text node
523
- elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
524
- }
525
- else {
526
- if (!isSvgMode) {
527
- isSvgMode = newVNode.$tag$ === 'svg';
528
- }
529
- // create element
530
- elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$tag$)
531
- );
532
- if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
533
- isSvgMode = false;
534
- }
535
- // add css classes, attrs, props, listeners, etc.
536
- {
537
- updateElement(null, newVNode, isSvgMode);
538
- }
539
- if (isDef(scopeId) && elm['s-si'] !== scopeId) {
540
- // if there is a scopeId and this is the initial render
541
- // then let's add the scopeId as a css class
542
- elm.classList.add((elm['s-si'] = scopeId));
543
- }
544
- if (newVNode.$children$) {
545
- for (i = 0; i < newVNode.$children$.length; ++i) {
546
- // create the node
547
- childNode = createElm(oldParentVNode, newVNode, i);
548
- // return node could have been null
549
- if (childNode) {
550
- // append our new node
551
- elm.appendChild(childNode);
552
- }
553
- }
554
- }
555
- {
556
- if (newVNode.$tag$ === 'svg') {
557
- // Only reset the SVG context when we're exiting <svg> element
558
- isSvgMode = false;
559
- }
560
- else if (elm.tagName === 'foreignObject') {
561
- // Reenter SVG context when we're exiting <foreignObject> element
562
- isSvgMode = true;
563
- }
564
- }
565
- }
566
- // This needs to always happen so we can hide nodes that are projected
567
- // to another component but don't end up in a slot
568
- elm['s-hn'] = hostTagName;
569
- return elm;
570
- };
571
- /**
572
- * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
573
- * add them to the DOM in the appropriate place.
574
- *
575
- * @param parentElm the DOM node which should be used as a parent for the new
576
- * DOM nodes
577
- * @param before a child of the `parentElm` which the new children should be
578
- * inserted before (optional)
579
- * @param parentVNode the parent virtual DOM node
580
- * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
581
- * @param startIdx the index in the child virtual DOM nodes at which to start
582
- * creating DOM nodes (inclusive)
583
- * @param endIdx the index in the child virtual DOM nodes at which to stop
584
- * creating DOM nodes (inclusive)
585
- */
586
- const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
587
- let containerElm = (parentElm);
588
- let childNode;
589
- if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
590
- containerElm = containerElm.shadowRoot;
591
- }
592
- for (; startIdx <= endIdx; ++startIdx) {
593
- if (vnodes[startIdx]) {
594
- childNode = createElm(null, parentVNode, startIdx);
595
- if (childNode) {
596
- vnodes[startIdx].$elm$ = childNode;
597
- containerElm.insertBefore(childNode, before);
598
- }
599
- }
600
- }
601
- };
602
- /**
603
- * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
604
- * This can be used to, for instance, clean up after a list of children which
605
- * should no longer be shown.
606
- *
607
- * This function also handles some of Stencil's slot relocation logic.
608
- *
609
- * @param vnodes a list of virtual DOM nodes to remove
610
- * @param startIdx the index at which to start removing nodes (inclusive)
611
- * @param endIdx the index at which to stop removing nodes (inclusive)
612
- */
613
- const removeVnodes = (vnodes, startIdx, endIdx) => {
614
- for (let index = startIdx; index <= endIdx; ++index) {
615
- const vnode = vnodes[index];
616
- if (vnode) {
617
- const elm = vnode.$elm$;
618
- if (elm) {
619
- // remove the vnode's element from the dom
620
- elm.remove();
621
- }
622
- }
623
- }
624
- };
625
- /**
626
- * Reconcile the children of a new VNode with the children of an old VNode by
627
- * traversing the two collections of children, identifying nodes that are
628
- * conserved or changed, calling out to `patch` to make any necessary
629
- * updates to the DOM, and rearranging DOM nodes as needed.
630
- *
631
- * The algorithm for reconciling children works by analyzing two 'windows' onto
632
- * the two arrays of children (`oldCh` and `newCh`). We keep track of the
633
- * 'windows' by storing start and end indices and references to the
634
- * corresponding array entries. Initially the two 'windows' are basically equal
635
- * to the entire array, but we progressively narrow the windows until there are
636
- * no children left to update by doing the following:
637
- *
638
- * 1. Skip any `null` entries at the beginning or end of the two arrays, so
639
- * that if we have an initial array like the following we'll end up dealing
640
- * only with a window bounded by the highlighted elements:
641
- *
642
- * [null, null, VNode1 , ... , VNode2, null, null]
643
- * ^^^^^^ ^^^^^^
644
- *
645
- * 2. Check to see if the elements at the head and tail positions are equal
646
- * across the windows. This will basically detect elements which haven't
647
- * been added, removed, or changed position, i.e. if you had the following
648
- * VNode elements (represented as HTML):
649
- *
650
- * oldVNode: `<div><p><span>HEY</span></p></div>`
651
- * newVNode: `<div><p><span>THERE</span></p></div>`
652
- *
653
- * Then when comparing the children of the `<div>` tag we check the equality
654
- * of the VNodes corresponding to the `<p>` tags and, since they are the
655
- * same tag in the same position, we'd be able to avoid completely
656
- * re-rendering the subtree under them with a new DOM element and would just
657
- * call out to `patch` to handle reconciling their children and so on.
658
- *
659
- * 3. Check, for both windows, to see if the element at the beginning of the
660
- * window corresponds to the element at the end of the other window. This is
661
- * a heuristic which will let us identify _some_ situations in which
662
- * elements have changed position, for instance it _should_ detect that the
663
- * children nodes themselves have not changed but merely moved in the
664
- * following example:
665
- *
666
- * oldVNode: `<div><element-one /><element-two /></div>`
667
- * newVNode: `<div><element-two /><element-one /></div>`
668
- *
669
- * If we find cases like this then we also need to move the concrete DOM
670
- * elements corresponding to the moved children to write the re-order to the
671
- * DOM.
672
- *
673
- * 4. Finally, if VNodes have the `key` attribute set on them we check for any
674
- * nodes in the old children which have the same key as the first element in
675
- * our window on the new children. If we find such a node we handle calling
676
- * out to `patch`, moving relevant DOM nodes, and so on, in accordance with
677
- * what we find.
678
- *
679
- * Finally, once we've narrowed our 'windows' to the point that either of them
680
- * collapse (i.e. they have length 0) we then handle any remaining VNode
681
- * insertion or deletion that needs to happen to get a DOM state that correctly
682
- * reflects the new child VNodes. If, for instance, after our window on the old
683
- * children has collapsed we still have more nodes on the new children that
684
- * we haven't dealt with yet then we need to add them, or if the new children
685
- * collapse but we still have unhandled _old_ children then we need to make
686
- * sure the corresponding DOM nodes are removed.
687
- *
688
- * @param parentElm the node into which the parent VNode is rendered
689
- * @param oldCh the old children of the parent node
690
- * @param newVNode the new VNode which will replace the parent
691
- * @param newCh the new children of the parent node
692
- * @param isInitialRender whether or not this is the first render of the vdom
693
- */
694
- const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
695
- let oldStartIdx = 0;
696
- let newStartIdx = 0;
697
- let idxInOld = 0;
698
- let i = 0;
699
- let oldEndIdx = oldCh.length - 1;
700
- let oldStartVnode = oldCh[0];
701
- let oldEndVnode = oldCh[oldEndIdx];
702
- let newEndIdx = newCh.length - 1;
703
- let newStartVnode = newCh[0];
704
- let newEndVnode = newCh[newEndIdx];
705
- let node;
706
- let elmToMove;
707
- while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
708
- if (oldStartVnode == null) {
709
- // VNode might have been moved left
710
- oldStartVnode = oldCh[++oldStartIdx];
711
- }
712
- else if (oldEndVnode == null) {
713
- oldEndVnode = oldCh[--oldEndIdx];
714
- }
715
- else if (newStartVnode == null) {
716
- newStartVnode = newCh[++newStartIdx];
717
- }
718
- else if (newEndVnode == null) {
719
- newEndVnode = newCh[--newEndIdx];
720
- }
721
- else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
722
- // if the start nodes are the same then we should patch the new VNode
723
- // onto the old one, and increment our `newStartIdx` and `oldStartIdx`
724
- // indices to reflect that. We don't need to move any DOM Nodes around
725
- // since things are matched up in order.
726
- patch(oldStartVnode, newStartVnode, isInitialRender);
727
- oldStartVnode = oldCh[++oldStartIdx];
728
- newStartVnode = newCh[++newStartIdx];
729
- }
730
- else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
731
- // likewise, if the end nodes are the same we patch new onto old and
732
- // decrement our end indices, and also likewise in this case we don't
733
- // need to move any DOM Nodes.
734
- patch(oldEndVnode, newEndVnode, isInitialRender);
735
- oldEndVnode = oldCh[--oldEndIdx];
736
- newEndVnode = newCh[--newEndIdx];
737
- }
738
- else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
739
- patch(oldStartVnode, newEndVnode, isInitialRender);
740
- // We need to move the element for `oldStartVnode` into a position which
741
- // will be appropriate for `newEndVnode`. For this we can use
742
- // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
743
- // sibling for `oldEndVnode.$elm$` then we want to move the DOM node for
744
- // `oldStartVnode` between `oldEndVnode` and it's sibling, like so:
745
- //
746
- // <old-start-node />
747
- // <some-intervening-node />
748
- // <old-end-node />
749
- // <!-- -> <-- `oldStartVnode.$elm$` should be inserted here
750
- // <next-sibling />
751
- //
752
- // If instead `oldEndVnode.$elm$` has no sibling then we just want to put
753
- // the node for `oldStartVnode` at the end of the children of
754
- // `parentElm`. Luckily, `Node.nextSibling` will return `null` if there
755
- // aren't any siblings, and passing `null` to `Node.insertBefore` will
756
- // append it to the children of the parent element.
757
- parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
758
- oldStartVnode = oldCh[++oldStartIdx];
759
- newEndVnode = newCh[--newEndIdx];
760
- }
761
- else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
762
- patch(oldEndVnode, newStartVnode, isInitialRender);
763
- // We've already checked above if `oldStartVnode` and `newStartVnode` are
764
- // the same node, so since we're here we know that they are not. Thus we
765
- // can move the element for `oldEndVnode` _before_ the element for
766
- // `oldStartVnode`, leaving `oldStartVnode` to be reconciled in the
767
- // future.
768
- parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
769
- oldEndVnode = oldCh[--oldEndIdx];
770
- newStartVnode = newCh[++newStartIdx];
771
- }
772
- else {
773
- // Here we do some checks to match up old and new nodes based on the
774
- // `$key$` attribute, which is set by putting a `key="my-key"` attribute
775
- // in the JSX for a DOM element in the implementation of a Stencil
776
- // component.
777
- //
778
- // First we check to see if there are any nodes in the array of old
779
- // children which have the same key as the first node in the new
780
- // children.
781
- idxInOld = -1;
782
- {
783
- for (i = oldStartIdx; i <= oldEndIdx; ++i) {
784
- if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
785
- idxInOld = i;
786
- break;
787
- }
788
- }
789
- }
790
- if (idxInOld >= 0) {
791
- // We found a node in the old children which matches up with the first
792
- // node in the new children! So let's deal with that
793
- elmToMove = oldCh[idxInOld];
794
- if (elmToMove.$tag$ !== newStartVnode.$tag$) {
795
- // the tag doesn't match so we'll need a new DOM element
796
- node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
797
- }
798
- else {
799
- patch(elmToMove, newStartVnode, isInitialRender);
800
- // invalidate the matching old node so that we won't try to update it
801
- // again later on
802
- oldCh[idxInOld] = undefined;
803
- node = elmToMove.$elm$;
804
- }
805
- newStartVnode = newCh[++newStartIdx];
806
- }
807
- else {
808
- // We either didn't find an element in the old children that matches
809
- // the key of the first new child OR the build is not using `key`
810
- // attributes at all. In either case we need to create a new element
811
- // for the new node.
812
- node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
813
- newStartVnode = newCh[++newStartIdx];
814
- }
815
- if (node) {
816
- // if we created a new node then handle inserting it to the DOM
817
- {
818
- oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
819
- }
820
- }
821
- }
822
- }
823
- if (oldStartIdx > oldEndIdx) {
824
- // we have some more new nodes to add which don't match up with old nodes
825
- addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
826
- }
827
- else if (newStartIdx > newEndIdx) {
828
- // there are nodes in the `oldCh` array which no longer correspond to nodes
829
- // in the new array, so lets remove them (which entails cleaning up the
830
- // relevant DOM nodes)
831
- removeVnodes(oldCh, oldStartIdx, oldEndIdx);
832
- }
833
- };
834
- /**
835
- * Compare two VNodes to determine if they are the same
836
- *
837
- * **NB**: This function is an equality _heuristic_ based on the available
838
- * information set on the two VNodes and can be misleading under certain
839
- * circumstances. In particular, if the two nodes do not have `key` attrs
840
- * (available under `$key$` on VNodes) then the function falls back on merely
841
- * checking that they have the same tag.
842
- *
843
- * So, in other words, if `key` attrs are not set on VNodes which may be
844
- * changing order within a `children` array or something along those lines then
845
- * we could obtain a false negative and then have to do needless re-rendering
846
- * (i.e. we'd say two VNodes aren't equal when in fact they should be).
847
- *
848
- * @param leftVNode the first VNode to check
849
- * @param rightVNode the second VNode to check
850
- * @param isInitialRender whether or not this is the first render of the vdom
851
- * @returns whether they're equal or not
852
- */
853
- const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
854
- // compare if two vnode to see if they're "technically" the same
855
- // need to have the same element tag, and same key to be the same
856
- if (leftVNode.$tag$ === rightVNode.$tag$) {
857
- // this will be set if JSX tags in the build have `key` attrs set on them
858
- // we only want to check this if we're not on the first render since on
859
- // first render `leftVNode.$key$` will always be `null`, so we can be led
860
- // astray and, for instance, accidentally delete a DOM node that we want to
861
- // keep around.
862
- if (!isInitialRender) {
863
- return leftVNode.$key$ === rightVNode.$key$;
864
- }
865
- return true;
866
- }
867
- return false;
868
- };
869
- /**
870
- * Handle reconciling an outdated VNode with a new one which corresponds to
871
- * it. This function handles flushing updates to the DOM and reconciling the
872
- * children of the two nodes (if any).
873
- *
874
- * @param oldVNode an old VNode whose DOM element and children we want to update
875
- * @param newVNode a new VNode representing an updated version of the old one
876
- * @param isInitialRender whether or not this is the first render of the vdom
877
- */
878
- const patch = (oldVNode, newVNode, isInitialRender = false) => {
879
- const elm = (newVNode.$elm$ = oldVNode.$elm$);
880
- const oldChildren = oldVNode.$children$;
881
- const newChildren = newVNode.$children$;
882
- const tag = newVNode.$tag$;
883
- const text = newVNode.$text$;
884
- if (text === null) {
885
- {
886
- // test if we're rendering an svg element, or still rendering nodes inside of one
887
- // only add this to the when the compiler sees we're using an svg somewhere
888
- isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
889
- }
890
- {
891
- if (tag === 'slot' && !useNativeShadowDom) ;
892
- else {
893
- // either this is the first render of an element OR it's an update
894
- // AND we already know it's possible it could have changed
895
- // this updates the element's css classes, attrs, props, listeners, etc.
896
- updateElement(oldVNode, newVNode, isSvgMode);
897
- }
898
- }
899
- if (oldChildren !== null && newChildren !== null) {
900
- // looks like there's child vnodes for both the old and new vnodes
901
- // so we need to call `updateChildren` to reconcile them
902
- updateChildren(elm, oldChildren, newVNode, newChildren, isInitialRender);
903
- }
904
- else if (newChildren !== null) {
905
- // no old child vnodes, but there are new child vnodes to add
906
- if (oldVNode.$text$ !== null) {
907
- // the old vnode was text, so be sure to clear it out
908
- elm.textContent = '';
909
- }
910
- // add the new vnode children
911
- addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
912
- }
913
- else if (oldChildren !== null) {
914
- // no new child vnodes, but there are old child vnodes to remove
915
- removeVnodes(oldChildren, 0, oldChildren.length - 1);
916
- }
917
- if (isSvgMode && tag === 'svg') {
918
- isSvgMode = false;
919
- }
920
- }
921
- else if (oldVNode.$text$ !== text) {
922
- // update the text content for the text only vnode
923
- // and also only if the text is different than before
924
- elm.data = text;
925
- }
926
- };
927
- /**
928
- * The main entry point for Stencil's virtual DOM-based rendering engine
929
- *
930
- * Given a {@link d.HostRef} container and some virtual DOM nodes, this
931
- * function will handle creating a virtual DOM tree with a single root, patching
932
- * the current virtual DOM tree onto an old one (if any), dealing with slot
933
- * relocation, and reflecting attributes.
934
- *
935
- * @param hostRef data needed to root and render the virtual DOM tree, such as
936
- * the DOM node into which it should be rendered.
937
- * @param renderFnResults the virtual DOM nodes to be rendered
938
- * @param isInitialLoad whether or not this is the first call after page load
939
- */
940
- const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
941
- const hostElm = hostRef.$hostElement$;
942
- const cmpMeta = hostRef.$cmpMeta$;
943
- const oldVNode = hostRef.$vnode$ || newVNode(null, null);
944
- // if `renderFnResults` is a Host node then we can use it directly. If not,
945
- // we need to call `h` again to wrap the children of our component in a
946
- // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
947
- // implicitly that the top-level vdom node is 1) an only child and 2)
948
- // contains attrs that need to be set on the host element.
949
- const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
950
- hostTagName = hostElm.tagName;
951
- if (cmpMeta.$attrsToReflect$) {
952
- rootVnode.$attrs$ = rootVnode.$attrs$ || {};
953
- cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
954
- }
955
- // On the first render and *only* on the first render we want to check for
956
- // any attributes set on the host element which are also set on the vdom
957
- // node. If we find them, we override the value on the VDom node attrs with
958
- // the value from the host element, which allows developers building apps
959
- // with Stencil components to override e.g. the `role` attribute on a
960
- // component even if it's already set on the `Host`.
961
- if (isInitialLoad && rootVnode.$attrs$) {
962
- for (const key of Object.keys(rootVnode.$attrs$)) {
963
- // We have a special implementation in `setAccessor` for `style` and
964
- // `class` which reconciles values coming from the VDom with values
965
- // already present on the DOM element, so we don't want to override those
966
- // attributes on the VDom tree with values from the host element if they
967
- // are present.
968
- //
969
- // Likewise, `ref` and `key` are special internal values for the Stencil
970
- // runtime and we don't want to override those either.
971
- if (hostElm.hasAttribute(key) && !['key', 'ref', 'style', 'class'].includes(key)) {
972
- rootVnode.$attrs$[key] = hostElm[key];
973
- }
974
- }
975
- }
976
- rootVnode.$tag$ = null;
977
- rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
978
- hostRef.$vnode$ = rootVnode;
979
- rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
980
- {
981
- scopeId = hostElm['s-sc'];
982
- }
983
- useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
984
- // synchronous patch
985
- patch(oldVNode, rootVnode, isInitialLoad);
986
- };
987
- const attachToAncestor = (hostRef, ancestorComponent) => {
988
- if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
989
- ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
990
- }
991
- };
992
- const scheduleUpdate = (hostRef, isInitialLoad) => {
993
- {
994
- hostRef.$flags$ |= 16 /* HOST_FLAGS.isQueuedForUpdate */;
995
- }
996
- if (hostRef.$flags$ & 4 /* HOST_FLAGS.isWaitingForChildren */) {
997
- hostRef.$flags$ |= 512 /* HOST_FLAGS.needsRerender */;
998
- return;
999
- }
1000
- attachToAncestor(hostRef, hostRef.$ancestorComponent$);
1001
- // there is no ancestor component or the ancestor component
1002
- // has already fired off its lifecycle update then
1003
- // fire off the initial update
1004
- const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
1005
- return writeTask(dispatch) ;
1006
- };
1007
- /**
1008
- * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
1009
- * component lifecycle methods like `componentWillLoad` as well as
1010
- * {@link updateComponent}, which will kick off the virtual DOM re-render.
1011
- *
1012
- * @param hostRef a reference to a host DOM node
1013
- * @param isInitialLoad whether we're on the initial load or not
1014
- * @returns an empty Promise which is used to enqueue a series of operations for
1015
- * the component
1016
- */
1017
- const dispatchHooks = (hostRef, isInitialLoad) => {
1018
- const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
1019
- const instance = hostRef.$lazyInstance$ ;
1020
- // We're going to use this variable together with `enqueue` to implement a
1021
- // little promise-based queue. We start out with it `undefined`. When we add
1022
- // the first function to the queue we'll set this variable to be that
1023
- // function's return value. When we attempt to add subsequent values to the
1024
- // queue we'll check that value and, if it was a `Promise`, we'll then chain
1025
- // the new function off of that `Promise` using `.then()`. This will give our
1026
- // queue two nice properties:
1027
- //
1028
- // 1. If all functions added to the queue are synchronous they'll be called
1029
- // synchronously right away.
1030
- // 2. If all functions added to the queue are asynchronous they'll all be
1031
- // called in order after `dispatchHooks` exits.
1032
- let maybePromise;
1033
- if (isInitialLoad) {
1034
- {
1035
- hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
1036
- if (hostRef.$queuedListeners$) {
1037
- hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
1038
- hostRef.$queuedListeners$ = undefined;
1039
- }
1040
- }
1041
- {
1042
- // If `componentWillLoad` returns a `Promise` then we want to wait on
1043
- // whatever's going on in that `Promise` before we launch into
1044
- // rendering the component, doing other lifecycle stuff, etc. So
1045
- // in that case we assign the returned promise to the variable we
1046
- // declared above to hold a possible 'queueing' Promise
1047
- maybePromise = safeCall(instance, 'componentWillLoad');
1048
- }
1049
- }
1050
- endSchedule();
1051
- return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
1052
- };
1053
- /**
1054
- * This function uses a Promise to implement a simple first-in, first-out queue
1055
- * of functions to be called.
1056
- *
1057
- * The queue is ordered on the basis of the first argument. If it's
1058
- * `undefined`, then nothing is on the queue yet, so the provided function can
1059
- * be called synchronously (although note that this function may return a
1060
- * `Promise`). The idea is that then the return value of that enqueueing
1061
- * operation is kept around, so that if it was a `Promise` then subsequent
1062
- * functions can be enqueued by calling this function again with that `Promise`
1063
- * as the first argument.
1064
- *
1065
- * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
1066
- * @param fn a function to enqueue
1067
- * @returns either a `Promise` or the return value of the provided function
1068
- */
1069
- const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
1070
- /**
1071
- * Check that a value is a `Promise`. To check, we first see if the value is an
1072
- * instance of the `Promise` global. In a few circumstances, in particular if
1073
- * the global has been overwritten, this is could be misleading, so we also do
1074
- * a little 'duck typing' check to see if the `.then` property of the value is
1075
- * defined and a function.
1076
- *
1077
- * @param maybePromise it might be a promise!
1078
- * @returns whether it is or not
1079
- */
1080
- const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
1081
- (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
1082
- /**
1083
- * Update a component given reference to its host elements and so on.
1084
- *
1085
- * @param hostRef an object containing references to the element's host node,
1086
- * VDom nodes, and other metadata
1087
- * @param instance a reference to the underlying host element where it will be
1088
- * rendered
1089
- * @param isInitialLoad whether or not this function is being called as part of
1090
- * the first render cycle
1091
- */
1092
- const updateComponent = async (hostRef, instance, isInitialLoad) => {
1093
- var _a;
1094
- const elm = hostRef.$hostElement$;
1095
- const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
1096
- const rc = elm['s-rc'];
1097
- if (isInitialLoad) {
1098
- // DOM WRITE!
1099
- attachStyles(hostRef);
1100
- }
1101
- const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
1102
- {
1103
- callRender(hostRef, instance, elm, isInitialLoad);
1104
- }
1105
- if (rc) {
1106
- // ok, so turns out there are some child host elements
1107
- // waiting on this parent element to load
1108
- // let's fire off all update callbacks waiting
1109
- rc.map((cb) => cb());
1110
- elm['s-rc'] = undefined;
1111
- }
1112
- endRender();
1113
- endUpdate();
1114
- {
1115
- const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
1116
- const postUpdate = () => postUpdateComponent(hostRef);
1117
- if (childrenPromises.length === 0) {
1118
- postUpdate();
1119
- }
1120
- else {
1121
- Promise.all(childrenPromises).then(postUpdate);
1122
- hostRef.$flags$ |= 4 /* HOST_FLAGS.isWaitingForChildren */;
1123
- childrenPromises.length = 0;
1124
- }
1125
- }
1126
- };
1127
- /**
1128
- * Handle making the call to the VDom renderer with the proper context given
1129
- * various build variables
1130
- *
1131
- * @param hostRef an object containing references to the element's host node,
1132
- * VDom nodes, and other metadata
1133
- * @param instance a reference to the underlying host element where it will be
1134
- * rendered
1135
- * @param elm the Host element for the component
1136
- * @param isInitialLoad whether or not this function is being called as part of
1137
- * @returns an empty promise
1138
- */
1139
- const callRender = (hostRef, instance, elm, isInitialLoad) => {
1140
- try {
1141
- /**
1142
- * minification optimization: `allRenderFn` is `true` if all components have a `render`
1143
- * method, so we can call the method immediately. If not, check before calling it.
1144
- */
1145
- instance = instance.render() ;
1146
- {
1147
- hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
1148
- }
1149
- {
1150
- hostRef.$flags$ |= 2 /* HOST_FLAGS.hasRendered */;
1151
- }
1152
- {
1153
- {
1154
- // looks like we've got child nodes to render into this host element
1155
- // or we need to update the css class/attrs on the host element
1156
- // DOM WRITE!
1157
- {
1158
- renderVdom(hostRef, instance, isInitialLoad);
1159
- }
1160
- }
1161
- }
1162
- }
1163
- catch (e) {
1164
- consoleError(e, hostRef.$hostElement$);
1165
- }
1166
- return null;
1167
- };
1168
- const postUpdateComponent = (hostRef) => {
1169
- const tagName = hostRef.$cmpMeta$.$tagName$;
1170
- const elm = hostRef.$hostElement$;
1171
- const endPostUpdate = createTime('postUpdate', tagName);
1172
- const instance = hostRef.$lazyInstance$ ;
1173
- const ancestorComponent = hostRef.$ancestorComponent$;
1174
- if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
1175
- hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
1176
- {
1177
- // DOM WRITE!
1178
- addHydratedFlag(elm);
1179
- }
1180
- {
1181
- safeCall(instance, 'componentDidLoad');
1182
- }
1183
- endPostUpdate();
1184
- {
1185
- hostRef.$onReadyResolve$(elm);
1186
- if (!ancestorComponent) {
1187
- appDidLoad();
1188
- }
1189
- }
1190
- }
1191
- else {
1192
- endPostUpdate();
1193
- }
1194
- {
1195
- hostRef.$onInstanceResolve$(elm);
1196
- }
1197
- // load events fire from bottom to top
1198
- // the deepest elements load first then bubbles up
1199
- {
1200
- if (hostRef.$onRenderResolve$) {
1201
- hostRef.$onRenderResolve$();
1202
- hostRef.$onRenderResolve$ = undefined;
1203
- }
1204
- if (hostRef.$flags$ & 512 /* HOST_FLAGS.needsRerender */) {
1205
- nextTick(() => scheduleUpdate(hostRef, false));
1206
- }
1207
- hostRef.$flags$ &= ~(4 /* HOST_FLAGS.isWaitingForChildren */ | 512 /* HOST_FLAGS.needsRerender */);
1208
- }
1209
- // ( •_•)
1210
- // ( •_•)>⌐■-■
1211
- // (⌐■_■)
1212
- };
1213
- const forceUpdate = (ref) => {
1214
- {
1215
- const hostRef = getHostRef(ref);
1216
- const isConnected = hostRef.$hostElement$.isConnected;
1217
- if (isConnected &&
1218
- (hostRef.$flags$ & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
1219
- scheduleUpdate(hostRef, false);
1220
- }
1221
- // Returns "true" when the forced update was successfully scheduled
1222
- return isConnected;
1223
- }
1224
- };
1225
- const appDidLoad = (who) => {
1226
- // on appload
1227
- // we have finish the first big initial render
1228
- {
1229
- addHydratedFlag(doc.documentElement);
1230
- }
1231
- nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
1232
- };
1233
- /**
1234
- * Allows to safely call a method, e.g. `componentDidLoad`, on an instance,
1235
- * e.g. custom element node. If a build figures out that e.g. no component
1236
- * has a `componentDidLoad` method, the instance method gets removed from the
1237
- * output bundle and this function returns `undefined`.
1238
- * @param instance any object that may or may not contain methods
1239
- * @param method method name
1240
- * @param arg single arbitrary argument
1241
- * @returns result of method call if it exists, otherwise `undefined`
1242
- */
1243
- const safeCall = (instance, method, arg) => {
1244
- if (instance && instance[method]) {
1245
- try {
1246
- return instance[method](arg);
1247
- }
1248
- catch (e) {
1249
- consoleError(e);
1250
- }
1251
- }
1252
- return undefined;
1253
- };
1254
- const addHydratedFlag = (elm) => elm.classList.add('hydrated')
1255
- ;
1256
- const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
1257
- const setValue = (ref, propName, newVal, cmpMeta) => {
1258
- // check our new property value against our internal value
1259
- const hostRef = getHostRef(ref);
1260
- const elm = hostRef.$hostElement$ ;
1261
- const oldVal = hostRef.$instanceValues$.get(propName);
1262
- const flags = hostRef.$flags$;
1263
- const instance = hostRef.$lazyInstance$ ;
1264
- newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
1265
- // explicitly check for NaN on both sides, as `NaN === NaN` is always false
1266
- const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
1267
- const didValueChange = newVal !== oldVal && !areBothNaN;
1268
- if ((!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) || oldVal === undefined) && didValueChange) {
1269
- // gadzooks! the property's value has changed!!
1270
- // set our new value!
1271
- hostRef.$instanceValues$.set(propName, newVal);
1272
- if (instance) {
1273
- // get an array of method names of watch functions to call
1274
- if (cmpMeta.$watchers$ && flags & 128 /* HOST_FLAGS.isWatchReady */) {
1275
- const watchMethods = cmpMeta.$watchers$[propName];
1276
- if (watchMethods) {
1277
- // this instance is watching for when this property changed
1278
- watchMethods.map((watchMethodName) => {
1279
- try {
1280
- // fire off each of the watch methods that are watching this property
1281
- instance[watchMethodName](newVal, oldVal, propName);
1282
- }
1283
- catch (e) {
1284
- consoleError(e, elm);
1285
- }
1286
- });
1287
- }
1288
- }
1289
- if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
1290
- // looks like this value actually changed, so we've got work to do!
1291
- // but only if we've already rendered, otherwise just chill out
1292
- // queue that we need to do an update, but don't worry about queuing
1293
- // up millions cuz this function ensures it only runs once
1294
- scheduleUpdate(hostRef, false);
1295
- }
1296
- }
1297
- }
1298
- };
1299
- /**
1300
- * Attach a series of runtime constructs to a compiled Stencil component
1301
- * constructor, including getters and setters for the `@Prop` and `@State`
1302
- * decorators, callbacks for when attributes change, and so on.
1303
- *
1304
- * @param Cstr the constructor for a component that we need to process
1305
- * @param cmpMeta metadata collected previously about the component
1306
- * @param flags a number used to store a series of bit flags
1307
- * @returns a reference to the same constructor passed in (but now mutated)
1308
- */
1309
- const proxyComponent = (Cstr, cmpMeta, flags) => {
1310
- var _a;
1311
- const prototype = Cstr.prototype;
1312
- if (cmpMeta.$members$) {
1313
- if (Cstr.watchers) {
1314
- cmpMeta.$watchers$ = Cstr.watchers;
1315
- }
1316
- // It's better to have a const than two Object.entries()
1317
- const members = Object.entries(cmpMeta.$members$);
1318
- members.map(([memberName, [memberFlags]]) => {
1319
- if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
1320
- ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
1321
- // proxyComponent - prop
1322
- Object.defineProperty(prototype, memberName, {
1323
- get() {
1324
- // proxyComponent, get value
1325
- return getValue(this, memberName);
1326
- },
1327
- set(newValue) {
1328
- // proxyComponent, set value
1329
- setValue(this, memberName, newValue, cmpMeta);
1330
- },
1331
- configurable: true,
1332
- enumerable: true,
1333
- });
1334
- }
1335
- else if (flags & 1 /* PROXY_FLAGS.isElementConstructor */ &&
1336
- memberFlags & 64 /* MEMBER_FLAGS.Method */) {
1337
- // proxyComponent - method
1338
- Object.defineProperty(prototype, memberName, {
1339
- value(...args) {
1340
- var _a;
1341
- const ref = getHostRef(this);
1342
- 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); });
1343
- },
1344
- });
1345
- }
1346
- });
1347
- if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
1348
- const attrNameToPropName = new Map();
1349
- prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
1350
- plt.jmp(() => {
1351
- var _a;
1352
- const propName = attrNameToPropName.get(attrName);
1353
- // In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
1354
- // in the case where an attribute was set inline.
1355
- // ```html
1356
- // <my-component some-attribute="some-value"></my-component>
1357
- // ```
1358
- //
1359
- // There is an edge case where a developer sets the attribute inline on a custom element and then
1360
- // programmatically changes it before it has been upgraded as shown below:
1361
- //
1362
- // ```html
1363
- // <!-- this component has _not_ been upgraded yet -->
1364
- // <my-component id="test" some-attribute="some-value"></my-component>
1365
- // <script>
1366
- // // grab non-upgraded component
1367
- // el = document.querySelector("#test");
1368
- // el.someAttribute = "another-value";
1369
- // // upgrade component
1370
- // customElements.define('my-component', MyComponent);
1371
- // </script>
1372
- // ```
1373
- // In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
1374
- // will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
1375
- // to the value that was set inline i.e. "some-value" from above example. When
1376
- // the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
1377
- //
1378
- // The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
1379
- // by connectedCallback as this attributeChangedCallback will not fire.
1380
- //
1381
- // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
1382
- //
1383
- // TODO(STENCIL-16) we should think about whether or not we actually want to be reflecting the attributes to
1384
- // properties here given that this goes against best practices outlined here
1385
- // https://developers.google.com/web/fundamentals/web-components/best-practices#avoid-reentrancy
1386
- if (this.hasOwnProperty(propName)) {
1387
- newValue = this[propName];
1388
- delete this[propName];
1389
- }
1390
- else if (prototype.hasOwnProperty(propName) &&
1391
- typeof this[propName] === 'number' &&
1392
- this[propName] == newValue) {
1393
- // if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native
1394
- // APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in
1395
- // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
1396
- return;
1397
- }
1398
- else if (propName == null) {
1399
- // At this point we should know this is not a "member", so we can treat it like watching an attribute
1400
- // on a vanilla web component
1401
- const hostRef = getHostRef(this);
1402
- const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
1403
- // We only want to trigger the callback(s) if:
1404
- // 1. The instance is ready
1405
- // 2. The watchers are ready
1406
- // 3. The value has changed
1407
- if (flags &&
1408
- !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
1409
- flags & 128 /* HOST_FLAGS.isWatchReady */ &&
1410
- newValue !== oldValue) {
1411
- const instance = hostRef.$lazyInstance$ ;
1412
- const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
1413
- entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
1414
- if (instance[callbackName] != null) {
1415
- instance[callbackName].call(instance, newValue, oldValue, attrName);
1416
- }
1417
- });
1418
- }
1419
- return;
1420
- }
1421
- this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
1422
- });
1423
- };
1424
- // Create an array of attributes to observe
1425
- // This list in comprised of all strings used within a `@Watch()` decorator
1426
- // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
1427
- // As such, there is no way to guarantee type-safety here that a user hasn't entered
1428
- // an invalid attribute.
1429
- Cstr.observedAttributes = Array.from(new Set([
1430
- ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
1431
- ...members
1432
- .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
1433
- .map(([propName, m]) => {
1434
- var _a;
1435
- const attrName = m[1] || propName;
1436
- attrNameToPropName.set(attrName, propName);
1437
- if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
1438
- (_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]);
1439
- }
1440
- return attrName;
1441
- }),
1442
- ]));
1443
- }
1444
- }
1445
- return Cstr;
1446
- };
1447
- /**
1448
- * Initialize a Stencil component given a reference to its host element, its
1449
- * runtime bookkeeping data structure, runtime metadata about the component,
1450
- * and (optionally) an HMR version ID.
1451
- *
1452
- * @param elm a host element
1453
- * @param hostRef the element's runtime bookkeeping object
1454
- * @param cmpMeta runtime metadata for the Stencil component
1455
- * @param hmrVersionId an (optional) HMR version ID
1456
- */
1457
- const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
1458
- let Cstr;
1459
- // initializeComponent
1460
- if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
1461
- // Let the runtime know that the component has been initialized
1462
- hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
1463
- const bundleId = cmpMeta.$lazyBundleId$;
1464
- if (bundleId) {
1465
- // lazy loaded components
1466
- // request the component's implementation to be
1467
- // wired up with the host element
1468
- Cstr = loadModule(cmpMeta);
1469
- if (Cstr.then) {
1470
- // Await creates a micro-task avoid if possible
1471
- const endLoad = uniqueTime();
1472
- Cstr = await Cstr;
1473
- endLoad();
1474
- }
1475
- if (!Cstr.isProxied) {
1476
- // we've never proxied this Constructor before
1477
- // let's add the getters/setters to its prototype before
1478
- // the first time we create an instance of the implementation
1479
- {
1480
- cmpMeta.$watchers$ = Cstr.watchers;
1481
- }
1482
- proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */);
1483
- Cstr.isProxied = true;
1484
- }
1485
- const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);
1486
- // ok, time to construct the instance
1487
- // but let's keep track of when we start and stop
1488
- // so that the getters/setters don't incorrectly step on data
1489
- {
1490
- hostRef.$flags$ |= 8 /* HOST_FLAGS.isConstructingInstance */;
1491
- }
1492
- // construct the lazy-loaded component implementation
1493
- // passing the hostRef is very important during
1494
- // construction in order to directly wire together the
1495
- // host element and the lazy-loaded instance
1496
- try {
1497
- new Cstr(hostRef);
1498
- }
1499
- catch (e) {
1500
- consoleError(e);
1501
- }
1502
- {
1503
- hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
1504
- }
1505
- {
1506
- hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
1507
- }
1508
- endNewInstance();
1509
- }
1510
- else {
1511
- // sync constructor component
1512
- Cstr = elm.constructor;
1513
- // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,
1514
- // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_
1515
- // Stencil has completed instantiating the component.
1516
- customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */));
1517
- }
1518
- if (Cstr.style) {
1519
- // this component has styles but we haven't registered them yet
1520
- let style = Cstr.style;
1521
- const scopeId = getScopeId(cmpMeta);
1522
- if (!styles.has(scopeId)) {
1523
- const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
1524
- registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */));
1525
- endRegisterStyles();
1526
- }
1527
- }
1528
- }
1529
- // we've successfully created a lazy instance
1530
- const ancestorComponent = hostRef.$ancestorComponent$;
1531
- const schedule = () => scheduleUpdate(hostRef, true);
1532
- if (ancestorComponent && ancestorComponent['s-rc']) {
1533
- // this is the initial load and this component it has an ancestor component
1534
- // but the ancestor component has NOT fired its will update lifecycle yet
1535
- // so let's just cool our jets and wait for the ancestor to continue first
1536
- // this will get fired off when the ancestor component
1537
- // finally gets around to rendering its lazy self
1538
- // fire off the initial update
1539
- ancestorComponent['s-rc'].push(schedule);
1540
- }
1541
- else {
1542
- schedule();
1543
- }
1544
- };
1545
- const fireConnectedCallback = (instance) => {
1546
- };
1547
- const connectedCallback = (elm) => {
1548
- if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1549
- const hostRef = getHostRef(elm);
1550
- const cmpMeta = hostRef.$cmpMeta$;
1551
- const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
1552
- if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
1553
- // first time this component has connected
1554
- hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
1555
- {
1556
- // find the first ancestor component (if there is one) and register
1557
- // this component as one of the actively loading child components for its ancestor
1558
- let ancestorComponent = elm;
1559
- while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
1560
- // climb up the ancestors looking for the first
1561
- // component that hasn't finished its lifecycle update yet
1562
- if (ancestorComponent['s-p']) {
1563
- // we found this components first ancestor component
1564
- // keep a reference to this component's ancestor component
1565
- attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
1566
- break;
1567
- }
1568
- }
1569
- }
1570
- // Lazy properties
1571
- // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
1572
- if (cmpMeta.$members$) {
1573
- Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
1574
- if (memberFlags & 31 /* MEMBER_FLAGS.Prop */ && elm.hasOwnProperty(memberName)) {
1575
- const value = elm[memberName];
1576
- delete elm[memberName];
1577
- elm[memberName] = value;
1578
- }
1579
- });
1580
- }
1581
- {
1582
- initializeComponent(elm, hostRef, cmpMeta);
1583
- }
1584
- }
1585
- else {
1586
- // not the first time this has connected
1587
- // reattach any event listeners to the host
1588
- // since they would have been removed when disconnected
1589
- addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
1590
- // fire off connectedCallback() on component instance
1591
- if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
1592
- else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
1593
- hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
1594
- }
1595
- }
1596
- endConnected();
1597
- }
1598
- };
1599
- const disconnectInstance = (instance) => {
1600
- };
1601
- const disconnectedCallback = async (elm) => {
1602
- if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1603
- const hostRef = getHostRef(elm);
1604
- {
1605
- if (hostRef.$rmListeners$) {
1606
- hostRef.$rmListeners$.map((rmListener) => rmListener());
1607
- hostRef.$rmListeners$ = undefined;
1608
- }
1609
- }
1610
- if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
1611
- else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
1612
- hostRef.$onReadyPromise$.then(() => disconnectInstance());
1613
- }
1614
- }
1615
- };
1616
- const bootstrapLazy = (lazyBundles, options = {}) => {
1617
- var _a;
1618
- const endBootstrap = createTime();
1619
- const cmpTags = [];
1620
- const exclude = options.exclude || [];
1621
- const customElements = win.customElements;
1622
- const head = doc.head;
1623
- const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
1624
- const dataStyles = /*@__PURE__*/ doc.createElement('style');
1625
- const deferredConnectedCallbacks = [];
1626
- let appLoadFallback;
1627
- let isBootstrapping = true;
1628
- Object.assign(plt, options);
1629
- plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
1630
- let hasSlotRelocation = false;
1631
- lazyBundles.map((lazyBundle) => {
1632
- lazyBundle[1].map((compactMeta) => {
1633
- var _a;
1634
- const cmpMeta = {
1635
- $flags$: compactMeta[0],
1636
- $tagName$: compactMeta[1],
1637
- $members$: compactMeta[2],
1638
- $listeners$: compactMeta[3],
1639
- };
1640
- // Check if we are using slots outside the shadow DOM in this component.
1641
- // We'll use this information later to add styles for `slot-fb` elements
1642
- if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
1643
- hasSlotRelocation = true;
1644
- }
1645
- {
1646
- cmpMeta.$members$ = compactMeta[2];
1647
- }
1648
- {
1649
- cmpMeta.$listeners$ = compactMeta[3];
1650
- }
1651
- {
1652
- cmpMeta.$attrsToReflect$ = [];
1653
- }
1654
- {
1655
- cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {};
1656
- }
1657
- const tagName = cmpMeta.$tagName$;
1658
- const HostElement = class extends HTMLElement {
1659
- // StencilLazyHost
1660
- constructor(self) {
1661
- // @ts-ignore
1662
- super(self);
1663
- self = this;
1664
- registerHost(self, cmpMeta);
1665
- if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
1666
- // this component is using shadow dom
1667
- // and this browser supports shadow dom
1668
- // add the read-only property "shadowRoot" to the host element
1669
- // adding the shadow root build conditionals to minimize runtime
1670
- {
1671
- {
1672
- self.attachShadow({ mode: 'open' });
1673
- }
1674
- }
1675
- }
1676
- }
1677
- connectedCallback() {
1678
- if (appLoadFallback) {
1679
- clearTimeout(appLoadFallback);
1680
- appLoadFallback = null;
1681
- }
1682
- if (isBootstrapping) {
1683
- // connectedCallback will be processed once all components have been registered
1684
- deferredConnectedCallbacks.push(this);
1685
- }
1686
- else {
1687
- plt.jmp(() => connectedCallback(this));
1688
- }
1689
- }
1690
- disconnectedCallback() {
1691
- plt.jmp(() => disconnectedCallback(this));
1692
- }
1693
- componentOnReady() {
1694
- return getHostRef(this).$onReadyPromise$;
1695
- }
1696
- };
1697
- cmpMeta.$lazyBundleId$ = lazyBundle[0];
1698
- if (!exclude.includes(tagName) && !customElements.get(tagName)) {
1699
- cmpTags.push(tagName);
1700
- customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* PROXY_FLAGS.isElementConstructor */));
1701
- }
1702
- });
1703
- });
1704
- // Only bother generating CSS if we have components
1705
- // TODO(STENCIL-1118): Add test cases for CSS content based on conditionals
1706
- if (cmpTags.length > 0) {
1707
- // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
1708
- if (hasSlotRelocation) {
1709
- dataStyles.textContent += SLOT_FB_CSS;
1710
- }
1711
- // Add hydration styles
1712
- {
1713
- dataStyles.textContent += cmpTags + HYDRATED_CSS;
1714
- }
1715
- // If we have styles, add them to the DOM
1716
- if (dataStyles.innerHTML.length) {
1717
- dataStyles.setAttribute('data-styles', '');
1718
- // Apply CSP nonce to the style tag if it exists
1719
- const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1720
- if (nonce != null) {
1721
- dataStyles.setAttribute('nonce', nonce);
1722
- }
1723
- // Insert the styles into the document head
1724
- // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
1725
- head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
1726
- }
1727
- }
1728
- // Process deferred connectedCallbacks now all components have been registered
1729
- isBootstrapping = false;
1730
- if (deferredConnectedCallbacks.length) {
1731
- deferredConnectedCallbacks.map((host) => host.connectedCallback());
1732
- }
1733
- else {
1734
- {
1735
- plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30)));
1736
- }
1737
- }
1738
- // Fallback appLoad event
1739
- endBootstrap();
1740
- };
1741
- const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
1742
- if (listeners) {
1743
- listeners.map(([flags, name, method]) => {
1744
- const target = getHostListenerTarget(elm, flags) ;
1745
- const handler = hostListenerProxy(hostRef, method);
1746
- const opts = hostListenerOpts(flags);
1747
- plt.ael(target, name, handler, opts);
1748
- (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
1749
- });
1750
- }
1751
- };
1752
- const hostListenerProxy = (hostRef, methodName) => (ev) => {
1753
- try {
1754
- {
1755
- if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
1756
- // instance is ready, let's call it's member method for this event
1757
- hostRef.$lazyInstance$[methodName](ev);
1758
- }
1759
- else {
1760
- (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
1761
- }
1762
- }
1763
- }
1764
- catch (e) {
1765
- consoleError(e);
1766
- }
1767
- };
1768
- const getHostListenerTarget = (elm, flags) => {
1769
- if (flags & 8 /* LISTENER_FLAGS.TargetWindow */)
1770
- return win;
1771
- return elm;
1772
- };
1773
- // prettier-ignore
1774
- const hostListenerOpts = (flags) => supportsListenerOptions
1775
- ? ({
1776
- passive: (flags & 1 /* LISTENER_FLAGS.Passive */) !== 0,
1777
- capture: (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0,
1778
- })
1779
- : (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
1780
- /**
1781
- * Assigns the given value to the nonce property on the runtime platform object.
1782
- * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
1783
- * @param nonce The value to be assigned to the platform nonce property.
1784
- * @returns void
1785
- */
1786
- const setNonce = (nonce) => (plt.$nonce$ = nonce);
1787
- /**
1788
- * A WeakMap mapping runtime component references to their corresponding host reference
1789
- * instances.
1790
- *
1791
- * **Note**: If we're in an HMR context we need to store a reference to this
1792
- * value on `window` in order to maintain the mapping of {@link d.RuntimeRef}
1793
- * to {@link d.HostRef} across HMR updates.
1794
- *
1795
- * This is necessary because when HMR updates for a component are processed by
1796
- * the browser-side dev server client the JS bundle for that component is
1797
- * re-fetched. Since the module containing {@link hostRefs} is included in
1798
- * that bundle, if we do not store a reference to it the new iteration of the
1799
- * component will not have access to the previous hostRef map, leading to a
1800
- * bug where the new version of the component cannot properly initialize.
1801
- */
1802
- const hostRefs = new WeakMap();
1803
- /**
1804
- * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
1805
- *
1806
- * @param ref the runtime ref of interest
1807
- * @returns the Host reference (if found) or undefined
1808
- */
1809
- const getHostRef = (ref) => hostRefs.get(ref);
1810
- /**
1811
- * Register a lazy instance with the {@link hostRefs} object so it's
1812
- * corresponding {@link d.HostRef} can be retrieved later.
1813
- *
1814
- * @param lazyInstance the lazy instance of interest
1815
- * @param hostRef that instances `HostRef` object
1816
- * @returns a reference to the host ref WeakMap
1817
- */
1818
- const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
1819
- /**
1820
- * Register a host element for a Stencil component, setting up various metadata
1821
- * and callbacks based on {@link BUILD} flags as well as the component's runtime
1822
- * metadata.
1823
- *
1824
- * @param hostElement the host element to register
1825
- * @param cmpMeta runtime metadata for that component
1826
- * @returns a reference to the host ref WeakMap
1827
- */
1828
- const registerHost = (hostElement, cmpMeta) => {
1829
- const hostRef = {
1830
- $flags$: 0,
1831
- $hostElement$: hostElement,
1832
- $cmpMeta$: cmpMeta,
1833
- $instanceValues$: new Map(),
1834
- };
1835
- {
1836
- hostRef.$onInstancePromise$ = new Promise((r) => (hostRef.$onInstanceResolve$ = r));
1837
- }
1838
- {
1839
- hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
1840
- hostElement['s-p'] = [];
1841
- hostElement['s-rc'] = [];
1842
- }
1843
- addHostEventListeners(hostElement, hostRef, cmpMeta.$listeners$);
1844
- return hostRefs.set(hostElement, hostRef);
1845
- };
1846
- const isMemberInElement = (elm, memberName) => memberName in elm;
1847
- const consoleError = (e, el) => (0, console.error)(e, el);
1848
- const cmpModules = /*@__PURE__*/ new Map();
1849
- const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
1850
- // loadModuleImport
1851
- const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
1852
- const bundleId = cmpMeta.$lazyBundleId$;
1853
- const module = cmpModules.get(bundleId) ;
1854
- if (module) {
1855
- return module[exportName];
1856
- }
1857
-
1858
- if (!hmrVersionId || !BUILD.hotModuleReplacement) {
1859
- const processMod = importedModule => {
1860
- cmpModules.set(bundleId, importedModule);
1861
- return importedModule[exportName];
1862
- }
1863
- switch(bundleId) {
1864
-
1865
- case 'cpsl-alert_17':
1866
- return import(
1867
- /* webpackMode: "lazy" */
1868
- './cpsl-alert_17.entry.js').then(processMod, consoleError);
1869
- case 'cpsl-animation':
1870
- return import(
1871
- /* webpackMode: "lazy" */
1872
- './cpsl-animation.entry.js').then(processMod, consoleError);
1873
- case 'cpsl-col':
1874
- return import(
1875
- /* webpackMode: "lazy" */
1876
- './cpsl-col.entry.js').then(processMod, consoleError);
1877
- case 'cpsl-grid':
1878
- return import(
1879
- /* webpackMode: "lazy" */
1880
- './cpsl-grid.entry.js').then(processMod, consoleError);
1881
- case 'cpsl-info-box':
1882
- return import(
1883
- /* webpackMode: "lazy" */
1884
- './cpsl-info-box.entry.js').then(processMod, consoleError);
1885
- case 'cpsl-row':
1886
- return import(
1887
- /* webpackMode: "lazy" */
1888
- './cpsl-row.entry.js').then(processMod, consoleError);
1889
- }
1890
- }
1891
- return import(
1892
- /* @vite-ignore */
1893
- /* webpackInclude: /\.entry\.js$/ */
1894
- /* webpackExclude: /\.system\.entry\.js$/ */
1895
- /* webpackMode: "lazy" */
1896
- `./${bundleId}.entry.js${''}`).then((importedModule) => {
1897
- {
1898
- cmpModules.set(bundleId, importedModule);
1899
- }
1900
- return importedModule[exportName];
1901
- }, consoleError);
1902
- };
1903
- const styles = /*@__PURE__*/ new Map();
1904
- const win = typeof window !== 'undefined' ? window : {};
1905
- const doc = win.document || { head: {} };
1906
- const plt = {
1907
- $flags$: 0,
1908
- $resourcesUrl$: '',
1909
- jmp: (h) => h(),
1910
- raf: (h) => requestAnimationFrame(h),
1911
- ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
1912
- rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
1913
- ce: (eventName, opts) => new CustomEvent(eventName, opts),
1914
- };
1915
- const supportsListenerOptions = /*@__PURE__*/ (() => {
1916
- let supportsListenerOptions = false;
1917
- try {
1918
- doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
1919
- get() {
1920
- supportsListenerOptions = true;
1921
- },
1922
- }));
1923
- }
1924
- catch (e) { }
1925
- return supportsListenerOptions;
1926
- })();
1927
- const promiseResolve = (v) => Promise.resolve(v);
1928
- const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
1929
- try {
1930
- new CSSStyleSheet();
1931
- return typeof new CSSStyleSheet().replaceSync === 'function';
1932
- }
1933
- catch (e) { }
1934
- return false;
1935
- })()
1936
- ;
1937
- const queueDomReads = [];
1938
- const queueDomWrites = [];
1939
- const queueTask = (queue, write) => (cb) => {
1940
- queue.push(cb);
1941
- if (!queuePending) {
1942
- queuePending = true;
1943
- if (write && plt.$flags$ & 4 /* PLATFORM_FLAGS.queueSync */) {
1944
- nextTick(flush);
1945
- }
1946
- else {
1947
- plt.raf(flush);
1948
- }
1949
- }
1950
- };
1951
- const consume = (queue) => {
1952
- for (let i = 0; i < queue.length; i++) {
1953
- try {
1954
- queue[i](performance.now());
1955
- }
1956
- catch (e) {
1957
- consoleError(e);
1958
- }
1959
- }
1960
- queue.length = 0;
1961
- };
1962
- const flush = () => {
1963
- // always force a bunch of medium callbacks to run, but still have
1964
- // a throttle on how many can run in a certain time
1965
- // DOM READS!!!
1966
- consume(queueDomReads);
1967
- // DOM WRITES!!!
1968
- {
1969
- consume(queueDomWrites);
1970
- if ((queuePending = queueDomReads.length > 0)) {
1971
- // still more to do yet, but we've run out of time
1972
- // let's let this thing cool off and try again in the next tick
1973
- plt.raf(flush);
1974
- }
1975
- }
1976
- };
1977
- const nextTick = (cb) => promiseResolve().then(cb);
1978
- const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1979
-
1980
- export { Host as H, bootstrapLazy as b, createEvent as c, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
1981
-
1982
- //# sourceMappingURL=index-f00e090c.js.map