@redvars/peacock 3.1.2 → 3.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (346) hide show
  1. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/LoaderUtils.d.ts +0 -1
  2. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/LoaderUtils.js +0 -1
  3. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/LoaderUtils.js.map +1 -1
  4. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.d.ts +1 -1
  5. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.js +1 -1
  6. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.js.map +1 -1
  7. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.d.ts +1 -1
  8. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.js +1 -1
  9. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.js.map +1 -1
  10. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/button/button.d.ts +99 -0
  11. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/button/button.js +292 -0
  12. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/button/button.js.map +1 -0
  13. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/button/index.d.ts +1 -0
  14. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/button/index.js +2 -0
  15. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/button/index.js.map +1 -0
  16. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/ClockController.d.ts +10 -0
  17. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/ClockController.js +22 -0
  18. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/ClockController.js.map +1 -0
  19. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.d.ts +4 -6
  20. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.js +8 -25
  21. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.js.map +1 -1
  22. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/code-highlighter.d.ts +26 -0
  23. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/code-highlighter.js +60 -0
  24. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/code-highlighter.js.map +1 -0
  25. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/index.d.ts +1 -0
  26. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/index.js +2 -0
  27. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/index.js.map +1 -0
  28. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/local.d.ts +6 -0
  29. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/local.js +7 -0
  30. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/local.js.map +1 -0
  31. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.d.ts +1 -2
  32. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.js +1 -8
  33. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.js.map +1 -1
  34. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/elevation.css.d.ts +1 -0
  35. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/elevation.css.js +47 -0
  36. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/elevation.css.js.map +1 -0
  37. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/elevation.d.ts +27 -0
  38. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/elevation.js +31 -0
  39. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/elevation.js.map +1 -0
  40. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/index.d.ts +1 -0
  41. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/index.js +2 -0
  42. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/index.js.map +1 -0
  43. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/FocusAttachableController.d.ts +9 -0
  44. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/FocusAttachableController.js +25 -0
  45. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/FocusAttachableController.js.map +1 -0
  46. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/focus-ring.d.ts +35 -0
  47. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/focus-ring.js +81 -0
  48. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/focus-ring.js.map +1 -0
  49. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/index.d.ts +1 -0
  50. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/index.js +2 -0
  51. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/index.js.map +1 -0
  52. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.d.ts +3 -2
  53. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.js +4 -4
  54. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.js.map +1 -1
  55. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.d.ts +4 -0
  56. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.js +4 -0
  57. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.js.map +1 -1
  58. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/peacock-loader.js +24 -18
  59. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/peacock-loader.js.map +1 -1
  60. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/ripple/index.d.ts +1 -0
  61. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/ripple/index.js +2 -0
  62. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/ripple/index.js.map +1 -0
  63. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/ripple/ripple.d.ts +9 -0
  64. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/ripple/ripple.js +125 -0
  65. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/ripple/ripple.js.map +1 -0
  66. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.d.ts +4 -0
  67. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.js +22 -1
  68. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.js.map +1 -1
  69. package/.rollup.cache/E/git/redvars/peacock/components/dist/tsconfig.tsbuildinfo +1 -1
  70. package/bin/typedoc-gen.mjs +3 -4
  71. package/demo/index.html +45 -41
  72. package/dist/LoaderUtils.d.ts +23 -0
  73. package/dist/LoaderUtils.d.ts.map +1 -0
  74. package/dist/assets/styles/tokens.css +21 -53
  75. package/dist/avatar/avatar.d.ts +28 -0
  76. package/dist/avatar/avatar.d.ts.map +1 -0
  77. package/dist/avatar/index.d.ts +2 -0
  78. package/dist/avatar/index.d.ts.map +1 -0
  79. package/dist/avatar/p-avatar.d.ts +4 -0
  80. package/dist/avatar/p-avatar.d.ts.map +1 -0
  81. package/dist/avatar.js +42 -40
  82. package/dist/avatar.js.map +1 -1
  83. package/dist/badge/badge.d.ts +24 -0
  84. package/dist/badge/badge.d.ts.map +1 -0
  85. package/dist/badge/index.d.ts +2 -0
  86. package/dist/badge/index.d.ts.map +1 -0
  87. package/dist/badge/p-badge.d.ts +4 -0
  88. package/dist/badge/p-badge.d.ts.map +1 -0
  89. package/dist/badge.js +37 -36
  90. package/dist/badge.js.map +1 -1
  91. package/dist/button/button.d.ts +103 -0
  92. package/dist/button/button.d.ts.map +1 -0
  93. package/dist/button/index.d.ts +2 -0
  94. package/dist/button/index.d.ts.map +1 -0
  95. package/dist/button.js +710 -0
  96. package/dist/button.js.map +1 -0
  97. package/dist/class-map-BzIzngvN.js +89 -0
  98. package/dist/class-map-BzIzngvN.js.map +1 -0
  99. package/dist/class-map-CBk4-iMN.js +11 -0
  100. package/dist/class-map-CBk4-iMN.js.map +1 -0
  101. package/dist/class-map-Cavm-B1S.js +11 -0
  102. package/dist/class-map-Cavm-B1S.js.map +1 -0
  103. package/dist/class-map-DL5vM0J2.js +11 -0
  104. package/dist/class-map-DL5vM0J2.js.map +1 -0
  105. package/dist/class-map-IbP5VjmB.js +11 -0
  106. package/dist/class-map-IbP5VjmB.js.map +1 -0
  107. package/dist/clock/ClockController.d.ts +11 -0
  108. package/dist/clock/ClockController.d.ts.map +1 -0
  109. package/dist/clock/clock.d.ts +26 -0
  110. package/dist/clock/clock.d.ts.map +1 -0
  111. package/dist/clock/index.d.ts +2 -0
  112. package/dist/clock/index.d.ts.map +1 -0
  113. package/dist/clock.js +42 -35
  114. package/dist/clock.js.map +1 -1
  115. package/dist/code-highlighter/code-highlighter.d.ts +27 -0
  116. package/dist/code-highlighter/code-highlighter.d.ts.map +1 -0
  117. package/dist/code-highlighter/index.d.ts +2 -0
  118. package/dist/code-highlighter/index.d.ts.map +1 -0
  119. package/dist/code-highlighter/local.d.ts +7 -0
  120. package/dist/code-highlighter/local.d.ts.map +1 -0
  121. package/dist/code-highlighter.js +66 -0
  122. package/dist/code-highlighter.js.map +1 -0
  123. package/dist/custom-elements-jsdocs.json +589 -34
  124. package/dist/directive-CkFJvUQK.js +45 -0
  125. package/dist/directive-CkFJvUQK.js.map +1 -0
  126. package/dist/divider/divider.d.ts +28 -0
  127. package/dist/divider/divider.d.ts.map +1 -0
  128. package/dist/divider/index.d.ts +2 -0
  129. package/dist/divider/index.d.ts.map +1 -0
  130. package/dist/divider.js +55 -61
  131. package/dist/divider.js.map +1 -1
  132. package/dist/elevation/elevation.d.ts +28 -0
  133. package/dist/elevation/elevation.d.ts.map +1 -0
  134. package/dist/elevation/index.d.ts +2 -0
  135. package/dist/elevation/index.d.ts.map +1 -0
  136. package/dist/elevation-Bl1N6qEq.js +100 -0
  137. package/dist/elevation-Bl1N6qEq.js.map +1 -0
  138. package/dist/elevation-CbF5he8B.js +103 -0
  139. package/dist/elevation-CbF5he8B.js.map +1 -0
  140. package/dist/elevation-D3F6Z1jU.js +100 -0
  141. package/dist/elevation-D3F6Z1jU.js.map +1 -0
  142. package/dist/elevation.js +77 -0
  143. package/dist/elevation.js.map +1 -0
  144. package/dist/focus-ring/FocusAttachableController.d.ts +10 -0
  145. package/dist/focus-ring/FocusAttachableController.d.ts.map +1 -0
  146. package/dist/focus-ring/focus-ring.d.ts +36 -0
  147. package/dist/focus-ring/focus-ring.d.ts.map +1 -0
  148. package/dist/focus-ring/index.d.ts +2 -0
  149. package/dist/focus-ring/index.d.ts.map +1 -0
  150. package/dist/focus-ring.js +105 -0
  151. package/dist/focus-ring.js.map +1 -0
  152. package/dist/icon/datasource.d.ts +3 -0
  153. package/dist/icon/datasource.d.ts.map +1 -0
  154. package/dist/icon/icon.d.ts +42 -0
  155. package/dist/icon/icon.d.ts.map +1 -0
  156. package/dist/icon/index.d.ts +2 -0
  157. package/dist/icon/index.d.ts.map +1 -0
  158. package/dist/icon/p-icon.d.ts +4 -0
  159. package/dist/icon/p-icon.d.ts.map +1 -0
  160. package/dist/icon.js +26 -26
  161. package/dist/icon.js.map +1 -1
  162. package/dist/index.d.ts +9 -0
  163. package/dist/index.d.ts.map +1 -0
  164. package/dist/index.js +9 -5
  165. package/dist/index.js.map +1 -1
  166. package/dist/link/link.css.d.ts +3 -0
  167. package/dist/link/link.css.d.ts.map +1 -0
  168. package/dist/lit-element-B7NX__Gq.js +2851 -0
  169. package/dist/lit-element-B7NX__Gq.js.map +1 -0
  170. package/dist/lit-element-Bq5B2QNv.js +28 -0
  171. package/dist/lit-element-Bq5B2QNv.js.map +1 -0
  172. package/dist/lit-element-CkD27PXL.js +28 -0
  173. package/dist/lit-element-CkD27PXL.js.map +1 -0
  174. package/dist/lit-element-DHH1_Q-3.js +28 -0
  175. package/dist/lit-element-DHH1_Q-3.js.map +1 -0
  176. package/dist/peacock-loader.d.ts +2 -0
  177. package/dist/peacock-loader.d.ts.map +1 -0
  178. package/dist/peacock-loader.js +465 -116
  179. package/dist/peacock-loader.js.map +1 -1
  180. package/dist/property-BXcRN0hQ.js +39 -0
  181. package/dist/property-BXcRN0hQ.js.map +1 -0
  182. package/dist/property-CR1ZrEd9.js +45 -0
  183. package/dist/property-CR1ZrEd9.js.map +1 -0
  184. package/dist/property-CqSbFxyM.js +45 -0
  185. package/dist/property-CqSbFxyM.js.map +1 -0
  186. package/dist/property-DNaigT7h.js +39 -0
  187. package/dist/property-DNaigT7h.js.map +1 -0
  188. package/dist/property-yt9tIYgR.js +39 -0
  189. package/dist/property-yt9tIYgR.js.map +1 -0
  190. package/dist/query-CV342L_h.js +189 -0
  191. package/dist/query-CV342L_h.js.map +1 -0
  192. package/dist/ripple-Blc5Rqhb.js +102 -0
  193. package/dist/ripple-Blc5Rqhb.js.map +1 -0
  194. package/dist/ripple-BqTcEQAP.js +102 -0
  195. package/dist/ripple-BqTcEQAP.js.map +1 -0
  196. package/dist/ripple-BqUjb18i.js +105 -0
  197. package/dist/ripple-BqUjb18i.js.map +1 -0
  198. package/dist/ripple-Buzs-MON.js +106 -0
  199. package/dist/ripple-Buzs-MON.js.map +1 -0
  200. package/dist/ripple-Bz5B_LoE.js +102 -0
  201. package/dist/ripple-Bz5B_LoE.js.map +1 -0
  202. package/dist/ripple-CAq7Ix6x.js +106 -0
  203. package/dist/ripple-CAq7Ix6x.js.map +1 -0
  204. package/dist/ripple-CDqSm_Vy.js +106 -0
  205. package/dist/ripple-CDqSm_Vy.js.map +1 -0
  206. package/dist/ripple-CJtPH28B.js +102 -0
  207. package/dist/ripple-CJtPH28B.js.map +1 -0
  208. package/dist/ripple-CKTd8obC.js +92 -0
  209. package/dist/ripple-CKTd8obC.js.map +1 -0
  210. package/dist/ripple-CKnDWTVQ.js +107 -0
  211. package/dist/ripple-CKnDWTVQ.js.map +1 -0
  212. package/dist/ripple-CeR8eLuc.js +93 -0
  213. package/dist/ripple-CeR8eLuc.js.map +1 -0
  214. package/dist/ripple-Czp3eR6w.js +127 -0
  215. package/dist/ripple-Czp3eR6w.js.map +1 -0
  216. package/dist/ripple-DIab1MaY.js +106 -0
  217. package/dist/ripple-DIab1MaY.js.map +1 -0
  218. package/dist/ripple-DUFMimxZ.js +120 -0
  219. package/dist/ripple-DUFMimxZ.js.map +1 -0
  220. package/dist/ripple-DVmDdoNV.js +102 -0
  221. package/dist/ripple-DVmDdoNV.js.map +1 -0
  222. package/dist/ripple-DYnhXK5d.js +118 -0
  223. package/dist/ripple-DYnhXK5d.js.map +1 -0
  224. package/dist/ripple-DnudV47f.js +102 -0
  225. package/dist/ripple-DnudV47f.js.map +1 -0
  226. package/dist/ripple-DsC-h31M.js +119 -0
  227. package/dist/ripple-DsC-h31M.js.map +1 -0
  228. package/dist/ripple-DvM0SPd9.js +128 -0
  229. package/dist/ripple-DvM0SPd9.js.map +1 -0
  230. package/dist/ripple-NWIiDgX2.js +128 -0
  231. package/dist/ripple-NWIiDgX2.js.map +1 -0
  232. package/dist/ripple-X3U_R8lT.js +106 -0
  233. package/dist/ripple-X3U_R8lT.js.map +1 -0
  234. package/dist/ripple.js +128 -0
  235. package/dist/ripple.js.map +1 -0
  236. package/dist/src/LoaderUtils.d.ts +0 -1
  237. package/dist/src/avatar/avatar.d.ts +1 -1
  238. package/dist/src/badge/badge.d.ts +1 -1
  239. package/dist/src/button/button.d.ts +99 -0
  240. package/dist/src/button/index.d.ts +1 -0
  241. package/dist/src/clock/ClockController.d.ts +10 -0
  242. package/dist/src/clock/clock.d.ts +4 -6
  243. package/dist/src/code-highlighter/code-highlighter.d.ts +26 -0
  244. package/dist/src/code-highlighter/index.d.ts +1 -0
  245. package/dist/src/code-highlighter/local.d.ts +6 -0
  246. package/dist/src/divider/divider.d.ts +1 -2
  247. package/dist/src/elevation/elevation.css.d.ts +1 -0
  248. package/dist/src/elevation/elevation.d.ts +27 -0
  249. package/dist/src/elevation/index.d.ts +1 -0
  250. package/dist/src/focus-ring/FocusAttachableController.d.ts +9 -0
  251. package/dist/src/focus-ring/focus-ring.d.ts +35 -0
  252. package/dist/src/focus-ring/index.d.ts +1 -0
  253. package/dist/src/icon/icon.d.ts +3 -2
  254. package/dist/src/index.d.ts +4 -0
  255. package/dist/src/ripple/index.d.ts +1 -0
  256. package/dist/src/ripple/ripple.d.ts +9 -0
  257. package/dist/src/utils.d.ts +4 -0
  258. package/dist/state-BXOdKkbT.js +10 -0
  259. package/dist/state-BXOdKkbT.js.map +1 -0
  260. package/dist/state-BfUul2Gq.js +10 -0
  261. package/dist/state-BfUul2Gq.js.map +1 -0
  262. package/dist/state-CNX6DhqO.js +10 -0
  263. package/dist/state-CNX6DhqO.js.map +1 -0
  264. package/dist/state-Cl3mjeR1.js +10 -0
  265. package/dist/state-Cl3mjeR1.js.map +1 -0
  266. package/dist/state-WDFgnqnd.js +36 -0
  267. package/dist/state-WDFgnqnd.js.map +1 -0
  268. package/dist/style-inject.es--nCJ9F_D.js +55 -0
  269. package/dist/style-inject.es--nCJ9F_D.js.map +1 -0
  270. package/dist/style-inject.es-tgCJW-Cu.js +29 -0
  271. package/dist/style-inject.es-tgCJW-Cu.js.map +1 -0
  272. package/dist/styleMixins.css-0Uq-6ouM.js +14 -0
  273. package/dist/styleMixins.css-0Uq-6ouM.js.map +1 -0
  274. package/dist/styleMixins.css-B8H9wDNA.js +17 -0
  275. package/dist/styleMixins.css-B8H9wDNA.js.map +1 -0
  276. package/dist/styleMixins.css-DrUsqddl.js +17 -0
  277. package/dist/styleMixins.css-DrUsqddl.js.map +1 -0
  278. package/dist/styleMixins.css-fokZCyF-.js +17 -0
  279. package/dist/styleMixins.css-fokZCyF-.js.map +1 -0
  280. package/dist/styleMixins.css.d.ts +10 -0
  281. package/dist/styleMixins.css.d.ts.map +1 -0
  282. package/dist/text/text.css.d.ts +3 -0
  283. package/dist/text/text.css.d.ts.map +1 -0
  284. package/dist/tsconfig.tsbuildinfo +1 -1
  285. package/dist/typedoc.json +340489 -0
  286. package/dist/utils-BVap5huR.js +157 -0
  287. package/dist/utils-BVap5huR.js.map +1 -0
  288. package/dist/utils-CY3RyfcA.js +157 -0
  289. package/dist/utils-CY3RyfcA.js.map +1 -0
  290. package/dist/utils-CdOdn2dW.js +149 -0
  291. package/dist/utils-CdOdn2dW.js.map +1 -0
  292. package/dist/utils-DD_cg6Ms.js +157 -0
  293. package/dist/utils-DD_cg6Ms.js.map +1 -0
  294. package/dist/utils.d.ts +8 -0
  295. package/dist/utils.d.ts.map +1 -0
  296. package/package.json +4 -2
  297. package/readme.md +1 -1
  298. package/rollup.config.js +9 -1
  299. package/scss/mixin.scss +50 -0
  300. package/src/LoaderUtils.ts +122 -122
  301. package/src/avatar/avatar.scss +38 -0
  302. package/src/avatar/avatar.ts +1 -1
  303. package/src/badge/badge.scss +31 -0
  304. package/src/badge/badge.ts +1 -1
  305. package/src/button/_button-sizes.scss +59 -0
  306. package/src/button/button.scss +430 -0
  307. package/src/button/button.ts +304 -0
  308. package/src/button/demo/index.html +42 -0
  309. package/src/button/index.ts +1 -0
  310. package/src/clock/ClockController.ts +32 -0
  311. package/src/clock/clock.scss +9 -0
  312. package/src/clock/clock.ts +39 -57
  313. package/src/code-highlighter/code-highlighter.scss +0 -0
  314. package/src/code-highlighter/code-highlighter.ts +58 -0
  315. package/src/code-highlighter/demo/index.html +58 -0
  316. package/src/code-highlighter/index.ts +1 -0
  317. package/src/code-highlighter/local.ts +11 -0
  318. package/src/divider/divider.scss +56 -0
  319. package/src/divider/divider.ts +1 -7
  320. package/src/elevation/demo/index.html +58 -0
  321. package/src/elevation/elevation.scss +61 -0
  322. package/src/elevation/elevation.ts +32 -0
  323. package/src/elevation/index.ts +1 -0
  324. package/src/focus-ring/FocusAttachableController.ts +36 -0
  325. package/src/focus-ring/demo/index.html +58 -0
  326. package/src/focus-ring/focus-ring.scss +22 -0
  327. package/src/focus-ring/focus-ring.ts +83 -0
  328. package/src/focus-ring/index.ts +1 -0
  329. package/src/icon/icon.scss +19 -0
  330. package/src/icon/icon.ts +131 -131
  331. package/src/index.ts +9 -5
  332. package/src/link/demo/index.html +34 -0
  333. package/src/link/link.scss +24 -0
  334. package/src/peacock-loader.ts +69 -64
  335. package/src/ripple/index.ts +1 -0
  336. package/src/ripple/ripple.ts +134 -0
  337. package/src/styles.d.ts +3 -1
  338. package/src/text/text.scss +48 -0
  339. package/src/utils.ts +29 -1
  340. package/tsconfig.json +23 -22
  341. package/demo/int.html +0 -31
  342. package/src/avatar/avatar.css.ts +0 -41
  343. package/src/badge/badge.css.ts +0 -34
  344. package/src/clock/clock.css.ts +0 -12
  345. package/src/divider/divider.css.ts +0 -58
  346. package/src/icon/icon.css.ts +0 -22
@@ -0,0 +1,2851 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2019 Google LLC
4
+ * SPDX-License-Identifier: BSD-3-Clause
5
+ */
6
+ const NODE_MODE = false;
7
+ // Allows minifiers to rename references to globalThis
8
+ const global$3 = globalThis;
9
+ /**
10
+ * Whether the current browser supports `adoptedStyleSheets`.
11
+ */
12
+ const supportsAdoptingStyleSheets = global$3.ShadowRoot &&
13
+ (global$3.ShadyCSS === undefined || global$3.ShadyCSS.nativeShadow) &&
14
+ 'adoptedStyleSheets' in Document.prototype &&
15
+ 'replace' in CSSStyleSheet.prototype;
16
+ const constructionToken = Symbol();
17
+ const cssTagCache = new WeakMap();
18
+ /**
19
+ * A container for a string of CSS text, that may be used to create a CSSStyleSheet.
20
+ *
21
+ * CSSResult is the return value of `css`-tagged template literals and
22
+ * `unsafeCSS()`. In order to ensure that CSSResults are only created via the
23
+ * `css` tag and `unsafeCSS()`, CSSResult cannot be constructed directly.
24
+ */
25
+ class CSSResult {
26
+ constructor(cssText, strings, safeToken) {
27
+ // This property needs to remain unminified.
28
+ this['_$cssResult$'] = true;
29
+ if (safeToken !== constructionToken) {
30
+ throw new Error('CSSResult is not constructable. Use `unsafeCSS` or `css` instead.');
31
+ }
32
+ this.cssText = cssText;
33
+ this._strings = strings;
34
+ }
35
+ // This is a getter so that it's lazy. In practice, this means stylesheets
36
+ // are not created until the first element instance is made.
37
+ get styleSheet() {
38
+ // If `supportsAdoptingStyleSheets` is true then we assume CSSStyleSheet is
39
+ // constructable.
40
+ let styleSheet = this._styleSheet;
41
+ const strings = this._strings;
42
+ if (supportsAdoptingStyleSheets && styleSheet === undefined) {
43
+ const cacheable = strings !== undefined && strings.length === 1;
44
+ if (cacheable) {
45
+ styleSheet = cssTagCache.get(strings);
46
+ }
47
+ if (styleSheet === undefined) {
48
+ (this._styleSheet = styleSheet = new CSSStyleSheet()).replaceSync(this.cssText);
49
+ if (cacheable) {
50
+ cssTagCache.set(strings, styleSheet);
51
+ }
52
+ }
53
+ }
54
+ return styleSheet;
55
+ }
56
+ toString() {
57
+ return this.cssText;
58
+ }
59
+ }
60
+ const textFromCSSResult = (value) => {
61
+ // This property needs to remain unminified.
62
+ if (value['_$cssResult$'] === true) {
63
+ return value.cssText;
64
+ }
65
+ else if (typeof value === 'number') {
66
+ return value;
67
+ }
68
+ else {
69
+ throw new Error(`Value passed to 'css' function must be a 'css' function result: ` +
70
+ `${value}. Use 'unsafeCSS' to pass non-literal values, but take care ` +
71
+ `to ensure page security.`);
72
+ }
73
+ };
74
+ /**
75
+ * Wrap a value for interpolation in a {@linkcode css} tagged template literal.
76
+ *
77
+ * This is unsafe because untrusted CSS text can be used to phone home
78
+ * or exfiltrate data to an attacker controlled site. Take care to only use
79
+ * this with trusted input.
80
+ */
81
+ const unsafeCSS = (value) => new CSSResult(typeof value === 'string' ? value : String(value), undefined, constructionToken);
82
+ /**
83
+ * A template literal tag which can be used with LitElement's
84
+ * {@linkcode LitElement.styles} property to set element styles.
85
+ *
86
+ * For security reasons, only literal string values and number may be used in
87
+ * embedded expressions. To incorporate non-literal values {@linkcode unsafeCSS}
88
+ * may be used inside an expression.
89
+ */
90
+ const css = (strings, ...values) => {
91
+ const cssText = strings.length === 1
92
+ ? strings[0]
93
+ : values.reduce((acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1], strings[0]);
94
+ return new CSSResult(cssText, strings, constructionToken);
95
+ };
96
+ /**
97
+ * Applies the given styles to a `shadowRoot`. When Shadow DOM is
98
+ * available but `adoptedStyleSheets` is not, styles are appended to the
99
+ * `shadowRoot` to [mimic the native feature](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets).
100
+ * Note, when shimming is used, any styles that are subsequently placed into
101
+ * the shadowRoot should be placed *before* any shimmed adopted styles. This
102
+ * will match spec behavior that gives adopted sheets precedence over styles in
103
+ * shadowRoot.
104
+ */
105
+ const adoptStyles = (renderRoot, styles) => {
106
+ if (supportsAdoptingStyleSheets) {
107
+ renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
108
+ }
109
+ else {
110
+ for (const s of styles) {
111
+ const style = document.createElement('style');
112
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
113
+ const nonce = global$3['litNonce'];
114
+ if (nonce !== undefined) {
115
+ style.setAttribute('nonce', nonce);
116
+ }
117
+ style.textContent = s.cssText;
118
+ renderRoot.appendChild(style);
119
+ }
120
+ }
121
+ };
122
+ const cssResultFromStyleSheet = (sheet) => {
123
+ let cssText = '';
124
+ for (const rule of sheet.cssRules) {
125
+ cssText += rule.cssText;
126
+ }
127
+ return unsafeCSS(cssText);
128
+ };
129
+ const getCompatibleStyle = supportsAdoptingStyleSheets ||
130
+ (NODE_MODE)
131
+ ? (s) => s
132
+ : (s) => s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s;
133
+
134
+ /**
135
+ * @license
136
+ * Copyright 2017 Google LLC
137
+ * SPDX-License-Identifier: BSD-3-Clause
138
+ */
139
+ /**
140
+ * Use this module if you want to create your own base class extending
141
+ * {@link ReactiveElement}.
142
+ * @packageDocumentation
143
+ */
144
+ // TODO (justinfagnani): Add `hasOwn` here when we ship ES2022
145
+ const { is, defineProperty, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, getPrototypeOf, } = Object;
146
+ // Lets a minifier replace globalThis references with a minified name
147
+ const global$2 = globalThis;
148
+ let issueWarning$2;
149
+ const trustedTypes$1 = global$2
150
+ .trustedTypes;
151
+ // Temporary workaround for https://crbug.com/993268
152
+ // Currently, any attribute starting with "on" is considered to be a
153
+ // TrustedScript source. Such boolean attributes must be set to the equivalent
154
+ // trusted emptyScript value.
155
+ const emptyStringForBooleanAttribute = trustedTypes$1
156
+ ? trustedTypes$1.emptyScript
157
+ : '';
158
+ const polyfillSupport$2 = global$2.reactiveElementPolyfillSupportDevMode
159
+ ;
160
+ {
161
+ // Ensure warnings are issued only 1x, even if multiple versions of Lit
162
+ // are loaded.
163
+ global$2.litIssuedWarnings ??= new Set();
164
+ /**
165
+ * Issue a warning if we haven't already, based either on `code` or `warning`.
166
+ * Warnings are disabled automatically only by `warning`; disabling via `code`
167
+ * can be done by users.
168
+ */
169
+ issueWarning$2 = (code, warning) => {
170
+ warning += ` See https://lit.dev/msg/${code} for more information.`;
171
+ if (!global$2.litIssuedWarnings.has(warning) &&
172
+ !global$2.litIssuedWarnings.has(code)) {
173
+ console.warn(warning);
174
+ global$2.litIssuedWarnings.add(warning);
175
+ }
176
+ };
177
+ queueMicrotask(() => {
178
+ issueWarning$2('dev-mode', `Lit is in dev mode. Not recommended for production!`);
179
+ // Issue polyfill support warning.
180
+ if (global$2.ShadyDOM?.inUse && polyfillSupport$2 === undefined) {
181
+ issueWarning$2('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +
182
+ `the \`polyfill-support\` module has not been loaded.`);
183
+ }
184
+ });
185
+ }
186
+ /**
187
+ * Useful for visualizing and logging insights into what the Lit template system is doing.
188
+ *
189
+ * Compiled out of prod mode builds.
190
+ */
191
+ const debugLogEvent$1 = (event) => {
192
+ const shouldEmit = global$2
193
+ .emitLitDebugLogEvents;
194
+ if (!shouldEmit) {
195
+ return;
196
+ }
197
+ global$2.dispatchEvent(new CustomEvent('lit-debug', {
198
+ detail: event,
199
+ }));
200
+ }
201
+ ;
202
+ /*
203
+ * When using Closure Compiler, JSCompiler_renameProperty(property, object) is
204
+ * replaced at compile time by the munged name for object[property]. We cannot
205
+ * alias this function, so we have to use a small shim that has the same
206
+ * behavior when not compiling.
207
+ */
208
+ /*@__INLINE__*/
209
+ const JSCompiler_renameProperty$1 = (prop, _obj) => prop;
210
+ const defaultConverter = {
211
+ toAttribute(value, type) {
212
+ switch (type) {
213
+ case Boolean:
214
+ value = value ? emptyStringForBooleanAttribute : null;
215
+ break;
216
+ case Object:
217
+ case Array:
218
+ // if the value is `null` or `undefined` pass this through
219
+ // to allow removing/no change behavior.
220
+ value = value == null ? value : JSON.stringify(value);
221
+ break;
222
+ }
223
+ return value;
224
+ },
225
+ fromAttribute(value, type) {
226
+ let fromValue = value;
227
+ switch (type) {
228
+ case Boolean:
229
+ fromValue = value !== null;
230
+ break;
231
+ case Number:
232
+ fromValue = value === null ? null : Number(value);
233
+ break;
234
+ case Object:
235
+ case Array:
236
+ // Do *not* generate exception when invalid JSON is set as elements
237
+ // don't normally complain on being mis-configured.
238
+ // TODO(sorvell): Do generate exception in *dev mode*.
239
+ try {
240
+ // Assert to adhere to Bazel's "must type assert JSON parse" rule.
241
+ fromValue = JSON.parse(value);
242
+ }
243
+ catch (e) {
244
+ fromValue = null;
245
+ }
246
+ break;
247
+ }
248
+ return fromValue;
249
+ },
250
+ };
251
+ /**
252
+ * Change function that returns true if `value` is different from `oldValue`.
253
+ * This method is used as the default for a property's `hasChanged` function.
254
+ */
255
+ const notEqual = (value, old) => !is(value, old);
256
+ const defaultPropertyDeclaration = {
257
+ attribute: true,
258
+ type: String,
259
+ converter: defaultConverter,
260
+ reflect: false,
261
+ useDefault: false,
262
+ hasChanged: notEqual,
263
+ };
264
+ // Ensure metadata is enabled. TypeScript does not polyfill
265
+ // Symbol.metadata, so we must ensure that it exists.
266
+ Symbol.metadata ??= Symbol('metadata');
267
+ // Map from a class's metadata object to property options
268
+ // Note that we must use nullish-coalescing assignment so that we only use one
269
+ // map even if we load multiple version of this module.
270
+ global$2.litPropertyMetadata ??= new WeakMap();
271
+ /**
272
+ * Base element class which manages element properties and attributes. When
273
+ * properties change, the `update` method is asynchronously called. This method
274
+ * should be supplied by subclasses to render updates as desired.
275
+ * @noInheritDoc
276
+ */
277
+ class ReactiveElement
278
+ // In the Node build, this `extends` clause will be substituted with
279
+ // `(globalThis.HTMLElement ?? HTMLElement)`.
280
+ //
281
+ // This way, we will first prefer any global `HTMLElement` polyfill that the
282
+ // user has assigned, and then fall back to the `HTMLElement` shim which has
283
+ // been imported (see note at the top of this file about how this import is
284
+ // generated by Rollup). Note that the `HTMLElement` variable has been
285
+ // shadowed by this import, so it no longer refers to the global.
286
+ extends HTMLElement {
287
+ /**
288
+ * Adds an initializer function to the class that is called during instance
289
+ * construction.
290
+ *
291
+ * This is useful for code that runs against a `ReactiveElement`
292
+ * subclass, such as a decorator, that needs to do work for each
293
+ * instance, such as setting up a `ReactiveController`.
294
+ *
295
+ * ```ts
296
+ * const myDecorator = (target: typeof ReactiveElement, key: string) => {
297
+ * target.addInitializer((instance: ReactiveElement) => {
298
+ * // This is run during construction of the element
299
+ * new MyController(instance);
300
+ * });
301
+ * }
302
+ * ```
303
+ *
304
+ * Decorating a field will then cause each instance to run an initializer
305
+ * that adds a controller:
306
+ *
307
+ * ```ts
308
+ * class MyElement extends LitElement {
309
+ * @myDecorator foo;
310
+ * }
311
+ * ```
312
+ *
313
+ * Initializers are stored per-constructor. Adding an initializer to a
314
+ * subclass does not add it to a superclass. Since initializers are run in
315
+ * constructors, initializers will run in order of the class hierarchy,
316
+ * starting with superclasses and progressing to the instance's class.
317
+ *
318
+ * @nocollapse
319
+ */
320
+ static addInitializer(initializer) {
321
+ this.__prepare();
322
+ (this._initializers ??= []).push(initializer);
323
+ }
324
+ /**
325
+ * Returns a list of attributes corresponding to the registered properties.
326
+ * @nocollapse
327
+ * @category attributes
328
+ */
329
+ static get observedAttributes() {
330
+ // Ensure we've created all properties
331
+ this.finalize();
332
+ // this.__attributeToPropertyMap is only undefined after finalize() in
333
+ // ReactiveElement itself. ReactiveElement.observedAttributes is only
334
+ // accessed with ReactiveElement as the receiver when a subclass or mixin
335
+ // calls super.observedAttributes
336
+ return (this.__attributeToPropertyMap && [...this.__attributeToPropertyMap.keys()]);
337
+ }
338
+ /**
339
+ * Creates a property accessor on the element prototype if one does not exist
340
+ * and stores a {@linkcode PropertyDeclaration} for the property with the
341
+ * given options. The property setter calls the property's `hasChanged`
342
+ * property option or uses a strict identity check to determine whether or not
343
+ * to request an update.
344
+ *
345
+ * This method may be overridden to customize properties; however,
346
+ * when doing so, it's important to call `super.createProperty` to ensure
347
+ * the property is setup correctly. This method calls
348
+ * `getPropertyDescriptor` internally to get a descriptor to install.
349
+ * To customize what properties do when they are get or set, override
350
+ * `getPropertyDescriptor`. To customize the options for a property,
351
+ * implement `createProperty` like this:
352
+ *
353
+ * ```ts
354
+ * static createProperty(name, options) {
355
+ * options = Object.assign(options, {myOption: true});
356
+ * super.createProperty(name, options);
357
+ * }
358
+ * ```
359
+ *
360
+ * @nocollapse
361
+ * @category properties
362
+ */
363
+ static createProperty(name, options = defaultPropertyDeclaration) {
364
+ // If this is a state property, force the attribute to false.
365
+ if (options.state) {
366
+ options.attribute = false;
367
+ }
368
+ this.__prepare();
369
+ // Whether this property is wrapping accessors.
370
+ // Helps control the initial value change and reflection logic.
371
+ if (this.prototype.hasOwnProperty(name)) {
372
+ options = Object.create(options);
373
+ options.wrapped = true;
374
+ }
375
+ this.elementProperties.set(name, options);
376
+ if (!options.noAccessor) {
377
+ const key = // Use Symbol.for in dev mode to make it easier to maintain state
378
+ // when doing HMR.
379
+ Symbol.for(`${String(name)} (@property() cache)`)
380
+ ;
381
+ const descriptor = this.getPropertyDescriptor(name, key, options);
382
+ if (descriptor !== undefined) {
383
+ defineProperty(this.prototype, name, descriptor);
384
+ }
385
+ }
386
+ }
387
+ /**
388
+ * Returns a property descriptor to be defined on the given named property.
389
+ * If no descriptor is returned, the property will not become an accessor.
390
+ * For example,
391
+ *
392
+ * ```ts
393
+ * class MyElement extends LitElement {
394
+ * static getPropertyDescriptor(name, key, options) {
395
+ * const defaultDescriptor =
396
+ * super.getPropertyDescriptor(name, key, options);
397
+ * const setter = defaultDescriptor.set;
398
+ * return {
399
+ * get: defaultDescriptor.get,
400
+ * set(value) {
401
+ * setter.call(this, value);
402
+ * // custom action.
403
+ * },
404
+ * configurable: true,
405
+ * enumerable: true
406
+ * }
407
+ * }
408
+ * }
409
+ * ```
410
+ *
411
+ * @nocollapse
412
+ * @category properties
413
+ */
414
+ static getPropertyDescriptor(name, key, options) {
415
+ const { get, set } = getOwnPropertyDescriptor(this.prototype, name) ?? {
416
+ get() {
417
+ return this[key];
418
+ },
419
+ set(v) {
420
+ this[key] = v;
421
+ },
422
+ };
423
+ if (get == null) {
424
+ if ('value' in (getOwnPropertyDescriptor(this.prototype, name) ?? {})) {
425
+ throw new Error(`Field ${JSON.stringify(String(name))} on ` +
426
+ `${this.name} was declared as a reactive property ` +
427
+ `but it's actually declared as a value on the prototype. ` +
428
+ `Usually this is due to using @property or @state on a method.`);
429
+ }
430
+ issueWarning$2('reactive-property-without-getter', `Field ${JSON.stringify(String(name))} on ` +
431
+ `${this.name} was declared as a reactive property ` +
432
+ `but it does not have a getter. This will be an error in a ` +
433
+ `future version of Lit.`);
434
+ }
435
+ return {
436
+ get,
437
+ set(value) {
438
+ const oldValue = get?.call(this);
439
+ set?.call(this, value);
440
+ this.requestUpdate(name, oldValue, options);
441
+ },
442
+ configurable: true,
443
+ enumerable: true,
444
+ };
445
+ }
446
+ /**
447
+ * Returns the property options associated with the given property.
448
+ * These options are defined with a `PropertyDeclaration` via the `properties`
449
+ * object or the `@property` decorator and are registered in
450
+ * `createProperty(...)`.
451
+ *
452
+ * Note, this method should be considered "final" and not overridden. To
453
+ * customize the options for a given property, override
454
+ * {@linkcode createProperty}.
455
+ *
456
+ * @nocollapse
457
+ * @final
458
+ * @category properties
459
+ */
460
+ static getPropertyOptions(name) {
461
+ return this.elementProperties.get(name) ?? defaultPropertyDeclaration;
462
+ }
463
+ /**
464
+ * Initializes static own properties of the class used in bookkeeping
465
+ * for element properties, initializers, etc.
466
+ *
467
+ * Can be called multiple times by code that needs to ensure these
468
+ * properties exist before using them.
469
+ *
470
+ * This method ensures the superclass is finalized so that inherited
471
+ * property metadata can be copied down.
472
+ * @nocollapse
473
+ */
474
+ static __prepare() {
475
+ if (this.hasOwnProperty(JSCompiler_renameProperty$1('elementProperties'))) {
476
+ // Already prepared
477
+ return;
478
+ }
479
+ // Finalize any superclasses
480
+ const superCtor = getPrototypeOf(this);
481
+ superCtor.finalize();
482
+ // Create own set of initializers for this class if any exist on the
483
+ // superclass and copy them down. Note, for a small perf boost, avoid
484
+ // creating initializers unless needed.
485
+ if (superCtor._initializers !== undefined) {
486
+ this._initializers = [...superCtor._initializers];
487
+ }
488
+ // Initialize elementProperties from the superclass
489
+ this.elementProperties = new Map(superCtor.elementProperties);
490
+ }
491
+ /**
492
+ * Finishes setting up the class so that it's ready to be registered
493
+ * as a custom element and instantiated.
494
+ *
495
+ * This method is called by the ReactiveElement.observedAttributes getter.
496
+ * If you override the observedAttributes getter, you must either call
497
+ * super.observedAttributes to trigger finalization, or call finalize()
498
+ * yourself.
499
+ *
500
+ * @nocollapse
501
+ */
502
+ static finalize() {
503
+ if (this.hasOwnProperty(JSCompiler_renameProperty$1('finalized'))) {
504
+ return;
505
+ }
506
+ this.finalized = true;
507
+ this.__prepare();
508
+ // Create properties from the static properties block:
509
+ if (this.hasOwnProperty(JSCompiler_renameProperty$1('properties'))) {
510
+ const props = this.properties;
511
+ const propKeys = [
512
+ ...getOwnPropertyNames(props),
513
+ ...getOwnPropertySymbols(props),
514
+ ];
515
+ for (const p of propKeys) {
516
+ this.createProperty(p, props[p]);
517
+ }
518
+ }
519
+ // Create properties from standard decorator metadata:
520
+ const metadata = this[Symbol.metadata];
521
+ if (metadata !== null) {
522
+ const properties = litPropertyMetadata.get(metadata);
523
+ if (properties !== undefined) {
524
+ for (const [p, options] of properties) {
525
+ this.elementProperties.set(p, options);
526
+ }
527
+ }
528
+ }
529
+ // Create the attribute-to-property map
530
+ this.__attributeToPropertyMap = new Map();
531
+ for (const [p, options] of this.elementProperties) {
532
+ const attr = this.__attributeNameForProperty(p, options);
533
+ if (attr !== undefined) {
534
+ this.__attributeToPropertyMap.set(attr, p);
535
+ }
536
+ }
537
+ this.elementStyles = this.finalizeStyles(this.styles);
538
+ {
539
+ if (this.hasOwnProperty('createProperty')) {
540
+ issueWarning$2('no-override-create-property', 'Overriding ReactiveElement.createProperty() is deprecated. ' +
541
+ 'The override will not be called with standard decorators');
542
+ }
543
+ if (this.hasOwnProperty('getPropertyDescriptor')) {
544
+ issueWarning$2('no-override-get-property-descriptor', 'Overriding ReactiveElement.getPropertyDescriptor() is deprecated. ' +
545
+ 'The override will not be called with standard decorators');
546
+ }
547
+ }
548
+ }
549
+ /**
550
+ * Takes the styles the user supplied via the `static styles` property and
551
+ * returns the array of styles to apply to the element.
552
+ * Override this method to integrate into a style management system.
553
+ *
554
+ * Styles are deduplicated preserving the _last_ instance in the list. This
555
+ * is a performance optimization to avoid duplicated styles that can occur
556
+ * especially when composing via subclassing. The last item is kept to try
557
+ * to preserve the cascade order with the assumption that it's most important
558
+ * that last added styles override previous styles.
559
+ *
560
+ * @nocollapse
561
+ * @category styles
562
+ */
563
+ static finalizeStyles(styles) {
564
+ const elementStyles = [];
565
+ if (Array.isArray(styles)) {
566
+ // Dedupe the flattened array in reverse order to preserve the last items.
567
+ // Casting to Array<unknown> works around TS error that
568
+ // appears to come from trying to flatten a type CSSResultArray.
569
+ const set = new Set(styles.flat(Infinity).reverse());
570
+ // Then preserve original order by adding the set items in reverse order.
571
+ for (const s of set) {
572
+ elementStyles.unshift(getCompatibleStyle(s));
573
+ }
574
+ }
575
+ else if (styles !== undefined) {
576
+ elementStyles.push(getCompatibleStyle(styles));
577
+ }
578
+ return elementStyles;
579
+ }
580
+ /**
581
+ * Returns the property name for the given attribute `name`.
582
+ * @nocollapse
583
+ */
584
+ static __attributeNameForProperty(name, options) {
585
+ const attribute = options.attribute;
586
+ return attribute === false
587
+ ? undefined
588
+ : typeof attribute === 'string'
589
+ ? attribute
590
+ : typeof name === 'string'
591
+ ? name.toLowerCase()
592
+ : undefined;
593
+ }
594
+ constructor() {
595
+ super();
596
+ this.__instanceProperties = undefined;
597
+ /**
598
+ * True if there is a pending update as a result of calling `requestUpdate()`.
599
+ * Should only be read.
600
+ * @category updates
601
+ */
602
+ this.isUpdatePending = false;
603
+ /**
604
+ * Is set to `true` after the first update. The element code cannot assume
605
+ * that `renderRoot` exists before the element `hasUpdated`.
606
+ * @category updates
607
+ */
608
+ this.hasUpdated = false;
609
+ /**
610
+ * Name of currently reflecting property
611
+ */
612
+ this.__reflectingProperty = null;
613
+ this.__initialize();
614
+ }
615
+ /**
616
+ * Internal only override point for customizing work done when elements
617
+ * are constructed.
618
+ */
619
+ __initialize() {
620
+ this.__updatePromise = new Promise((res) => (this.enableUpdating = res));
621
+ this._$changedProperties = new Map();
622
+ // This enqueues a microtask that must run before the first update, so it
623
+ // must be called before requestUpdate()
624
+ this.__saveInstanceProperties();
625
+ // ensures first update will be caught by an early access of
626
+ // `updateComplete`
627
+ this.requestUpdate();
628
+ this.constructor._initializers?.forEach((i) => i(this));
629
+ }
630
+ /**
631
+ * Registers a `ReactiveController` to participate in the element's reactive
632
+ * update cycle. The element automatically calls into any registered
633
+ * controllers during its lifecycle callbacks.
634
+ *
635
+ * If the element is connected when `addController()` is called, the
636
+ * controller's `hostConnected()` callback will be immediately called.
637
+ * @category controllers
638
+ */
639
+ addController(controller) {
640
+ (this.__controllers ??= new Set()).add(controller);
641
+ // If a controller is added after the element has been connected,
642
+ // call hostConnected. Note, re-using existence of `renderRoot` here
643
+ // (which is set in connectedCallback) to avoid the need to track a
644
+ // first connected state.
645
+ if (this.renderRoot !== undefined && this.isConnected) {
646
+ controller.hostConnected?.();
647
+ }
648
+ }
649
+ /**
650
+ * Removes a `ReactiveController` from the element.
651
+ * @category controllers
652
+ */
653
+ removeController(controller) {
654
+ this.__controllers?.delete(controller);
655
+ }
656
+ /**
657
+ * Fixes any properties set on the instance before upgrade time.
658
+ * Otherwise these would shadow the accessor and break these properties.
659
+ * The properties are stored in a Map which is played back after the
660
+ * constructor runs.
661
+ */
662
+ __saveInstanceProperties() {
663
+ const instanceProperties = new Map();
664
+ const elementProperties = this.constructor
665
+ .elementProperties;
666
+ for (const p of elementProperties.keys()) {
667
+ if (this.hasOwnProperty(p)) {
668
+ instanceProperties.set(p, this[p]);
669
+ delete this[p];
670
+ }
671
+ }
672
+ if (instanceProperties.size > 0) {
673
+ this.__instanceProperties = instanceProperties;
674
+ }
675
+ }
676
+ /**
677
+ * Returns the node into which the element should render and by default
678
+ * creates and returns an open shadowRoot. Implement to customize where the
679
+ * element's DOM is rendered. For example, to render into the element's
680
+ * childNodes, return `this`.
681
+ *
682
+ * @return Returns a node into which to render.
683
+ * @category rendering
684
+ */
685
+ createRenderRoot() {
686
+ const renderRoot = this.shadowRoot ??
687
+ this.attachShadow(this.constructor.shadowRootOptions);
688
+ adoptStyles(renderRoot, this.constructor.elementStyles);
689
+ return renderRoot;
690
+ }
691
+ /**
692
+ * On first connection, creates the element's renderRoot, sets up
693
+ * element styling, and enables updating.
694
+ * @category lifecycle
695
+ */
696
+ connectedCallback() {
697
+ // Create renderRoot before controllers `hostConnected`
698
+ this.renderRoot ??=
699
+ this.createRenderRoot();
700
+ this.enableUpdating(true);
701
+ this.__controllers?.forEach((c) => c.hostConnected?.());
702
+ }
703
+ /**
704
+ * Note, this method should be considered final and not overridden. It is
705
+ * overridden on the element instance with a function that triggers the first
706
+ * update.
707
+ * @category updates
708
+ */
709
+ enableUpdating(_requestedUpdate) { }
710
+ /**
711
+ * Allows for `super.disconnectedCallback()` in extensions while
712
+ * reserving the possibility of making non-breaking feature additions
713
+ * when disconnecting at some point in the future.
714
+ * @category lifecycle
715
+ */
716
+ disconnectedCallback() {
717
+ this.__controllers?.forEach((c) => c.hostDisconnected?.());
718
+ }
719
+ /**
720
+ * Synchronizes property values when attributes change.
721
+ *
722
+ * Specifically, when an attribute is set, the corresponding property is set.
723
+ * You should rarely need to implement this callback. If this method is
724
+ * overridden, `super.attributeChangedCallback(name, _old, value)` must be
725
+ * called.
726
+ *
727
+ * See [responding to attribute changes](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes)
728
+ * on MDN for more information about the `attributeChangedCallback`.
729
+ * @category attributes
730
+ */
731
+ attributeChangedCallback(name, _old, value) {
732
+ this._$attributeToProperty(name, value);
733
+ }
734
+ __propertyToAttribute(name, value) {
735
+ const elemProperties = this.constructor.elementProperties;
736
+ const options = elemProperties.get(name);
737
+ const attr = this.constructor.__attributeNameForProperty(name, options);
738
+ if (attr !== undefined && options.reflect === true) {
739
+ const converter = options.converter?.toAttribute !==
740
+ undefined
741
+ ? options.converter
742
+ : defaultConverter;
743
+ const attrValue = converter.toAttribute(value, options.type);
744
+ if (this.constructor.enabledWarnings.includes('migration') &&
745
+ attrValue === undefined) {
746
+ issueWarning$2('undefined-attribute-value', `The attribute value for the ${name} property is ` +
747
+ `undefined on element ${this.localName}. The attribute will be ` +
748
+ `removed, but in the previous version of \`ReactiveElement\`, ` +
749
+ `the attribute would not have changed.`);
750
+ }
751
+ // Track if the property is being reflected to avoid
752
+ // setting the property again via `attributeChangedCallback`. Note:
753
+ // 1. this takes advantage of the fact that the callback is synchronous.
754
+ // 2. will behave incorrectly if multiple attributes are in the reaction
755
+ // stack at time of calling. However, since we process attributes
756
+ // in `update` this should not be possible (or an extreme corner case
757
+ // that we'd like to discover).
758
+ // mark state reflecting
759
+ this.__reflectingProperty = name;
760
+ if (attrValue == null) {
761
+ this.removeAttribute(attr);
762
+ }
763
+ else {
764
+ this.setAttribute(attr, attrValue);
765
+ }
766
+ // mark state not reflecting
767
+ this.__reflectingProperty = null;
768
+ }
769
+ }
770
+ /** @internal */
771
+ _$attributeToProperty(name, value) {
772
+ const ctor = this.constructor;
773
+ // Note, hint this as an `AttributeMap` so closure clearly understands
774
+ // the type; it has issues with tracking types through statics
775
+ const propName = ctor.__attributeToPropertyMap.get(name);
776
+ // Use tracking info to avoid reflecting a property value to an attribute
777
+ // if it was just set because the attribute changed.
778
+ if (propName !== undefined && this.__reflectingProperty !== propName) {
779
+ const options = ctor.getPropertyOptions(propName);
780
+ const converter = typeof options.converter === 'function'
781
+ ? { fromAttribute: options.converter }
782
+ : options.converter?.fromAttribute !== undefined
783
+ ? options.converter
784
+ : defaultConverter;
785
+ // mark state reflecting
786
+ this.__reflectingProperty = propName;
787
+ const convertedValue = converter.fromAttribute(value, options.type);
788
+ this[propName] =
789
+ convertedValue ??
790
+ this.__defaultValues?.get(propName) ??
791
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
792
+ convertedValue;
793
+ // mark state not reflecting
794
+ this.__reflectingProperty = null;
795
+ }
796
+ }
797
+ /**
798
+ * Requests an update which is processed asynchronously. This should be called
799
+ * when an element should update based on some state not triggered by setting
800
+ * a reactive property. In this case, pass no arguments. It should also be
801
+ * called when manually implementing a property setter. In this case, pass the
802
+ * property `name` and `oldValue` to ensure that any configured property
803
+ * options are honored.
804
+ *
805
+ * @param name name of requesting property
806
+ * @param oldValue old value of requesting property
807
+ * @param options property options to use instead of the previously
808
+ * configured options
809
+ * @param useNewValue if true, the newValue argument is used instead of
810
+ * reading the property value. This is important to use if the reactive
811
+ * property is a standard private accessor, as opposed to a plain
812
+ * property, since private members can't be dynamically read by name.
813
+ * @param newValue the new value of the property. This is only used if
814
+ * `useNewValue` is true.
815
+ * @category updates
816
+ */
817
+ requestUpdate(name, oldValue, options, useNewValue = false, newValue) {
818
+ // If we have a property key, perform property update steps.
819
+ if (name !== undefined) {
820
+ if (name instanceof Event) {
821
+ issueWarning$2(``, `The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()`);
822
+ }
823
+ const ctor = this.constructor;
824
+ if (useNewValue === false) {
825
+ newValue = this[name];
826
+ }
827
+ options ??= ctor.getPropertyOptions(name);
828
+ const changed = (options.hasChanged ?? notEqual)(newValue, oldValue) ||
829
+ // When there is no change, check a corner case that can occur when
830
+ // 1. there's a initial value which was not reflected
831
+ // 2. the property is subsequently set to this value.
832
+ // For example, `prop: {useDefault: true, reflect: true}`
833
+ // and el.prop = 'foo'. This should be considered a change if the
834
+ // attribute is not set because we will now reflect the property to the attribute.
835
+ (options.useDefault &&
836
+ options.reflect &&
837
+ newValue === this.__defaultValues?.get(name) &&
838
+ !this.hasAttribute(ctor.__attributeNameForProperty(name, options)));
839
+ if (changed) {
840
+ this._$changeProperty(name, oldValue, options);
841
+ }
842
+ else {
843
+ // Abort the request if the property should not be considered changed.
844
+ return;
845
+ }
846
+ }
847
+ if (this.isUpdatePending === false) {
848
+ this.__updatePromise = this.__enqueueUpdate();
849
+ }
850
+ }
851
+ /**
852
+ * @internal
853
+ */
854
+ _$changeProperty(name, oldValue, { useDefault, reflect, wrapped }, initializeValue) {
855
+ // Record default value when useDefault is used. This allows us to
856
+ // restore this value when the attribute is removed.
857
+ if (useDefault && !(this.__defaultValues ??= new Map()).has(name)) {
858
+ this.__defaultValues.set(name, initializeValue ?? oldValue ?? this[name]);
859
+ // if this is not wrapping an accessor, it must be an initial setting
860
+ // and in this case we do not want to record the change or reflect.
861
+ if (wrapped !== true || initializeValue !== undefined) {
862
+ return;
863
+ }
864
+ }
865
+ // TODO (justinfagnani): Create a benchmark of Map.has() + Map.set(
866
+ // vs just Map.set()
867
+ if (!this._$changedProperties.has(name)) {
868
+ // On the initial change, the old value should be `undefined`, except
869
+ // with `useDefault`
870
+ if (!this.hasUpdated && !useDefault) {
871
+ oldValue = undefined;
872
+ }
873
+ this._$changedProperties.set(name, oldValue);
874
+ }
875
+ // Add to reflecting properties set.
876
+ // Note, it's important that every change has a chance to add the
877
+ // property to `__reflectingProperties`. This ensures setting
878
+ // attribute + property reflects correctly.
879
+ if (reflect === true && this.__reflectingProperty !== name) {
880
+ (this.__reflectingProperties ??= new Set()).add(name);
881
+ }
882
+ }
883
+ /**
884
+ * Sets up the element to asynchronously update.
885
+ */
886
+ async __enqueueUpdate() {
887
+ this.isUpdatePending = true;
888
+ try {
889
+ // Ensure any previous update has resolved before updating.
890
+ // This `await` also ensures that property changes are batched.
891
+ await this.__updatePromise;
892
+ }
893
+ catch (e) {
894
+ // Refire any previous errors async so they do not disrupt the update
895
+ // cycle. Errors are refired so developers have a chance to observe
896
+ // them, and this can be done by implementing
897
+ // `window.onunhandledrejection`.
898
+ Promise.reject(e);
899
+ }
900
+ const result = this.scheduleUpdate();
901
+ // If `scheduleUpdate` returns a Promise, we await it. This is done to
902
+ // enable coordinating updates with a scheduler. Note, the result is
903
+ // checked to avoid delaying an additional microtask unless we need to.
904
+ if (result != null) {
905
+ await result;
906
+ }
907
+ return !this.isUpdatePending;
908
+ }
909
+ /**
910
+ * Schedules an element update. You can override this method to change the
911
+ * timing of updates by returning a Promise. The update will await the
912
+ * returned Promise, and you should resolve the Promise to allow the update
913
+ * to proceed. If this method is overridden, `super.scheduleUpdate()`
914
+ * must be called.
915
+ *
916
+ * For instance, to schedule updates to occur just before the next frame:
917
+ *
918
+ * ```ts
919
+ * override protected async scheduleUpdate(): Promise<unknown> {
920
+ * await new Promise((resolve) => requestAnimationFrame(() => resolve()));
921
+ * super.scheduleUpdate();
922
+ * }
923
+ * ```
924
+ * @category updates
925
+ */
926
+ scheduleUpdate() {
927
+ const result = this.performUpdate();
928
+ if (this.constructor.enabledWarnings.includes('async-perform-update') &&
929
+ typeof result?.then ===
930
+ 'function') {
931
+ issueWarning$2('async-perform-update', `Element ${this.localName} returned a Promise from performUpdate(). ` +
932
+ `This behavior is deprecated and will be removed in a future ` +
933
+ `version of ReactiveElement.`);
934
+ }
935
+ return result;
936
+ }
937
+ /**
938
+ * Performs an element update. Note, if an exception is thrown during the
939
+ * update, `firstUpdated` and `updated` will not be called.
940
+ *
941
+ * Call `performUpdate()` to immediately process a pending update. This should
942
+ * generally not be needed, but it can be done in rare cases when you need to
943
+ * update synchronously.
944
+ *
945
+ * @category updates
946
+ */
947
+ performUpdate() {
948
+ // Abort any update if one is not pending when this is called.
949
+ // This can happen if `performUpdate` is called early to "flush"
950
+ // the update.
951
+ if (!this.isUpdatePending) {
952
+ return;
953
+ }
954
+ debugLogEvent$1?.({ kind: 'update' });
955
+ if (!this.hasUpdated) {
956
+ // Create renderRoot before first update. This occurs in `connectedCallback`
957
+ // but is done here to support out of tree calls to `enableUpdating`/`performUpdate`.
958
+ this.renderRoot ??=
959
+ this.createRenderRoot();
960
+ {
961
+ // Produce warning if any reactive properties on the prototype are
962
+ // shadowed by class fields. Instance fields set before upgrade are
963
+ // deleted by this point, so any own property is caused by class field
964
+ // initialization in the constructor.
965
+ const ctor = this.constructor;
966
+ const shadowedProperties = [...ctor.elementProperties.keys()].filter((p) => this.hasOwnProperty(p) && p in getPrototypeOf(this));
967
+ if (shadowedProperties.length) {
968
+ throw new Error(`The following properties on element ${this.localName} will not ` +
969
+ `trigger updates as expected because they are set using class ` +
970
+ `fields: ${shadowedProperties.join(', ')}. ` +
971
+ `Native class fields and some compiled output will overwrite ` +
972
+ `accessors used for detecting changes. See ` +
973
+ `https://lit.dev/msg/class-field-shadowing ` +
974
+ `for more information.`);
975
+ }
976
+ }
977
+ // Mixin instance properties once, if they exist.
978
+ if (this.__instanceProperties) {
979
+ // TODO (justinfagnani): should we use the stored value? Could a new value
980
+ // have been set since we stored the own property value?
981
+ for (const [p, value] of this.__instanceProperties) {
982
+ this[p] = value;
983
+ }
984
+ this.__instanceProperties = undefined;
985
+ }
986
+ // Trigger initial value reflection and populate the initial
987
+ // `changedProperties` map, but only for the case of properties created
988
+ // via `createProperty` on accessors, which will not have already
989
+ // populated the `changedProperties` map since they are not set.
990
+ // We can't know if these accessors had initializers, so we just set
991
+ // them anyway - a difference from experimental decorators on fields and
992
+ // standard decorators on auto-accessors.
993
+ // For context see:
994
+ // https://github.com/lit/lit/pull/4183#issuecomment-1711959635
995
+ const elementProperties = this.constructor
996
+ .elementProperties;
997
+ if (elementProperties.size > 0) {
998
+ for (const [p, options] of elementProperties) {
999
+ const { wrapped } = options;
1000
+ const value = this[p];
1001
+ if (wrapped === true &&
1002
+ !this._$changedProperties.has(p) &&
1003
+ value !== undefined) {
1004
+ this._$changeProperty(p, undefined, options, value);
1005
+ }
1006
+ }
1007
+ }
1008
+ }
1009
+ let shouldUpdate = false;
1010
+ const changedProperties = this._$changedProperties;
1011
+ try {
1012
+ shouldUpdate = this.shouldUpdate(changedProperties);
1013
+ if (shouldUpdate) {
1014
+ this.willUpdate(changedProperties);
1015
+ this.__controllers?.forEach((c) => c.hostUpdate?.());
1016
+ this.update(changedProperties);
1017
+ }
1018
+ else {
1019
+ this.__markUpdated();
1020
+ }
1021
+ }
1022
+ catch (e) {
1023
+ // Prevent `firstUpdated` and `updated` from running when there's an
1024
+ // update exception.
1025
+ shouldUpdate = false;
1026
+ // Ensure element can accept additional updates after an exception.
1027
+ this.__markUpdated();
1028
+ throw e;
1029
+ }
1030
+ // The update is no longer considered pending and further updates are now allowed.
1031
+ if (shouldUpdate) {
1032
+ this._$didUpdate(changedProperties);
1033
+ }
1034
+ }
1035
+ /**
1036
+ * Invoked before `update()` to compute values needed during the update.
1037
+ *
1038
+ * Implement `willUpdate` to compute property values that depend on other
1039
+ * properties and are used in the rest of the update process.
1040
+ *
1041
+ * ```ts
1042
+ * willUpdate(changedProperties) {
1043
+ * // only need to check changed properties for an expensive computation.
1044
+ * if (changedProperties.has('firstName') || changedProperties.has('lastName')) {
1045
+ * this.sha = computeSHA(`${this.firstName} ${this.lastName}`);
1046
+ * }
1047
+ * }
1048
+ *
1049
+ * render() {
1050
+ * return html`SHA: ${this.sha}`;
1051
+ * }
1052
+ * ```
1053
+ *
1054
+ * @category updates
1055
+ */
1056
+ willUpdate(_changedProperties) { }
1057
+ // Note, this is an override point for polyfill-support.
1058
+ // @internal
1059
+ _$didUpdate(changedProperties) {
1060
+ this.__controllers?.forEach((c) => c.hostUpdated?.());
1061
+ if (!this.hasUpdated) {
1062
+ this.hasUpdated = true;
1063
+ this.firstUpdated(changedProperties);
1064
+ }
1065
+ this.updated(changedProperties);
1066
+ if (this.isUpdatePending &&
1067
+ this.constructor.enabledWarnings.includes('change-in-update')) {
1068
+ issueWarning$2('change-in-update', `Element ${this.localName} scheduled an update ` +
1069
+ `(generally because a property was set) ` +
1070
+ `after an update completed, causing a new update to be scheduled. ` +
1071
+ `This is inefficient and should be avoided unless the next update ` +
1072
+ `can only be scheduled as a side effect of the previous update.`);
1073
+ }
1074
+ }
1075
+ __markUpdated() {
1076
+ this._$changedProperties = new Map();
1077
+ this.isUpdatePending = false;
1078
+ }
1079
+ /**
1080
+ * Returns a Promise that resolves when the element has completed updating.
1081
+ * The Promise value is a boolean that is `true` if the element completed the
1082
+ * update without triggering another update. The Promise result is `false` if
1083
+ * a property was set inside `updated()`. If the Promise is rejected, an
1084
+ * exception was thrown during the update.
1085
+ *
1086
+ * To await additional asynchronous work, override the `getUpdateComplete`
1087
+ * method. For example, it is sometimes useful to await a rendered element
1088
+ * before fulfilling this Promise. To do this, first await
1089
+ * `super.getUpdateComplete()`, then any subsequent state.
1090
+ *
1091
+ * @return A promise of a boolean that resolves to true if the update completed
1092
+ * without triggering another update.
1093
+ * @category updates
1094
+ */
1095
+ get updateComplete() {
1096
+ return this.getUpdateComplete();
1097
+ }
1098
+ /**
1099
+ * Override point for the `updateComplete` promise.
1100
+ *
1101
+ * It is not safe to override the `updateComplete` getter directly due to a
1102
+ * limitation in TypeScript which means it is not possible to call a
1103
+ * superclass getter (e.g. `super.updateComplete.then(...)`) when the target
1104
+ * language is ES5 (https://github.com/microsoft/TypeScript/issues/338).
1105
+ * This method should be overridden instead. For example:
1106
+ *
1107
+ * ```ts
1108
+ * class MyElement extends LitElement {
1109
+ * override async getUpdateComplete() {
1110
+ * const result = await super.getUpdateComplete();
1111
+ * await this._myChild.updateComplete;
1112
+ * return result;
1113
+ * }
1114
+ * }
1115
+ * ```
1116
+ *
1117
+ * @return A promise of a boolean that resolves to true if the update completed
1118
+ * without triggering another update.
1119
+ * @category updates
1120
+ */
1121
+ getUpdateComplete() {
1122
+ return this.__updatePromise;
1123
+ }
1124
+ /**
1125
+ * Controls whether or not `update()` should be called when the element requests
1126
+ * an update. By default, this method always returns `true`, but this can be
1127
+ * customized to control when to update.
1128
+ *
1129
+ * @param _changedProperties Map of changed properties with old values
1130
+ * @category updates
1131
+ */
1132
+ shouldUpdate(_changedProperties) {
1133
+ return true;
1134
+ }
1135
+ /**
1136
+ * Updates the element. This method reflects property values to attributes.
1137
+ * It can be overridden to render and keep updated element DOM.
1138
+ * Setting properties inside this method will *not* trigger
1139
+ * another update.
1140
+ *
1141
+ * @param _changedProperties Map of changed properties with old values
1142
+ * @category updates
1143
+ */
1144
+ update(_changedProperties) {
1145
+ // The forEach() expression will only run when __reflectingProperties is
1146
+ // defined, and it returns undefined, setting __reflectingProperties to
1147
+ // undefined
1148
+ this.__reflectingProperties &&= this.__reflectingProperties.forEach((p) => this.__propertyToAttribute(p, this[p]));
1149
+ this.__markUpdated();
1150
+ }
1151
+ /**
1152
+ * Invoked whenever the element is updated. Implement to perform
1153
+ * post-updating tasks via DOM APIs, for example, focusing an element.
1154
+ *
1155
+ * Setting properties inside this method will trigger the element to update
1156
+ * again after this update cycle completes.
1157
+ *
1158
+ * @param _changedProperties Map of changed properties with old values
1159
+ * @category updates
1160
+ */
1161
+ updated(_changedProperties) { }
1162
+ /**
1163
+ * Invoked when the element is first updated. Implement to perform one time
1164
+ * work on the element after update.
1165
+ *
1166
+ * ```ts
1167
+ * firstUpdated() {
1168
+ * this.renderRoot.getElementById('my-text-area').focus();
1169
+ * }
1170
+ * ```
1171
+ *
1172
+ * Setting properties inside this method will trigger the element to update
1173
+ * again after this update cycle completes.
1174
+ *
1175
+ * @param _changedProperties Map of changed properties with old values
1176
+ * @category updates
1177
+ */
1178
+ firstUpdated(_changedProperties) { }
1179
+ }
1180
+ /**
1181
+ * Memoized list of all element styles.
1182
+ * Created lazily on user subclasses when finalizing the class.
1183
+ * @nocollapse
1184
+ * @category styles
1185
+ */
1186
+ ReactiveElement.elementStyles = [];
1187
+ /**
1188
+ * Options used when calling `attachShadow`. Set this property to customize
1189
+ * the options for the shadowRoot; for example, to create a closed
1190
+ * shadowRoot: `{mode: 'closed'}`.
1191
+ *
1192
+ * Note, these options are used in `createRenderRoot`. If this method
1193
+ * is customized, options should be respected if possible.
1194
+ * @nocollapse
1195
+ * @category rendering
1196
+ */
1197
+ ReactiveElement.shadowRootOptions = { mode: 'open' };
1198
+ // Assigned here to work around a jscompiler bug with static fields
1199
+ // when compiling to ES5.
1200
+ // https://github.com/google/closure-compiler/issues/3177
1201
+ ReactiveElement[JSCompiler_renameProperty$1('elementProperties')] = new Map();
1202
+ ReactiveElement[JSCompiler_renameProperty$1('finalized')] = new Map();
1203
+ // Apply polyfills if available
1204
+ polyfillSupport$2?.({ ReactiveElement });
1205
+ // Dev mode warnings...
1206
+ {
1207
+ // Default warning set.
1208
+ ReactiveElement.enabledWarnings = [
1209
+ 'change-in-update',
1210
+ 'async-perform-update',
1211
+ ];
1212
+ const ensureOwnWarnings = function (ctor) {
1213
+ if (!ctor.hasOwnProperty(JSCompiler_renameProperty$1('enabledWarnings'))) {
1214
+ ctor.enabledWarnings = ctor.enabledWarnings.slice();
1215
+ }
1216
+ };
1217
+ ReactiveElement.enableWarning = function (warning) {
1218
+ ensureOwnWarnings(this);
1219
+ if (!this.enabledWarnings.includes(warning)) {
1220
+ this.enabledWarnings.push(warning);
1221
+ }
1222
+ };
1223
+ ReactiveElement.disableWarning = function (warning) {
1224
+ ensureOwnWarnings(this);
1225
+ const i = this.enabledWarnings.indexOf(warning);
1226
+ if (i >= 0) {
1227
+ this.enabledWarnings.splice(i, 1);
1228
+ }
1229
+ };
1230
+ }
1231
+ // IMPORTANT: do not change the property name or the assignment expression.
1232
+ // This line will be used in regexes to search for ReactiveElement usage.
1233
+ (global$2.reactiveElementVersions ??= []).push('2.1.2');
1234
+ if (global$2.reactiveElementVersions.length > 1) {
1235
+ queueMicrotask(() => {
1236
+ issueWarning$2('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
1237
+ `is not recommended.`);
1238
+ });
1239
+ }
1240
+
1241
+ /**
1242
+ * @license
1243
+ * Copyright 2017 Google LLC
1244
+ * SPDX-License-Identifier: BSD-3-Clause
1245
+ */
1246
+ // Allows minifiers to rename references to globalThis
1247
+ const global$1 = globalThis;
1248
+ /**
1249
+ * Useful for visualizing and logging insights into what the Lit template system is doing.
1250
+ *
1251
+ * Compiled out of prod mode builds.
1252
+ */
1253
+ const debugLogEvent = (event) => {
1254
+ const shouldEmit = global$1
1255
+ .emitLitDebugLogEvents;
1256
+ if (!shouldEmit) {
1257
+ return;
1258
+ }
1259
+ global$1.dispatchEvent(new CustomEvent('lit-debug', {
1260
+ detail: event,
1261
+ }));
1262
+ }
1263
+ ;
1264
+ // Used for connecting beginRender and endRender events when there are nested
1265
+ // renders when errors are thrown preventing an endRender event from being
1266
+ // called.
1267
+ let debugLogRenderId = 0;
1268
+ let issueWarning$1;
1269
+ {
1270
+ global$1.litIssuedWarnings ??= new Set();
1271
+ /**
1272
+ * Issue a warning if we haven't already, based either on `code` or `warning`.
1273
+ * Warnings are disabled automatically only by `warning`; disabling via `code`
1274
+ * can be done by users.
1275
+ */
1276
+ issueWarning$1 = (code, warning) => {
1277
+ warning += code
1278
+ ? ` See https://lit.dev/msg/${code} for more information.`
1279
+ : '';
1280
+ if (!global$1.litIssuedWarnings.has(warning) &&
1281
+ !global$1.litIssuedWarnings.has(code)) {
1282
+ console.warn(warning);
1283
+ global$1.litIssuedWarnings.add(warning);
1284
+ }
1285
+ };
1286
+ queueMicrotask(() => {
1287
+ issueWarning$1('dev-mode', `Lit is in dev mode. Not recommended for production!`);
1288
+ });
1289
+ }
1290
+ const wrap = global$1.ShadyDOM?.inUse &&
1291
+ global$1.ShadyDOM?.noPatch === true
1292
+ ? global$1.ShadyDOM.wrap
1293
+ : (node) => node;
1294
+ const trustedTypes = global$1.trustedTypes;
1295
+ /**
1296
+ * Our TrustedTypePolicy for HTML which is declared using the html template
1297
+ * tag function.
1298
+ *
1299
+ * That HTML is a developer-authored constant, and is parsed with innerHTML
1300
+ * before any untrusted expressions have been mixed in. Therefor it is
1301
+ * considered safe by construction.
1302
+ */
1303
+ const policy = trustedTypes
1304
+ ? trustedTypes.createPolicy('lit-html', {
1305
+ createHTML: (s) => s,
1306
+ })
1307
+ : undefined;
1308
+ const identityFunction = (value) => value;
1309
+ const noopSanitizer = (_node, _name, _type) => identityFunction;
1310
+ /** Sets the global sanitizer factory. */
1311
+ const setSanitizer = (newSanitizer) => {
1312
+ if (sanitizerFactoryInternal !== noopSanitizer) {
1313
+ throw new Error(`Attempted to overwrite existing lit-html security policy.` +
1314
+ ` setSanitizeDOMValueFactory should be called at most once.`);
1315
+ }
1316
+ sanitizerFactoryInternal = newSanitizer;
1317
+ };
1318
+ /**
1319
+ * Only used in internal tests, not a part of the public API.
1320
+ */
1321
+ const _testOnlyClearSanitizerFactoryDoNotCallOrElse = () => {
1322
+ sanitizerFactoryInternal = noopSanitizer;
1323
+ };
1324
+ const createSanitizer = (node, name, type) => {
1325
+ return sanitizerFactoryInternal(node, name, type);
1326
+ };
1327
+ // Added to an attribute name to mark the attribute as bound so we can find
1328
+ // it easily.
1329
+ const boundAttributeSuffix = '$lit$';
1330
+ // This marker is used in many syntactic positions in HTML, so it must be
1331
+ // a valid element name and attribute name. We don't support dynamic names (yet)
1332
+ // but this at least ensures that the parse tree is closer to the template
1333
+ // intention.
1334
+ const marker = `lit$${Math.random().toFixed(9).slice(2)}$`;
1335
+ // String used to tell if a comment is a marker comment
1336
+ const markerMatch = '?' + marker;
1337
+ // Text used to insert a comment marker node. We use processing instruction
1338
+ // syntax because it's slightly smaller, but parses as a comment node.
1339
+ const nodeMarker = `<${markerMatch}>`;
1340
+ const d = document;
1341
+ // Creates a dynamic marker. We never have to search for these in the DOM.
1342
+ const createMarker = () => d.createComment('');
1343
+ const isPrimitive = (value) => value === null || (typeof value != 'object' && typeof value != 'function');
1344
+ const isArray = Array.isArray;
1345
+ const isIterable = (value) => isArray(value) ||
1346
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
1347
+ typeof value?.[Symbol.iterator] === 'function';
1348
+ const SPACE_CHAR = `[ \t\n\f\r]`;
1349
+ const ATTR_VALUE_CHAR = `[^ \t\n\f\r"'\`<>=]`;
1350
+ const NAME_CHAR = `[^\\s"'>=/]`;
1351
+ // These regexes represent the five parsing states that we care about in the
1352
+ // Template's HTML scanner. They match the *end* of the state they're named
1353
+ // after.
1354
+ // Depending on the match, we transition to a new state. If there's no match,
1355
+ // we stay in the same state.
1356
+ // Note that the regexes are stateful. We utilize lastIndex and sync it
1357
+ // across the multiple regexes used. In addition to the five regexes below
1358
+ // we also dynamically create a regex to find the matching end tags for raw
1359
+ // text elements.
1360
+ /**
1361
+ * End of text is: `<` followed by:
1362
+ * (comment start) or (tag) or (dynamic tag binding)
1363
+ */
1364
+ const textEndRegex = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
1365
+ const COMMENT_START = 1;
1366
+ const TAG_NAME = 2;
1367
+ const DYNAMIC_TAG_NAME = 3;
1368
+ const commentEndRegex = /-->/g;
1369
+ /**
1370
+ * Comments not started with <!--, like </{, can be ended by a single `>`
1371
+ */
1372
+ const comment2EndRegex = />/g;
1373
+ /**
1374
+ * The tagEnd regex matches the end of the "inside an opening" tag syntax
1375
+ * position. It either matches a `>`, an attribute-like sequence, or the end
1376
+ * of the string after a space (attribute-name position ending).
1377
+ *
1378
+ * See attributes in the HTML spec:
1379
+ * https://www.w3.org/TR/html5/syntax.html#elements-attributes
1380
+ *
1381
+ * " \t\n\f\r" are HTML space characters:
1382
+ * https://infra.spec.whatwg.org/#ascii-whitespace
1383
+ *
1384
+ * So an attribute is:
1385
+ * * The name: any character except a whitespace character, ("), ('), ">",
1386
+ * "=", or "/". Note: this is different from the HTML spec which also excludes control characters.
1387
+ * * Followed by zero or more space characters
1388
+ * * Followed by "="
1389
+ * * Followed by zero or more space characters
1390
+ * * Followed by:
1391
+ * * Any character except space, ('), ("), "<", ">", "=", (`), or
1392
+ * * (") then any non-("), or
1393
+ * * (') then any non-(')
1394
+ */
1395
+ const tagEndRegex = new RegExp(`>|${SPACE_CHAR}(?:(${NAME_CHAR}+)(${SPACE_CHAR}*=${SPACE_CHAR}*(?:${ATTR_VALUE_CHAR}|("|')|))|$)`, 'g');
1396
+ const ENTIRE_MATCH = 0;
1397
+ const ATTRIBUTE_NAME = 1;
1398
+ const SPACES_AND_EQUALS = 2;
1399
+ const QUOTE_CHAR = 3;
1400
+ const singleQuoteAttrEndRegex = /'/g;
1401
+ const doubleQuoteAttrEndRegex = /"/g;
1402
+ /**
1403
+ * Matches the raw text elements.
1404
+ *
1405
+ * Comments are not parsed within raw text elements, so we need to search their
1406
+ * text content for marker strings.
1407
+ */
1408
+ const rawTextElement = /^(?:script|style|textarea|title)$/i;
1409
+ /** TemplateResult types */
1410
+ const HTML_RESULT = 1;
1411
+ const SVG_RESULT = 2;
1412
+ const MATHML_RESULT = 3;
1413
+ // TemplatePart types
1414
+ // IMPORTANT: these must match the values in PartType
1415
+ const ATTRIBUTE_PART = 1;
1416
+ const CHILD_PART = 2;
1417
+ const PROPERTY_PART = 3;
1418
+ const BOOLEAN_ATTRIBUTE_PART = 4;
1419
+ const EVENT_PART = 5;
1420
+ const ELEMENT_PART = 6;
1421
+ const COMMENT_PART = 7;
1422
+ /**
1423
+ * Generates a template literal tag function that returns a TemplateResult with
1424
+ * the given result type.
1425
+ */
1426
+ const tag = (type) => (strings, ...values) => {
1427
+ // Warn against templates octal escape sequences
1428
+ // We do this here rather than in render so that the warning is closer to the
1429
+ // template definition.
1430
+ if (strings.some((s) => s === undefined)) {
1431
+ console.warn('Some template strings are undefined.\n' +
1432
+ 'This is probably caused by illegal octal escape sequences.');
1433
+ }
1434
+ {
1435
+ // Import static-html.js results in a circular dependency which g3 doesn't
1436
+ // handle. Instead we know that static values must have the field
1437
+ // `_$litStatic$`.
1438
+ if (values.some((val) => val?.['_$litStatic$'])) {
1439
+ issueWarning$1('', `Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.\n` +
1440
+ `Please use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions`);
1441
+ }
1442
+ }
1443
+ return {
1444
+ // This property needs to remain unminified.
1445
+ ['_$litType$']: type,
1446
+ strings,
1447
+ values,
1448
+ };
1449
+ };
1450
+ /**
1451
+ * Interprets a template literal as an HTML template that can efficiently
1452
+ * render to and update a container.
1453
+ *
1454
+ * ```ts
1455
+ * const header = (title: string) => html`<h1>${title}</h1>`;
1456
+ * ```
1457
+ *
1458
+ * The `html` tag returns a description of the DOM to render as a value. It is
1459
+ * lazy, meaning no work is done until the template is rendered. When rendering,
1460
+ * if a template comes from the same expression as a previously rendered result,
1461
+ * it's efficiently updated instead of replaced.
1462
+ */
1463
+ const html = tag(HTML_RESULT);
1464
+ /**
1465
+ * A sentinel value that signals that a value was handled by a directive and
1466
+ * should not be written to the DOM.
1467
+ */
1468
+ const noChange = Symbol.for('lit-noChange');
1469
+ /**
1470
+ * A sentinel value that signals a ChildPart to fully clear its content.
1471
+ *
1472
+ * ```ts
1473
+ * const button = html`${
1474
+ * user.isAdmin
1475
+ * ? html`<button>DELETE</button>`
1476
+ * : nothing
1477
+ * }`;
1478
+ * ```
1479
+ *
1480
+ * Prefer using `nothing` over other falsy values as it provides a consistent
1481
+ * behavior between various expression binding contexts.
1482
+ *
1483
+ * In child expressions, `undefined`, `null`, `''`, and `nothing` all behave the
1484
+ * same and render no nodes. In attribute expressions, `nothing` _removes_ the
1485
+ * attribute, while `undefined` and `null` will render an empty string. In
1486
+ * property expressions `nothing` becomes `undefined`.
1487
+ */
1488
+ const nothing = Symbol.for('lit-nothing');
1489
+ /**
1490
+ * The cache of prepared templates, keyed by the tagged TemplateStringsArray
1491
+ * and _not_ accounting for the specific template tag used. This means that
1492
+ * template tags cannot be dynamic - they must statically be one of html, svg,
1493
+ * or attr. This restriction simplifies the cache lookup, which is on the hot
1494
+ * path for rendering.
1495
+ */
1496
+ const templateCache = new WeakMap();
1497
+ const walker = d.createTreeWalker(d, 129 /* NodeFilter.SHOW_{ELEMENT|COMMENT} */);
1498
+ let sanitizerFactoryInternal = noopSanitizer;
1499
+ function trustFromTemplateString(tsa, stringFromTSA) {
1500
+ // A security check to prevent spoofing of Lit template results.
1501
+ // In the future, we may be able to replace this with Array.isTemplateObject,
1502
+ // though we might need to make that check inside of the html and svg
1503
+ // functions, because precompiled templates don't come in as
1504
+ // TemplateStringArray objects.
1505
+ if (!isArray(tsa) || !tsa.hasOwnProperty('raw')) {
1506
+ let message = 'invalid template strings array';
1507
+ {
1508
+ message = `
1509
+ Internal Error: expected template strings to be an array
1510
+ with a 'raw' field. Faking a template strings array by
1511
+ calling html or svg like an ordinary function is effectively
1512
+ the same as calling unsafeHtml and can lead to major security
1513
+ issues, e.g. opening your code up to XSS attacks.
1514
+ If you're using the html or svg tagged template functions normally
1515
+ and still seeing this error, please file a bug at
1516
+ https://github.com/lit/lit/issues/new?template=bug_report.md
1517
+ and include information about your build tooling, if any.
1518
+ `
1519
+ .trim()
1520
+ .replace(/\n */g, '\n');
1521
+ }
1522
+ throw new Error(message);
1523
+ }
1524
+ return policy !== undefined
1525
+ ? policy.createHTML(stringFromTSA)
1526
+ : stringFromTSA;
1527
+ }
1528
+ /**
1529
+ * Returns an HTML string for the given TemplateStringsArray and result type
1530
+ * (HTML or SVG), along with the case-sensitive bound attribute names in
1531
+ * template order. The HTML contains comment markers denoting the `ChildPart`s
1532
+ * and suffixes on bound attributes denoting the `AttributeParts`.
1533
+ *
1534
+ * @param strings template strings array
1535
+ * @param type HTML or SVG
1536
+ * @return Array containing `[html, attrNames]` (array returned for terseness,
1537
+ * to avoid object fields since this code is shared with non-minified SSR
1538
+ * code)
1539
+ */
1540
+ const getTemplateHtml = (strings, type) => {
1541
+ // Insert makers into the template HTML to represent the position of
1542
+ // bindings. The following code scans the template strings to determine the
1543
+ // syntactic position of the bindings. They can be in text position, where
1544
+ // we insert an HTML comment, attribute value position, where we insert a
1545
+ // sentinel string and re-write the attribute name, or inside a tag where
1546
+ // we insert the sentinel string.
1547
+ const l = strings.length - 1;
1548
+ // Stores the case-sensitive bound attribute names in the order of their
1549
+ // parts. ElementParts are also reflected in this array as undefined
1550
+ // rather than a string, to disambiguate from attribute bindings.
1551
+ const attrNames = [];
1552
+ let html = type === SVG_RESULT ? '<svg>' : type === MATHML_RESULT ? '<math>' : '';
1553
+ // When we're inside a raw text tag (not it's text content), the regex
1554
+ // will still be tagRegex so we can find attributes, but will switch to
1555
+ // this regex when the tag ends.
1556
+ let rawTextEndRegex;
1557
+ // The current parsing state, represented as a reference to one of the
1558
+ // regexes
1559
+ let regex = textEndRegex;
1560
+ for (let i = 0; i < l; i++) {
1561
+ const s = strings[i];
1562
+ // The index of the end of the last attribute name. When this is
1563
+ // positive at end of a string, it means we're in an attribute value
1564
+ // position and need to rewrite the attribute name.
1565
+ // We also use a special value of -2 to indicate that we encountered
1566
+ // the end of a string in attribute name position.
1567
+ let attrNameEndIndex = -1;
1568
+ let attrName;
1569
+ let lastIndex = 0;
1570
+ let match;
1571
+ // The conditions in this loop handle the current parse state, and the
1572
+ // assignments to the `regex` variable are the state transitions.
1573
+ while (lastIndex < s.length) {
1574
+ // Make sure we start searching from where we previously left off
1575
+ regex.lastIndex = lastIndex;
1576
+ match = regex.exec(s);
1577
+ if (match === null) {
1578
+ break;
1579
+ }
1580
+ lastIndex = regex.lastIndex;
1581
+ if (regex === textEndRegex) {
1582
+ if (match[COMMENT_START] === '!--') {
1583
+ regex = commentEndRegex;
1584
+ }
1585
+ else if (match[COMMENT_START] !== undefined) {
1586
+ // We started a weird comment, like </{
1587
+ regex = comment2EndRegex;
1588
+ }
1589
+ else if (match[TAG_NAME] !== undefined) {
1590
+ if (rawTextElement.test(match[TAG_NAME])) {
1591
+ // Record if we encounter a raw-text element. We'll switch to
1592
+ // this regex at the end of the tag.
1593
+ rawTextEndRegex = new RegExp(`</${match[TAG_NAME]}`, 'g');
1594
+ }
1595
+ regex = tagEndRegex;
1596
+ }
1597
+ else if (match[DYNAMIC_TAG_NAME] !== undefined) {
1598
+ {
1599
+ throw new Error('Bindings in tag names are not supported. Please use static templates instead. ' +
1600
+ 'See https://lit.dev/docs/templates/expressions/#static-expressions');
1601
+ }
1602
+ }
1603
+ }
1604
+ else if (regex === tagEndRegex) {
1605
+ if (match[ENTIRE_MATCH] === '>') {
1606
+ // End of a tag. If we had started a raw-text element, use that
1607
+ // regex
1608
+ regex = rawTextEndRegex ?? textEndRegex;
1609
+ // We may be ending an unquoted attribute value, so make sure we
1610
+ // clear any pending attrNameEndIndex
1611
+ attrNameEndIndex = -1;
1612
+ }
1613
+ else if (match[ATTRIBUTE_NAME] === undefined) {
1614
+ // Attribute name position
1615
+ attrNameEndIndex = -2;
1616
+ }
1617
+ else {
1618
+ attrNameEndIndex = regex.lastIndex - match[SPACES_AND_EQUALS].length;
1619
+ attrName = match[ATTRIBUTE_NAME];
1620
+ regex =
1621
+ match[QUOTE_CHAR] === undefined
1622
+ ? tagEndRegex
1623
+ : match[QUOTE_CHAR] === '"'
1624
+ ? doubleQuoteAttrEndRegex
1625
+ : singleQuoteAttrEndRegex;
1626
+ }
1627
+ }
1628
+ else if (regex === doubleQuoteAttrEndRegex ||
1629
+ regex === singleQuoteAttrEndRegex) {
1630
+ regex = tagEndRegex;
1631
+ }
1632
+ else if (regex === commentEndRegex || regex === comment2EndRegex) {
1633
+ regex = textEndRegex;
1634
+ }
1635
+ else {
1636
+ // Not one of the five state regexes, so it must be the dynamically
1637
+ // created raw text regex and we're at the close of that element.
1638
+ regex = tagEndRegex;
1639
+ rawTextEndRegex = undefined;
1640
+ }
1641
+ }
1642
+ {
1643
+ // If we have a attrNameEndIndex, which indicates that we should
1644
+ // rewrite the attribute name, assert that we're in a valid attribute
1645
+ // position - either in a tag, or a quoted attribute value.
1646
+ console.assert(attrNameEndIndex === -1 ||
1647
+ regex === tagEndRegex ||
1648
+ regex === singleQuoteAttrEndRegex ||
1649
+ regex === doubleQuoteAttrEndRegex, 'unexpected parse state B');
1650
+ }
1651
+ // We have four cases:
1652
+ // 1. We're in text position, and not in a raw text element
1653
+ // (regex === textEndRegex): insert a comment marker.
1654
+ // 2. We have a non-negative attrNameEndIndex which means we need to
1655
+ // rewrite the attribute name to add a bound attribute suffix.
1656
+ // 3. We're at the non-first binding in a multi-binding attribute, use a
1657
+ // plain marker.
1658
+ // 4. We're somewhere else inside the tag. If we're in attribute name
1659
+ // position (attrNameEndIndex === -2), add a sequential suffix to
1660
+ // generate a unique attribute name.
1661
+ // Detect a binding next to self-closing tag end and insert a space to
1662
+ // separate the marker from the tag end:
1663
+ const end = regex === tagEndRegex && strings[i + 1].startsWith('/>') ? ' ' : '';
1664
+ html +=
1665
+ regex === textEndRegex
1666
+ ? s + nodeMarker
1667
+ : attrNameEndIndex >= 0
1668
+ ? (attrNames.push(attrName),
1669
+ s.slice(0, attrNameEndIndex) +
1670
+ boundAttributeSuffix +
1671
+ s.slice(attrNameEndIndex)) +
1672
+ marker +
1673
+ end
1674
+ : s + marker + (attrNameEndIndex === -2 ? i : end);
1675
+ }
1676
+ const htmlResult = html +
1677
+ (strings[l] || '<?>') +
1678
+ (type === SVG_RESULT ? '</svg>' : type === MATHML_RESULT ? '</math>' : '');
1679
+ // Returned as an array for terseness
1680
+ return [trustFromTemplateString(strings, htmlResult), attrNames];
1681
+ };
1682
+ class Template {
1683
+ constructor(
1684
+ // This property needs to remain unminified.
1685
+ { strings, ['_$litType$']: type }, options) {
1686
+ this.parts = [];
1687
+ let node;
1688
+ let nodeIndex = 0;
1689
+ let attrNameIndex = 0;
1690
+ const partCount = strings.length - 1;
1691
+ const parts = this.parts;
1692
+ // Create template element
1693
+ const [html, attrNames] = getTemplateHtml(strings, type);
1694
+ this.el = Template.createElement(html, options);
1695
+ walker.currentNode = this.el.content;
1696
+ // Re-parent SVG or MathML nodes into template root
1697
+ if (type === SVG_RESULT || type === MATHML_RESULT) {
1698
+ const wrapper = this.el.content.firstChild;
1699
+ wrapper.replaceWith(...wrapper.childNodes);
1700
+ }
1701
+ // Walk the template to find binding markers and create TemplateParts
1702
+ while ((node = walker.nextNode()) !== null && parts.length < partCount) {
1703
+ if (node.nodeType === 1) {
1704
+ {
1705
+ const tag = node.localName;
1706
+ // Warn if `textarea` includes an expression and throw if `template`
1707
+ // does since these are not supported. We do this by checking
1708
+ // innerHTML for anything that looks like a marker. This catches
1709
+ // cases like bindings in textarea there markers turn into text nodes.
1710
+ if (/^(?:textarea|template)$/i.test(tag) &&
1711
+ node.innerHTML.includes(marker)) {
1712
+ const m = `Expressions are not supported inside \`${tag}\` ` +
1713
+ `elements. See https://lit.dev/msg/expression-in-${tag} for more ` +
1714
+ `information.`;
1715
+ if (tag === 'template') {
1716
+ throw new Error(m);
1717
+ }
1718
+ else
1719
+ issueWarning$1('', m);
1720
+ }
1721
+ }
1722
+ // TODO (justinfagnani): for attempted dynamic tag names, we don't
1723
+ // increment the bindingIndex, and it'll be off by 1 in the element
1724
+ // and off by two after it.
1725
+ if (node.hasAttributes()) {
1726
+ for (const name of node.getAttributeNames()) {
1727
+ if (name.endsWith(boundAttributeSuffix)) {
1728
+ const realName = attrNames[attrNameIndex++];
1729
+ const value = node.getAttribute(name);
1730
+ const statics = value.split(marker);
1731
+ const m = /([.?@])?(.*)/.exec(realName);
1732
+ parts.push({
1733
+ type: ATTRIBUTE_PART,
1734
+ index: nodeIndex,
1735
+ name: m[2],
1736
+ strings: statics,
1737
+ ctor: m[1] === '.'
1738
+ ? PropertyPart
1739
+ : m[1] === '?'
1740
+ ? BooleanAttributePart
1741
+ : m[1] === '@'
1742
+ ? EventPart
1743
+ : AttributePart,
1744
+ });
1745
+ node.removeAttribute(name);
1746
+ }
1747
+ else if (name.startsWith(marker)) {
1748
+ parts.push({
1749
+ type: ELEMENT_PART,
1750
+ index: nodeIndex,
1751
+ });
1752
+ node.removeAttribute(name);
1753
+ }
1754
+ }
1755
+ }
1756
+ // TODO (justinfagnani): benchmark the regex against testing for each
1757
+ // of the 3 raw text element names.
1758
+ if (rawTextElement.test(node.tagName)) {
1759
+ // For raw text elements we need to split the text content on
1760
+ // markers, create a Text node for each segment, and create
1761
+ // a TemplatePart for each marker.
1762
+ const strings = node.textContent.split(marker);
1763
+ const lastIndex = strings.length - 1;
1764
+ if (lastIndex > 0) {
1765
+ node.textContent = trustedTypes
1766
+ ? trustedTypes.emptyScript
1767
+ : '';
1768
+ // Generate a new text node for each literal section
1769
+ // These nodes are also used as the markers for child parts
1770
+ for (let i = 0; i < lastIndex; i++) {
1771
+ node.append(strings[i], createMarker());
1772
+ // Walk past the marker node we just added
1773
+ walker.nextNode();
1774
+ parts.push({ type: CHILD_PART, index: ++nodeIndex });
1775
+ }
1776
+ // Note because this marker is added after the walker's current
1777
+ // node, it will be walked to in the outer loop (and ignored), so
1778
+ // we don't need to adjust nodeIndex here
1779
+ node.append(strings[lastIndex], createMarker());
1780
+ }
1781
+ }
1782
+ }
1783
+ else if (node.nodeType === 8) {
1784
+ const data = node.data;
1785
+ if (data === markerMatch) {
1786
+ parts.push({ type: CHILD_PART, index: nodeIndex });
1787
+ }
1788
+ else {
1789
+ let i = -1;
1790
+ while ((i = node.data.indexOf(marker, i + 1)) !== -1) {
1791
+ // Comment node has a binding marker inside, make an inactive part
1792
+ // The binding won't work, but subsequent bindings will
1793
+ parts.push({ type: COMMENT_PART, index: nodeIndex });
1794
+ // Move to the end of the match
1795
+ i += marker.length - 1;
1796
+ }
1797
+ }
1798
+ }
1799
+ nodeIndex++;
1800
+ }
1801
+ {
1802
+ // If there was a duplicate attribute on a tag, then when the tag is
1803
+ // parsed into an element the attribute gets de-duplicated. We can detect
1804
+ // this mismatch if we haven't precisely consumed every attribute name
1805
+ // when preparing the template. This works because `attrNames` is built
1806
+ // from the template string and `attrNameIndex` comes from processing the
1807
+ // resulting DOM.
1808
+ if (attrNames.length !== attrNameIndex) {
1809
+ throw new Error(`Detected duplicate attribute bindings. This occurs if your template ` +
1810
+ `has duplicate attributes on an element tag. For example ` +
1811
+ `"<input ?disabled=\${true} ?disabled=\${false}>" contains a ` +
1812
+ `duplicate "disabled" attribute. The error was detected in ` +
1813
+ `the following template: \n` +
1814
+ '`' +
1815
+ strings.join('${...}') +
1816
+ '`');
1817
+ }
1818
+ }
1819
+ // We could set walker.currentNode to another node here to prevent a memory
1820
+ // leak, but every time we prepare a template, we immediately render it
1821
+ // and re-use the walker in new TemplateInstance._clone().
1822
+ debugLogEvent &&
1823
+ debugLogEvent({
1824
+ kind: 'template prep',
1825
+ template: this,
1826
+ clonableTemplate: this.el,
1827
+ parts: this.parts,
1828
+ strings,
1829
+ });
1830
+ }
1831
+ // Overridden via `litHtmlPolyfillSupport` to provide platform support.
1832
+ /** @nocollapse */
1833
+ static createElement(html, _options) {
1834
+ const el = d.createElement('template');
1835
+ el.innerHTML = html;
1836
+ return el;
1837
+ }
1838
+ }
1839
+ function resolveDirective(part, value, parent = part, attributeIndex) {
1840
+ // Bail early if the value is explicitly noChange. Note, this means any
1841
+ // nested directive is still attached and is not run.
1842
+ if (value === noChange) {
1843
+ return value;
1844
+ }
1845
+ let currentDirective = attributeIndex !== undefined
1846
+ ? parent.__directives?.[attributeIndex]
1847
+ : parent.__directive;
1848
+ const nextDirectiveConstructor = isPrimitive(value)
1849
+ ? undefined
1850
+ : // This property needs to remain unminified.
1851
+ value['_$litDirective$'];
1852
+ if (currentDirective?.constructor !== nextDirectiveConstructor) {
1853
+ // This property needs to remain unminified.
1854
+ currentDirective?.['_$notifyDirectiveConnectionChanged']?.(false);
1855
+ if (nextDirectiveConstructor === undefined) {
1856
+ currentDirective = undefined;
1857
+ }
1858
+ else {
1859
+ currentDirective = new nextDirectiveConstructor(part);
1860
+ currentDirective._$initialize(part, parent, attributeIndex);
1861
+ }
1862
+ if (attributeIndex !== undefined) {
1863
+ (parent.__directives ??= [])[attributeIndex] =
1864
+ currentDirective;
1865
+ }
1866
+ else {
1867
+ parent.__directive = currentDirective;
1868
+ }
1869
+ }
1870
+ if (currentDirective !== undefined) {
1871
+ value = resolveDirective(part, currentDirective._$resolve(part, value.values), currentDirective, attributeIndex);
1872
+ }
1873
+ return value;
1874
+ }
1875
+ /**
1876
+ * An updateable instance of a Template. Holds references to the Parts used to
1877
+ * update the template instance.
1878
+ */
1879
+ class TemplateInstance {
1880
+ constructor(template, parent) {
1881
+ this._$parts = [];
1882
+ /** @internal */
1883
+ this._$disconnectableChildren = undefined;
1884
+ this._$template = template;
1885
+ this._$parent = parent;
1886
+ }
1887
+ // Called by ChildPart parentNode getter
1888
+ get parentNode() {
1889
+ return this._$parent.parentNode;
1890
+ }
1891
+ // See comment in Disconnectable interface for why this is a getter
1892
+ get _$isConnected() {
1893
+ return this._$parent._$isConnected;
1894
+ }
1895
+ // This method is separate from the constructor because we need to return a
1896
+ // DocumentFragment and we don't want to hold onto it with an instance field.
1897
+ _clone(options) {
1898
+ const { el: { content }, parts: parts, } = this._$template;
1899
+ const fragment = (options?.creationScope ?? d).importNode(content, true);
1900
+ walker.currentNode = fragment;
1901
+ let node = walker.nextNode();
1902
+ let nodeIndex = 0;
1903
+ let partIndex = 0;
1904
+ let templatePart = parts[0];
1905
+ while (templatePart !== undefined) {
1906
+ if (nodeIndex === templatePart.index) {
1907
+ let part;
1908
+ if (templatePart.type === CHILD_PART) {
1909
+ part = new ChildPart(node, node.nextSibling, this, options);
1910
+ }
1911
+ else if (templatePart.type === ATTRIBUTE_PART) {
1912
+ part = new templatePart.ctor(node, templatePart.name, templatePart.strings, this, options);
1913
+ }
1914
+ else if (templatePart.type === ELEMENT_PART) {
1915
+ part = new ElementPart(node, this, options);
1916
+ }
1917
+ this._$parts.push(part);
1918
+ templatePart = parts[++partIndex];
1919
+ }
1920
+ if (nodeIndex !== templatePart?.index) {
1921
+ node = walker.nextNode();
1922
+ nodeIndex++;
1923
+ }
1924
+ }
1925
+ // We need to set the currentNode away from the cloned tree so that we
1926
+ // don't hold onto the tree even if the tree is detached and should be
1927
+ // freed.
1928
+ walker.currentNode = d;
1929
+ return fragment;
1930
+ }
1931
+ _update(values) {
1932
+ let i = 0;
1933
+ for (const part of this._$parts) {
1934
+ if (part !== undefined) {
1935
+ debugLogEvent &&
1936
+ debugLogEvent({
1937
+ kind: 'set part',
1938
+ part,
1939
+ value: values[i],
1940
+ valueIndex: i,
1941
+ values,
1942
+ templateInstance: this,
1943
+ });
1944
+ if (part.strings !== undefined) {
1945
+ part._$setValue(values, part, i);
1946
+ // The number of values the part consumes is part.strings.length - 1
1947
+ // since values are in between template spans. We increment i by 1
1948
+ // later in the loop, so increment it by part.strings.length - 2 here
1949
+ i += part.strings.length - 2;
1950
+ }
1951
+ else {
1952
+ part._$setValue(values[i]);
1953
+ }
1954
+ }
1955
+ i++;
1956
+ }
1957
+ }
1958
+ }
1959
+ class ChildPart {
1960
+ // See comment in Disconnectable interface for why this is a getter
1961
+ get _$isConnected() {
1962
+ // ChildParts that are not at the root should always be created with a
1963
+ // parent; only RootChildNode's won't, so they return the local isConnected
1964
+ // state
1965
+ return this._$parent?._$isConnected ?? this.__isConnected;
1966
+ }
1967
+ constructor(startNode, endNode, parent, options) {
1968
+ this.type = CHILD_PART;
1969
+ this._$committedValue = nothing;
1970
+ // The following fields will be patched onto ChildParts when required by
1971
+ // AsyncDirective
1972
+ /** @internal */
1973
+ this._$disconnectableChildren = undefined;
1974
+ this._$startNode = startNode;
1975
+ this._$endNode = endNode;
1976
+ this._$parent = parent;
1977
+ this.options = options;
1978
+ // Note __isConnected is only ever accessed on RootParts (i.e. when there is
1979
+ // no _$parent); the value on a non-root-part is "don't care", but checking
1980
+ // for parent would be more code
1981
+ this.__isConnected = options?.isConnected ?? true;
1982
+ {
1983
+ // Explicitly initialize for consistent class shape.
1984
+ this._textSanitizer = undefined;
1985
+ }
1986
+ }
1987
+ /**
1988
+ * The parent node into which the part renders its content.
1989
+ *
1990
+ * A ChildPart's content consists of a range of adjacent child nodes of
1991
+ * `.parentNode`, possibly bordered by 'marker nodes' (`.startNode` and
1992
+ * `.endNode`).
1993
+ *
1994
+ * - If both `.startNode` and `.endNode` are non-null, then the part's content
1995
+ * consists of all siblings between `.startNode` and `.endNode`, exclusively.
1996
+ *
1997
+ * - If `.startNode` is non-null but `.endNode` is null, then the part's
1998
+ * content consists of all siblings following `.startNode`, up to and
1999
+ * including the last child of `.parentNode`. If `.endNode` is non-null, then
2000
+ * `.startNode` will always be non-null.
2001
+ *
2002
+ * - If both `.endNode` and `.startNode` are null, then the part's content
2003
+ * consists of all child nodes of `.parentNode`.
2004
+ */
2005
+ get parentNode() {
2006
+ let parentNode = wrap(this._$startNode).parentNode;
2007
+ const parent = this._$parent;
2008
+ if (parent !== undefined &&
2009
+ parentNode?.nodeType === 11 /* Node.DOCUMENT_FRAGMENT */) {
2010
+ // If the parentNode is a DocumentFragment, it may be because the DOM is
2011
+ // still in the cloned fragment during initial render; if so, get the real
2012
+ // parentNode the part will be committed into by asking the parent.
2013
+ parentNode = parent.parentNode;
2014
+ }
2015
+ return parentNode;
2016
+ }
2017
+ /**
2018
+ * The part's leading marker node, if any. See `.parentNode` for more
2019
+ * information.
2020
+ */
2021
+ get startNode() {
2022
+ return this._$startNode;
2023
+ }
2024
+ /**
2025
+ * The part's trailing marker node, if any. See `.parentNode` for more
2026
+ * information.
2027
+ */
2028
+ get endNode() {
2029
+ return this._$endNode;
2030
+ }
2031
+ _$setValue(value, directiveParent = this) {
2032
+ if (this.parentNode === null) {
2033
+ throw new Error(`This \`ChildPart\` has no \`parentNode\` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's \`innerHTML\` or \`textContent\` can do this.`);
2034
+ }
2035
+ value = resolveDirective(this, value, directiveParent);
2036
+ if (isPrimitive(value)) {
2037
+ // Non-rendering child values. It's important that these do not render
2038
+ // empty text nodes to avoid issues with preventing default <slot>
2039
+ // fallback content.
2040
+ if (value === nothing || value == null || value === '') {
2041
+ if (this._$committedValue !== nothing) {
2042
+ debugLogEvent &&
2043
+ debugLogEvent({
2044
+ kind: 'commit nothing to child',
2045
+ start: this._$startNode,
2046
+ end: this._$endNode,
2047
+ parent: this._$parent,
2048
+ options: this.options,
2049
+ });
2050
+ this._$clear();
2051
+ }
2052
+ this._$committedValue = nothing;
2053
+ }
2054
+ else if (value !== this._$committedValue && value !== noChange) {
2055
+ this._commitText(value);
2056
+ }
2057
+ // This property needs to remain unminified.
2058
+ }
2059
+ else if (value['_$litType$'] !== undefined) {
2060
+ this._commitTemplateResult(value);
2061
+ }
2062
+ else if (value.nodeType !== undefined) {
2063
+ if (this.options?.host === value) {
2064
+ this._commitText(`[probable mistake: rendered a template's host in itself ` +
2065
+ `(commonly caused by writing \${this} in a template]`);
2066
+ console.warn(`Attempted to render the template host`, value, `inside itself. This is almost always a mistake, and in dev mode `, `we render some warning text. In production however, we'll `, `render it, which will usually result in an error, and sometimes `, `in the element disappearing from the DOM.`);
2067
+ return;
2068
+ }
2069
+ this._commitNode(value);
2070
+ }
2071
+ else if (isIterable(value)) {
2072
+ this._commitIterable(value);
2073
+ }
2074
+ else {
2075
+ // Fallback, will render the string representation
2076
+ this._commitText(value);
2077
+ }
2078
+ }
2079
+ _insert(node) {
2080
+ return wrap(wrap(this._$startNode).parentNode).insertBefore(node, this._$endNode);
2081
+ }
2082
+ _commitNode(value) {
2083
+ if (this._$committedValue !== value) {
2084
+ this._$clear();
2085
+ if (sanitizerFactoryInternal !== noopSanitizer) {
2086
+ const parentNodeName = this._$startNode.parentNode?.nodeName;
2087
+ if (parentNodeName === 'STYLE' || parentNodeName === 'SCRIPT') {
2088
+ let message = 'Forbidden';
2089
+ {
2090
+ if (parentNodeName === 'STYLE') {
2091
+ message =
2092
+ `Lit does not support binding inside style nodes. ` +
2093
+ `This is a security risk, as style injection attacks can ` +
2094
+ `exfiltrate data and spoof UIs. ` +
2095
+ `Consider instead using css\`...\` literals ` +
2096
+ `to compose styles, and do dynamic styling with ` +
2097
+ `css custom properties, ::parts, <slot>s, ` +
2098
+ `and by mutating the DOM rather than stylesheets.`;
2099
+ }
2100
+ else {
2101
+ message =
2102
+ `Lit does not support binding inside script nodes. ` +
2103
+ `This is a security risk, as it could allow arbitrary ` +
2104
+ `code execution.`;
2105
+ }
2106
+ }
2107
+ throw new Error(message);
2108
+ }
2109
+ }
2110
+ debugLogEvent &&
2111
+ debugLogEvent({
2112
+ kind: 'commit node',
2113
+ start: this._$startNode,
2114
+ parent: this._$parent,
2115
+ value: value,
2116
+ options: this.options,
2117
+ });
2118
+ this._$committedValue = this._insert(value);
2119
+ }
2120
+ }
2121
+ _commitText(value) {
2122
+ // If the committed value is a primitive it means we called _commitText on
2123
+ // the previous render, and we know that this._$startNode.nextSibling is a
2124
+ // Text node. We can now just replace the text content (.data) of the node.
2125
+ if (this._$committedValue !== nothing &&
2126
+ isPrimitive(this._$committedValue)) {
2127
+ const node = wrap(this._$startNode).nextSibling;
2128
+ {
2129
+ if (this._textSanitizer === undefined) {
2130
+ this._textSanitizer = createSanitizer(node, 'data', 'property');
2131
+ }
2132
+ value = this._textSanitizer(value);
2133
+ }
2134
+ debugLogEvent &&
2135
+ debugLogEvent({
2136
+ kind: 'commit text',
2137
+ node,
2138
+ value,
2139
+ options: this.options,
2140
+ });
2141
+ node.data = value;
2142
+ }
2143
+ else {
2144
+ {
2145
+ const textNode = d.createTextNode('');
2146
+ this._commitNode(textNode);
2147
+ // When setting text content, for security purposes it matters a lot
2148
+ // what the parent is. For example, <style> and <script> need to be
2149
+ // handled with care, while <span> does not. So first we need to put a
2150
+ // text node into the document, then we can sanitize its content.
2151
+ if (this._textSanitizer === undefined) {
2152
+ this._textSanitizer = createSanitizer(textNode, 'data', 'property');
2153
+ }
2154
+ value = this._textSanitizer(value);
2155
+ debugLogEvent &&
2156
+ debugLogEvent({
2157
+ kind: 'commit text',
2158
+ node: textNode,
2159
+ value,
2160
+ options: this.options,
2161
+ });
2162
+ textNode.data = value;
2163
+ }
2164
+ }
2165
+ this._$committedValue = value;
2166
+ }
2167
+ _commitTemplateResult(result) {
2168
+ // This property needs to remain unminified.
2169
+ const { values, ['_$litType$']: type } = result;
2170
+ // If $litType$ is a number, result is a plain TemplateResult and we get
2171
+ // the template from the template cache. If not, result is a
2172
+ // CompiledTemplateResult and _$litType$ is a CompiledTemplate and we need
2173
+ // to create the <template> element the first time we see it.
2174
+ const template = typeof type === 'number'
2175
+ ? this._$getTemplate(result)
2176
+ : (type.el === undefined &&
2177
+ (type.el = Template.createElement(trustFromTemplateString(type.h, type.h[0]), this.options)),
2178
+ type);
2179
+ if (this._$committedValue?._$template === template) {
2180
+ debugLogEvent &&
2181
+ debugLogEvent({
2182
+ kind: 'template updating',
2183
+ template,
2184
+ instance: this._$committedValue,
2185
+ parts: this._$committedValue._$parts,
2186
+ options: this.options,
2187
+ values,
2188
+ });
2189
+ this._$committedValue._update(values);
2190
+ }
2191
+ else {
2192
+ const instance = new TemplateInstance(template, this);
2193
+ const fragment = instance._clone(this.options);
2194
+ debugLogEvent &&
2195
+ debugLogEvent({
2196
+ kind: 'template instantiated',
2197
+ template,
2198
+ instance,
2199
+ parts: instance._$parts,
2200
+ options: this.options,
2201
+ fragment,
2202
+ values,
2203
+ });
2204
+ instance._update(values);
2205
+ debugLogEvent &&
2206
+ debugLogEvent({
2207
+ kind: 'template instantiated and updated',
2208
+ template,
2209
+ instance,
2210
+ parts: instance._$parts,
2211
+ options: this.options,
2212
+ fragment,
2213
+ values,
2214
+ });
2215
+ this._commitNode(fragment);
2216
+ this._$committedValue = instance;
2217
+ }
2218
+ }
2219
+ // Overridden via `litHtmlPolyfillSupport` to provide platform support.
2220
+ /** @internal */
2221
+ _$getTemplate(result) {
2222
+ let template = templateCache.get(result.strings);
2223
+ if (template === undefined) {
2224
+ templateCache.set(result.strings, (template = new Template(result)));
2225
+ }
2226
+ return template;
2227
+ }
2228
+ _commitIterable(value) {
2229
+ // For an Iterable, we create a new InstancePart per item, then set its
2230
+ // value to the item. This is a little bit of overhead for every item in
2231
+ // an Iterable, but it lets us recurse easily and efficiently update Arrays
2232
+ // of TemplateResults that will be commonly returned from expressions like:
2233
+ // array.map((i) => html`${i}`), by reusing existing TemplateInstances.
2234
+ // If value is an array, then the previous render was of an
2235
+ // iterable and value will contain the ChildParts from the previous
2236
+ // render. If value is not an array, clear this part and make a new
2237
+ // array for ChildParts.
2238
+ if (!isArray(this._$committedValue)) {
2239
+ this._$committedValue = [];
2240
+ this._$clear();
2241
+ }
2242
+ // Lets us keep track of how many items we stamped so we can clear leftover
2243
+ // items from a previous render
2244
+ const itemParts = this._$committedValue;
2245
+ let partIndex = 0;
2246
+ let itemPart;
2247
+ for (const item of value) {
2248
+ if (partIndex === itemParts.length) {
2249
+ // If no existing part, create a new one
2250
+ // TODO (justinfagnani): test perf impact of always creating two parts
2251
+ // instead of sharing parts between nodes
2252
+ // https://github.com/lit/lit/issues/1266
2253
+ itemParts.push((itemPart = new ChildPart(this._insert(createMarker()), this._insert(createMarker()), this, this.options)));
2254
+ }
2255
+ else {
2256
+ // Reuse an existing part
2257
+ itemPart = itemParts[partIndex];
2258
+ }
2259
+ itemPart._$setValue(item);
2260
+ partIndex++;
2261
+ }
2262
+ if (partIndex < itemParts.length) {
2263
+ // itemParts always have end nodes
2264
+ this._$clear(itemPart && wrap(itemPart._$endNode).nextSibling, partIndex);
2265
+ // Truncate the parts array so _value reflects the current state
2266
+ itemParts.length = partIndex;
2267
+ }
2268
+ }
2269
+ /**
2270
+ * Removes the nodes contained within this Part from the DOM.
2271
+ *
2272
+ * @param start Start node to clear from, for clearing a subset of the part's
2273
+ * DOM (used when truncating iterables)
2274
+ * @param from When `start` is specified, the index within the iterable from
2275
+ * which ChildParts are being removed, used for disconnecting directives
2276
+ * in those Parts.
2277
+ *
2278
+ * @internal
2279
+ */
2280
+ _$clear(start = wrap(this._$startNode).nextSibling, from) {
2281
+ this._$notifyConnectionChanged?.(false, true, from);
2282
+ while (start !== this._$endNode) {
2283
+ // The non-null assertion is safe because if _$startNode.nextSibling is
2284
+ // null, then _$endNode is also null, and we would not have entered this
2285
+ // loop.
2286
+ const n = wrap(start).nextSibling;
2287
+ wrap(start).remove();
2288
+ start = n;
2289
+ }
2290
+ }
2291
+ /**
2292
+ * Implementation of RootPart's `isConnected`. Note that this method
2293
+ * should only be called on `RootPart`s (the `ChildPart` returned from a
2294
+ * top-level `render()` call). It has no effect on non-root ChildParts.
2295
+ * @param isConnected Whether to set
2296
+ * @internal
2297
+ */
2298
+ setConnected(isConnected) {
2299
+ if (this._$parent === undefined) {
2300
+ this.__isConnected = isConnected;
2301
+ this._$notifyConnectionChanged?.(isConnected);
2302
+ }
2303
+ else {
2304
+ throw new Error('part.setConnected() may only be called on a ' +
2305
+ 'RootPart returned from render().');
2306
+ }
2307
+ }
2308
+ }
2309
+ class AttributePart {
2310
+ get tagName() {
2311
+ return this.element.tagName;
2312
+ }
2313
+ // See comment in Disconnectable interface for why this is a getter
2314
+ get _$isConnected() {
2315
+ return this._$parent._$isConnected;
2316
+ }
2317
+ constructor(element, name, strings, parent, options) {
2318
+ this.type = ATTRIBUTE_PART;
2319
+ /** @internal */
2320
+ this._$committedValue = nothing;
2321
+ /** @internal */
2322
+ this._$disconnectableChildren = undefined;
2323
+ this.element = element;
2324
+ this.name = name;
2325
+ this._$parent = parent;
2326
+ this.options = options;
2327
+ if (strings.length > 2 || strings[0] !== '' || strings[1] !== '') {
2328
+ this._$committedValue = new Array(strings.length - 1).fill(new String());
2329
+ this.strings = strings;
2330
+ }
2331
+ else {
2332
+ this._$committedValue = nothing;
2333
+ }
2334
+ {
2335
+ this._sanitizer = undefined;
2336
+ }
2337
+ }
2338
+ /**
2339
+ * Sets the value of this part by resolving the value from possibly multiple
2340
+ * values and static strings and committing it to the DOM.
2341
+ * If this part is single-valued, `this._strings` will be undefined, and the
2342
+ * method will be called with a single value argument. If this part is
2343
+ * multi-value, `this._strings` will be defined, and the method is called
2344
+ * with the value array of the part's owning TemplateInstance, and an offset
2345
+ * into the value array from which the values should be read.
2346
+ * This method is overloaded this way to eliminate short-lived array slices
2347
+ * of the template instance values, and allow a fast-path for single-valued
2348
+ * parts.
2349
+ *
2350
+ * @param value The part value, or an array of values for multi-valued parts
2351
+ * @param valueIndex the index to start reading values from. `undefined` for
2352
+ * single-valued parts
2353
+ * @param noCommit causes the part to not commit its value to the DOM. Used
2354
+ * in hydration to prime attribute parts with their first-rendered value,
2355
+ * but not set the attribute, and in SSR to no-op the DOM operation and
2356
+ * capture the value for serialization.
2357
+ *
2358
+ * @internal
2359
+ */
2360
+ _$setValue(value, directiveParent = this, valueIndex, noCommit) {
2361
+ const strings = this.strings;
2362
+ // Whether any of the values has changed, for dirty-checking
2363
+ let change = false;
2364
+ if (strings === undefined) {
2365
+ // Single-value binding case
2366
+ value = resolveDirective(this, value, directiveParent, 0);
2367
+ change =
2368
+ !isPrimitive(value) ||
2369
+ (value !== this._$committedValue && value !== noChange);
2370
+ if (change) {
2371
+ this._$committedValue = value;
2372
+ }
2373
+ }
2374
+ else {
2375
+ // Interpolation case
2376
+ const values = value;
2377
+ value = strings[0];
2378
+ let i, v;
2379
+ for (i = 0; i < strings.length - 1; i++) {
2380
+ v = resolveDirective(this, values[valueIndex + i], directiveParent, i);
2381
+ if (v === noChange) {
2382
+ // If the user-provided value is `noChange`, use the previous value
2383
+ v = this._$committedValue[i];
2384
+ }
2385
+ change ||=
2386
+ !isPrimitive(v) || v !== this._$committedValue[i];
2387
+ if (v === nothing) {
2388
+ value = nothing;
2389
+ }
2390
+ else if (value !== nothing) {
2391
+ value += (v ?? '') + strings[i + 1];
2392
+ }
2393
+ // We always record each value, even if one is `nothing`, for future
2394
+ // change detection.
2395
+ this._$committedValue[i] = v;
2396
+ }
2397
+ }
2398
+ if (change && !noCommit) {
2399
+ this._commitValue(value);
2400
+ }
2401
+ }
2402
+ /** @internal */
2403
+ _commitValue(value) {
2404
+ if (value === nothing) {
2405
+ wrap(this.element).removeAttribute(this.name);
2406
+ }
2407
+ else {
2408
+ {
2409
+ if (this._sanitizer === undefined) {
2410
+ this._sanitizer = sanitizerFactoryInternal(this.element, this.name, 'attribute');
2411
+ }
2412
+ value = this._sanitizer(value ?? '');
2413
+ }
2414
+ debugLogEvent &&
2415
+ debugLogEvent({
2416
+ kind: 'commit attribute',
2417
+ element: this.element,
2418
+ name: this.name,
2419
+ value,
2420
+ options: this.options,
2421
+ });
2422
+ wrap(this.element).setAttribute(this.name, (value ?? ''));
2423
+ }
2424
+ }
2425
+ }
2426
+ class PropertyPart extends AttributePart {
2427
+ constructor() {
2428
+ super(...arguments);
2429
+ this.type = PROPERTY_PART;
2430
+ }
2431
+ /** @internal */
2432
+ _commitValue(value) {
2433
+ {
2434
+ if (this._sanitizer === undefined) {
2435
+ this._sanitizer = sanitizerFactoryInternal(this.element, this.name, 'property');
2436
+ }
2437
+ value = this._sanitizer(value);
2438
+ }
2439
+ debugLogEvent &&
2440
+ debugLogEvent({
2441
+ kind: 'commit property',
2442
+ element: this.element,
2443
+ name: this.name,
2444
+ value,
2445
+ options: this.options,
2446
+ });
2447
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
2448
+ this.element[this.name] = value === nothing ? undefined : value;
2449
+ }
2450
+ }
2451
+ class BooleanAttributePart extends AttributePart {
2452
+ constructor() {
2453
+ super(...arguments);
2454
+ this.type = BOOLEAN_ATTRIBUTE_PART;
2455
+ }
2456
+ /** @internal */
2457
+ _commitValue(value) {
2458
+ debugLogEvent &&
2459
+ debugLogEvent({
2460
+ kind: 'commit boolean attribute',
2461
+ element: this.element,
2462
+ name: this.name,
2463
+ value: !!(value && value !== nothing),
2464
+ options: this.options,
2465
+ });
2466
+ wrap(this.element).toggleAttribute(this.name, !!value && value !== nothing);
2467
+ }
2468
+ }
2469
+ class EventPart extends AttributePart {
2470
+ constructor(element, name, strings, parent, options) {
2471
+ super(element, name, strings, parent, options);
2472
+ this.type = EVENT_PART;
2473
+ if (this.strings !== undefined) {
2474
+ throw new Error(`A \`<${element.localName}>\` has a \`@${name}=...\` listener with ` +
2475
+ 'invalid content. Event listeners in templates must have exactly ' +
2476
+ 'one expression and no surrounding text.');
2477
+ }
2478
+ }
2479
+ // EventPart does not use the base _$setValue/_resolveValue implementation
2480
+ // since the dirty checking is more complex
2481
+ /** @internal */
2482
+ _$setValue(newListener, directiveParent = this) {
2483
+ newListener =
2484
+ resolveDirective(this, newListener, directiveParent, 0) ?? nothing;
2485
+ if (newListener === noChange) {
2486
+ return;
2487
+ }
2488
+ const oldListener = this._$committedValue;
2489
+ // If the new value is nothing or any options change we have to remove the
2490
+ // part as a listener.
2491
+ const shouldRemoveListener = (newListener === nothing && oldListener !== nothing) ||
2492
+ newListener.capture !==
2493
+ oldListener.capture ||
2494
+ newListener.once !==
2495
+ oldListener.once ||
2496
+ newListener.passive !==
2497
+ oldListener.passive;
2498
+ // If the new value is not nothing and we removed the listener, we have
2499
+ // to add the part as a listener.
2500
+ const shouldAddListener = newListener !== nothing &&
2501
+ (oldListener === nothing || shouldRemoveListener);
2502
+ debugLogEvent &&
2503
+ debugLogEvent({
2504
+ kind: 'commit event listener',
2505
+ element: this.element,
2506
+ name: this.name,
2507
+ value: newListener,
2508
+ options: this.options,
2509
+ removeListener: shouldRemoveListener,
2510
+ addListener: shouldAddListener,
2511
+ oldListener,
2512
+ });
2513
+ if (shouldRemoveListener) {
2514
+ this.element.removeEventListener(this.name, this, oldListener);
2515
+ }
2516
+ if (shouldAddListener) {
2517
+ this.element.addEventListener(this.name, this, newListener);
2518
+ }
2519
+ this._$committedValue = newListener;
2520
+ }
2521
+ handleEvent(event) {
2522
+ if (typeof this._$committedValue === 'function') {
2523
+ this._$committedValue.call(this.options?.host ?? this.element, event);
2524
+ }
2525
+ else {
2526
+ this._$committedValue.handleEvent(event);
2527
+ }
2528
+ }
2529
+ }
2530
+ class ElementPart {
2531
+ constructor(element, parent, options) {
2532
+ this.element = element;
2533
+ this.type = ELEMENT_PART;
2534
+ /** @internal */
2535
+ this._$disconnectableChildren = undefined;
2536
+ this._$parent = parent;
2537
+ this.options = options;
2538
+ }
2539
+ // See comment in Disconnectable interface for why this is a getter
2540
+ get _$isConnected() {
2541
+ return this._$parent._$isConnected;
2542
+ }
2543
+ _$setValue(value) {
2544
+ debugLogEvent &&
2545
+ debugLogEvent({
2546
+ kind: 'commit to element binding',
2547
+ element: this.element,
2548
+ value,
2549
+ options: this.options,
2550
+ });
2551
+ resolveDirective(this, value);
2552
+ }
2553
+ }
2554
+ // Apply polyfills if available
2555
+ const polyfillSupport$1 = global$1.litHtmlPolyfillSupportDevMode
2556
+ ;
2557
+ polyfillSupport$1?.(Template, ChildPart);
2558
+ // IMPORTANT: do not change the property name or the assignment expression.
2559
+ // This line will be used in regexes to search for lit-html usage.
2560
+ (global$1.litHtmlVersions ??= []).push('3.3.2');
2561
+ if (global$1.litHtmlVersions.length > 1) {
2562
+ queueMicrotask(() => {
2563
+ issueWarning$1('multiple-versions', `Multiple versions of Lit loaded. ` +
2564
+ `Loading multiple versions is not recommended.`);
2565
+ });
2566
+ }
2567
+ /**
2568
+ * Renders a value, usually a lit-html TemplateResult, to the container.
2569
+ *
2570
+ * This example renders the text "Hello, Zoe!" inside a paragraph tag, appending
2571
+ * it to the container `document.body`.
2572
+ *
2573
+ * ```js
2574
+ * import {html, render} from 'lit';
2575
+ *
2576
+ * const name = "Zoe";
2577
+ * render(html`<p>Hello, ${name}!</p>`, document.body);
2578
+ * ```
2579
+ *
2580
+ * @param value Any [renderable
2581
+ * value](https://lit.dev/docs/templates/expressions/#child-expressions),
2582
+ * typically a {@linkcode TemplateResult} created by evaluating a template tag
2583
+ * like {@linkcode html} or {@linkcode svg}.
2584
+ * @param container A DOM container to render to. The first render will append
2585
+ * the rendered value to the container, and subsequent renders will
2586
+ * efficiently update the rendered value if the same result type was
2587
+ * previously rendered there.
2588
+ * @param options See {@linkcode RenderOptions} for options documentation.
2589
+ * @see
2590
+ * {@link https://lit.dev/docs/libraries/standalone-templates/#rendering-lit-html-templates| Rendering Lit HTML Templates}
2591
+ */
2592
+ const render = (value, container, options) => {
2593
+ if (container == null) {
2594
+ // Give a clearer error message than
2595
+ // Uncaught TypeError: Cannot read properties of null (reading
2596
+ // '_$litPart$')
2597
+ // which reads like an internal Lit error.
2598
+ throw new TypeError(`The container to render into may not be ${container}`);
2599
+ }
2600
+ const renderId = debugLogRenderId++ ;
2601
+ const partOwnerNode = options?.renderBefore ?? container;
2602
+ // This property needs to remain unminified.
2603
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
2604
+ let part = partOwnerNode['_$litPart$'];
2605
+ debugLogEvent &&
2606
+ debugLogEvent({
2607
+ kind: 'begin render',
2608
+ id: renderId,
2609
+ value,
2610
+ container,
2611
+ options,
2612
+ part,
2613
+ });
2614
+ if (part === undefined) {
2615
+ const endNode = options?.renderBefore ?? null;
2616
+ // This property needs to remain unminified.
2617
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
2618
+ partOwnerNode['_$litPart$'] = part = new ChildPart(container.insertBefore(createMarker(), endNode), endNode, undefined, options ?? {});
2619
+ }
2620
+ part._$setValue(value);
2621
+ debugLogEvent &&
2622
+ debugLogEvent({
2623
+ kind: 'end render',
2624
+ id: renderId,
2625
+ value,
2626
+ container,
2627
+ options,
2628
+ part,
2629
+ });
2630
+ return part;
2631
+ };
2632
+ {
2633
+ render.setSanitizer = setSanitizer;
2634
+ render.createSanitizer = createSanitizer;
2635
+ {
2636
+ render._testOnlyClearSanitizerFactoryDoNotCallOrElse =
2637
+ _testOnlyClearSanitizerFactoryDoNotCallOrElse;
2638
+ }
2639
+ }
2640
+
2641
+ /**
2642
+ * @license
2643
+ * Copyright 2017 Google LLC
2644
+ * SPDX-License-Identifier: BSD-3-Clause
2645
+ */
2646
+ /**
2647
+ * The main LitElement module, which defines the {@linkcode LitElement} base
2648
+ * class and related APIs.
2649
+ *
2650
+ * LitElement components can define a template and a set of observed
2651
+ * properties. Changing an observed property triggers a re-render of the
2652
+ * element.
2653
+ *
2654
+ * Import {@linkcode LitElement} and {@linkcode html} from this module to
2655
+ * create a component:
2656
+ *
2657
+ * ```js
2658
+ * import {LitElement, html} from 'lit-element';
2659
+ *
2660
+ * class MyElement extends LitElement {
2661
+ *
2662
+ * // Declare observed properties
2663
+ * static get properties() {
2664
+ * return {
2665
+ * adjective: {}
2666
+ * }
2667
+ * }
2668
+ *
2669
+ * constructor() {
2670
+ * this.adjective = 'awesome';
2671
+ * }
2672
+ *
2673
+ * // Define the element's template
2674
+ * render() {
2675
+ * return html`<p>your ${adjective} template here</p>`;
2676
+ * }
2677
+ * }
2678
+ *
2679
+ * customElements.define('my-element', MyElement);
2680
+ * ```
2681
+ *
2682
+ * `LitElement` extends {@linkcode ReactiveElement} and adds lit-html
2683
+ * templating. The `ReactiveElement` class is provided for users that want to
2684
+ * build their own custom element base classes that don't use lit-html.
2685
+ *
2686
+ * @packageDocumentation
2687
+ */
2688
+ /*
2689
+ * When using Closure Compiler, JSCompiler_renameProperty(property, object) is
2690
+ * replaced at compile time by the munged name for object[property]. We cannot
2691
+ * alias this function, so we have to use a small shim that has the same
2692
+ * behavior when not compiling.
2693
+ */
2694
+ /*@__INLINE__*/
2695
+ const JSCompiler_renameProperty = (prop, _obj) => prop;
2696
+ // Allows minifiers to rename references to globalThis
2697
+ const global = globalThis;
2698
+ let issueWarning;
2699
+ {
2700
+ // Ensure warnings are issued only 1x, even if multiple versions of Lit
2701
+ // are loaded.
2702
+ global.litIssuedWarnings ??= new Set();
2703
+ /**
2704
+ * Issue a warning if we haven't already, based either on `code` or `warning`.
2705
+ * Warnings are disabled automatically only by `warning`; disabling via `code`
2706
+ * can be done by users.
2707
+ */
2708
+ issueWarning = (code, warning) => {
2709
+ warning += ` See https://lit.dev/msg/${code} for more information.`;
2710
+ if (!global.litIssuedWarnings.has(warning) &&
2711
+ !global.litIssuedWarnings.has(code)) {
2712
+ console.warn(warning);
2713
+ global.litIssuedWarnings.add(warning);
2714
+ }
2715
+ };
2716
+ }
2717
+ /**
2718
+ * Base element class that manages element properties and attributes, and
2719
+ * renders a lit-html template.
2720
+ *
2721
+ * To define a component, subclass `LitElement` and implement a
2722
+ * `render` method to provide the component's template. Define properties
2723
+ * using the {@linkcode LitElement.properties properties} property or the
2724
+ * {@linkcode property} decorator.
2725
+ */
2726
+ class LitElement extends ReactiveElement {
2727
+ constructor() {
2728
+ super(...arguments);
2729
+ /**
2730
+ * @category rendering
2731
+ */
2732
+ this.renderOptions = { host: this };
2733
+ this.__childPart = undefined;
2734
+ }
2735
+ /**
2736
+ * @category rendering
2737
+ */
2738
+ createRenderRoot() {
2739
+ const renderRoot = super.createRenderRoot();
2740
+ // When adoptedStyleSheets are shimmed, they are inserted into the
2741
+ // shadowRoot by createRenderRoot. Adjust the renderBefore node so that
2742
+ // any styles in Lit content render before adoptedStyleSheets. This is
2743
+ // important so that adoptedStyleSheets have precedence over styles in
2744
+ // the shadowRoot.
2745
+ this.renderOptions.renderBefore ??= renderRoot.firstChild;
2746
+ return renderRoot;
2747
+ }
2748
+ /**
2749
+ * Updates the element. This method reflects property values to attributes
2750
+ * and calls `render` to render DOM via lit-html. Setting properties inside
2751
+ * this method will *not* trigger another update.
2752
+ * @param changedProperties Map of changed properties with old values
2753
+ * @category updates
2754
+ */
2755
+ update(changedProperties) {
2756
+ // Setting properties in `render` should not trigger an update. Since
2757
+ // updates are allowed after super.update, it's important to call `render`
2758
+ // before that.
2759
+ const value = this.render();
2760
+ if (!this.hasUpdated) {
2761
+ this.renderOptions.isConnected = this.isConnected;
2762
+ }
2763
+ super.update(changedProperties);
2764
+ this.__childPart = render(value, this.renderRoot, this.renderOptions);
2765
+ }
2766
+ /**
2767
+ * Invoked when the component is added to the document's DOM.
2768
+ *
2769
+ * In `connectedCallback()` you should setup tasks that should only occur when
2770
+ * the element is connected to the document. The most common of these is
2771
+ * adding event listeners to nodes external to the element, like a keydown
2772
+ * event handler added to the window.
2773
+ *
2774
+ * ```ts
2775
+ * connectedCallback() {
2776
+ * super.connectedCallback();
2777
+ * addEventListener('keydown', this._handleKeydown);
2778
+ * }
2779
+ * ```
2780
+ *
2781
+ * Typically, anything done in `connectedCallback()` should be undone when the
2782
+ * element is disconnected, in `disconnectedCallback()`.
2783
+ *
2784
+ * @category lifecycle
2785
+ */
2786
+ connectedCallback() {
2787
+ super.connectedCallback();
2788
+ this.__childPart?.setConnected(true);
2789
+ }
2790
+ /**
2791
+ * Invoked when the component is removed from the document's DOM.
2792
+ *
2793
+ * This callback is the main signal to the element that it may no longer be
2794
+ * used. `disconnectedCallback()` should ensure that nothing is holding a
2795
+ * reference to the element (such as event listeners added to nodes external
2796
+ * to the element), so that it is free to be garbage collected.
2797
+ *
2798
+ * ```ts
2799
+ * disconnectedCallback() {
2800
+ * super.disconnectedCallback();
2801
+ * window.removeEventListener('keydown', this._handleKeydown);
2802
+ * }
2803
+ * ```
2804
+ *
2805
+ * An element may be re-connected after being disconnected.
2806
+ *
2807
+ * @category lifecycle
2808
+ */
2809
+ disconnectedCallback() {
2810
+ super.disconnectedCallback();
2811
+ this.__childPart?.setConnected(false);
2812
+ }
2813
+ /**
2814
+ * Invoked on each update to perform rendering tasks. This method may return
2815
+ * any value renderable by lit-html's `ChildPart` - typically a
2816
+ * `TemplateResult`. Setting properties inside this method will *not* trigger
2817
+ * the element to update.
2818
+ * @category rendering
2819
+ */
2820
+ render() {
2821
+ return noChange;
2822
+ }
2823
+ }
2824
+ // This property needs to remain unminified.
2825
+ LitElement['_$litElement$'] = true;
2826
+ /**
2827
+ * Ensure this class is marked as `finalized` as an optimization ensuring
2828
+ * it will not needlessly try to `finalize`.
2829
+ *
2830
+ * Note this property name is a string to prevent breaking Closure JS Compiler
2831
+ * optimizations. See @lit/reactive-element for more information.
2832
+ */
2833
+ LitElement[JSCompiler_renameProperty('finalized')] = true;
2834
+ // Install hydration if available
2835
+ global.litElementHydrateSupport?.({ LitElement });
2836
+ // Apply polyfills if available
2837
+ const polyfillSupport = global.litElementPolyfillSupportDevMode
2838
+ ;
2839
+ polyfillSupport?.({ LitElement });
2840
+ // IMPORTANT: do not change the property name or the assignment expression.
2841
+ // This line will be used in regexes to search for LitElement usage.
2842
+ (global.litElementVersions ??= []).push('4.2.2');
2843
+ if (global.litElementVersions.length > 1) {
2844
+ queueMicrotask(() => {
2845
+ issueWarning('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
2846
+ `is not recommended.`);
2847
+ });
2848
+ }
2849
+
2850
+ export { LitElement as L, notEqual as a, nothing as b, css as c, defaultConverter as d, html as h, noChange as n, unsafeCSS as u };
2851
+ //# sourceMappingURL=lit-element-B7NX__Gq.js.map