@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
@@ -9,7 +9,6 @@ interface LoaderConfig {
9
9
  }
10
10
  export { LoaderConfig };
11
11
  export declare class LoaderUtils {
12
- private loaderConfig;
13
12
  private _loaderConfig;
14
13
  private _observer;
15
14
  constructor(loaderConfig: LoaderConfig);
@@ -1,6 +1,5 @@
1
1
  export class LoaderUtils {
2
2
  constructor(loaderConfig) {
3
- this.loaderConfig = loaderConfig;
4
3
  this._loaderConfig = loaderConfig;
5
4
  }
6
5
  static registerComponent(tagName, CustomElementClass) {
@@ -1 +1 @@
1
- {"version":3,"file":"LoaderUtils.js","sourceRoot":"","sources":["../../src/LoaderUtils.ts"],"names":[],"mappings":"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","sourcesContent":["interface ComponentConfig {\n CustomElementClass?: any; // earger load\n importPath?: string; // lazy load\n dependencies?: string[];\n}\n\ninterface LoaderConfig {\n prefix?: string;\n components?: Record<string, ComponentConfig>;\n}\n\nexport { LoaderConfig };\n\nexport class LoaderUtils {\n private _loaderConfig: LoaderConfig;\n\n private _observer: MutationObserver | undefined;\n\n constructor(private loaderConfig: LoaderConfig) {\n this._loaderConfig = loaderConfig;\n }\n\n static registerComponent(tagName: string, CustomElementClass: any) {\n if (CustomElementClass && !customElements.get(tagName)) {\n customElements.define(tagName, CustomElementClass);\n }\n }\n\n start() {\n this.eagerLoadComponents();\n this.lazyLoadComponents(document);\n }\n\n eagerLoadComponents() {\n if (!this._loaderConfig.components) return;\n for (const [name, value] of Object.entries(this._loaderConfig.components)) {\n if (value.CustomElementClass)\n LoaderUtils.registerComponent(\n this.getFullTagName(name),\n value.CustomElementClass,\n );\n }\n }\n\n getFullTagName(name: string) {\n return `${this._loaderConfig.prefix}-${name}`;\n }\n\n async registerAsync(tagName: string): Promise<void> {\n if (customElements.get(tagName)) return;\n\n const baseName = tagName.replace(`${this._loaderConfig.prefix}-`, '');\n\n if (!this._loaderConfig.components) return;\n\n const config = this._loaderConfig.components[baseName];\n if (!config || !config.importPath) return;\n\n try {\n const module = await import(config.importPath);\n\n // Runtime definition: grabbing the class from the module\n const CustomElementClass =\n module.default || module[Object.keys(module)[0]];\n\n if (CustomElementClass && !customElements.get(tagName)) {\n customElements.define(tagName, CustomElementClass);\n }\n\n // Handle dependencies recursively\n if (config.dependencies) {\n for (const dep of config.dependencies) {\n // eslint-disable-next-line no-await-in-loop\n await this.registerAsync(this.getFullTagName(dep));\n }\n }\n } catch (error) {\n console.error(\n `Unable to load <${tagName}> from ${config.importPath}`,\n error,\n );\n }\n }\n\n async load(root: Element | Document): Promise<void> {\n const rootTagName =\n root instanceof Element ? root.tagName.toLowerCase() : '';\n\n const tags = Array.from(root.querySelectorAll(':not(:defined)')).map(el =>\n el.tagName.toLowerCase(),\n );\n\n if (rootTagName.includes('-') && !customElements.get(rootTagName)) {\n tags.push(rootTagName);\n }\n\n const tagsToRegister = [...new Set(tags)];\n await Promise.allSettled(\n tagsToRegister.map(tagName => this.registerAsync(tagName)),\n );\n }\n\n lazyLoadComponents(root: any) {\n this._observer = new MutationObserver(mutations => {\n for (const { addedNodes } of mutations) {\n for (const node of addedNodes) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n this.load(node as Element);\n }\n }\n }\n });\n\n const target = root instanceof Document ? root.documentElement : root;\n this.load(target);\n\n this._observer.observe(target, {\n subtree: true,\n childList: true,\n });\n }\n}\n"]}
1
+ {"version":3,"file":"LoaderUtils.js","sourceRoot":"","sources":["../../src/LoaderUtils.ts"],"names":[],"mappings":"AAaA,MAAM,OAAO,WAAW;IAKtB,YAAY,YAA0B;QACpC,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;IACpC,CAAC;IAED,MAAM,CAAC,iBAAiB,CAAC,OAAe,EAAE,kBAAuB;QAC/D,IAAI,kBAAkB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACvD,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACpC,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;YAAE,OAAO;QAC3C,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,CAAC;YAC1E,IAAI,KAAK,CAAC,kBAAkB;gBAC1B,WAAW,CAAC,iBAAiB,CAC3B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACzB,KAAK,CAAC,kBAAkB,CACzB,CAAC;QACN,CAAC;IACH,CAAC;IAED,cAAc,CAAC,IAAY;QACzB,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;IAChD,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,OAAe;QACjC,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;YAAE,OAAO;QAExC,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,EAAE,EAAE,CAAC,CAAC;QAEtE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;YAAE,OAAO;QAE3C,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,UAAU;YAAE,OAAO;QAE1C,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YAE/C,yDAAyD;YACzD,MAAM,kBAAkB,GACtB,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAEnD,IAAI,kBAAkB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;gBACvD,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;YACrD,CAAC;YAED,kCAAkC;YAClC,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;gBACxB,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;oBACtC,4CAA4C;oBAC5C,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;gBACrD,CAAC;YACH,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CACX,mBAAmB,OAAO,UAAU,MAAM,CAAC,UAAU,EAAE,EACvD,KAAK,CACN,CAAC;QACJ,CAAC;IACH,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,IAAwB;QACjC,MAAM,WAAW,GACf,IAAI,YAAY,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE5D,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CACxE,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CACzB,CAAC;QAEF,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAClE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACzB,CAAC;QAED,MAAM,cAAc,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1C,MAAM,OAAO,CAAC,UAAU,CACtB,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAC3D,CAAC;IACJ,CAAC;IAED,kBAAkB,CAAC,IAAS;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;YAChD,KAAK,MAAM,EAAE,UAAU,EAAE,IAAI,SAAS,EAAE,CAAC;gBACvC,KAAK,MAAM,IAAI,IAAI,UAAU,EAAE,CAAC;oBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;wBACxC,IAAI,CAAC,IAAI,CAAC,IAAe,CAAC,CAAC;oBAC7B,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,IAAI,YAAY,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC;QACtE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAElB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["interface ComponentConfig {\r\n CustomElementClass?: any; // earger load\r\n importPath?: string; // lazy load\r\n dependencies?: string[];\r\n}\r\n\r\ninterface LoaderConfig {\r\n prefix?: string;\r\n components?: Record<string, ComponentConfig>;\r\n}\r\n\r\nexport { LoaderConfig };\r\n\r\nexport class LoaderUtils {\r\n private _loaderConfig: LoaderConfig;\r\n\r\n private _observer: MutationObserver | undefined;\r\n\r\n constructor(loaderConfig: LoaderConfig) {\r\n this._loaderConfig = loaderConfig;\r\n }\r\n\r\n static registerComponent(tagName: string, CustomElementClass: any) {\r\n if (CustomElementClass && !customElements.get(tagName)) {\r\n customElements.define(tagName, CustomElementClass);\r\n }\r\n }\r\n\r\n start() {\r\n this.eagerLoadComponents();\r\n this.lazyLoadComponents(document);\r\n }\r\n\r\n eagerLoadComponents() {\r\n if (!this._loaderConfig.components) return;\r\n for (const [name, value] of Object.entries(this._loaderConfig.components)) {\r\n if (value.CustomElementClass)\r\n LoaderUtils.registerComponent(\r\n this.getFullTagName(name),\r\n value.CustomElementClass,\r\n );\r\n }\r\n }\r\n\r\n getFullTagName(name: string) {\r\n return `${this._loaderConfig.prefix}-${name}`;\r\n }\r\n\r\n async registerAsync(tagName: string): Promise<void> {\r\n if (customElements.get(tagName)) return;\r\n\r\n const baseName = tagName.replace(`${this._loaderConfig.prefix}-`, '');\r\n\r\n if (!this._loaderConfig.components) return;\r\n\r\n const config = this._loaderConfig.components[baseName];\r\n if (!config || !config.importPath) return;\r\n\r\n try {\r\n const module = await import(config.importPath);\r\n\r\n // Runtime definition: grabbing the class from the module\r\n const CustomElementClass =\r\n module.default || module[Object.keys(module)[0]];\r\n\r\n if (CustomElementClass && !customElements.get(tagName)) {\r\n customElements.define(tagName, CustomElementClass);\r\n }\r\n\r\n // Handle dependencies recursively\r\n if (config.dependencies) {\r\n for (const dep of config.dependencies) {\r\n // eslint-disable-next-line no-await-in-loop\r\n await this.registerAsync(this.getFullTagName(dep));\r\n }\r\n }\r\n } catch (error) {\r\n console.error(\r\n `Unable to load <${tagName}> from ${config.importPath}`,\r\n error,\r\n );\r\n }\r\n }\r\n\r\n async load(root: Element | Document): Promise<void> {\r\n const rootTagName =\r\n root instanceof Element ? root.tagName.toLowerCase() : '';\r\n\r\n const tags = Array.from(root.querySelectorAll(':not(:defined)')).map(el =>\r\n el.tagName.toLowerCase(),\r\n );\r\n\r\n if (rootTagName.includes('-') && !customElements.get(rootTagName)) {\r\n tags.push(rootTagName);\r\n }\r\n\r\n const tagsToRegister = [...new Set(tags)];\r\n await Promise.allSettled(\r\n tagsToRegister.map(tagName => this.registerAsync(tagName)),\r\n );\r\n }\r\n\r\n lazyLoadComponents(root: any) {\r\n this._observer = new MutationObserver(mutations => {\r\n for (const { addedNodes } of mutations) {\r\n for (const node of addedNodes) {\r\n if (node.nodeType === Node.ELEMENT_NODE) {\r\n this.load(node as Element);\r\n }\r\n }\r\n }\r\n });\r\n\r\n const target = root instanceof Document ? root.documentElement : root;\r\n this.load(target);\r\n\r\n this._observer.observe(target, {\r\n subtree: true,\r\n childList: true,\r\n });\r\n }\r\n}\r\n"]}
@@ -19,7 +19,7 @@ import { LitElement } from 'lit';
19
19
  * @tags display
20
20
  */
21
21
  export declare class Avatar extends LitElement {
22
- static styles: import("lit").CSSResult[];
22
+ static styles: import("lit").CSSResultGroup[];
23
23
  name: string;
24
24
  src?: string;
25
25
  render(): import("lit-html").TemplateResult<1>;
@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
2
2
  import { html, LitElement } from 'lit';
3
3
  import { property } from 'lit/decorators.js';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
- import { styles } from './avatar.css.js';
5
+ import styles from './avatar.scss';
6
6
  /**
7
7
  * @label Avatar
8
8
  * @tag p-avatar
@@ -1 +1 @@
1
- {"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAG6C,SAAI,GAAW,EAAE,CAAC;IAwB/D,CAAC;IApBC,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,CAAC,IAAI,CAAC,GAAG;YACnB,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;;UAEA,IAAI,CAAC,GAAG;YACR,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,GAAG,QAAQ,IAAI,CAAC,IAAI,KAAK;YAC9D,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,aAAa,EAAE,QAAQ;;WAE1D,CAAC;IACV,CAAC;IAEO,aAAa;QACnB,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACrD,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC;IAC7D,CAAC;;AAzBM,aAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEkB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAmB;AAElB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAc","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './avatar.css.js';\n\n/**\n * @label Avatar\n * @tag p-avatar\n * @rawTag avatar\n * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @cssprop --avatar-border-radius - Controls the border radius of the avatar.\n * @cssprop --avatar-background-color - Controls the color of the avatar.\n * @cssprop --avatar-size - Controls the size of the avatar.\n * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.\n *\n *\n * @example\n * ```html\n * <p-avatar name=\"Shivaji Varma\" src=\"https://peacock.redvars.com/assets/img/avatar.webp\"></p-avatar>\n * ```\n *\n * @tags display\n */\nexport class Avatar extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name: string = '';\n\n @property({ type: String, reflect: true }) src?: string;\n\n render() {\n return html`<div class=\"avatar-container\">\n <div\n class=${classMap({\n avatar: true,\n initials: !this.src,\n image: !!this.src,\n })}\n >\n ${this.src\n ? html`<img class=\"image\" src=${this.src} alt=${this.name} />`\n : html`<div class=\"initials\">${this.__getInitials()}</div>`}\n </div>\n </div>`;\n }\n\n private __getInitials() {\n const [first = '', last = ''] = this.name.split(' ');\n return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();\n }\n}\n"]}
1
+ {"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,MAAM,MAAM,eAAe,CAAC;AAEnC;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAG6C,SAAI,GAAW,EAAE,CAAC;IAwB/D,CAAC;IApBC,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,CAAC,IAAI,CAAC,GAAG;YACnB,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;;UAEA,IAAI,CAAC,GAAG;YACR,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,GAAG,QAAQ,IAAI,CAAC,IAAI,KAAK;YAC9D,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,aAAa,EAAE,QAAQ;;WAE1D,CAAC;IACV,CAAC;IAEO,aAAa;QACnB,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACrD,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC;IAC7D,CAAC;;AAzBM,aAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEkB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAmB;AAElB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAc","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './avatar.scss';\n\n/**\n * @label Avatar\n * @tag p-avatar\n * @rawTag avatar\n * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @cssprop --avatar-border-radius - Controls the border radius of the avatar.\n * @cssprop --avatar-background-color - Controls the color of the avatar.\n * @cssprop --avatar-size - Controls the size of the avatar.\n * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.\n *\n *\n * @example\n * ```html\n * <p-avatar name=\"Shivaji Varma\" src=\"https://peacock.redvars.com/assets/img/avatar.webp\"></p-avatar>\n * ```\n *\n * @tags display\n */\nexport class Avatar extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name: string = '';\n\n @property({ type: String, reflect: true }) src?: string;\n\n render() {\n return html`<div class=\"avatar-container\">\n <div\n class=${classMap({\n avatar: true,\n initials: !this.src,\n image: !!this.src,\n })}\n >\n ${this.src\n ? html`<img class=\"image\" src=${this.src} alt=${this.name} />`\n : html`<div class=\"initials\">${this.__getInitials()}</div>`}\n </div>\n </div>`;\n }\n\n private __getInitials() {\n const [first = '', last = ''] = this.name.split(' ');\n return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();\n }\n}\n"]}
@@ -14,7 +14,7 @@ import { LitElement } from 'lit';
14
14
  * @tags display
15
15
  */
16
16
  export declare class Badge extends LitElement {
17
- static styles: import("lit").CSSResult[];
17
+ static styles: import("lit").CSSResultGroup[];
18
18
  name: string;
19
19
  src?: string;
20
20
  slotHasContent: boolean;
@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
2
2
  import { html, LitElement } from 'lit';
3
3
  import { property, state } from 'lit/decorators.js';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
- import { styles } from './badge.css.js';
5
+ import styles from './badge.scss';
6
6
  import { observerSlotChangesWithCallback } from '../utils.js';
7
7
  /**
8
8
  * @label Badge
@@ -1 +1 @@
1
- {"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/badge/badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAE9D;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QAG6C,SAAI,GAAW,EAAE,CAAC;QAK7D,mBAAc,GAAG,KAAK,CAAC;IAsBzB,CAAC;IApBC,YAAY;QACV,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,CAAC,EAAE;YACX,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC;YACjC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CACF,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;cACD,QAAQ,CAAC;YACf,KAAK,EAAE,IAAI;YACX,kBAAkB,EAAE,IAAI,CAAC,cAAc;SACxC,CAAC;;;WAGG,CAAC;IACV,CAAC;;AA5BM,YAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEkB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAmB;AAElB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kCAAc;AAGxD;IADC,KAAK,EAAE;6CACe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './badge.css.js';\nimport { observerSlotChangesWithCallback } from '../utils.js';\n\n/**\n * @label Badge\n * @tag p-badge\n * @rawTag badge\n * @summary The badge component is used to display a small amount of information to the user.\n *\n * @cssprop --badge-color - Controls the color of the badge.\n *\n * @example\n * ```html\n * <p-badge>1</p-badge>\n * ```\n * @tags display\n */\nexport class Badge extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name: string = '';\n\n @property({ type: String, reflect: true }) src?: string;\n\n @state()\n slotHasContent = false;\n\n firstUpdated() {\n observerSlotChangesWithCallback(\n this.renderRoot.querySelector('slot'),\n hasContent => {\n this.slotHasContent = hasContent;\n this.requestUpdate();\n },\n );\n }\n\n render() {\n return html`<div\n class=${classMap({\n badge: true,\n 'slot-has-content': this.slotHasContent,\n })}\n >\n <slot></slot>\n </div>`;\n }\n}\n"]}
1
+ {"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/badge/badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAE9D;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QAG6C,SAAI,GAAW,EAAE,CAAC;QAK7D,mBAAc,GAAG,KAAK,CAAC;IAsBzB,CAAC;IApBC,YAAY;QACV,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,CAAC,EAAE;YACX,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC;YACjC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CACF,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;cACD,QAAQ,CAAC;YACf,KAAK,EAAE,IAAI;YACX,kBAAkB,EAAE,IAAI,CAAC,cAAc;SACxC,CAAC;;;WAGG,CAAC;IACV,CAAC;;AA5BM,YAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEkB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAmB;AAElB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kCAAc;AAGxD;IADC,KAAK,EAAE;6CACe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './badge.scss';\nimport { observerSlotChangesWithCallback } from '../utils.js';\n\n/**\n * @label Badge\n * @tag p-badge\n * @rawTag badge\n * @summary The badge component is used to display a small amount of information to the user.\n *\n * @cssprop --badge-color - Controls the color of the badge.\n *\n * @example\n * ```html\n * <p-badge>1</p-badge>\n * ```\n * @tags display\n */\nexport class Badge extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name: string = '';\n\n @property({ type: String, reflect: true }) src?: string;\n\n @state()\n slotHasContent = false;\n\n firstUpdated() {\n observerSlotChangesWithCallback(\n this.renderRoot.querySelector('slot'),\n hasContent => {\n this.slotHasContent = hasContent;\n this.requestUpdate();\n },\n );\n }\n\n render() {\n return html`<div\n class=${classMap({\n badge: true,\n 'slot-has-content': this.slotHasContent,\n })}\n >\n <slot></slot>\n </div>`;\n }\n}\n"]}
@@ -0,0 +1,99 @@
1
+ import { LitElement } from 'lit';
2
+ /**
3
+ * @label Button
4
+ * @tag p-button
5
+ * @rawTag button
6
+ *
7
+ * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
8
+ * @overview
9
+ * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>
10
+ *
11
+ * @cssprop --divider-color - Controls the color of the divider.
12
+ * @cssprop --divider-padding - Controls the padding of the divider.
13
+ *
14
+ * @example
15
+ * ```html
16
+ * <pc-button>Button</pc-button>
17
+ * ```
18
+ * @tags display
19
+ */
20
+ export declare class Button extends LitElement {
21
+ #private;
22
+ static styles: import("lit").CSSResultGroup[];
23
+ private readonly buttonElement;
24
+ htmlType: 'button' | 'submit' | 'reset';
25
+ /**
26
+ * The visual style of the button.
27
+ *
28
+ * Possible variant values:
29
+ * `"filled"` is a filled button.
30
+ * `"outlined"` is an outlined button.
31
+ * `"text"` is a transparent button.
32
+ * `"tonal"` is a light color button.
33
+ *
34
+ */
35
+ variant: 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' | 'neo';
36
+ /**
37
+ * Button size.
38
+ * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
39
+ */
40
+ size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
41
+ /**
42
+ * If true, the user cannot interact with the button. Defaults to `false`.
43
+ */
44
+ disabled: boolean;
45
+ /**
46
+ * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
47
+ */
48
+ softDisabled: boolean;
49
+ /**
50
+ * If button is disabled, the reason why it is disabled.
51
+ */
52
+ disabledReason: string;
53
+ /**
54
+ * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
55
+ */
56
+ color: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'white' | 'black';
57
+ /**
58
+ * Icon alignment.
59
+ * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
60
+ */
61
+ iconAlign: 'start' | 'end';
62
+ /**
63
+ * Hyperlink to navigate to on click.
64
+ */
65
+ href?: string;
66
+ configAria?: {
67
+ [key: string]: any;
68
+ };
69
+ /**
70
+ * Sets or retrieves the window or frame at which to target content.
71
+ */
72
+ target: string;
73
+ selected: boolean;
74
+ /**
75
+ * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
76
+ */
77
+ throttleDelay: number;
78
+ /**
79
+ * States
80
+ */
81
+ private isPressed;
82
+ private slotHasContent;
83
+ focus(): void;
84
+ blur(): void;
85
+ connectedCallback(): void;
86
+ disconnectedCallback(): void;
87
+ firstUpdated(): void;
88
+ private __dispatchClickWithThrottle;
89
+ __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
90
+ __renderDisabledReason(): import("lit-html").TemplateResult<1> | null;
91
+ __handlePress: (event: KeyboardEvent | MouseEvent) => void;
92
+ private __isLink;
93
+ render(): import("lit-html").TemplateResult<1>;
94
+ getVariant(): {
95
+ variant: string;
96
+ subVariant: string | undefined;
97
+ };
98
+ renderButtonContent(): import("lit-html").TemplateResult<1>;
99
+ }
@@ -0,0 +1,292 @@
1
+ var _Button_id, _Button_tabindex;
2
+ import { __classPrivateFieldGet, __decorate } from "tslib";
3
+ import { html, LitElement } from 'lit';
4
+ import { property, query, state } from 'lit/decorators.js';
5
+ import { classMap } from 'lit/directives/class-map.js';
6
+ import styles from './button.scss';
7
+ import { observerSlotChangesWithCallback, throttle } from '../utils.js';
8
+ /**
9
+ * @label Button
10
+ * @tag p-button
11
+ * @rawTag button
12
+ *
13
+ * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
14
+ * @overview
15
+ * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>
16
+ *
17
+ * @cssprop --divider-color - Controls the color of the divider.
18
+ * @cssprop --divider-padding - Controls the padding of the divider.
19
+ *
20
+ * @example
21
+ * ```html
22
+ * <pc-button>Button</pc-button>
23
+ * ```
24
+ * @tags display
25
+ */
26
+ export class Button extends LitElement {
27
+ constructor() {
28
+ super(...arguments);
29
+ _Button_id.set(this, crypto.randomUUID());
30
+ _Button_tabindex.set(this, 0);
31
+ this.htmlType = 'button';
32
+ /**
33
+ * The visual style of the button.
34
+ *
35
+ * Possible variant values:
36
+ * `"filled"` is a filled button.
37
+ * `"outlined"` is an outlined button.
38
+ * `"text"` is a transparent button.
39
+ * `"tonal"` is a light color button.
40
+ *
41
+ */
42
+ this.variant = 'filled';
43
+ /**
44
+ * Button size.
45
+ * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
46
+ */
47
+ this.size = 'sm';
48
+ /**
49
+ * If true, the user cannot interact with the button. Defaults to `false`.
50
+ */
51
+ this.disabled = false;
52
+ /**
53
+ * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
54
+ */
55
+ this.softDisabled = false;
56
+ /**
57
+ * If button is disabled, the reason why it is disabled.
58
+ */
59
+ this.disabledReason = '';
60
+ /**
61
+ * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
62
+ */
63
+ this.color = 'primary';
64
+ /**
65
+ * Icon alignment.
66
+ * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
67
+ */
68
+ this.iconAlign = 'end';
69
+ /**
70
+ * Sets or retrieves the window or frame at which to target content.
71
+ */
72
+ this.target = '_self';
73
+ this.selected = false;
74
+ /**
75
+ * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
76
+ */
77
+ this.throttleDelay = 200;
78
+ /**
79
+ * States
80
+ */
81
+ this.isPressed = false;
82
+ this.slotHasContent = false;
83
+ this.__dispatchClickWithThrottle = event => {
84
+ this.__dispatchClick(event);
85
+ };
86
+ this.__dispatchClick = (event) => {
87
+ // If the button is soft-disabled or a disabled link, we need to explicitly
88
+ // prevent the click from propagating to other event listeners as well as
89
+ // prevent the default action.
90
+ if (this.softDisabled || (this.disabled && this.href)) {
91
+ event.stopImmediatePropagation();
92
+ event.preventDefault();
93
+ return;
94
+ }
95
+ this.focus();
96
+ this.dispatchEvent(new CustomEvent('button:click', {
97
+ bubbles: true,
98
+ composed: true,
99
+ }));
100
+ };
101
+ this.__handlePress = (event) => {
102
+ if (event instanceof KeyboardEvent &&
103
+ event.type === 'keydown' &&
104
+ (event.key === 'Enter' || event.key === ' ')) {
105
+ this.isPressed = true;
106
+ }
107
+ else if (event.type === 'mousedown') {
108
+ this.isPressed = true;
109
+ }
110
+ else {
111
+ this.isPressed = false;
112
+ }
113
+ };
114
+ }
115
+ focus() {
116
+ this.buttonElement?.focus();
117
+ }
118
+ blur() {
119
+ this.buttonElement?.blur();
120
+ }
121
+ connectedCallback() {
122
+ super.connectedCallback();
123
+ window.addEventListener('mouseup', this.__handlePress);
124
+ }
125
+ disconnectedCallback() {
126
+ window.removeEventListener('mouseup', this.__handlePress);
127
+ super.disconnectedCallback();
128
+ }
129
+ firstUpdated() {
130
+ this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
131
+ observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
132
+ this.slotHasContent = hasContent;
133
+ this.requestUpdate();
134
+ });
135
+ }
136
+ __renderDisabledReason() {
137
+ if (this.disabled && this.disabledReason)
138
+ return html `<div
139
+ id="disabled-reason-${__classPrivateFieldGet(this, _Button_id, "f")}"
140
+ role="tooltip"
141
+ aria-label=${this.disabledReason}
142
+ class="sr-only"
143
+ >
144
+ {this.disabledReason}
145
+ </div>`;
146
+ return null;
147
+ }
148
+ /* @ts-ignore */
149
+ __isLink() {
150
+ return !!this.href;
151
+ }
152
+ render() {
153
+ const isLink = this.__isLink();
154
+ const { variant, subVariant } = this.getVariant();
155
+ const cssClasses = {
156
+ button: true,
157
+ 'button-element': true,
158
+ [`size-${this.size}`]: true,
159
+ [`variant-${variant}`]: true,
160
+ [`variant-${subVariant}`]: !!subVariant,
161
+ [`color-${this.color}`]: true,
162
+ disabled: this.disabled || this.softDisabled,
163
+ pressed: this.isPressed,
164
+ 'has-content': this.slotHasContent,
165
+ };
166
+ if (!isLink) {
167
+ return html `<button
168
+ class=${classMap(cssClasses)}
169
+ tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
170
+ type=${this.htmlType}
171
+ @click=${this.__dispatchClickWithThrottle}
172
+ @mousedown=${this.__handlePress}
173
+ @keydown=${this.__handlePress}
174
+ @keyup=${this.__handlePress}
175
+ ?aria-describedby=${(this.disabled || this.softDisabled) &&
176
+ this.disabledReason
177
+ ? `disabled-reason-${__classPrivateFieldGet(this, _Button_id, "f")}`
178
+ : null}
179
+ aria-disabled=${`${this.disabled || this.softDisabled}`}
180
+ ?disabled=${this.disabled}
181
+ >
182
+ ${this.renderButtonContent()}
183
+ </button>`;
184
+ }
185
+ return html `<a
186
+ class=${classMap(cssClasses)}
187
+ tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
188
+ href=${this.href}
189
+ target=${this.target}
190
+ @click=${this.__dispatchClickWithThrottle}
191
+ @mousedown=${this.__handlePress}
192
+ @keydown=${this.__handlePress}
193
+ @keyup=${this.__handlePress}
194
+ role="button"
195
+ aria-describedby=${this.disabled && this.disabledReason
196
+ ? `disabled-reason-${__classPrivateFieldGet(this, _Button_id, "f")}`
197
+ : null}
198
+ aria-disabled=${`${this.disabled}`}
199
+ >
200
+ <div class="icon">
201
+ <slot name="icon"></slot>
202
+ </div>
203
+
204
+ <div class="slot-container">
205
+ <slot></slot>
206
+ </div>
207
+ </a>`;
208
+ }
209
+ getVariant() {
210
+ const variants = this.variant?.split('.');
211
+ if (!['filled', 'outlined', 'text', 'tonal', 'neo'].includes(variants[0])) {
212
+ variants.unshift('filled');
213
+ }
214
+ const [variant, subVariant] = variants;
215
+ return { variant, subVariant };
216
+ }
217
+ renderButtonContent() {
218
+ return html `
219
+ <p-focus-ring class="focus-ring" .control=${this}></p-focus-ring>
220
+ <p-elevation class="elevation"></p-elevation>
221
+ <div class="neo-background"></div>
222
+ <div class="background"></div>
223
+ <div class="outline"></div>
224
+ <p-ripple class="ripple"></p-ripple>
225
+
226
+ <div class="button-content">
227
+ ${this.iconAlign === 'start'
228
+ ? html `<slot name="icon"></slot></div>`
229
+ : null}
230
+
231
+ <div class="slot-container">
232
+ <slot></slot>
233
+ </div>
234
+
235
+ ${this.iconAlign === 'end' ? html `<slot name="icon"></slot>` : null}
236
+ </div>
237
+
238
+ ${this.__renderDisabledReason()}
239
+ `;
240
+ }
241
+ }
242
+ _Button_id = new WeakMap(), _Button_tabindex = new WeakMap();
243
+ Button.styles = [styles];
244
+ __decorate([
245
+ query('.button')
246
+ ], Button.prototype, "buttonElement", void 0);
247
+ __decorate([
248
+ property({ type: String })
249
+ ], Button.prototype, "htmlType", void 0);
250
+ __decorate([
251
+ property()
252
+ ], Button.prototype, "variant", void 0);
253
+ __decorate([
254
+ property()
255
+ ], Button.prototype, "size", void 0);
256
+ __decorate([
257
+ property({ reflect: true })
258
+ ], Button.prototype, "disabled", void 0);
259
+ __decorate([
260
+ property({ reflect: true })
261
+ ], Button.prototype, "softDisabled", void 0);
262
+ __decorate([
263
+ property()
264
+ ], Button.prototype, "disabledReason", void 0);
265
+ __decorate([
266
+ property({ reflect: true })
267
+ ], Button.prototype, "color", void 0);
268
+ __decorate([
269
+ property()
270
+ ], Button.prototype, "iconAlign", void 0);
271
+ __decorate([
272
+ property({ reflect: true })
273
+ ], Button.prototype, "href", void 0);
274
+ __decorate([
275
+ property({ reflect: true })
276
+ ], Button.prototype, "configAria", void 0);
277
+ __decorate([
278
+ property()
279
+ ], Button.prototype, "target", void 0);
280
+ __decorate([
281
+ property()
282
+ ], Button.prototype, "selected", void 0);
283
+ __decorate([
284
+ property()
285
+ ], Button.prototype, "throttleDelay", void 0);
286
+ __decorate([
287
+ state()
288
+ ], Button.prototype, "isPressed", void 0);
289
+ __decorate([
290
+ state()
291
+ ], Button.prototype, "slotHasContent", void 0);
292
+ //# sourceMappingURL=button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/button/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './button.scss';\nimport { observerSlotChangesWithCallback, throttle } from '../utils.js';\n\n/**\n * @label Button\n * @tag p-button\n * @rawTag button\n *\n * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.\n * @overview\n * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --divider-color - Controls the color of the divider.\n * @cssprop --divider-padding - Controls the padding of the divider.\n *\n * @example\n * ```html\n * <pc-button>Button</pc-button>\n * ```\n * @tags display\n */\nexport class Button extends LitElement {\n static override styles = [styles];\n\n #id = crypto.randomUUID();\n\n #tabindex?: number = 0;\n\n @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =\n 'button';\n\n /**\n * The visual style of the button.\n *\n * Possible variant values:\n * `\"filled\"` is a filled button.\n * `\"outlined\"` is an outlined button.\n * `\"text\"` is a transparent button.\n * `\"tonal\"` is a light color button.\n *\n */\n @property() variant:\n | 'elevated'\n | 'filled'\n | 'tonal'\n | 'outlined'\n | 'text'\n | 'neo' = 'filled';\n\n /**\n * Button size.\n * Possible values are `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n */\n @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /**\n * If true, the user cannot interact with the button. Defaults to `false`.\n */\n @property({ reflect: true }) disabled: boolean = false;\n\n /**\n * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.\n */\n @property({ reflect: true }) softDisabled: boolean = false;\n\n /**\n * If button is disabled, the reason why it is disabled.\n */\n @property() disabledReason: string = '';\n\n /**\n * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n */\n @property({ reflect: true }) color:\n | 'primary'\n | 'secondary'\n | 'success'\n | 'danger'\n | 'warning'\n | 'white'\n | 'black' = 'primary';\n\n /**\n * Icon alignment.\n * Possible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.\n */\n @property() iconAlign: 'start' | 'end' = 'end';\n\n /**\n * Hyperlink to navigate to on click.\n */\n @property({ reflect: true }) href?: string;\n\n @property({ reflect: true }) configAria?: { [key: string]: any };\n\n /**\n * Sets or retrieves the window or frame at which to target content.\n */\n @property() target: string = '_self';\n\n @property() selected: boolean = false;\n\n /**\n * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.\n */\n @property() throttleDelay = 200;\n\n /**\n * States\n */\n @state()\n private isPressed = false;\n\n @state()\n private slotHasContent = false;\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n this.buttonElement?.blur();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('mouseup', this.__handlePress);\n }\n\n override disconnectedCallback() {\n window.removeEventListener('mouseup', this.__handlePress);\n super.disconnectedCallback();\n }\n\n override firstUpdated() {\n this.__dispatchClickWithThrottle = throttle(\n this.__dispatchClick,\n this.throttleDelay,\n );\n observerSlotChangesWithCallback(\n this.renderRoot.querySelector('slot'),\n hasContent => {\n this.slotHasContent = hasContent;\n this.requestUpdate();\n },\n );\n }\n\n private __dispatchClickWithThrottle: (\n event: MouseEvent | KeyboardEvent,\n ) => void = event => {\n this.__dispatchClick(event);\n };\n\n __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n // If the button is soft-disabled or a disabled link, we need to explicitly\n // prevent the click from propagating to other event listeners as well as\n // prevent the default action.\n if (this.softDisabled || (this.disabled && this.href)) {\n event.stopImmediatePropagation();\n event.preventDefault();\n return;\n }\n\n this.focus();\n this.dispatchEvent(\n new CustomEvent('button:click', {\n bubbles: true,\n composed: true,\n }),\n );\n };\n\n __renderDisabledReason() {\n if (this.disabled && this.disabledReason)\n return html`<div\n id=\"disabled-reason-${this.#id}\"\n role=\"tooltip\"\n aria-label=${this.disabledReason}\n class=\"sr-only\"\n >\n {this.disabledReason}\n </div>`;\n return null;\n }\n\n __handlePress = (event: KeyboardEvent | MouseEvent) => {\n if (\n event instanceof KeyboardEvent &&\n event.type === 'keydown' &&\n (event.key === 'Enter' || event.key === ' ')\n ) {\n this.isPressed = true;\n } else if (event.type === 'mousedown') {\n this.isPressed = true;\n } else {\n this.isPressed = false;\n }\n };\n\n /* @ts-ignore */\n private __isLink() {\n return !!this.href;\n }\n\n override render() {\n const isLink = this.__isLink();\n const { variant, subVariant } = this.getVariant();\n\n const cssClasses = {\n button: true,\n 'button-element': true,\n [`size-${this.size}`]: true,\n [`variant-${variant}`]: true,\n [`variant-${subVariant}`]: !!subVariant,\n [`color-${this.color}`]: true,\n disabled: this.disabled || this.softDisabled,\n pressed: this.isPressed,\n 'has-content': this.slotHasContent,\n };\n\n if (!isLink) {\n return html`<button\n class=${classMap(cssClasses)}\n tabindex=${this.#tabindex}\n type=${this.htmlType}\n @click=${this.__dispatchClickWithThrottle}\n @mousedown=${this.__handlePress}\n @keydown=${this.__handlePress}\n @keyup=${this.__handlePress}\n ?aria-describedby=${(this.disabled || this.softDisabled) &&\n this.disabledReason\n ? `disabled-reason-${this.#id}`\n : null}\n aria-disabled=${`${this.disabled || this.softDisabled}`}\n ?disabled=${this.disabled}\n >\n ${this.renderButtonContent()}\n </button>`;\n }\n return html`<a\n class=${classMap(cssClasses)}\n tabindex=${this.#tabindex}\n href=${this.href}\n target=${this.target}\n @click=${this.__dispatchClickWithThrottle}\n @mousedown=${this.__handlePress}\n @keydown=${this.__handlePress}\n @keyup=${this.__handlePress}\n role=\"button\"\n aria-describedby=${this.disabled && this.disabledReason\n ? `disabled-reason-${this.#id}`\n : null}\n aria-disabled=${`${this.disabled}`}\n >\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n </div>\n\n <div class=\"slot-container\">\n <slot></slot>\n </div>\n </a>`;\n }\n\n getVariant() {\n const variants = this.variant?.split('.');\n if (!['filled', 'outlined', 'text', 'tonal', 'neo'].includes(variants[0])) {\n variants.unshift('filled');\n }\n const [variant, subVariant] = variants as [string, string?];\n return { variant, subVariant };\n }\n\n renderButtonContent() {\n return html`\n <p-focus-ring class=\"focus-ring\" .control=${this}></p-focus-ring>\n <p-elevation class=\"elevation\"></p-elevation>\n <div class=\"neo-background\"></div>\n <div class=\"background\"></div>\n <div class=\"outline\"></div>\n <p-ripple class=\"ripple\"></p-ripple>\n\n <div class=\"button-content\">\n ${this.iconAlign === 'start'\n ? html`<slot name=\"icon\"></slot></div>`\n : null}\n\n <div class=\"slot-container\">\n <slot></slot>\n </div>\n\n ${this.iconAlign === 'end' ? html`<slot name=\"icon\"></slot>` : null}\n </div>\n\n ${this.__renderDisabledReason()}\n `;\n }\n}\n"]}
@@ -0,0 +1 @@
1
+ export { Button } from './button.js';
@@ -0,0 +1,2 @@
1
+ export { Button } from './button.js';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { Button } from './button.js';\n"]}
@@ -0,0 +1,10 @@
1
+ import { ReactiveController, ReactiveControllerHost } from 'lit';
2
+ export declare class ClockController implements ReactiveController {
3
+ host: ReactiveControllerHost;
4
+ value: Date;
5
+ timeout: number;
6
+ private _timerID?;
7
+ constructor(host: ReactiveControllerHost, timeout?: number);
8
+ hostConnected(): void;
9
+ hostDisconnected(): void;
10
+ }
@@ -0,0 +1,22 @@
1
+ export class ClockController {
2
+ constructor(host, timeout = 1000) {
3
+ this.value = new Date();
4
+ this.host = host;
5
+ this.host.addController(this);
6
+ this.timeout = timeout;
7
+ }
8
+ hostConnected() {
9
+ // Start a timer when the host is connected
10
+ this._timerID = setInterval(() => {
11
+ this.value = new Date();
12
+ // Update the host with new value
13
+ this.host.requestUpdate();
14
+ }, this.timeout);
15
+ }
16
+ hostDisconnected() {
17
+ // Clear the timer when the host is disconnected
18
+ clearInterval(this._timerID);
19
+ this._timerID = undefined;
20
+ }
21
+ }
22
+ //# sourceMappingURL=ClockController.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ClockController.js","sourceRoot":"","sources":["../../../src/clock/ClockController.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,eAAe;IAS1B,YAAY,IAA4B,EAAE,OAAO,GAAG,IAAI;QANxD,UAAK,GAAG,IAAI,IAAI,EAAE,CAAC;QAOjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC9B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,aAAa;QACX,2CAA2C;QAC3C,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;YACxB,iCAAiC;YACjC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC5B,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAED,gBAAgB;QACd,gDAAgD;QAChD,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;IAC5B,CAAC;CACF","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\r\n\r\nexport class ClockController implements ReactiveController {\r\n host: ReactiveControllerHost;\r\n\r\n value = new Date();\r\n\r\n timeout: number;\r\n\r\n private _timerID?: any;\r\n\r\n constructor(host: ReactiveControllerHost, timeout = 1000) {\r\n this.host = host;\r\n this.host.addController(this);\r\n this.timeout = timeout;\r\n }\r\n\r\n hostConnected() {\r\n // Start a timer when the host is connected\r\n this._timerID = setInterval(() => {\r\n this.value = new Date();\r\n // Update the host with new value\r\n this.host.requestUpdate();\r\n }, this.timeout);\r\n }\r\n\r\n hostDisconnected() {\r\n // Clear the timer when the host is disconnected\r\n clearInterval(this._timerID);\r\n this._timerID = undefined;\r\n }\r\n}\r\n"]}
@@ -1,4 +1,5 @@
1
1
  import { LitElement } from 'lit';
2
+ import { ClockController } from './ClockController.js';
2
3
  /**
3
4
  * @label Clock
4
5
  * @tag p-clock
@@ -16,12 +17,9 @@ import { LitElement } from 'lit';
16
17
  * @tags display
17
18
  */
18
19
  export declare class Clock extends LitElement {
19
- static styles: import("lit").CSSResult[];
20
+ static styles: import("lit").CSSResultGroup[];
21
+ clockController: ClockController;
20
22
  timezone?: string;
21
- currentTime: string;
22
- private _timerId;
23
- connectedCallback(): void;
24
- disconnectedCallback(): void;
25
- __updateCurrentTime(): void;
23
+ __formatDate(date: Date): string;
26
24
  render(): import("lit-html").TemplateResult<1>;
27
25
  }