ngx-color 7.2.0 → 7.3.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/alpha/alpha-picker.component.d.ts +8 -0
  2. package/alpha/ngx-color-alpha.d.ts +2 -1
  3. package/alpha/package.json +6 -10
  4. package/alpha/public_api.d.ts +1 -0
  5. package/alpha.component.d.ts +9 -0
  6. package/block/block-swatches.component.d.ts +13 -8
  7. package/block/block.component.d.ts +9 -0
  8. package/block/ngx-color-block.d.ts +2 -2
  9. package/block/package.json +6 -10
  10. package/block/public_api.d.ts +2 -0
  11. package/checkboard.component.d.ts +7 -0
  12. package/chrome/chrome-fields.component.d.ts +3 -0
  13. package/chrome/chrome.component.d.ts +9 -0
  14. package/chrome/ngx-color-chrome.d.ts +2 -2
  15. package/chrome/package.json +6 -10
  16. package/chrome/public_api.d.ts +2 -0
  17. package/circle/circle-swatch.component.d.ts +3 -0
  18. package/circle/circle.component.d.ts +9 -0
  19. package/circle/ngx-color-circle.d.ts +2 -2
  20. package/circle/package.json +9 -10
  21. package/circle/public_api.d.ts +2 -0
  22. package/color-wrap.component.d.ts +7 -0
  23. package/compact/compact-color.component.d.ts +3 -0
  24. package/compact/compact-fields.component.d.ts +3 -0
  25. package/compact/compact.component.d.ts +10 -0
  26. package/compact/ngx-color-compact.d.ts +2 -3
  27. package/compact/package.json +6 -10
  28. package/compact/public_api.d.ts +3 -0
  29. package/coordinates.directive.d.ts +6 -0
  30. package/editable-input.component.d.ts +7 -0
  31. package/esm2020/alpha/alpha-picker.component.mjs +116 -0
  32. package/esm2020/alpha/ngx-color-alpha.mjs +5 -0
  33. package/esm2020/alpha/public_api.mjs +2 -0
  34. package/esm2020/alpha.component.mjs +186 -0
  35. package/esm2020/block/block-swatches.component.mjs +74 -0
  36. package/esm2020/block/block.component.mjs +199 -0
  37. package/esm2020/block/ngx-color-block.mjs +5 -0
  38. package/esm2020/block/public_api.mjs +3 -0
  39. package/esm2020/checkboard.component.mjs +66 -0
  40. package/esm2020/chrome/chrome-fields.component.mjs +356 -0
  41. package/{chrome/esm2015/chrome.component.js → esm2020/chrome/chrome.component.mjs} +116 -40
  42. package/esm2020/chrome/ngx-color-chrome.mjs +5 -0
  43. package/esm2020/chrome/public_api.mjs +3 -0
  44. package/esm2020/circle/circle-swatch.component.mjs +85 -0
  45. package/esm2020/circle/circle.component.mjs +148 -0
  46. package/esm2020/circle/ngx-color-circle.mjs +5 -0
  47. package/esm2020/circle/public_api.mjs +3 -0
  48. package/esm2020/color-wrap.component.mjs +163 -0
  49. package/esm2020/compact/compact-color.component.mjs +91 -0
  50. package/esm2020/compact/compact-fields.component.mjs +186 -0
  51. package/esm2020/compact/compact.component.mjs +177 -0
  52. package/esm2020/compact/ngx-color-compact.mjs +5 -0
  53. package/esm2020/compact/public_api.mjs +4 -0
  54. package/esm2020/coordinates.directive.mjs +104 -0
  55. package/esm2020/editable-input.component.mjs +217 -0
  56. package/esm2020/github/github-swatch.component.mjs +67 -0
  57. package/esm2020/github/github.component.mjs +179 -0
  58. package/esm2020/github/ngx-color-github.mjs +5 -0
  59. package/esm2020/github/public_api.mjs +3 -0
  60. package/esm2020/helpers/checkboard.mjs +33 -0
  61. package/esm2020/helpers/color.interfaces.mjs +2 -0
  62. package/esm2020/helpers/color.mjs +60 -0
  63. package/esm2020/hue/hue-picker.component.mjs +113 -0
  64. package/esm2020/hue/ngx-color-hue.mjs +5 -0
  65. package/esm2020/hue/public_api.mjs +2 -0
  66. package/esm2020/hue.component.mjs +165 -0
  67. package/esm2020/material/material.component.mjs +211 -0
  68. package/esm2020/material/ngx-color-material.mjs +5 -0
  69. package/esm2020/material/public_api.mjs +2 -0
  70. package/esm2020/ngx-color.mjs +5 -0
  71. package/esm2020/photoshop/ngx-color-photoshop.mjs +5 -0
  72. package/esm2020/photoshop/photoshop-button.component.mjs +63 -0
  73. package/esm2020/photoshop/photoshop-fields.component.mjs +241 -0
  74. package/esm2020/photoshop/photoshop-previews.component.mjs +68 -0
  75. package/esm2020/photoshop/photoshop.component.mjs +258 -0
  76. package/esm2020/photoshop/public_api.mjs +5 -0
  77. package/esm2020/public_api.mjs +14 -0
  78. package/esm2020/raised.component.mjs +89 -0
  79. package/esm2020/saturation.component.mjs +136 -0
  80. package/esm2020/shade/ngx-color-shade.mjs +5 -0
  81. package/esm2020/shade/public_api.mjs +2 -0
  82. package/esm2020/shade/shade-picker.component.mjs +105 -0
  83. package/esm2020/shade.component.mjs +165 -0
  84. package/esm2020/sketch/ngx-color-sketch.mjs +5 -0
  85. package/esm2020/sketch/public_api.mjs +4 -0
  86. package/esm2020/sketch/sketch-fields.component.mjs +243 -0
  87. package/esm2020/sketch/sketch-preset-colors.component.mjs +98 -0
  88. package/esm2020/sketch/sketch.component.mjs +283 -0
  89. package/esm2020/slider/ngx-color-slider.mjs +5 -0
  90. package/esm2020/slider/public_api.mjs +4 -0
  91. package/esm2020/slider/slider-swatch.component.mjs +80 -0
  92. package/esm2020/slider/slider-swatches.component.mjs +135 -0
  93. package/esm2020/slider/slider.component.mjs +116 -0
  94. package/esm2020/swatch.component.mjs +125 -0
  95. package/esm2020/swatches/ngx-color-swatches.mjs +5 -0
  96. package/esm2020/swatches/public_api.mjs +4 -0
  97. package/esm2020/swatches/swatches-color.component.mjs +123 -0
  98. package/esm2020/swatches/swatches-group.component.mjs +64 -0
  99. package/esm2020/swatches/swatches.component.mjs +258 -0
  100. package/esm2020/twitter/ngx-color-twitter.mjs +5 -0
  101. package/esm2020/twitter/public_api.mjs +2 -0
  102. package/{twitter/esm2015/twitter.component.js → esm2020/twitter/twitter.component.mjs} +83 -35
  103. package/fesm2015/ngx-color-alpha.mjs +123 -0
  104. package/fesm2015/ngx-color-alpha.mjs.map +1 -0
  105. package/fesm2015/ngx-color-block.mjs +275 -0
  106. package/fesm2015/ngx-color-block.mjs.map +1 -0
  107. package/fesm2015/ngx-color-chrome.mjs +606 -0
  108. package/fesm2015/ngx-color-chrome.mjs.map +1 -0
  109. package/fesm2015/ngx-color-circle.mjs +237 -0
  110. package/fesm2015/ngx-color-circle.mjs.map +1 -0
  111. package/fesm2015/ngx-color-compact.mjs +451 -0
  112. package/fesm2015/ngx-color-compact.mjs.map +1 -0
  113. package/fesm2015/ngx-color-github.mjs +250 -0
  114. package/fesm2015/ngx-color-github.mjs.map +1 -0
  115. package/fesm2015/ngx-color-hue.mjs +120 -0
  116. package/fesm2015/ngx-color-hue.mjs.map +1 -0
  117. package/fesm2015/ngx-color-material.mjs +218 -0
  118. package/fesm2015/ngx-color-material.mjs.map +1 -0
  119. package/fesm2015/ngx-color-photoshop.mjs +626 -0
  120. package/fesm2015/ngx-color-photoshop.mjs.map +1 -0
  121. package/fesm2015/ngx-color-shade.mjs +112 -0
  122. package/fesm2015/ngx-color-shade.mjs.map +1 -0
  123. package/fesm2015/ngx-color-sketch.mjs +620 -0
  124. package/fesm2015/ngx-color-sketch.mjs.map +1 -0
  125. package/fesm2015/ngx-color-slider.mjs +331 -0
  126. package/fesm2015/ngx-color-slider.mjs.map +1 -0
  127. package/fesm2015/ngx-color-swatches.mjs +441 -0
  128. package/fesm2015/ngx-color-swatches.mjs.map +1 -0
  129. package/fesm2015/ngx-color-twitter.mjs +262 -0
  130. package/fesm2015/ngx-color-twitter.mjs.map +1 -0
  131. package/fesm2015/ngx-color.mjs +1461 -0
  132. package/fesm2015/ngx-color.mjs.map +1 -0
  133. package/fesm2020/ngx-color-alpha.mjs +123 -0
  134. package/fesm2020/ngx-color-alpha.mjs.map +1 -0
  135. package/fesm2020/ngx-color-block.mjs +275 -0
  136. package/fesm2020/ngx-color-block.mjs.map +1 -0
  137. package/fesm2020/ngx-color-chrome.mjs +606 -0
  138. package/fesm2020/ngx-color-chrome.mjs.map +1 -0
  139. package/fesm2020/ngx-color-circle.mjs +237 -0
  140. package/fesm2020/ngx-color-circle.mjs.map +1 -0
  141. package/fesm2020/ngx-color-compact.mjs +451 -0
  142. package/fesm2020/ngx-color-compact.mjs.map +1 -0
  143. package/fesm2020/ngx-color-github.mjs +250 -0
  144. package/fesm2020/ngx-color-github.mjs.map +1 -0
  145. package/fesm2020/ngx-color-hue.mjs +120 -0
  146. package/fesm2020/ngx-color-hue.mjs.map +1 -0
  147. package/fesm2020/ngx-color-material.mjs +218 -0
  148. package/fesm2020/ngx-color-material.mjs.map +1 -0
  149. package/fesm2020/ngx-color-photoshop.mjs +626 -0
  150. package/fesm2020/ngx-color-photoshop.mjs.map +1 -0
  151. package/fesm2020/ngx-color-shade.mjs +112 -0
  152. package/fesm2020/ngx-color-shade.mjs.map +1 -0
  153. package/fesm2020/ngx-color-sketch.mjs +620 -0
  154. package/fesm2020/ngx-color-sketch.mjs.map +1 -0
  155. package/fesm2020/ngx-color-slider.mjs +331 -0
  156. package/fesm2020/ngx-color-slider.mjs.map +1 -0
  157. package/fesm2020/ngx-color-swatches.mjs +441 -0
  158. package/fesm2020/ngx-color-swatches.mjs.map +1 -0
  159. package/fesm2020/ngx-color-twitter.mjs +262 -0
  160. package/fesm2020/ngx-color-twitter.mjs.map +1 -0
  161. package/fesm2020/ngx-color.mjs +1466 -0
  162. package/fesm2020/ngx-color.mjs.map +1 -0
  163. package/github/github-swatch.component.d.ts +3 -0
  164. package/github/github.component.d.ts +9 -0
  165. package/github/ngx-color-github.d.ts +2 -2
  166. package/github/package.json +6 -10
  167. package/github/public_api.d.ts +2 -0
  168. package/hue/hue-picker.component.d.ts +8 -0
  169. package/hue/ngx-color-hue.d.ts +2 -1
  170. package/hue/package.json +6 -10
  171. package/hue/public_api.d.ts +1 -0
  172. package/hue.component.d.ts +8 -0
  173. package/material/material.component.d.ts +8 -0
  174. package/material/ngx-color-material.d.ts +2 -1
  175. package/material/package.json +6 -10
  176. package/material/public_api.d.ts +1 -0
  177. package/ngx-color.d.ts +1 -0
  178. package/package.json +133 -9
  179. package/photoshop/ngx-color-photoshop.d.ts +2 -4
  180. package/photoshop/package.json +6 -10
  181. package/photoshop/photoshop-button.component.d.ts +3 -0
  182. package/photoshop/photoshop-fields.component.d.ts +3 -0
  183. package/photoshop/photoshop-previews.component.d.ts +3 -0
  184. package/photoshop/photoshop.component.d.ts +11 -0
  185. package/photoshop/public_api.d.ts +4 -0
  186. package/raised.component.d.ts +7 -0
  187. package/saturation.component.d.ts +8 -0
  188. package/shade/ngx-color-shade.d.ts +2 -1
  189. package/shade/package.json +6 -10
  190. package/shade/public_api.d.ts +1 -0
  191. package/shade/shade-picker.component.d.ts +8 -0
  192. package/shade.component.d.ts +8 -0
  193. package/sketch/ngx-color-sketch.d.ts +2 -3
  194. package/sketch/package.json +6 -10
  195. package/sketch/public_api.d.ts +3 -0
  196. package/sketch/sketch-fields.component.d.ts +3 -0
  197. package/sketch/sketch-preset-colors.component.d.ts +3 -0
  198. package/sketch/sketch.component.d.ts +10 -0
  199. package/slider/ngx-color-slider.d.ts +2 -3
  200. package/slider/package.json +6 -10
  201. package/slider/public_api.d.ts +3 -0
  202. package/slider/slider-swatch.component.d.ts +3 -0
  203. package/slider/slider-swatches.component.d.ts +3 -0
  204. package/slider/slider.component.d.ts +10 -0
  205. package/swatch.component.d.ts +8 -0
  206. package/swatches/ngx-color-swatches.d.ts +2 -3
  207. package/swatches/package.json +9 -10
  208. package/swatches/public_api.d.ts +3 -0
  209. package/swatches/swatches-color.component.d.ts +3 -0
  210. package/swatches/swatches-group.component.d.ts +3 -0
  211. package/swatches/swatches.component.d.ts +10 -0
  212. package/twitter/ngx-color-twitter.d.ts +2 -1
  213. package/twitter/package.json +6 -10
  214. package/twitter/public_api.d.ts +1 -0
  215. package/twitter/twitter.component.d.ts +8 -0
  216. package/alpha/bundles/ngx-color-alpha.umd.js +0 -404
  217. package/alpha/bundles/ngx-color-alpha.umd.js.map +0 -1
  218. package/alpha/esm2015/alpha-picker.component.js +0 -84
  219. package/alpha/esm2015/ngx-color-alpha.js +0 -5
  220. package/alpha/fesm2015/ngx-color-alpha.js +0 -91
  221. package/alpha/fesm2015/ngx-color-alpha.js.map +0 -1
  222. package/alpha/ngx-color-alpha.metadata.json +0 -1
  223. package/block/bundles/ngx-color-block.umd.js +0 -472
  224. package/block/bundles/ngx-color-block.umd.js.map +0 -1
  225. package/block/esm2015/block-swatches.component.js +0 -58
  226. package/block/esm2015/block.component.js +0 -151
  227. package/block/esm2015/ngx-color-block.js +0 -6
  228. package/block/fesm2015/ngx-color-block.js +0 -214
  229. package/block/fesm2015/ngx-color-block.js.map +0 -1
  230. package/block/ngx-color-block.metadata.json +0 -1
  231. package/bundles/ngx-color.umd.js +0 -1014
  232. package/bundles/ngx-color.umd.js.map +0 -1
  233. package/chrome/bundles/ngx-color-chrome.umd.js +0 -543
  234. package/chrome/bundles/ngx-color-chrome.umd.js.map +0 -1
  235. package/chrome/esm2015/chrome-fields.component.js +0 -255
  236. package/chrome/esm2015/ngx-color-chrome.js +0 -6
  237. package/chrome/fesm2015/ngx-color-chrome.js +0 -432
  238. package/chrome/fesm2015/ngx-color-chrome.js.map +0 -1
  239. package/chrome/ngx-color-chrome.metadata.json +0 -1
  240. package/circle/bundles/ngx-color-circle.umd.js +0 -469
  241. package/circle/bundles/ngx-color-circle.umd.js.map +0 -1
  242. package/circle/esm2015/circle-swatch.component.js +0 -63
  243. package/circle/esm2015/circle.component.js +0 -109
  244. package/circle/esm2015/ngx-color-circle.js +0 -6
  245. package/circle/fesm2015/ngx-color-circle.js +0 -177
  246. package/circle/fesm2015/ngx-color-circle.js.map +0 -1
  247. package/circle/ngx-color-circle.metadata.json +0 -1
  248. package/compact/bundles/ngx-color-compact.umd.js +0 -579
  249. package/compact/bundles/ngx-color-compact.umd.js.map +0 -1
  250. package/compact/esm2015/compact-color.component.js +0 -70
  251. package/compact/esm2015/compact-fields.component.js +0 -142
  252. package/compact/esm2015/compact.component.js +0 -135
  253. package/compact/esm2015/ngx-color-compact.js +0 -7
  254. package/compact/fesm2015/ngx-color-compact.js +0 -348
  255. package/compact/fesm2015/ngx-color-compact.js.map +0 -1
  256. package/compact/ngx-color-compact.metadata.json +0 -1
  257. package/esm2015/alpha.component.js +0 -156
  258. package/esm2015/checkboard.component.js +0 -52
  259. package/esm2015/color-wrap.component.js +0 -145
  260. package/esm2015/coordinates.directive.js +0 -85
  261. package/esm2015/editable-input.component.js +0 -183
  262. package/esm2015/helpers/checkboard.js +0 -33
  263. package/esm2015/helpers/color.interfaces.js +0 -2
  264. package/esm2015/helpers/color.js +0 -60
  265. package/esm2015/hue.component.js +0 -140
  266. package/esm2015/ngx-color.js +0 -5
  267. package/esm2015/public_api.js +0 -14
  268. package/esm2015/raised.component.js +0 -73
  269. package/esm2015/saturation.component.js +0 -111
  270. package/esm2015/shade.component.js +0 -127
  271. package/esm2015/swatch.component.js +0 -85
  272. package/fesm2015/ngx-color.js +0 -1228
  273. package/fesm2015/ngx-color.js.map +0 -1
  274. package/github/bundles/ngx-color-github.umd.js +0 -447
  275. package/github/bundles/ngx-color-github.umd.js.map +0 -1
  276. package/github/esm2015/github-swatch.component.js +0 -48
  277. package/github/esm2015/github.component.js +0 -146
  278. package/github/esm2015/ngx-color-github.js +0 -6
  279. package/github/fesm2015/ngx-color-github.js +0 -199
  280. package/github/fesm2015/ngx-color-github.js.map +0 -1
  281. package/github/ngx-color-github.metadata.json +0 -1
  282. package/hue/bundles/ngx-color-hue.umd.js +0 -407
  283. package/hue/bundles/ngx-color-hue.umd.js.map +0 -1
  284. package/hue/esm2015/hue-picker.component.js +0 -82
  285. package/hue/esm2015/ngx-color-hue.js +0 -5
  286. package/hue/fesm2015/ngx-color-hue.js +0 -89
  287. package/hue/fesm2015/ngx-color-hue.js.map +0 -1
  288. package/hue/ngx-color-hue.metadata.json +0 -1
  289. package/material/bundles/ngx-color-material.umd.js +0 -455
  290. package/material/bundles/ngx-color-material.umd.js.map +0 -1
  291. package/material/esm2015/material.component.js +0 -161
  292. package/material/esm2015/ngx-color-material.js +0 -5
  293. package/material/fesm2015/ngx-color-material.js +0 -168
  294. package/material/fesm2015/ngx-color-material.js.map +0 -1
  295. package/material/ngx-color-material.metadata.json +0 -1
  296. package/ngx-color.metadata.json +0 -1
  297. package/photoshop/bundles/ngx-color-photoshop.umd.js +0 -571
  298. package/photoshop/bundles/ngx-color-photoshop.umd.js.map +0 -1
  299. package/photoshop/esm2015/ngx-color-photoshop.js +0 -8
  300. package/photoshop/esm2015/photoshop-button.component.js +0 -50
  301. package/photoshop/esm2015/photoshop-fields.component.js +0 -180
  302. package/photoshop/esm2015/photoshop-previews.component.js +0 -53
  303. package/photoshop/esm2015/photoshop.component.js +0 -181
  304. package/photoshop/fesm2015/ngx-color-photoshop.js +0 -464
  305. package/photoshop/fesm2015/ngx-color-photoshop.js.map +0 -1
  306. package/photoshop/ngx-color-photoshop.metadata.json +0 -1
  307. package/shade/bundles/ngx-color-shade.umd.js +0 -399
  308. package/shade/bundles/ngx-color-shade.umd.js.map +0 -1
  309. package/shade/esm2015/ngx-color-shade.js +0 -5
  310. package/shade/esm2015/shade-picker.component.js +0 -75
  311. package/shade/fesm2015/ngx-color-shade.js +0 -82
  312. package/shade/fesm2015/ngx-color-shade.js.map +0 -1
  313. package/shade/ngx-color-shade.metadata.json +0 -1
  314. package/sketch/bundles/ngx-color-sketch.umd.js +0 -585
  315. package/sketch/bundles/ngx-color-sketch.umd.js.map +0 -1
  316. package/sketch/esm2015/ngx-color-sketch.js +0 -7
  317. package/sketch/esm2015/sketch-fields.component.js +0 -181
  318. package/sketch/esm2015/sketch-preset-colors.component.js +0 -76
  319. package/sketch/esm2015/sketch.component.js +0 -203
  320. package/sketch/fesm2015/ngx-color-sketch.js +0 -462
  321. package/sketch/fesm2015/ngx-color-sketch.js.map +0 -1
  322. package/sketch/ngx-color-sketch.metadata.json +0 -1
  323. package/slider/bundles/ngx-color-slider.umd.js +0 -470
  324. package/slider/bundles/ngx-color-slider.umd.js.map +0 -1
  325. package/slider/esm2015/ngx-color-slider.js +0 -7
  326. package/slider/esm2015/slider-swatch.component.js +0 -65
  327. package/slider/esm2015/slider-swatches.component.js +0 -84
  328. package/slider/esm2015/slider.component.js +0 -81
  329. package/slider/fesm2015/ngx-color-slider.js +0 -233
  330. package/slider/fesm2015/ngx-color-slider.js.map +0 -1
  331. package/slider/ngx-color-slider.metadata.json +0 -1
  332. package/swatches/bundles/ngx-color-swatches.umd.js +0 -612
  333. package/swatches/bundles/ngx-color-swatches.umd.js.map +0 -1
  334. package/swatches/esm2015/ngx-color-swatches.js +0 -7
  335. package/swatches/esm2015/swatches-color.component.js +0 -90
  336. package/swatches/esm2015/swatches-group.component.js +0 -42
  337. package/swatches/esm2015/swatches.component.js +0 -217
  338. package/swatches/fesm2015/ngx-color-swatches.js +0 -351
  339. package/swatches/fesm2015/ngx-color-swatches.js.map +0 -1
  340. package/swatches/ngx-color-swatches.metadata.json +0 -1
  341. package/twitter/bundles/ngx-color-twitter.umd.js +0 -433
  342. package/twitter/bundles/ngx-color-twitter.umd.js.map +0 -1
  343. package/twitter/esm2015/ngx-color-twitter.js +0 -5
  344. package/twitter/fesm2015/ngx-color-twitter.js +0 -214
  345. package/twitter/fesm2015/ngx-color-twitter.js.map +0 -1
  346. package/twitter/ngx-color-twitter.metadata.json +0 -1
@@ -1,351 +0,0 @@
1
- import { CommonModule } from '@angular/common';
2
- import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
3
- import { red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange, brown, blueGrey } from 'material-colors';
4
- import { getContrastingColor, ColorWrap, SwatchModule, RaisedModule } from 'ngx-color';
5
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
6
-
7
- class SwatchesColorComponent {
8
- constructor() {
9
- this.first = false;
10
- this.last = false;
11
- this.onClick = new EventEmitter();
12
- this.onSwatchHover = new EventEmitter();
13
- this.getContrastingColor = getContrastingColor;
14
- this.colorStyle = {
15
- width: '40px',
16
- height: '24px',
17
- cursor: 'pointer',
18
- marginBottom: '1px',
19
- };
20
- this.focusStyle = {};
21
- }
22
- ngOnInit() {
23
- this.colorStyle.background = this.color;
24
- this.focusStyle.boxShadow = `0 0 4px ${this.color}`;
25
- if (this.first) {
26
- this.colorStyle.borderRadius = '2px 2px 0 0';
27
- }
28
- if (this.last) {
29
- this.colorStyle.borderRadius = '0 0 2px 2px';
30
- }
31
- if (this.color === '#FFFFFF') {
32
- this.colorStyle.boxShadow = 'inset 0 0 0 1px #ddd';
33
- }
34
- }
35
- handleClick($event) {
36
- this.onClick.emit({
37
- data: {
38
- hex: this.color,
39
- source: 'hex',
40
- },
41
- $event,
42
- });
43
- }
44
- }
45
- SwatchesColorComponent.decorators = [
46
- { type: Component, args: [{
47
- selector: 'color-swatches-color',
48
- template: `
49
- <color-swatch
50
- [color]="color"
51
- [style]="colorStyle"
52
- [focusStyle]="focusStyle"
53
- [class.first]="first"
54
- [class.last]="last"
55
- (click)="handleClick($event)"
56
- (keydown.enter)="handleClick($event)"
57
- (onHover)="onSwatchHover.emit($event)"
58
- >
59
- <div class="swatch-check" *ngIf="active" [class.first]="first" [class.last]="last">
60
- <svg
61
- style="width: 24px; height: 24px;"
62
- viewBox="0 0 24 24"
63
- [style.fill]="getContrastingColor(color)"
64
- >
65
- <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
66
- </svg>
67
- </div>
68
- </color-swatch>
69
- `,
70
- changeDetection: ChangeDetectionStrategy.OnPush,
71
- preserveWhitespaces: false,
72
- styles: [`
73
- .swatches-group {
74
- padding-bottom: 10px;
75
- width: 40px;
76
- float: left;
77
- margin-right: 10px;
78
- }
79
- .swatch-check {
80
- display: flex;
81
- margin-left: 8px;
82
- }
83
- `]
84
- },] }
85
- ];
86
- SwatchesColorComponent.propDecorators = {
87
- color: [{ type: Input }],
88
- first: [{ type: Input }],
89
- last: [{ type: Input }],
90
- active: [{ type: Input }],
91
- onClick: [{ type: Output }],
92
- onSwatchHover: [{ type: Output }]
93
- };
94
-
95
- class SwatchesGroupComponent {
96
- constructor() {
97
- this.onClick = new EventEmitter();
98
- this.onSwatchHover = new EventEmitter();
99
- }
100
- }
101
- SwatchesGroupComponent.decorators = [
102
- { type: Component, args: [{
103
- selector: 'color-swatches-group',
104
- template: `
105
- <div class="swatches-group">
106
- <color-swatches-color
107
- *ngFor="let color of group; let idx = index"
108
- [active]="color.toLowerCase() === active"
109
- [color]="color"
110
- [first]="idx === 0"
111
- [last]="idx === group.length - 1"
112
- (onClick)="onClick.emit($event)"
113
- >
114
- </color-swatches-color>
115
- </div>
116
- `,
117
- changeDetection: ChangeDetectionStrategy.OnPush,
118
- preserveWhitespaces: false,
119
- styles: [`
120
- .swatches-group {
121
- padding-bottom: 10px;
122
- width: 40px;
123
- float: left;
124
- margin-right: 10px;
125
- }
126
- `]
127
- },] }
128
- ];
129
- SwatchesGroupComponent.propDecorators = {
130
- group: [{ type: Input }],
131
- active: [{ type: Input }],
132
- onClick: [{ type: Output }],
133
- onSwatchHover: [{ type: Output }]
134
- };
135
-
136
- class SwatchesComponent extends ColorWrap {
137
- constructor() {
138
- super();
139
- /** Pixel value for picker width */
140
- this.width = 320;
141
- /** Color squares to display */
142
- this.height = 240;
143
- /** An array of color groups, each with an array of colors */
144
- this.colors = [
145
- [
146
- red['900'],
147
- red['700'],
148
- red['500'],
149
- red['300'],
150
- red['100'],
151
- ],
152
- [
153
- pink['900'],
154
- pink['700'],
155
- pink['500'],
156
- pink['300'],
157
- pink['100'],
158
- ],
159
- [
160
- purple['900'],
161
- purple['700'],
162
- purple['500'],
163
- purple['300'],
164
- purple['100'],
165
- ],
166
- [
167
- deepPurple['900'],
168
- deepPurple['700'],
169
- deepPurple['500'],
170
- deepPurple['300'],
171
- deepPurple['100'],
172
- ],
173
- [
174
- indigo['900'],
175
- indigo['700'],
176
- indigo['500'],
177
- indigo['300'],
178
- indigo['100'],
179
- ],
180
- [
181
- blue['900'],
182
- blue['700'],
183
- blue['500'],
184
- blue['300'],
185
- blue['100'],
186
- ],
187
- [
188
- lightBlue['900'],
189
- lightBlue['700'],
190
- lightBlue['500'],
191
- lightBlue['300'],
192
- lightBlue['100'],
193
- ],
194
- [
195
- cyan['900'],
196
- cyan['700'],
197
- cyan['500'],
198
- cyan['300'],
199
- cyan['100'],
200
- ],
201
- [
202
- teal['900'],
203
- teal['700'],
204
- teal['500'],
205
- teal['300'],
206
- teal['100'],
207
- ],
208
- [
209
- '#194D33',
210
- green['700'],
211
- green['500'],
212
- green['300'],
213
- green['100'],
214
- ],
215
- [
216
- lightGreen['900'],
217
- lightGreen['700'],
218
- lightGreen['500'],
219
- lightGreen['300'],
220
- lightGreen['100'],
221
- ],
222
- [
223
- lime['900'],
224
- lime['700'],
225
- lime['500'],
226
- lime['300'],
227
- lime['100'],
228
- ],
229
- [
230
- yellow['900'],
231
- yellow['700'],
232
- yellow['500'],
233
- yellow['300'],
234
- yellow['100'],
235
- ],
236
- [
237
- amber['900'],
238
- amber['700'],
239
- amber['500'],
240
- amber['300'],
241
- amber['100'],
242
- ],
243
- [
244
- orange['900'],
245
- orange['700'],
246
- orange['500'],
247
- orange['300'],
248
- orange['100'],
249
- ],
250
- [
251
- deepOrange['900'],
252
- deepOrange['700'],
253
- deepOrange['500'],
254
- deepOrange['300'],
255
- deepOrange['100'],
256
- ],
257
- [
258
- brown['900'],
259
- brown['700'],
260
- brown['500'],
261
- brown['300'],
262
- brown['100'],
263
- ],
264
- [
265
- blueGrey['900'],
266
- blueGrey['700'],
267
- blueGrey['500'],
268
- blueGrey['300'],
269
- blueGrey['100'],
270
- ],
271
- ['#000000', '#525252', '#969696', '#D9D9D9', '#FFFFFF'],
272
- ];
273
- this.zDepth = 1;
274
- this.radius = 1;
275
- this.background = '#fff';
276
- }
277
- handlePickerChange({ data, $event }) {
278
- this.handleChange(data, $event);
279
- }
280
- }
281
- SwatchesComponent.decorators = [
282
- { type: Component, args: [{
283
- selector: 'color-swatches',
284
- template: `
285
- <div class="swatches-picker {{ className }}"
286
- [style.width.px]="width" [style.height.px]="height">
287
- <color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
288
- <div class="swatches-overflow" [style.height.px]="height">
289
- <div class="swatches-body">
290
- <color-swatches-group
291
- *ngFor="let group of colors"
292
- [group]="group" [active]="hex"
293
- (onClick)="handlePickerChange($event)"
294
- ></color-swatches-group>
295
- </div>
296
- </div>
297
- </color-raised>
298
- </div>
299
- `,
300
- changeDetection: ChangeDetectionStrategy.OnPush,
301
- preserveWhitespaces: false,
302
- providers: [
303
- {
304
- provide: NG_VALUE_ACCESSOR,
305
- useExisting: forwardRef(() => SwatchesComponent),
306
- multi: true,
307
- },
308
- {
309
- provide: ColorWrap,
310
- useExisting: forwardRef(() => SwatchesComponent),
311
- },
312
- ],
313
- styles: [`
314
- .swatches-overflow {
315
- overflow-y: scroll;
316
- }
317
- .swatches-overflow {
318
- padding: 16px 0 6px 16px;
319
- }
320
- `]
321
- },] }
322
- ];
323
- SwatchesComponent.ctorParameters = () => [];
324
- SwatchesComponent.propDecorators = {
325
- width: [{ type: Input }],
326
- height: [{ type: Input }],
327
- colors: [{ type: Input }],
328
- zDepth: [{ type: Input }],
329
- radius: [{ type: Input }],
330
- background: [{ type: Input }]
331
- };
332
- class ColorSwatchesModule {
333
- }
334
- ColorSwatchesModule.decorators = [
335
- { type: NgModule, args: [{
336
- declarations: [
337
- SwatchesComponent,
338
- SwatchesGroupComponent,
339
- SwatchesColorComponent,
340
- ],
341
- exports: [SwatchesComponent, SwatchesGroupComponent, SwatchesColorComponent],
342
- imports: [CommonModule, SwatchModule, RaisedModule],
343
- },] }
344
- ];
345
-
346
- /**
347
- * Generated bundle index. Do not edit.
348
- */
349
-
350
- export { ColorSwatchesModule, SwatchesComponent, SwatchesGroupComponent as ɵa, SwatchesColorComponent as ɵb };
351
- //# sourceMappingURL=ngx-color-swatches.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ngx-color-swatches.js","sources":["../../../../src/lib/components/swatches/swatches-color.component.ts","../../../../src/lib/components/swatches/swatches-group.component.ts","../../../../src/lib/components/swatches/swatches.component.ts","../../../../src/lib/components/swatches/ngx-color-swatches.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnInit,\n Output,\n} from '@angular/core';\n\nimport { getContrastingColor } from 'ngx-color';\n\n@Component({\n selector: 'color-swatches-color',\n template: `\n <color-swatch\n [color]=\"color\"\n [style]=\"colorStyle\"\n [focusStyle]=\"focusStyle\"\n [class.first]=\"first\"\n [class.last]=\"last\"\n (click)=\"handleClick($event)\"\n (keydown.enter)=\"handleClick($event)\"\n (onHover)=\"onSwatchHover.emit($event)\"\n >\n <div class=\"swatch-check\" *ngIf=\"active\" [class.first]=\"first\" [class.last]=\"last\">\n <svg\n style=\"width: 24px; height: 24px;\"\n viewBox=\"0 0 24 24\"\n [style.fill]=\"getContrastingColor(color)\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n </div>\n </color-swatch>\n `,\n styles: [\n `\n .swatches-group {\n padding-bottom: 10px;\n width: 40px;\n float: left;\n margin-right: 10px;\n }\n .swatch-check {\n display: flex;\n margin-left: 8px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class SwatchesColorComponent implements OnInit {\n @Input() color!: string;\n @Input() first = false;\n @Input() last = false;\n @Input() active!: boolean;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n getContrastingColor = getContrastingColor;\n colorStyle: Record<string, string> = {\n width: '40px',\n height: '24px',\n cursor: 'pointer',\n marginBottom: '1px',\n };\n focusStyle: Record<string, string> = {};\n\n ngOnInit() {\n this.colorStyle.background = this.color;\n this.focusStyle.boxShadow = `0 0 4px ${this.color}`;\n if (this.first) {\n this.colorStyle.borderRadius = '2px 2px 0 0';\n }\n if (this.last) {\n this.colorStyle.borderRadius = '0 0 2px 2px';\n }\n if (this.color === '#FFFFFF') {\n this.colorStyle.boxShadow = 'inset 0 0 0 1px #ddd';\n }\n }\n handleClick($event) {\n this.onClick.emit({\n data: {\n hex: this.color,\n source: 'hex',\n },\n $event,\n });\n }\n}\n","import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\n@Component({\n selector: 'color-swatches-group',\n template: `\n <div class=\"swatches-group\">\n <color-swatches-color\n *ngFor=\"let color of group; let idx = index\"\n [active]=\"color.toLowerCase() === active\"\n [color]=\"color\"\n [first]=\"idx === 0\"\n [last]=\"idx === group.length - 1\"\n (onClick)=\"onClick.emit($event)\"\n >\n </color-swatches-color>\n </div>\n `,\n styles: [\n `\n .swatches-group {\n padding-bottom: 10px;\n width: 40px;\n float: left;\n margin-right: 10px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class SwatchesGroupComponent {\n @Input() group!: string[];\n @Input() active!: string;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\nimport {\n amber,\n blue,\n blueGrey,\n brown,\n cyan,\n deepOrange,\n deepPurple,\n green,\n indigo,\n lightBlue,\n lightGreen,\n lime,\n orange,\n pink,\n purple,\n red,\n teal,\n yellow,\n} from 'material-colors';\n\nimport { ColorWrap, RaisedModule, SwatchModule, zDepth } from 'ngx-color';\nimport { SwatchesColorComponent } from './swatches-color.component';\nimport { SwatchesGroupComponent } from './swatches-group.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-swatches',\n template: `\n <div class=\"swatches-picker {{ className }}\"\n [style.width.px]=\"width\" [style.height.px]=\"height\">\n <color-raised [zDepth]=\"zDepth\" [background]=\"background\" [radius]=\"radius\">\n <div class=\"swatches-overflow\" [style.height.px]=\"height\">\n <div class=\"swatches-body\">\n <color-swatches-group\n *ngFor=\"let group of colors\"\n [group]=\"group\" [active]=\"hex\"\n (onClick)=\"handlePickerChange($event)\"\n ></color-swatches-group>\n </div>\n </div>\n </color-raised>\n </div>\n `,\n styles: [\n `\n .swatches-overflow {\n overflow-y: scroll;\n }\n .swatches-overflow {\n padding: 16px 0 6px 16px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SwatchesComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => SwatchesComponent),\n },\n ]\n})\nexport class SwatchesComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 320;\n /** Color squares to display */\n @Input() height: string | number = 240;\n /** An array of color groups, each with an array of colors */\n @Input()\n colors: string[][] = [\n [\n red['900'],\n red['700'],\n red['500'],\n red['300'],\n red['100'],\n ],\n [\n pink['900'],\n pink['700'],\n pink['500'],\n pink['300'],\n pink['100'],\n ],\n [\n purple['900'],\n purple['700'],\n purple['500'],\n purple['300'],\n purple['100'],\n ],\n [\n deepPurple['900'],\n deepPurple['700'],\n deepPurple['500'],\n deepPurple['300'],\n deepPurple['100'],\n ],\n [\n indigo['900'],\n indigo['700'],\n indigo['500'],\n indigo['300'],\n indigo['100'],\n ],\n [\n blue['900'],\n blue['700'],\n blue['500'],\n blue['300'],\n blue['100'],\n ],\n [\n lightBlue['900'],\n lightBlue['700'],\n lightBlue['500'],\n lightBlue['300'],\n lightBlue['100'],\n ],\n [\n cyan['900'],\n cyan['700'],\n cyan['500'],\n cyan['300'],\n cyan['100'],\n ],\n [\n teal['900'],\n teal['700'],\n teal['500'],\n teal['300'],\n teal['100'],\n ],\n [\n '#194D33',\n green['700'],\n green['500'],\n green['300'],\n green['100'],\n ],\n [\n lightGreen['900'],\n lightGreen['700'],\n lightGreen['500'],\n lightGreen['300'],\n lightGreen['100'],\n ],\n [\n lime['900'],\n lime['700'],\n lime['500'],\n lime['300'],\n lime['100'],\n ],\n [\n yellow['900'],\n yellow['700'],\n yellow['500'],\n yellow['300'],\n yellow['100'],\n ],\n [\n amber['900'],\n amber['700'],\n amber['500'],\n amber['300'],\n amber['100'],\n ],\n [\n orange['900'],\n orange['700'],\n orange['500'],\n orange['300'],\n orange['100'],\n ],\n [\n deepOrange['900'],\n deepOrange['700'],\n deepOrange['500'],\n deepOrange['300'],\n deepOrange['100'],\n ],\n [\n brown['900'],\n brown['700'],\n brown['500'],\n brown['300'],\n brown['100'],\n ],\n [\n blueGrey['900'],\n blueGrey['700'],\n blueGrey['500'],\n blueGrey['300'],\n blueGrey['100'],\n ],\n ['#000000', '#525252', '#969696', '#D9D9D9', '#FFFFFF'],\n ];\n @Input() zDepth: zDepth = 1;\n @Input() radius = 1;\n @Input() background = '#fff';\n\n constructor() {\n super();\n }\n\n handlePickerChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [\n SwatchesComponent,\n SwatchesGroupComponent,\n SwatchesColorComponent,\n ],\n exports: [SwatchesComponent, SwatchesGroupComponent, SwatchesColorComponent],\n imports: [CommonModule, SwatchModule, RaisedModule],\n})\nexport class ColorSwatchesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './swatches.component';\n\nexport {SwatchesColorComponent as ɵb} from './swatches-color.component';\nexport {SwatchesGroupComponent as ɵa} from './swatches-group.component';"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"__symbolic":"module","version":4,"metadata":{"SwatchesComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":70,"character":39},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"color-swatches","template":"\n <div class=\"swatches-picker {{ className }}\"\n [style.width.px]=\"width\" [style.height.px]=\"height\">\n <color-raised [zDepth]=\"zDepth\" [background]=\"background\" [radius]=\"radius\">\n <div class=\"swatches-overflow\" [style.height.px]=\"height\">\n <div class=\"swatches-body\">\n <color-swatches-group\n *ngFor=\"let group of colors\"\n [group]=\"group\" [active]=\"hex\"\n (onClick)=\"handlePickerChange($event)\"\n ></color-swatches-group>\n </div>\n </div>\n </color-raised>\n </div>\n ","styles":["\n .swatches-overflow {\n overflow-y: scroll;\n }\n .swatches-overflow {\n padding: 16px 0 6px 16px;\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":56,"character":19},"member":"OnPush"},"preserveWhitespaces":false,"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":60,"character":15},"useExisting":{"__symbolic":"reference","name":"SwatchesComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":65,"character":15},"useExisting":{"__symbolic":"reference","name":"SwatchesComponent"}}]}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}}]}],"zDepth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":206,"character":3}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":207,"character":3}}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":208,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"handlePickerChange":[{"__symbolic":"method"}]}},"ColorSwatchesModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":219,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SwatchesComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"SwatchesComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":226,"character":12},{"__symbolic":"reference","module":"ngx-color","name":"SwatchModule","line":226,"character":26},{"__symbolic":"reference","module":"ngx-color","name":"RaisedModule","line":226,"character":40}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"color-swatches-group","template":"\n <div class=\"swatches-group\">\n <color-swatches-color\n *ngFor=\"let color of group; let idx = index\"\n [active]=\"color.toLowerCase() === active\"\n [color]=\"color\"\n [first]=\"idx === 0\"\n [last]=\"idx === group.length - 1\"\n (onClick)=\"onClick.emit($event)\"\n >\n </color-swatches-color>\n </div>\n ","styles":["\n .swatches-group {\n padding-bottom: 10px;\n width: 40px;\n float: left;\n margin-right: 10px;\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":27,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":3}}]}],"onSwatchHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":3}}]}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"color-swatches-color","template":"\n <color-swatch\n [color]=\"color\"\n [style]=\"colorStyle\"\n [focusStyle]=\"focusStyle\"\n [class.first]=\"first\"\n [class.last]=\"last\"\n (click)=\"handleClick($event)\"\n (keydown.enter)=\"handleClick($event)\"\n (onHover)=\"onSwatchHover.emit($event)\"\n >\n <div class=\"swatch-check\" *ngIf=\"active\" [class.first]=\"first\" [class.last]=\"last\">\n <svg\n style=\"width: 24px; height: 24px;\"\n viewBox=\"0 0 24 24\"\n [style.fill]=\"getContrastingColor(color)\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n </div>\n </color-swatch>\n ","styles":["\n .swatches-group {\n padding-bottom: 10px;\n width: 40px;\n float: left;\n margin-right: 10px;\n }\n .swatch-check {\n display: flex;\n margin-left: 8px;\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":49,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"first":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"last":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":3}}]}],"onSwatchHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}]}}},"origins":{"SwatchesComponent":"./swatches.component","ColorSwatchesModule":"./swatches.component","ɵa":"./swatches-group.component","ɵb":"./swatches-color.component"},"importAs":"ngx-color/swatches"}