ngx-color 7.0.2 → 7.3.1

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 (350) 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 +27 -2
  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/esm2020/chrome/chrome.component.mjs +249 -0
  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/esm2020/twitter/twitter.component.mjs +255 -0
  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 +137 -14
  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/LICENSE +0 -21
  217. package/README.md +0 -280
  218. package/alpha/bundles/ngx-color-alpha.umd.js +0 -387
  219. package/alpha/bundles/ngx-color-alpha.umd.js.map +0 -1
  220. package/alpha/esm2015/alpha-picker.component.js +0 -72
  221. package/alpha/esm2015/ngx-color-alpha.js +0 -5
  222. package/alpha/fesm2015/ngx-color-alpha.js +0 -79
  223. package/alpha/fesm2015/ngx-color-alpha.js.map +0 -1
  224. package/alpha/ngx-color-alpha.metadata.json +0 -1
  225. package/block/bundles/ngx-color-block.umd.js +0 -455
  226. package/block/bundles/ngx-color-block.umd.js.map +0 -1
  227. package/block/esm2015/block-swatches.component.js +0 -58
  228. package/block/esm2015/block.component.js +0 -139
  229. package/block/esm2015/ngx-color-block.js +0 -6
  230. package/block/fesm2015/ngx-color-block.js +0 -202
  231. package/block/fesm2015/ngx-color-block.js.map +0 -1
  232. package/block/ngx-color-block.metadata.json +0 -1
  233. package/bundles/ngx-color.umd.js +0 -953
  234. package/bundles/ngx-color.umd.js.map +0 -1
  235. package/chrome/bundles/ngx-color-chrome.umd.js +0 -526
  236. package/chrome/bundles/ngx-color-chrome.umd.js.map +0 -1
  237. package/chrome/esm2015/chrome-fields.component.js +0 -255
  238. package/chrome/esm2015/chrome.component.js +0 -161
  239. package/chrome/esm2015/ngx-color-chrome.js +0 -6
  240. package/chrome/fesm2015/ngx-color-chrome.js +0 -420
  241. package/chrome/fesm2015/ngx-color-chrome.js.map +0 -1
  242. package/chrome/ngx-color-chrome.metadata.json +0 -1
  243. package/circle/bundles/ngx-color-circle.umd.js +0 -452
  244. package/circle/bundles/ngx-color-circle.umd.js.map +0 -1
  245. package/circle/esm2015/circle-swatch.component.js +0 -63
  246. package/circle/esm2015/circle.component.js +0 -97
  247. package/circle/esm2015/ngx-color-circle.js +0 -6
  248. package/circle/fesm2015/ngx-color-circle.js +0 -165
  249. package/circle/fesm2015/ngx-color-circle.js.map +0 -1
  250. package/circle/ngx-color-circle.metadata.json +0 -1
  251. package/compact/bundles/ngx-color-compact.umd.js +0 -562
  252. package/compact/bundles/ngx-color-compact.umd.js.map +0 -1
  253. package/compact/esm2015/compact-color.component.js +0 -70
  254. package/compact/esm2015/compact-fields.component.js +0 -142
  255. package/compact/esm2015/compact.component.js +0 -123
  256. package/compact/esm2015/ngx-color-compact.js +0 -7
  257. package/compact/fesm2015/ngx-color-compact.js +0 -336
  258. package/compact/fesm2015/ngx-color-compact.js.map +0 -1
  259. package/compact/ngx-color-compact.metadata.json +0 -1
  260. package/esm2015/alpha.component.js +0 -156
  261. package/esm2015/checkboard.component.js +0 -52
  262. package/esm2015/color-wrap.component.js +0 -82
  263. package/esm2015/coordinates.directive.js +0 -85
  264. package/esm2015/editable-input.component.js +0 -183
  265. package/esm2015/helpers/checkboard.js +0 -33
  266. package/esm2015/helpers/color.interfaces.js +0 -2
  267. package/esm2015/helpers/color.js +0 -60
  268. package/esm2015/hue.component.js +0 -140
  269. package/esm2015/ngx-color.js +0 -5
  270. package/esm2015/public_api.js +0 -14
  271. package/esm2015/raised.component.js +0 -73
  272. package/esm2015/saturation.component.js +0 -111
  273. package/esm2015/shade.component.js +0 -127
  274. package/esm2015/swatch.component.js +0 -85
  275. package/fesm2015/ngx-color.js +0 -1166
  276. package/fesm2015/ngx-color.js.map +0 -1
  277. package/github/bundles/ngx-color-github.umd.js +0 -430
  278. package/github/bundles/ngx-color-github.umd.js.map +0 -1
  279. package/github/esm2015/github-swatch.component.js +0 -48
  280. package/github/esm2015/github.component.js +0 -134
  281. package/github/esm2015/ngx-color-github.js +0 -6
  282. package/github/fesm2015/ngx-color-github.js +0 -187
  283. package/github/fesm2015/ngx-color-github.js.map +0 -1
  284. package/github/ngx-color-github.metadata.json +0 -1
  285. package/hue/bundles/ngx-color-hue.umd.js +0 -390
  286. package/hue/bundles/ngx-color-hue.umd.js.map +0 -1
  287. package/hue/esm2015/hue-picker.component.js +0 -70
  288. package/hue/esm2015/ngx-color-hue.js +0 -5
  289. package/hue/fesm2015/ngx-color-hue.js +0 -77
  290. package/hue/fesm2015/ngx-color-hue.js.map +0 -1
  291. package/hue/ngx-color-hue.metadata.json +0 -1
  292. package/material/bundles/ngx-color-material.umd.js +0 -438
  293. package/material/bundles/ngx-color-material.umd.js.map +0 -1
  294. package/material/esm2015/material.component.js +0 -149
  295. package/material/esm2015/ngx-color-material.js +0 -5
  296. package/material/fesm2015/ngx-color-material.js +0 -156
  297. package/material/fesm2015/ngx-color-material.js.map +0 -1
  298. package/material/ngx-color-material.metadata.json +0 -1
  299. package/ngx-color.metadata.json +0 -1
  300. package/photoshop/bundles/ngx-color-photoshop.umd.js +0 -554
  301. package/photoshop/bundles/ngx-color-photoshop.umd.js.map +0 -1
  302. package/photoshop/esm2015/ngx-color-photoshop.js +0 -8
  303. package/photoshop/esm2015/photoshop-button.component.js +0 -50
  304. package/photoshop/esm2015/photoshop-fields.component.js +0 -180
  305. package/photoshop/esm2015/photoshop-previews.component.js +0 -53
  306. package/photoshop/esm2015/photoshop.component.js +0 -169
  307. package/photoshop/fesm2015/ngx-color-photoshop.js +0 -452
  308. package/photoshop/fesm2015/ngx-color-photoshop.js.map +0 -1
  309. package/photoshop/ngx-color-photoshop.metadata.json +0 -1
  310. package/shade/bundles/ngx-color-shade.umd.js +0 -382
  311. package/shade/bundles/ngx-color-shade.umd.js.map +0 -1
  312. package/shade/esm2015/ngx-color-shade.js +0 -5
  313. package/shade/esm2015/shade-picker.component.js +0 -63
  314. package/shade/fesm2015/ngx-color-shade.js +0 -70
  315. package/shade/fesm2015/ngx-color-shade.js.map +0 -1
  316. package/shade/ngx-color-shade.metadata.json +0 -1
  317. package/sketch/bundles/ngx-color-sketch.umd.js +0 -568
  318. package/sketch/bundles/ngx-color-sketch.umd.js.map +0 -1
  319. package/sketch/esm2015/ngx-color-sketch.js +0 -7
  320. package/sketch/esm2015/sketch-fields.component.js +0 -181
  321. package/sketch/esm2015/sketch-preset-colors.component.js +0 -76
  322. package/sketch/esm2015/sketch.component.js +0 -191
  323. package/sketch/fesm2015/ngx-color-sketch.js +0 -450
  324. package/sketch/fesm2015/ngx-color-sketch.js.map +0 -1
  325. package/sketch/ngx-color-sketch.metadata.json +0 -1
  326. package/slider/bundles/ngx-color-slider.umd.js +0 -453
  327. package/slider/bundles/ngx-color-slider.umd.js.map +0 -1
  328. package/slider/esm2015/ngx-color-slider.js +0 -7
  329. package/slider/esm2015/slider-swatch.component.js +0 -65
  330. package/slider/esm2015/slider-swatches.component.js +0 -84
  331. package/slider/esm2015/slider.component.js +0 -69
  332. package/slider/fesm2015/ngx-color-slider.js +0 -221
  333. package/slider/fesm2015/ngx-color-slider.js.map +0 -1
  334. package/slider/ngx-color-slider.metadata.json +0 -1
  335. package/swatches/bundles/ngx-color-swatches.umd.js +0 -595
  336. package/swatches/bundles/ngx-color-swatches.umd.js.map +0 -1
  337. package/swatches/esm2015/ngx-color-swatches.js +0 -7
  338. package/swatches/esm2015/swatches-color.component.js +0 -90
  339. package/swatches/esm2015/swatches-group.component.js +0 -42
  340. package/swatches/esm2015/swatches.component.js +0 -205
  341. package/swatches/fesm2015/ngx-color-swatches.js +0 -339
  342. package/swatches/fesm2015/ngx-color-swatches.js.map +0 -1
  343. package/swatches/ngx-color-swatches.metadata.json +0 -1
  344. package/twitter/bundles/ngx-color-twitter.umd.js +0 -416
  345. package/twitter/bundles/ngx-color-twitter.umd.js.map +0 -1
  346. package/twitter/esm2015/ngx-color-twitter.js +0 -5
  347. package/twitter/esm2015/twitter.component.js +0 -195
  348. package/twitter/fesm2015/ngx-color-twitter.js +0 -202
  349. package/twitter/fesm2015/ngx-color-twitter.js.map +0 -1
  350. package/twitter/ngx-color-twitter.metadata.json +0 -1
@@ -1,97 +0,0 @@
1
- import { CommonModule } from '@angular/common';
2
- import { ChangeDetectionStrategy, Component, Input, NgModule, } from '@angular/core';
3
- import { amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, green, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow, } from 'material-colors';
4
- import { TinyColor } from '@ctrl/tinycolor';
5
- import { ColorWrap, SwatchModule, isValidHex } from 'ngx-color';
6
- import { CircleSwatchComponent } from './circle-swatch.component';
7
- export class CircleComponent extends ColorWrap {
8
- constructor() {
9
- super();
10
- /** Pixel value for picker width */
11
- this.width = 252;
12
- /** Color squares to display */
13
- this.colors = [
14
- red['500'],
15
- pink['500'],
16
- purple['500'],
17
- deepPurple['500'],
18
- indigo['500'],
19
- blue['500'],
20
- lightBlue['500'],
21
- cyan['500'],
22
- teal['500'],
23
- green['500'],
24
- lightGreen['500'],
25
- lime['500'],
26
- yellow['500'],
27
- amber['500'],
28
- orange['500'],
29
- deepOrange['500'],
30
- brown['500'],
31
- blueGrey['500'],
32
- ];
33
- /** Value for circle size */
34
- this.circleSize = 28;
35
- /** Value for spacing between circles */
36
- this.circleSpacing = 14;
37
- }
38
- isActive(color) {
39
- return new TinyColor(this.hex).equals(color);
40
- }
41
- handleBlockChange({ hex, $event }) {
42
- if (isValidHex(hex)) {
43
- this.handleChange({ hex, source: 'hex' }, $event);
44
- }
45
- }
46
- handleValueChange({ data, $event }) {
47
- this.handleChange(data, $event);
48
- }
49
- }
50
- CircleComponent.decorators = [
51
- { type: Component, args: [{
52
- selector: 'color-circle',
53
- template: `
54
- <div
55
- class="circle-picker {{ className }}"
56
- [style.width.px]="width"
57
- [style.margin-right.px]="-circleSpacing"
58
- [style.margin-bottom.px]="-circleSpacing"
59
- >
60
- <color-circle-swatch
61
- *ngFor="let color of colors"
62
- [circleSize]="circleSize"
63
- [circleSpacing]="circleSpacing"
64
- [color]="color"
65
- [focus]="isActive(color)"
66
- (onClick)="handleBlockChange($event)"
67
- (onSwatchHover)="onSwatchHover.emit($event)"
68
- ></color-circle-swatch>
69
- </div>
70
- `,
71
- changeDetection: ChangeDetectionStrategy.OnPush,
72
- preserveWhitespaces: false,
73
- styles: [`
74
- .circle-picker {
75
- display: flex;
76
- flex-wrap: wrap;
77
- }
78
- `]
79
- },] }
80
- ];
81
- CircleComponent.ctorParameters = () => [];
82
- CircleComponent.propDecorators = {
83
- width: [{ type: Input }],
84
- colors: [{ type: Input }],
85
- circleSize: [{ type: Input }],
86
- circleSpacing: [{ type: Input }]
87
- };
88
- export class ColorCircleModule {
89
- }
90
- ColorCircleModule.decorators = [
91
- { type: NgModule, args: [{
92
- declarations: [CircleComponent, CircleSwatchComponent],
93
- exports: [CircleComponent, CircleSwatchComponent],
94
- imports: [CommonModule, SwatchModule],
95
- },] }
96
- ];
97
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2lyY2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9jaXJjbGUvY2lyY2xlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxFQUNMLFFBQVEsR0FDVCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ0wsS0FBSyxFQUNMLElBQUksRUFDSixRQUFRLEVBQ1IsS0FBSyxFQUNMLElBQUksRUFDSixVQUFVLEVBQ1YsVUFBVSxFQUNWLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxFQUNULFVBQVUsRUFDVixJQUFJLEVBQ0osTUFBTSxFQUNOLElBQUksRUFDSixNQUFNLEVBQ04sR0FBRyxFQUNILElBQUksRUFDSixNQUFNLEdBQ1AsTUFBTSxpQkFBaUIsQ0FBQztBQUN6QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFNUMsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsVUFBVSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBaUNsRSxNQUFNLE9BQU8sZUFBZ0IsU0FBUSxTQUFTO0lBOEI1QztRQUNFLEtBQUssRUFBRSxDQUFDO1FBOUJWLG1DQUFtQztRQUMxQixVQUFLLEdBQW9CLEdBQUcsQ0FBQztRQUN0QywrQkFBK0I7UUFFL0IsV0FBTSxHQUFhO1lBQ2pCLEdBQUcsQ0FBQyxLQUFLLENBQUM7WUFDVixJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ1gsTUFBTSxDQUFDLEtBQUssQ0FBQztZQUNiLFVBQVUsQ0FBQyxLQUFLLENBQUM7WUFDakIsTUFBTSxDQUFDLEtBQUssQ0FBQztZQUNiLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDWCxTQUFTLENBQUMsS0FBSyxDQUFDO1lBQ2hCLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDWCxJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ1gsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUNaLFVBQVUsQ0FBQyxLQUFLLENBQUM7WUFDakIsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUNYLE1BQU0sQ0FBQyxLQUFLLENBQUM7WUFDYixLQUFLLENBQUMsS0FBSyxDQUFDO1lBQ1osTUFBTSxDQUFDLEtBQUssQ0FBQztZQUNiLFVBQVUsQ0FBQyxLQUFLLENBQUM7WUFDakIsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUNaLFFBQVEsQ0FBQyxLQUFLLENBQUM7U0FDaEIsQ0FBQztRQUNGLDRCQUE0QjtRQUNuQixlQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ3pCLHdDQUF3QztRQUMvQixrQkFBYSxHQUFHLEVBQUUsQ0FBQztJQUk1QixDQUFDO0lBQ0QsUUFBUSxDQUFDLEtBQWE7UUFDcEIsT0FBTyxJQUFJLFNBQVMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQy9DLENBQUM7SUFDRCxpQkFBaUIsQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQWtDO1FBQy9ELElBQUksVUFBVSxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ25CLElBQUksQ0FBQyxZQUFZLENBQUMsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxFQUFFLE1BQU0sQ0FBQyxDQUFDO1NBQ25EO0lBQ0gsQ0FBQztJQUNELGlCQUFpQixDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRTtRQUNoQyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxNQUFNLENBQUMsQ0FBQztJQUNsQyxDQUFDOzs7WUExRUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxjQUFjO2dCQUN4QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUJUO2dCQVNELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxtQkFBbUIsRUFBRSxLQUFLO3lCQVJ4Qjs7Ozs7S0FLQzthQUlKOzs7O29CQUdFLEtBQUs7cUJBRUwsS0FBSzt5QkFzQkwsS0FBSzs0QkFFTCxLQUFLOztBQXVCUixNQUFNLE9BQU8saUJBQWlCOzs7WUFMN0IsUUFBUSxTQUFDO2dCQUNSLFlBQVksRUFBRSxDQUFDLGVBQWUsRUFBRSxxQkFBcUIsQ0FBQztnQkFDdEQsT0FBTyxFQUFFLENBQUMsZUFBZSxFQUFFLHFCQUFxQixDQUFDO2dCQUNqRCxPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsWUFBWSxDQUFDO2FBQ3RDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBOZ01vZHVsZSxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICBhbWJlcixcbiAgYmx1ZSxcbiAgYmx1ZUdyZXksXG4gIGJyb3duLFxuICBjeWFuLFxuICBkZWVwT3JhbmdlLFxuICBkZWVwUHVycGxlLFxuICBncmVlbixcbiAgaW5kaWdvLFxuICBsaWdodEJsdWUsXG4gIGxpZ2h0R3JlZW4sXG4gIGxpbWUsXG4gIG9yYW5nZSxcbiAgcGluayxcbiAgcHVycGxlLFxuICByZWQsXG4gIHRlYWwsXG4gIHllbGxvdyxcbn0gZnJvbSAnbWF0ZXJpYWwtY29sb3JzJztcbmltcG9ydCB7IFRpbnlDb2xvciB9IGZyb20gJ0BjdHJsL3Rpbnljb2xvcic7XG5cbmltcG9ydCB7IENvbG9yV3JhcCwgU3dhdGNoTW9kdWxlLCBpc1ZhbGlkSGV4IH0gZnJvbSAnbmd4LWNvbG9yJztcbmltcG9ydCB7IENpcmNsZVN3YXRjaENvbXBvbmVudCB9IGZyb20gJy4vY2lyY2xlLXN3YXRjaC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1jaXJjbGUnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiY2lyY2xlLXBpY2tlciB7eyBjbGFzc05hbWUgfX1cIlxuICAgICAgW3N0eWxlLndpZHRoLnB4XT1cIndpZHRoXCJcbiAgICAgIFtzdHlsZS5tYXJnaW4tcmlnaHQucHhdPVwiLWNpcmNsZVNwYWNpbmdcIlxuICAgICAgW3N0eWxlLm1hcmdpbi1ib3R0b20ucHhdPVwiLWNpcmNsZVNwYWNpbmdcIlxuICAgID5cbiAgICAgIDxjb2xvci1jaXJjbGUtc3dhdGNoXG4gICAgICAgICpuZ0Zvcj1cImxldCBjb2xvciBvZiBjb2xvcnNcIlxuICAgICAgICBbY2lyY2xlU2l6ZV09XCJjaXJjbGVTaXplXCJcbiAgICAgICAgW2NpcmNsZVNwYWNpbmddPVwiY2lyY2xlU3BhY2luZ1wiXG4gICAgICAgIFtjb2xvcl09XCJjb2xvclwiXG4gICAgICAgIFtmb2N1c109XCJpc0FjdGl2ZShjb2xvcilcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVCbG9ja0NoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgKG9uU3dhdGNoSG92ZXIpPVwib25Td2F0Y2hIb3Zlci5lbWl0KCRldmVudClcIlxuICAgICAgPjwvY29sb3ItY2lyY2xlLXN3YXRjaD5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgLmNpcmNsZS1waWNrZXIge1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBmbGV4LXdyYXA6IHdyYXA7XG4gICAgICB9XG4gICAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxufSlcbmV4cG9ydCBjbGFzcyBDaXJjbGVDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICAvKiogUGl4ZWwgdmFsdWUgZm9yIHBpY2tlciB3aWR0aCAqL1xuICBASW5wdXQoKSB3aWR0aDogc3RyaW5nIHwgbnVtYmVyID0gMjUyO1xuICAvKiogQ29sb3Igc3F1YXJlcyB0byBkaXNwbGF5ICovXG4gIEBJbnB1dCgpXG4gIGNvbG9yczogc3RyaW5nW10gPSBbXG4gICAgcmVkWyc1MDAnXSxcbiAgICBwaW5rWyc1MDAnXSxcbiAgICBwdXJwbGVbJzUwMCddLFxuICAgIGRlZXBQdXJwbGVbJzUwMCddLFxuICAgIGluZGlnb1snNTAwJ10sXG4gICAgYmx1ZVsnNTAwJ10sXG4gICAgbGlnaHRCbHVlWyc1MDAnXSxcbiAgICBjeWFuWyc1MDAnXSxcbiAgICB0ZWFsWyc1MDAnXSxcbiAgICBncmVlblsnNTAwJ10sXG4gICAgbGlnaHRHcmVlblsnNTAwJ10sXG4gICAgbGltZVsnNTAwJ10sXG4gICAgeWVsbG93Wyc1MDAnXSxcbiAgICBhbWJlclsnNTAwJ10sXG4gICAgb3JhbmdlWyc1MDAnXSxcbiAgICBkZWVwT3JhbmdlWyc1MDAnXSxcbiAgICBicm93blsnNTAwJ10sXG4gICAgYmx1ZUdyZXlbJzUwMCddLFxuICBdO1xuICAvKiogVmFsdWUgZm9yIGNpcmNsZSBzaXplICovXG4gIEBJbnB1dCgpIGNpcmNsZVNpemUgPSAyODtcbiAgLyoqIFZhbHVlIGZvciBzcGFjaW5nIGJldHdlZW4gY2lyY2xlcyAqL1xuICBASW5wdXQoKSBjaXJjbGVTcGFjaW5nID0gMTQ7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuICBpc0FjdGl2ZShjb2xvcjogc3RyaW5nKSB7XG4gICAgcmV0dXJuIG5ldyBUaW55Q29sb3IodGhpcy5oZXgpLmVxdWFscyhjb2xvcik7XG4gIH1cbiAgaGFuZGxlQmxvY2tDaGFuZ2UoeyBoZXgsICRldmVudCB9OiB7IGhleDogc3RyaW5nLCAkZXZlbnQ6IEV2ZW50IH0pIHtcbiAgICBpZiAoaXNWYWxpZEhleChoZXgpKSB7XG4gICAgICB0aGlzLmhhbmRsZUNoYW5nZSh7IGhleCwgc291cmNlOiAnaGV4JyB9LCAkZXZlbnQpO1xuICAgIH1cbiAgfVxuICBoYW5kbGVWYWx1ZUNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgdGhpcy5oYW5kbGVDaGFuZ2UoZGF0YSwgJGV2ZW50KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtDaXJjbGVDb21wb25lbnQsIENpcmNsZVN3YXRjaENvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtDaXJjbGVDb21wb25lbnQsIENpcmNsZVN3YXRjaENvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFN3YXRjaE1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIENvbG9yQ2lyY2xlTW9kdWxlIHt9XG4iXX0=
@@ -1,6 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- export * from './circle.component';
5
- export { CircleSwatchComponent as ɵa } from './circle-swatch.component';
6
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLWNpcmNsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9jaXJjbGUvbmd4LWNvbG9yLWNpcmNsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsb0JBQW9CLENBQUM7QUFFbkMsT0FBTyxFQUFDLHFCQUFxQixJQUFJLEVBQUUsRUFBQyxNQUFNLDJCQUEyQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2NpcmNsZS5jb21wb25lbnQnO1xuXG5leHBvcnQge0NpcmNsZVN3YXRjaENvbXBvbmVudCBhcyDJtWF9IGZyb20gJy4vY2lyY2xlLXN3YXRjaC5jb21wb25lbnQnOyJdfQ==
@@ -1,165 +0,0 @@
1
- import { CommonModule } from '@angular/common';
2
- import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, 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 { TinyColor } from '@ctrl/tinycolor';
5
- import { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';
6
-
7
- class CircleSwatchComponent {
8
- constructor() {
9
- this.circleSize = 28;
10
- this.circleSpacing = 14;
11
- this.focus = false;
12
- this.onClick = new EventEmitter();
13
- this.onSwatchHover = new EventEmitter();
14
- this.focusStyle = {};
15
- this.swatchStyle = {
16
- borderRadius: '50%',
17
- background: 'transparent',
18
- transition: '100ms box-shadow ease 0s',
19
- };
20
- }
21
- ngOnChanges() {
22
- this.swatchStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}`;
23
- this.focusStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}, 0 0 5px ${this.color}`;
24
- if (this.focus) {
25
- this.focusStyle.boxShadow = `inset 0 0 0 3px ${this.color}, 0 0 5px ${this.color}`;
26
- }
27
- }
28
- handleClick({ hex, $event }) {
29
- this.onClick.emit({ hex, $event });
30
- }
31
- }
32
- CircleSwatchComponent.decorators = [
33
- { type: Component, args: [{
34
- selector: 'color-circle-swatch',
35
- template: `
36
- <div class="circle-swatch"
37
- [style.width.px]="circleSize" [style.height.px]="circleSize"
38
- [style.margin-right.px]="circleSpacing" [style.margin-bottom.px]="circleSpacing"
39
- >
40
- <color-swatch
41
- [color]="color" [style]="swatchStyle" [focus]="focus" [focusStyle]="focusStyle"
42
- (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)">
43
- </color-swatch>
44
- <div class="clear"></div>
45
- </div>
46
- `,
47
- changeDetection: ChangeDetectionStrategy.OnPush,
48
- preserveWhitespaces: false,
49
- styles: [`
50
- .circle-swatch {
51
- transform: scale(1);
52
- transition: transform 100ms ease;
53
- }
54
- .circle-swatch:hover {
55
- transform: scale(1.2);
56
- }
57
- `]
58
- },] }
59
- ];
60
- CircleSwatchComponent.propDecorators = {
61
- color: [{ type: Input }],
62
- circleSize: [{ type: Input }],
63
- circleSpacing: [{ type: Input }],
64
- focus: [{ type: Input }],
65
- onClick: [{ type: Output }],
66
- onSwatchHover: [{ type: Output }]
67
- };
68
-
69
- class CircleComponent extends ColorWrap {
70
- constructor() {
71
- super();
72
- /** Pixel value for picker width */
73
- this.width = 252;
74
- /** Color squares to display */
75
- this.colors = [
76
- red['500'],
77
- pink['500'],
78
- purple['500'],
79
- deepPurple['500'],
80
- indigo['500'],
81
- blue['500'],
82
- lightBlue['500'],
83
- cyan['500'],
84
- teal['500'],
85
- green['500'],
86
- lightGreen['500'],
87
- lime['500'],
88
- yellow['500'],
89
- amber['500'],
90
- orange['500'],
91
- deepOrange['500'],
92
- brown['500'],
93
- blueGrey['500'],
94
- ];
95
- /** Value for circle size */
96
- this.circleSize = 28;
97
- /** Value for spacing between circles */
98
- this.circleSpacing = 14;
99
- }
100
- isActive(color) {
101
- return new TinyColor(this.hex).equals(color);
102
- }
103
- handleBlockChange({ hex, $event }) {
104
- if (isValidHex(hex)) {
105
- this.handleChange({ hex, source: 'hex' }, $event);
106
- }
107
- }
108
- handleValueChange({ data, $event }) {
109
- this.handleChange(data, $event);
110
- }
111
- }
112
- CircleComponent.decorators = [
113
- { type: Component, args: [{
114
- selector: 'color-circle',
115
- template: `
116
- <div
117
- class="circle-picker {{ className }}"
118
- [style.width.px]="width"
119
- [style.margin-right.px]="-circleSpacing"
120
- [style.margin-bottom.px]="-circleSpacing"
121
- >
122
- <color-circle-swatch
123
- *ngFor="let color of colors"
124
- [circleSize]="circleSize"
125
- [circleSpacing]="circleSpacing"
126
- [color]="color"
127
- [focus]="isActive(color)"
128
- (onClick)="handleBlockChange($event)"
129
- (onSwatchHover)="onSwatchHover.emit($event)"
130
- ></color-circle-swatch>
131
- </div>
132
- `,
133
- changeDetection: ChangeDetectionStrategy.OnPush,
134
- preserveWhitespaces: false,
135
- styles: [`
136
- .circle-picker {
137
- display: flex;
138
- flex-wrap: wrap;
139
- }
140
- `]
141
- },] }
142
- ];
143
- CircleComponent.ctorParameters = () => [];
144
- CircleComponent.propDecorators = {
145
- width: [{ type: Input }],
146
- colors: [{ type: Input }],
147
- circleSize: [{ type: Input }],
148
- circleSpacing: [{ type: Input }]
149
- };
150
- class ColorCircleModule {
151
- }
152
- ColorCircleModule.decorators = [
153
- { type: NgModule, args: [{
154
- declarations: [CircleComponent, CircleSwatchComponent],
155
- exports: [CircleComponent, CircleSwatchComponent],
156
- imports: [CommonModule, SwatchModule],
157
- },] }
158
- ];
159
-
160
- /**
161
- * Generated bundle index. Do not edit.
162
- */
163
-
164
- export { CircleComponent, ColorCircleModule, CircleSwatchComponent as ɵa };
165
- //# sourceMappingURL=ngx-color-circle.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ngx-color-circle.js","sources":["../../../../src/lib/components/circle/circle-swatch.component.ts","../../../../src/lib/components/circle/circle.component.ts","../../../../src/lib/components/circle/ngx-color-circle.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n} from '@angular/core';\n\n@Component({\n selector: 'color-circle-swatch',\n template: `\n <div class=\"circle-swatch\"\n [style.width.px]=\"circleSize\" [style.height.px]=\"circleSize\"\n [style.margin-right.px]=\"circleSpacing\" [style.margin-bottom.px]=\"circleSpacing\"\n >\n <color-swatch\n [color]=\"color\" [style]=\"swatchStyle\" [focus]=\"focus\" [focusStyle]=\"focusStyle\"\n (onClick)=\"handleClick($event)\" (onHover)=\"onSwatchHover.emit($event)\">\n </color-swatch>\n <div class=\"clear\"></div>\n </div>\n `,\n styles: [\n `\n .circle-swatch {\n transform: scale(1);\n transition: transform 100ms ease;\n }\n .circle-swatch:hover {\n transform: scale(1.2);\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class CircleSwatchComponent implements OnChanges {\n @Input() color!: string;\n @Input() circleSize = 28;\n @Input() circleSpacing = 14;\n @Input() focus = false;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n focusStyle: Record<string, string> = {};\n swatchStyle: Record<string, string> = {\n borderRadius: '50%',\n background: 'transparent',\n transition: '100ms box-shadow ease 0s',\n };\n\n ngOnChanges() {\n this.swatchStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}`;\n this.focusStyle.boxShadow = `inset 0 0 0 ${ this.circleSize / 2 }px ${ this.color }, 0 0 5px ${ this.color }`;\n if (this.focus) {\n this.focusStyle.boxShadow = `inset 0 0 0 3px ${ this.color }, 0 0 5px ${ this.color }`;\n }\n }\n handleClick({ hex, $event }) {\n this.onClick.emit({ hex, $event });\n }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n Input,\n NgModule,\n} 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';\nimport { TinyColor } from '@ctrl/tinycolor';\n\nimport { ColorWrap, SwatchModule, isValidHex } from 'ngx-color';\nimport { CircleSwatchComponent } from './circle-swatch.component';\n\n@Component({\n selector: 'color-circle',\n template: `\n <div\n class=\"circle-picker {{ className }}\"\n [style.width.px]=\"width\"\n [style.margin-right.px]=\"-circleSpacing\"\n [style.margin-bottom.px]=\"-circleSpacing\"\n >\n <color-circle-swatch\n *ngFor=\"let color of colors\"\n [circleSize]=\"circleSize\"\n [circleSpacing]=\"circleSpacing\"\n [color]=\"color\"\n [focus]=\"isActive(color)\"\n (onClick)=\"handleBlockChange($event)\"\n (onSwatchHover)=\"onSwatchHover.emit($event)\"\n ></color-circle-swatch>\n </div>\n `,\n styles: [\n `\n .circle-picker {\n display: flex;\n flex-wrap: wrap;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class CircleComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 252;\n /** Color squares to display */\n @Input()\n colors: string[] = [\n red['500'],\n pink['500'],\n purple['500'],\n deepPurple['500'],\n indigo['500'],\n blue['500'],\n lightBlue['500'],\n cyan['500'],\n teal['500'],\n green['500'],\n lightGreen['500'],\n lime['500'],\n yellow['500'],\n amber['500'],\n orange['500'],\n deepOrange['500'],\n brown['500'],\n blueGrey['500'],\n ];\n /** Value for circle size */\n @Input() circleSize = 28;\n /** Value for spacing between circles */\n @Input() circleSpacing = 14;\n\n constructor() {\n super();\n }\n isActive(color: string) {\n return new TinyColor(this.hex).equals(color);\n }\n handleBlockChange({ hex, $event }: { hex: string, $event: Event }) {\n if (isValidHex(hex)) {\n this.handleChange({ hex, source: 'hex' }, $event);\n }\n }\n handleValueChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [CircleComponent, CircleSwatchComponent],\n exports: [CircleComponent, CircleSwatchComponent],\n imports: [CommonModule, SwatchModule],\n})\nexport class ColorCircleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './circle.component';\n\nexport {CircleSwatchComponent as ɵa} from './circle-swatch.component';"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"__symbolic":"module","version":4,"metadata":{"CircleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":63,"character":37},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":32,"character":1},"arguments":[{"selector":"color-circle","template":"\n <div\n class=\"circle-picker {{ className }}\"\n [style.width.px]=\"width\"\n [style.margin-right.px]=\"-circleSpacing\"\n [style.margin-bottom.px]=\"-circleSpacing\"\n >\n <color-circle-swatch\n *ngFor=\"let color of colors\"\n [circleSize]=\"circleSize\"\n [circleSpacing]=\"circleSpacing\"\n [color]=\"color\"\n [focus]=\"isActive(color)\"\n (onClick)=\"handleBlockChange($event)\"\n (onSwatchHover)=\"onSwatchHover.emit($event)\"\n ></color-circle-swatch>\n </div>\n ","styles":["\n .circle-picker {\n display: flex;\n flex-wrap: wrap;\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":60,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"circleSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":3}}]}],"circleSpacing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"isActive":[{"__symbolic":"method"}],"handleBlockChange":[{"__symbolic":"method"}],"handleValueChange":[{"__symbolic":"method"}]}},"ColorCircleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":109,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CircleComponent"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"CircleComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":112,"character":12},{"__symbolic":"reference","module":"ngx-color","name":"SwatchModule","line":112,"character":26}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"color-circle-swatch","template":"\n <div class=\"circle-swatch\"\n [style.width.px]=\"circleSize\" [style.height.px]=\"circleSize\"\n [style.margin-right.px]=\"circleSpacing\" [style.margin-bottom.px]=\"circleSpacing\"\n >\n <color-swatch\n [color]=\"color\" [style]=\"swatchStyle\" [focus]=\"focus\" [focusStyle]=\"focusStyle\"\n (onClick)=\"handleClick($event)\" (onHover)=\"onSwatchHover.emit($event)\">\n </color-swatch>\n <div class=\"clear\"></div>\n </div>\n ","styles":["\n .circle-swatch {\n transform: scale(1);\n transition: transform 100ms ease;\n }\n .circle-swatch:hover {\n transform: scale(1.2);\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":34,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"circleSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"circleSpacing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":3}}]}],"onSwatchHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":3}}]}],"ngOnChanges":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}]}}},"origins":{"CircleComponent":"./circle.component","ColorCircleModule":"./circle.component","ɵa":"./circle-swatch.component"},"importAs":"ngx-color/circle"}