ngx-color 7.1.0 → 7.3.2

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 (348) 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/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 +132 -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 -400
  217. package/alpha/bundles/ngx-color-alpha.umd.js.map +0 -1
  218. package/alpha/esm2015/alpha-picker.component.js +0 -80
  219. package/alpha/esm2015/ngx-color-alpha.js +0 -5
  220. package/alpha/fesm2015/ngx-color-alpha.js +0 -87
  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 -468
  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 -147
  227. package/block/esm2015/ngx-color-block.js +0 -6
  228. package/block/fesm2015/ngx-color-block.js +0 -210
  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 -539
  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/chrome.component.js +0 -169
  237. package/chrome/esm2015/ngx-color-chrome.js +0 -6
  238. package/chrome/fesm2015/ngx-color-chrome.js +0 -428
  239. package/chrome/fesm2015/ngx-color-chrome.js.map +0 -1
  240. package/chrome/ngx-color-chrome.metadata.json +0 -1
  241. package/circle/bundles/ngx-color-circle.umd.js +0 -465
  242. package/circle/bundles/ngx-color-circle.umd.js.map +0 -1
  243. package/circle/esm2015/circle-swatch.component.js +0 -63
  244. package/circle/esm2015/circle.component.js +0 -105
  245. package/circle/esm2015/ngx-color-circle.js +0 -6
  246. package/circle/fesm2015/ngx-color-circle.js +0 -173
  247. package/circle/fesm2015/ngx-color-circle.js.map +0 -1
  248. package/circle/ngx-color-circle.metadata.json +0 -1
  249. package/compact/bundles/ngx-color-compact.umd.js +0 -575
  250. package/compact/bundles/ngx-color-compact.umd.js.map +0 -1
  251. package/compact/esm2015/compact-color.component.js +0 -70
  252. package/compact/esm2015/compact-fields.component.js +0 -142
  253. package/compact/esm2015/compact.component.js +0 -131
  254. package/compact/esm2015/ngx-color-compact.js +0 -7
  255. package/compact/fesm2015/ngx-color-compact.js +0 -344
  256. package/compact/fesm2015/ngx-color-compact.js.map +0 -1
  257. package/compact/ngx-color-compact.metadata.json +0 -1
  258. package/esm2015/alpha.component.js +0 -156
  259. package/esm2015/checkboard.component.js +0 -52
  260. package/esm2015/color-wrap.component.js +0 -145
  261. package/esm2015/coordinates.directive.js +0 -85
  262. package/esm2015/editable-input.component.js +0 -183
  263. package/esm2015/helpers/checkboard.js +0 -33
  264. package/esm2015/helpers/color.interfaces.js +0 -2
  265. package/esm2015/helpers/color.js +0 -60
  266. package/esm2015/hue.component.js +0 -140
  267. package/esm2015/ngx-color.js +0 -5
  268. package/esm2015/public_api.js +0 -14
  269. package/esm2015/raised.component.js +0 -73
  270. package/esm2015/saturation.component.js +0 -111
  271. package/esm2015/shade.component.js +0 -127
  272. package/esm2015/swatch.component.js +0 -85
  273. package/fesm2015/ngx-color.js +0 -1228
  274. package/fesm2015/ngx-color.js.map +0 -1
  275. package/github/bundles/ngx-color-github.umd.js +0 -443
  276. package/github/bundles/ngx-color-github.umd.js.map +0 -1
  277. package/github/esm2015/github-swatch.component.js +0 -48
  278. package/github/esm2015/github.component.js +0 -142
  279. package/github/esm2015/ngx-color-github.js +0 -6
  280. package/github/fesm2015/ngx-color-github.js +0 -195
  281. package/github/fesm2015/ngx-color-github.js.map +0 -1
  282. package/github/ngx-color-github.metadata.json +0 -1
  283. package/hue/bundles/ngx-color-hue.umd.js +0 -403
  284. package/hue/bundles/ngx-color-hue.umd.js.map +0 -1
  285. package/hue/esm2015/hue-picker.component.js +0 -78
  286. package/hue/esm2015/ngx-color-hue.js +0 -5
  287. package/hue/fesm2015/ngx-color-hue.js +0 -85
  288. package/hue/fesm2015/ngx-color-hue.js.map +0 -1
  289. package/hue/ngx-color-hue.metadata.json +0 -1
  290. package/material/bundles/ngx-color-material.umd.js +0 -451
  291. package/material/bundles/ngx-color-material.umd.js.map +0 -1
  292. package/material/esm2015/material.component.js +0 -157
  293. package/material/esm2015/ngx-color-material.js +0 -5
  294. package/material/fesm2015/ngx-color-material.js +0 -164
  295. package/material/fesm2015/ngx-color-material.js.map +0 -1
  296. package/material/ngx-color-material.metadata.json +0 -1
  297. package/ngx-color.metadata.json +0 -1
  298. package/photoshop/bundles/ngx-color-photoshop.umd.js +0 -567
  299. package/photoshop/bundles/ngx-color-photoshop.umd.js.map +0 -1
  300. package/photoshop/esm2015/ngx-color-photoshop.js +0 -8
  301. package/photoshop/esm2015/photoshop-button.component.js +0 -50
  302. package/photoshop/esm2015/photoshop-fields.component.js +0 -180
  303. package/photoshop/esm2015/photoshop-previews.component.js +0 -53
  304. package/photoshop/esm2015/photoshop.component.js +0 -177
  305. package/photoshop/fesm2015/ngx-color-photoshop.js +0 -460
  306. package/photoshop/fesm2015/ngx-color-photoshop.js.map +0 -1
  307. package/photoshop/ngx-color-photoshop.metadata.json +0 -1
  308. package/shade/bundles/ngx-color-shade.umd.js +0 -395
  309. package/shade/bundles/ngx-color-shade.umd.js.map +0 -1
  310. package/shade/esm2015/ngx-color-shade.js +0 -5
  311. package/shade/esm2015/shade-picker.component.js +0 -71
  312. package/shade/fesm2015/ngx-color-shade.js +0 -78
  313. package/shade/fesm2015/ngx-color-shade.js.map +0 -1
  314. package/shade/ngx-color-shade.metadata.json +0 -1
  315. package/sketch/bundles/ngx-color-sketch.umd.js +0 -581
  316. package/sketch/bundles/ngx-color-sketch.umd.js.map +0 -1
  317. package/sketch/esm2015/ngx-color-sketch.js +0 -7
  318. package/sketch/esm2015/sketch-fields.component.js +0 -181
  319. package/sketch/esm2015/sketch-preset-colors.component.js +0 -76
  320. package/sketch/esm2015/sketch.component.js +0 -199
  321. package/sketch/fesm2015/ngx-color-sketch.js +0 -458
  322. package/sketch/fesm2015/ngx-color-sketch.js.map +0 -1
  323. package/sketch/ngx-color-sketch.metadata.json +0 -1
  324. package/slider/bundles/ngx-color-slider.umd.js +0 -466
  325. package/slider/bundles/ngx-color-slider.umd.js.map +0 -1
  326. package/slider/esm2015/ngx-color-slider.js +0 -7
  327. package/slider/esm2015/slider-swatch.component.js +0 -65
  328. package/slider/esm2015/slider-swatches.component.js +0 -84
  329. package/slider/esm2015/slider.component.js +0 -77
  330. package/slider/fesm2015/ngx-color-slider.js +0 -229
  331. package/slider/fesm2015/ngx-color-slider.js.map +0 -1
  332. package/slider/ngx-color-slider.metadata.json +0 -1
  333. package/swatches/bundles/ngx-color-swatches.umd.js +0 -608
  334. package/swatches/bundles/ngx-color-swatches.umd.js.map +0 -1
  335. package/swatches/esm2015/ngx-color-swatches.js +0 -7
  336. package/swatches/esm2015/swatches-color.component.js +0 -90
  337. package/swatches/esm2015/swatches-group.component.js +0 -42
  338. package/swatches/esm2015/swatches.component.js +0 -213
  339. package/swatches/fesm2015/ngx-color-swatches.js +0 -347
  340. package/swatches/fesm2015/ngx-color-swatches.js.map +0 -1
  341. package/swatches/ngx-color-swatches.metadata.json +0 -1
  342. package/twitter/bundles/ngx-color-twitter.umd.js +0 -429
  343. package/twitter/bundles/ngx-color-twitter.umd.js.map +0 -1
  344. package/twitter/esm2015/ngx-color-twitter.js +0 -5
  345. package/twitter/esm2015/twitter.component.js +0 -203
  346. package/twitter/fesm2015/ngx-color-twitter.js +0 -210
  347. package/twitter/fesm2015/ngx-color-twitter.js.map +0 -1
  348. package/twitter/ngx-color-twitter.metadata.json +0 -1
@@ -1,344 +0,0 @@
1
- import { CommonModule } from '@angular/common';
2
- import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
3
- import { getContrastingColor, isValidHex, ColorWrap, EditableInputModule, SwatchModule, RaisedModule } from 'ngx-color';
4
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
5
-
6
- class CompactColorComponent {
7
- constructor() {
8
- this.onClick = new EventEmitter();
9
- this.onSwatchHover = new EventEmitter();
10
- this.swatchStyle = {
11
- width: '15px',
12
- height: '15px',
13
- float: 'left',
14
- marginRight: '5px',
15
- marginBottom: '5px',
16
- position: 'relative',
17
- cursor: 'pointer',
18
- };
19
- this.swatchFocus = {};
20
- this.getContrastingColor = getContrastingColor;
21
- }
22
- ngOnChanges() {
23
- this.swatchStyle.background = this.color;
24
- this.swatchFocus.boxShadow = `0 0 4px ${this.color}`;
25
- if (this.color.toLowerCase() === '#ffffff') {
26
- this.swatchStyle.boxShadow = 'inset 0 0 0 1px #ddd';
27
- }
28
- }
29
- handleClick({ hex, $event }) {
30
- this.onClick.emit({ hex, $event });
31
- }
32
- }
33
- CompactColorComponent.decorators = [
34
- { type: Component, args: [{
35
- selector: 'color-compact-color',
36
- template: `
37
- <div class="compact-color">
38
- <color-swatch class="swatch"
39
- [color]="color" [style]="swatchStyle"
40
- [focusStyle]="swatchFocus"
41
- (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)"
42
- >
43
- <div class="compact-dot"
44
- [class.active]="active" [style.background]="getContrastingColor(color)"
45
- ></div>
46
- </color-swatch>
47
- </div>
48
- `,
49
- changeDetection: ChangeDetectionStrategy.OnPush,
50
- preserveWhitespaces: false,
51
- styles: [`
52
- .compact-dot {
53
- position: absolute;
54
- top: 5px;
55
- right: 5px;
56
- bottom: 5px;
57
- left: 5px;
58
- border-radius: 50%;
59
- opacity: 0;
60
- }
61
- .compact-dot.active {
62
- opacity: 1;
63
- }
64
- `]
65
- },] }
66
- ];
67
- CompactColorComponent.propDecorators = {
68
- color: [{ type: Input }],
69
- active: [{ type: Input }],
70
- onClick: [{ type: Output }],
71
- onSwatchHover: [{ type: Output }]
72
- };
73
-
74
- class CompactFieldsComponent {
75
- constructor() {
76
- this.onChange = new EventEmitter();
77
- this.HEXWrap = {
78
- marginTop: '-3px',
79
- marginBottom: '-3px',
80
- // flex: '6 1 0%',
81
- position: 'relative',
82
- };
83
- this.HEXinput = {
84
- width: '80%',
85
- padding: '0px',
86
- paddingLeft: '20%',
87
- border: 'none',
88
- outline: 'none',
89
- background: 'none',
90
- fontSize: '12px',
91
- color: '#333',
92
- height: '16px',
93
- };
94
- this.HEXlabel = {
95
- display: 'none',
96
- };
97
- this.RGBwrap = {
98
- marginTop: '-3px',
99
- marginBottom: '-3px',
100
- // flex: '3 1 0%',
101
- position: 'relative',
102
- };
103
- this.RGBinput = {
104
- width: '80%',
105
- padding: '0px',
106
- paddingLeft: '30%',
107
- border: 'none',
108
- outline: 'none',
109
- background: 'none',
110
- fontSize: '12px',
111
- color: '#333',
112
- height: '16px',
113
- };
114
- this.RGBlabel = {
115
- position: 'absolute',
116
- top: '6px',
117
- left: '0px',
118
- 'line-height': '16px',
119
- 'text-transform': 'uppercase',
120
- fontSize: '12px',
121
- color: '#999',
122
- };
123
- }
124
- handleChange({ data, $event }) {
125
- if (data.hex) {
126
- if (isValidHex(data.hex)) {
127
- this.onChange.emit({
128
- data: {
129
- hex: data.hex,
130
- source: 'hex',
131
- },
132
- $event,
133
- });
134
- }
135
- }
136
- else {
137
- this.onChange.emit({
138
- data: {
139
- r: data.r || this.rgb.r,
140
- g: data.g || this.rgb.g,
141
- b: data.b || this.rgb.b,
142
- source: 'rgb',
143
- },
144
- $event,
145
- });
146
- }
147
- }
148
- }
149
- CompactFieldsComponent.decorators = [
150
- { type: Component, args: [{
151
- selector: 'color-compact-fields',
152
- template: `
153
- <div class="compact-fields">
154
- <div class="compact-active" [style.background]="hex"></div>
155
- <div style="flex: 6 1 0%;">
156
- <color-editable-input
157
- [style]="{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }"
158
- label="hex"
159
- [value]="hex"
160
- (onChange)="handleChange($event)"
161
- ></color-editable-input>
162
- </div>
163
- <div style="flex: 3 1 0%">
164
- <color-editable-input
165
- [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
166
- label="r"
167
- [value]="rgb.r"
168
- (onChange)="handleChange($event)"
169
- ></color-editable-input>
170
- </div>
171
- <div style="flex: 3 1 0%">
172
- <color-editable-input
173
- [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
174
- label="g"
175
- [value]="rgb.g"
176
- (onChange)="handleChange($event)"
177
- ></color-editable-input>
178
- </div>
179
- <div style="flex: 3 1 0%">
180
- <color-editable-input
181
- [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
182
- label="b"
183
- [value]="rgb.b"
184
- (onChange)="handleChange($event)"
185
- ></color-editable-input>
186
- </div>
187
- </div>
188
- `,
189
- changeDetection: ChangeDetectionStrategy.OnPush,
190
- preserveWhitespaces: false,
191
- styles: [`
192
- .compact-fields {
193
- display: flex;
194
- padding-bottom: 6px;
195
- padding-right: 5px;
196
- position: relative;
197
- }
198
- .compact-active {
199
- position: absolute;
200
- top: 6px;
201
- left: 5px;
202
- height: 9px;
203
- width: 9px;
204
- }
205
- `]
206
- },] }
207
- ];
208
- CompactFieldsComponent.propDecorators = {
209
- hex: [{ type: Input }],
210
- rgb: [{ type: Input }],
211
- onChange: [{ type: Output }]
212
- };
213
-
214
- class CompactComponent extends ColorWrap {
215
- constructor() {
216
- super();
217
- /** Color squares to display */
218
- this.colors = [
219
- '#4D4D4D',
220
- '#999999',
221
- '#FFFFFF',
222
- '#F44E3B',
223
- '#FE9200',
224
- '#FCDC00',
225
- '#DBDF00',
226
- '#A4DD00',
227
- '#68CCCA',
228
- '#73D8FF',
229
- '#AEA1FF',
230
- '#FDA1FF',
231
- '#333333',
232
- '#808080',
233
- '#cccccc',
234
- '#D33115',
235
- '#E27300',
236
- '#FCC400',
237
- '#B0BC00',
238
- '#68BC00',
239
- '#16A5A5',
240
- '#009CE0',
241
- '#7B64FF',
242
- '#FA28FF',
243
- '#000000',
244
- '#666666',
245
- '#B3B3B3',
246
- '#9F0500',
247
- '#C45100',
248
- '#FB9E00',
249
- '#808900',
250
- '#194D33',
251
- '#0C797D',
252
- '#0062B1',
253
- '#653294',
254
- '#AB149E',
255
- ];
256
- this.zDepth = 1;
257
- this.radius = 1;
258
- this.background = '#fff';
259
- this.disableAlpha = true;
260
- }
261
- handleBlockChange({ hex, $event }) {
262
- if (isValidHex(hex)) {
263
- this.handleChange({ hex, source: 'hex' }, $event);
264
- }
265
- }
266
- handleValueChange({ data, $event }) {
267
- this.handleChange(data, $event);
268
- }
269
- }
270
- CompactComponent.decorators = [
271
- { type: Component, args: [{
272
- selector: 'color-compact',
273
- template: `
274
- <color-raised class="color-compact" [zDepth]="zDepth" [background]="background" [radius]="radius">
275
- <div class="compact-picker {{ className }}">
276
- <div>
277
- <color-compact-color
278
- *ngFor="let color of colors" [color]="color"
279
- [active]="color.toLowerCase() === hex.toLowerCase()"
280
- (onClick)="handleBlockChange($event)"
281
- ></color-compact-color>
282
- <div class="compact-clear"></div>
283
- </div>
284
- <color-compact-fields
285
- [hex]="hex"
286
- [rgb]="rgb"
287
- (onChange)="handleValueChange($event)"
288
- ></color-compact-fields>
289
- </div>
290
- </color-raised>
291
- `,
292
- changeDetection: ChangeDetectionStrategy.OnPush,
293
- preserveWhitespaces: false,
294
- providers: [
295
- {
296
- provide: NG_VALUE_ACCESSOR,
297
- useExisting: forwardRef(() => CompactComponent),
298
- multi: true,
299
- }
300
- ],
301
- styles: [`
302
- .color-compact {
303
- background: #f6f6f6;
304
- radius: 4px;
305
- }
306
- .compact-picker {
307
- padding-top: 5px;
308
- padding-left: 5px;
309
- box-sizing: border-box;
310
- width: 245px;
311
- }
312
- .compact-clear {
313
- clear: both;
314
- }
315
- `]
316
- },] }
317
- ];
318
- CompactComponent.ctorParameters = () => [];
319
- CompactComponent.propDecorators = {
320
- colors: [{ type: Input }],
321
- zDepth: [{ type: Input }],
322
- radius: [{ type: Input }],
323
- background: [{ type: Input }]
324
- };
325
- class ColorCompactModule {
326
- }
327
- ColorCompactModule.decorators = [
328
- { type: NgModule, args: [{
329
- declarations: [
330
- CompactComponent,
331
- CompactColorComponent,
332
- CompactFieldsComponent,
333
- ],
334
- exports: [CompactComponent, CompactColorComponent, CompactFieldsComponent],
335
- imports: [CommonModule, EditableInputModule, SwatchModule, RaisedModule],
336
- },] }
337
- ];
338
-
339
- /**
340
- * Generated bundle index. Do not edit.
341
- */
342
-
343
- export { ColorCompactModule, CompactComponent, CompactColorComponent as ɵa, CompactFieldsComponent as ɵb };
344
- //# sourceMappingURL=ngx-color-compact.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ngx-color-compact.js","sources":["../../../../src/lib/components/compact/compact-color.component.ts","../../../../src/lib/components/compact/compact-fields.component.ts","../../../../src/lib/components/compact/compact.component.ts","../../../../src/lib/components/compact/ngx-color-compact.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n} from '@angular/core';\n\nimport { getContrastingColor } from 'ngx-color';\n\n@Component({\n selector: 'color-compact-color',\n template: `\n <div class=\"compact-color\">\n <color-swatch class=\"swatch\"\n [color]=\"color\" [style]=\"swatchStyle\"\n [focusStyle]=\"swatchFocus\"\n (onClick)=\"handleClick($event)\" (onHover)=\"onSwatchHover.emit($event)\"\n >\n <div class=\"compact-dot\"\n [class.active]=\"active\" [style.background]=\"getContrastingColor(color)\"\n ></div>\n </color-swatch>\n </div>\n `,\n styles: [\n `\n .compact-dot {\n position: absolute;\n top: 5px;\n right: 5px;\n bottom: 5px;\n left: 5px;\n border-radius: 50%;\n opacity: 0;\n }\n .compact-dot.active {\n opacity: 1;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class CompactColorComponent implements OnChanges {\n @Input() color!: string;\n @Input() active!: boolean;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n swatchStyle: Record<string, string> = {\n width: '15px',\n height: '15px',\n float: 'left',\n marginRight: '5px',\n marginBottom: '5px',\n position: 'relative',\n cursor: 'pointer',\n };\n swatchFocus: Record<string, string> = {};\n getContrastingColor = getContrastingColor;\n\n ngOnChanges() {\n this.swatchStyle.background = this.color;\n this.swatchFocus.boxShadow = `0 0 4px ${this.color}`;\n if (this.color.toLowerCase() === '#ffffff') {\n this.swatchStyle.boxShadow = 'inset 0 0 0 1px #ddd';\n }\n }\n handleClick({ hex, $event }) {\n this.onClick.emit({ hex, $event });\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\nimport { isValidHex, RGBA } from 'ngx-color';\n\n@Component({\n selector: 'color-compact-fields',\n template: `\n <div class=\"compact-fields\">\n <div class=\"compact-active\" [style.background]=\"hex\"></div>\n <div style=\"flex: 6 1 0%;\">\n <color-editable-input\n [style]=\"{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }\"\n label=\"hex\"\n [value]=\"hex\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div style=\"flex: 3 1 0%\">\n <color-editable-input\n [style]=\"{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }\"\n label=\"r\"\n [value]=\"rgb.r\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div style=\"flex: 3 1 0%\">\n <color-editable-input\n [style]=\"{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }\"\n label=\"g\"\n [value]=\"rgb.g\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div style=\"flex: 3 1 0%\">\n <color-editable-input\n [style]=\"{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }\"\n label=\"b\"\n [value]=\"rgb.b\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n </div>\n `,\n styles: [\n `\n .compact-fields {\n display: flex;\n padding-bottom: 6px;\n padding-right: 5px;\n position: relative;\n }\n .compact-active {\n position: absolute;\n top: 6px;\n left: 5px;\n height: 9px;\n width: 9px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class CompactFieldsComponent {\n @Input() hex!: string;\n @Input() rgb!: RGBA;\n @Output() onChange = new EventEmitter<any>();\n HEXWrap: {[key: string]: string} = {\n marginTop: '-3px',\n marginBottom: '-3px',\n // flex: '6 1 0%',\n position: 'relative',\n };\n HEXinput: {[key: string]: string} = {\n width: '80%',\n padding: '0px',\n paddingLeft: '20%',\n border: 'none',\n outline: 'none',\n background: 'none',\n fontSize: '12px',\n color: '#333',\n height: '16px',\n };\n HEXlabel: {[key: string]: string} = {\n display: 'none',\n };\n RGBwrap: {[key: string]: string} = {\n marginTop: '-3px',\n marginBottom: '-3px',\n // flex: '3 1 0%',\n position: 'relative',\n };\n RGBinput: {[key: string]: string} = {\n width: '80%',\n padding: '0px',\n paddingLeft: '30%',\n border: 'none',\n outline: 'none',\n background: 'none',\n fontSize: '12px',\n color: '#333',\n height: '16px',\n };\n RGBlabel: {[key: string]: string} = {\n position: 'absolute',\n top: '6px',\n left: '0px',\n 'line-height': '16px',\n 'text-transform': 'uppercase',\n fontSize: '12px',\n color: '#999',\n };\n\n handleChange({ data, $event }) {\n if (data.hex) {\n if (isValidHex(data.hex)) {\n this.onChange.emit({\n data: {\n hex: data.hex,\n source: 'hex',\n },\n $event,\n });\n }\n } else {\n this.onChange.emit({\n data: {\n r: data.r || this.rgb.r,\n g: data.g || this.rgb.g,\n b: data.b || this.rgb.b,\n source: 'rgb',\n },\n $event,\n });\n }\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, EditableInputModule, isValidHex, RaisedModule, SwatchModule, zDepth } from 'ngx-color';\nimport { CompactColorComponent } from './compact-color.component';\nimport { CompactFieldsComponent } from './compact-fields.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-compact',\n template: `\n <color-raised class=\"color-compact\" [zDepth]=\"zDepth\" [background]=\"background\" [radius]=\"radius\">\n <div class=\"compact-picker {{ className }}\">\n <div>\n <color-compact-color\n *ngFor=\"let color of colors\" [color]=\"color\"\n [active]=\"color.toLowerCase() === hex.toLowerCase()\"\n (onClick)=\"handleBlockChange($event)\"\n ></color-compact-color>\n <div class=\"compact-clear\"></div>\n </div>\n <color-compact-fields\n [hex]=\"hex\"\n [rgb]=\"rgb\"\n (onChange)=\"handleValueChange($event)\"\n ></color-compact-fields>\n </div>\n </color-raised>\n `,\n styles: [\n `\n .color-compact {\n background: #f6f6f6;\n radius: 4px;\n }\n .compact-picker {\n padding-top: 5px;\n padding-left: 5px;\n box-sizing: border-box;\n width: 245px;\n }\n .compact-clear {\n clear: both;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CompactComponent),\n multi: true,\n }\n ]\n})\nexport class CompactComponent extends ColorWrap {\n /** Color squares to display */\n @Input() colors = [\n '#4D4D4D',\n '#999999',\n '#FFFFFF',\n '#F44E3B',\n '#FE9200',\n '#FCDC00',\n '#DBDF00',\n '#A4DD00',\n '#68CCCA',\n '#73D8FF',\n '#AEA1FF',\n '#FDA1FF',\n '#333333',\n '#808080',\n '#cccccc',\n '#D33115',\n '#E27300',\n '#FCC400',\n '#B0BC00',\n '#68BC00',\n '#16A5A5',\n '#009CE0',\n '#7B64FF',\n '#FA28FF',\n '#000000',\n '#666666',\n '#B3B3B3',\n '#9F0500',\n '#C45100',\n '#FB9E00',\n '#808900',\n '#194D33',\n '#0C797D',\n '#0062B1',\n '#653294',\n '#AB149E',\n ];\n @Input() zDepth: zDepth = 1;\n @Input() radius = 1;\n @Input() background = '#fff';\n disableAlpha = true;\n\n constructor() {\n super();\n }\n handleBlockChange({ hex, $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: [\n CompactComponent,\n CompactColorComponent,\n CompactFieldsComponent,\n ],\n exports: [CompactComponent, CompactColorComponent, CompactFieldsComponent],\n imports: [CommonModule, EditableInputModule, SwatchModule, RaisedModule],\n})\nexport class ColorCompactModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './compact.component';\n\nexport {CompactColorComponent as ɵa} from './compact-color.component';\nexport {CompactFieldsComponent as ɵb} from './compact-fields.component';"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"__symbolic":"module","version":4,"metadata":{"CompactComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":56,"character":38},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"color-compact","template":"\n <color-raised class=\"color-compact\" [zDepth]=\"zDepth\" [background]=\"background\" [radius]=\"radius\">\n <div class=\"compact-picker {{ className }}\">\n <div>\n <color-compact-color\n *ngFor=\"let color of colors\" [color]=\"color\"\n [active]=\"color.toLowerCase() === hex.toLowerCase()\"\n (onClick)=\"handleBlockChange($event)\"\n ></color-compact-color>\n <div class=\"compact-clear\"></div>\n </div>\n <color-compact-fields\n [hex]=\"hex\"\n [rgb]=\"rgb\"\n (onChange)=\"handleValueChange($event)\"\n ></color-compact-fields>\n </div>\n </color-raised>\n ","styles":["\n .color-compact {\n background: #f6f6f6;\n radius: 4px;\n }\n .compact-picker {\n padding-top: 5px;\n padding-left: 5px;\n box-sizing: border-box;\n width: 245px;\n }\n .compact-clear {\n clear: both;\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":46,"character":19},"member":"OnPush"},"preserveWhitespaces":false,"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":50,"character":15},"useExisting":{"__symbolic":"reference","name":"CompactComponent"},"multi":true}]}]}],"members":{"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"zDepth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":3}}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"handleBlockChange":[{"__symbolic":"method"}],"handleValueChange":[{"__symbolic":"method"}]}},"ColorCompactModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":114,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CompactComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"CompactComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":121,"character":12},{"__symbolic":"reference","module":"ngx-color","name":"EditableInputModule","line":121,"character":26},{"__symbolic":"reference","module":"ngx-color","name":"SwatchModule","line":121,"character":47},{"__symbolic":"reference","module":"ngx-color","name":"RaisedModule","line":121,"character":61}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"color-compact-color","template":"\n <div class=\"compact-color\">\n <color-swatch class=\"swatch\"\n [color]=\"color\" [style]=\"swatchStyle\"\n [focusStyle]=\"swatchFocus\"\n (onClick)=\"handleClick($event)\" (onHover)=\"onSwatchHover.emit($event)\"\n >\n <div class=\"compact-dot\"\n [class.active]=\"active\" [style.background]=\"getContrastingColor(color)\"\n ></div>\n </color-swatch>\n </div>\n ","styles":["\n .compact-dot {\n position: absolute;\n top: 5px;\n right: 5px;\n bottom: 5px;\n left: 5px;\n border-radius: 50%;\n opacity: 0;\n }\n .compact-dot.active {\n opacity: 1;\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":42,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":3}}]}],"onSwatchHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":3}}]}],"ngOnChanges":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"color-compact-fields","template":"\n <div class=\"compact-fields\">\n <div class=\"compact-active\" [style.background]=\"hex\"></div>\n <div style=\"flex: 6 1 0%;\">\n <color-editable-input\n [style]=\"{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }\"\n label=\"hex\"\n [value]=\"hex\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div style=\"flex: 3 1 0%\">\n <color-editable-input\n [style]=\"{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }\"\n label=\"r\"\n [value]=\"rgb.r\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div style=\"flex: 3 1 0%\">\n <color-editable-input\n [style]=\"{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }\"\n label=\"g\"\n [value]=\"rgb.g\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div style=\"flex: 3 1 0%\">\n <color-editable-input\n [style]=\"{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }\"\n label=\"b\"\n [value]=\"rgb.b\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n </div>\n ","styles":["\n .compact-fields {\n display: flex;\n padding-bottom: 6px;\n padding-right: 5px;\n position: relative;\n }\n .compact-active {\n position: absolute;\n top: 6px;\n left: 5px;\n height: 9px;\n width: 9px;\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":66,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"hex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3}}]}],"rgb":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":3}}]}],"handleChange":[{"__symbolic":"method"}]}}},"origins":{"CompactComponent":"./compact.component","ColorCompactModule":"./compact.component","ɵa":"./compact-color.component","ɵb":"./compact-fields.component"},"importAs":"ngx-color/compact"}
@@ -1,156 +0,0 @@
1
- import { CommonModule } from '@angular/common';
2
- import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Output, } from '@angular/core';
3
- import { CheckboardModule } from './checkboard.component';
4
- import { CoordinatesModule } from './coordinates.directive';
5
- export class AlphaComponent {
6
- constructor() {
7
- this.direction = 'horizontal';
8
- this.onChange = new EventEmitter();
9
- }
10
- ngOnChanges() {
11
- if (this.direction === 'vertical') {
12
- this.pointerLeft = 0;
13
- this.pointerTop = this.rgb.a * 100;
14
- this.gradient = {
15
- background: `linear-gradient(to bottom, rgba(${this.rgb.r},${this.rgb.g},${this.rgb.b}, 0) 0%,
16
- rgba(${this.rgb.r},${this.rgb.g},${this.rgb.b}, 1) 100%)`,
17
- };
18
- }
19
- else {
20
- this.gradient = {
21
- background: `linear-gradient(to right, rgba(${this.rgb.r},${this.rgb.g},${this.rgb.b}, 0) 0%,
22
- rgba(${this.rgb.r},${this.rgb.g},${this.rgb.b}, 1) 100%)`,
23
- };
24
- this.pointerLeft = this.rgb.a * 100;
25
- }
26
- }
27
- handleChange({ top, left, containerHeight, containerWidth, $event }) {
28
- let data;
29
- if (this.direction === 'vertical') {
30
- let a;
31
- if (top < 0) {
32
- a = 0;
33
- }
34
- else if (top > containerHeight) {
35
- a = 1;
36
- }
37
- else {
38
- a = Math.round(top * 100 / containerHeight) / 100;
39
- }
40
- if (this.hsl.a !== a) {
41
- data = {
42
- h: this.hsl.h,
43
- s: this.hsl.s,
44
- l: this.hsl.l,
45
- a,
46
- source: 'rgb',
47
- };
48
- }
49
- }
50
- else {
51
- let a;
52
- if (left < 0) {
53
- a = 0;
54
- }
55
- else if (left > containerWidth) {
56
- a = 1;
57
- }
58
- else {
59
- a = Math.round(left * 100 / containerWidth) / 100;
60
- }
61
- if (this.hsl.a !== a) {
62
- data = {
63
- h: this.hsl.h,
64
- s: this.hsl.s,
65
- l: this.hsl.l,
66
- a,
67
- source: 'rgb',
68
- };
69
- }
70
- }
71
- if (!data) {
72
- return;
73
- }
74
- this.onChange.emit({ data, $event });
75
- }
76
- }
77
- AlphaComponent.decorators = [
78
- { type: Component, args: [{
79
- selector: 'color-alpha',
80
- template: `
81
- <div class="alpha" [style.border-radius]="radius">
82
- <div class="alpha-checkboard">
83
- <color-checkboard></color-checkboard>
84
- </div>
85
- <div class="alpha-gradient" [ngStyle]="gradient" [style.box-shadow]="shadow" [style.border-radius]="radius"></div>
86
- <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="alpha-container color-alpha-{{direction}}">
87
- <div class="alpha-pointer" [style.left.%]="pointerLeft" [style.top.%]="pointerTop">
88
- <div class="alpha-slider" [ngStyle]="pointer"></div>
89
- </div>
90
- </div>
91
- </div>
92
- `,
93
- changeDetection: ChangeDetectionStrategy.OnPush,
94
- preserveWhitespaces: false,
95
- styles: [`
96
- .alpha {
97
- position: absolute;
98
- top: 0;
99
- bottom: 0;
100
- left: 0;
101
- right: 0;
102
- }
103
- .alpha-checkboard {
104
- position: absolute;
105
- top: 0;
106
- bottom: 0;
107
- left: 0;
108
- right: 0;
109
- overflow: hidden;
110
- }
111
- .alpha-gradient {
112
- position: absolute;
113
- top: 0;
114
- bottom: 0;
115
- left: 0;
116
- right: 0;
117
- }
118
- .alpha-container {
119
- position: relative;
120
- height: 100%;
121
- margin: 0 3px;
122
- }
123
- .alpha-pointer {
124
- position: absolute;
125
- }
126
- .alpha-slider {
127
- width: 4px;
128
- border-radius: 1px;
129
- height: 8px;
130
- box-shadow: 0 0 2px rgba(0, 0, 0, .6);
131
- background: #fff;
132
- margin-top: 1px;
133
- transform: translateX(-2px);
134
- }
135
- `]
136
- },] }
137
- ];
138
- AlphaComponent.propDecorators = {
139
- hsl: [{ type: Input }],
140
- rgb: [{ type: Input }],
141
- pointer: [{ type: Input }],
142
- shadow: [{ type: Input }],
143
- radius: [{ type: Input }],
144
- direction: [{ type: Input }],
145
- onChange: [{ type: Output }]
146
- };
147
- export class AlphaModule {
148
- }
149
- AlphaModule.decorators = [
150
- { type: NgModule, args: [{
151
- declarations: [AlphaComponent],
152
- exports: [AlphaComponent],
153
- imports: [CommonModule, CheckboardModule, CoordinatesModule],
154
- },] }
155
- ];
156
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxwaGEuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9jb21tb24vYWxwaGEuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLFFBQVEsRUFFUixNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDMUQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFpRTVELE1BQU0sT0FBTyxjQUFjO0lBN0QzQjtRQW1FVyxjQUFTLEdBQThCLFlBQVksQ0FBQztRQUNuRCxhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQXlFL0MsQ0FBQztJQXBFQyxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsU0FBUyxLQUFLLFVBQVUsRUFBRTtZQUNqQyxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQztZQUNyQixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQztZQUNuQyxJQUFJLENBQUMsUUFBUSxHQUFHO2dCQUNkLFVBQVUsRUFBRSxtQ0FBbUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQ3ZELElBQUksQ0FBQyxHQUFHLENBQUMsQ0FDWCxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztpQkFDTCxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsSUFBSSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsSUFBSSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsWUFBWTthQUM1RCxDQUFDO1NBQ0g7YUFBTTtZQUNMLElBQUksQ0FBQyxRQUFRLEdBQUc7Z0JBQ2QsVUFBVSxFQUFFLGtDQUFrQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsSUFDdEQsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUNYLElBQUksSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO2lCQUNMLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxZQUFZO2FBQzVELENBQUM7WUFDRixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQztTQUNyQztJQUNILENBQUM7SUFDRCxZQUFZLENBQUMsRUFBRSxHQUFHLEVBQUUsSUFBSSxFQUFFLGVBQWUsRUFBRSxjQUFjLEVBQUUsTUFBTSxFQUFFO1FBQ2pFLElBQUksSUFBUyxDQUFDO1FBQ2QsSUFBSSxJQUFJLENBQUMsU0FBUyxLQUFLLFVBQVUsRUFBRTtZQUNqQyxJQUFJLENBQVMsQ0FBQztZQUNkLElBQUksR0FBRyxHQUFHLENBQUMsRUFBRTtnQkFDWCxDQUFDLEdBQUcsQ0FBQyxDQUFDO2FBQ1A7aUJBQU0sSUFBSSxHQUFHLEdBQUcsZUFBZSxFQUFFO2dCQUNoQyxDQUFDLEdBQUcsQ0FBQyxDQUFDO2FBQ1A7aUJBQU07Z0JBQ0wsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLEdBQUcsR0FBRyxlQUFlLENBQUMsR0FBRyxHQUFHLENBQUM7YUFDbkQ7WUFFRCxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsRUFBRTtnQkFDcEIsSUFBSSxHQUFHO29CQUNMLENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7b0JBQ2IsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztvQkFDYixDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO29CQUNiLENBQUM7b0JBQ0QsTUFBTSxFQUFFLEtBQUs7aUJBQ2QsQ0FBQzthQUNIO1NBQ0Y7YUFBTTtZQUNMLElBQUksQ0FBUyxDQUFDO1lBQ2QsSUFBSSxJQUFJLEdBQUcsQ0FBQyxFQUFFO2dCQUNaLENBQUMsR0FBRyxDQUFDLENBQUM7YUFDUDtpQkFBTSxJQUFJLElBQUksR0FBRyxjQUFjLEVBQUU7Z0JBQ2hDLENBQUMsR0FBRyxDQUFDLENBQUM7YUFDUDtpQkFBTTtnQkFDTCxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsR0FBRyxHQUFHLGNBQWMsQ0FBQyxHQUFHLEdBQUcsQ0FBQzthQUNuRDtZQUVELElBQUksSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQyxFQUFFO2dCQUNwQixJQUFJLEdBQUc7b0JBQ0wsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztvQkFDYixDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO29CQUNiLENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7b0JBQ2IsQ0FBQztvQkFDRCxNQUFNLEVBQUUsS0FBSztpQkFDZCxDQUFDO2FBQ0g7U0FDRjtRQUVELElBQUksQ0FBQyxJQUFJLEVBQUU7WUFDVCxPQUFPO1NBQ1I7UUFFRCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7OztZQTVJRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7O0dBWVQ7Z0JBNENELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxtQkFBbUIsRUFBRSxLQUFLO3lCQTNDeEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F3Q0Q7YUFJRjs7O2tCQUVFLEtBQUs7a0JBQ0wsS0FBSztzQkFDTCxLQUFLO3FCQUNMLEtBQUs7cUJBQ0wsS0FBSzt3QkFDTCxLQUFLO3VCQUNMLE1BQU07O0FBZ0ZULE1BQU0sT0FBTyxXQUFXOzs7WUFMdkIsUUFBUSxTQUFDO2dCQUNSLFlBQVksRUFBRSxDQUFDLGNBQWMsQ0FBQztnQkFDOUIsT0FBTyxFQUFFLENBQUMsY0FBYyxDQUFDO2dCQUN6QixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsZ0JBQWdCLEVBQUUsaUJBQWlCLENBQUM7YUFDN0QiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgTmdNb2R1bGUsXG4gIE9uQ2hhbmdlcyxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ2hlY2tib2FyZE1vZHVsZSB9IGZyb20gJy4vY2hlY2tib2FyZC5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ29vcmRpbmF0ZXNNb2R1bGUgfSBmcm9tICcuL2Nvb3JkaW5hdGVzLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBIU0xBLCBSR0JBIH0gZnJvbSAnLi9oZWxwZXJzL2NvbG9yLmludGVyZmFjZXMnO1xuXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWFscGhhJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cImFscGhhXCIgW3N0eWxlLmJvcmRlci1yYWRpdXNdPVwicmFkaXVzXCI+XG4gICAgPGRpdiBjbGFzcz1cImFscGhhLWNoZWNrYm9hcmRcIj5cbiAgICAgIDxjb2xvci1jaGVja2JvYXJkPjwvY29sb3ItY2hlY2tib2FyZD5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiYWxwaGEtZ3JhZGllbnRcIiBbbmdTdHlsZV09XCJncmFkaWVudFwiIFtzdHlsZS5ib3gtc2hhZG93XT1cInNoYWRvd1wiIFtzdHlsZS5ib3JkZXItcmFkaXVzXT1cInJhZGl1c1wiPjwvZGl2PlxuICAgIDxkaXYgbmd4LWNvbG9yLWNvb3JkaW5hdGVzIChjb29yZGluYXRlc0NoYW5nZSk9XCJoYW5kbGVDaGFuZ2UoJGV2ZW50KVwiIGNsYXNzPVwiYWxwaGEtY29udGFpbmVyIGNvbG9yLWFscGhhLXt7ZGlyZWN0aW9ufX1cIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJhbHBoYS1wb2ludGVyXCIgW3N0eWxlLmxlZnQuJV09XCJwb2ludGVyTGVmdFwiIFtzdHlsZS50b3AuJV09XCJwb2ludGVyVG9wXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJhbHBoYS1zbGlkZXJcIiBbbmdTdHlsZV09XCJwb2ludGVyXCI+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAuYWxwaGEge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHJpZ2h0OiAwO1xuICAgIH1cbiAgICAuYWxwaGEtY2hlY2tib2FyZCB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IDA7XG4gICAgICBib3R0b206IDA7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgcmlnaHQ6IDA7XG4gICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIH1cbiAgICAuYWxwaGEtZ3JhZGllbnQge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHJpZ2h0OiAwO1xuICAgIH1cbiAgICAuYWxwaGEtY29udGFpbmVyIHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIG1hcmdpbjogMCAzcHg7XG4gICAgfVxuICAgIC5hbHBoYS1wb2ludGVyIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB9XG4gICAgLmFscGhhLXNsaWRlciB7XG4gICAgICB3aWR0aDogNHB4O1xuICAgICAgYm9yZGVyLXJhZGl1czogMXB4O1xuICAgICAgaGVpZ2h0OiA4cHg7XG4gICAgICBib3gtc2hhZG93OiAwIDAgMnB4IHJnYmEoMCwgMCwgMCwgLjYpO1xuICAgICAgYmFja2dyb3VuZDogI2ZmZjtcbiAgICAgIG1hcmdpbi10b3A6IDFweDtcbiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMnB4KTtcbiAgICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgQWxwaGFDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBoc2whOiBIU0xBO1xuICBASW5wdXQoKSByZ2IhOiBSR0JBO1xuICBASW5wdXQoKSBwb2ludGVyITogUmVjb3JkPHN0cmluZywgc3RyaW5nPjtcbiAgQElucHV0KCkgc2hhZG93ITogc3RyaW5nO1xuICBASW5wdXQoKSByYWRpdXMhOiBudW1iZXIgfCBzdHJpbmc7XG4gIEBJbnB1dCgpIGRpcmVjdGlvbjogJ2hvcml6b250YWwnIHwgJ3ZlcnRpY2FsJyA9ICdob3Jpem9udGFsJztcbiAgQE91dHB1dCgpIG9uQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIGdyYWRpZW50ITogUmVjb3JkPHN0cmluZywgc3RyaW5nPjtcbiAgcG9pbnRlckxlZnQhOiBudW1iZXI7XG4gIHBvaW50ZXJUb3AhOiBudW1iZXI7XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgaWYgKHRoaXMuZGlyZWN0aW9uID09PSAndmVydGljYWwnKSB7XG4gICAgICB0aGlzLnBvaW50ZXJMZWZ0ID0gMDtcbiAgICAgIHRoaXMucG9pbnRlclRvcCA9IHRoaXMucmdiLmEgKiAxMDA7XG4gICAgICB0aGlzLmdyYWRpZW50ID0ge1xuICAgICAgICBiYWNrZ3JvdW5kOiBgbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwgcmdiYSgke3RoaXMucmdiLnJ9LCR7XG4gICAgICAgICAgdGhpcy5yZ2IuZ1xuICAgICAgICB9LCR7dGhpcy5yZ2IuYn0sIDApIDAlLFxuICAgICAgICAgIHJnYmEoJHt0aGlzLnJnYi5yfSwke3RoaXMucmdiLmd9LCR7dGhpcy5yZ2IuYn0sIDEpIDEwMCUpYCxcbiAgICAgIH07XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuZ3JhZGllbnQgPSB7XG4gICAgICAgIGJhY2tncm91bmQ6IGBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsIHJnYmEoJHt0aGlzLnJnYi5yfSwke1xuICAgICAgICAgIHRoaXMucmdiLmdcbiAgICAgICAgfSwke3RoaXMucmdiLmJ9LCAwKSAwJSxcbiAgICAgICAgICByZ2JhKCR7dGhpcy5yZ2Iucn0sJHt0aGlzLnJnYi5nfSwke3RoaXMucmdiLmJ9LCAxKSAxMDAlKWAsXG4gICAgICB9O1xuICAgICAgdGhpcy5wb2ludGVyTGVmdCA9IHRoaXMucmdiLmEgKiAxMDA7XG4gICAgfVxuICB9XG4gIGhhbmRsZUNoYW5nZSh7IHRvcCwgbGVmdCwgY29udGFpbmVySGVpZ2h0LCBjb250YWluZXJXaWR0aCwgJGV2ZW50IH0pOiB2b2lkIHtcbiAgICBsZXQgZGF0YTogYW55O1xuICAgIGlmICh0aGlzLmRpcmVjdGlvbiA9PT0gJ3ZlcnRpY2FsJykge1xuICAgICAgbGV0IGE6IG51bWJlcjtcbiAgICAgIGlmICh0b3AgPCAwKSB7XG4gICAgICAgIGEgPSAwO1xuICAgICAgfSBlbHNlIGlmICh0b3AgPiBjb250YWluZXJIZWlnaHQpIHtcbiAgICAgICAgYSA9IDE7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBhID0gTWF0aC5yb3VuZCh0b3AgKiAxMDAgLyBjb250YWluZXJIZWlnaHQpIC8gMTAwO1xuICAgICAgfVxuXG4gICAgICBpZiAodGhpcy5oc2wuYSAhPT0gYSkge1xuICAgICAgICBkYXRhID0ge1xuICAgICAgICAgIGg6IHRoaXMuaHNsLmgsXG4gICAgICAgICAgczogdGhpcy5oc2wucyxcbiAgICAgICAgICBsOiB0aGlzLmhzbC5sLFxuICAgICAgICAgIGEsXG4gICAgICAgICAgc291cmNlOiAncmdiJyxcbiAgICAgICAgfTtcbiAgICAgIH1cbiAgICB9IGVsc2Uge1xuICAgICAgbGV0IGE6IG51bWJlcjtcbiAgICAgIGlmIChsZWZ0IDwgMCkge1xuICAgICAgICBhID0gMDtcbiAgICAgIH0gZWxzZSBpZiAobGVmdCA+IGNvbnRhaW5lcldpZHRoKSB7XG4gICAgICAgIGEgPSAxO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgYSA9IE1hdGgucm91bmQobGVmdCAqIDEwMCAvIGNvbnRhaW5lcldpZHRoKSAvIDEwMDtcbiAgICAgIH1cblxuICAgICAgaWYgKHRoaXMuaHNsLmEgIT09IGEpIHtcbiAgICAgICAgZGF0YSA9IHtcbiAgICAgICAgICBoOiB0aGlzLmhzbC5oLFxuICAgICAgICAgIHM6IHRoaXMuaHNsLnMsXG4gICAgICAgICAgbDogdGhpcy5oc2wubCxcbiAgICAgICAgICBhLFxuICAgICAgICAgIHNvdXJjZTogJ3JnYicsXG4gICAgICAgIH07XG4gICAgICB9XG4gICAgfVxuXG4gICAgaWYgKCFkYXRhKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5vbkNoYW5nZS5lbWl0KHsgZGF0YSwgJGV2ZW50IH0pO1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW0FscGhhQ29tcG9uZW50XSxcbiAgZXhwb3J0czogW0FscGhhQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ2hlY2tib2FyZE1vZHVsZSwgQ29vcmRpbmF0ZXNNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBBbHBoYU1vZHVsZSB7fVxuIl19
@@ -1,52 +0,0 @@
1
- import { CommonModule } from '@angular/common';
2
- import { ChangeDetectionStrategy, Component, Input, NgModule, } from '@angular/core';
3
- import { getCheckerboard } from './helpers/checkboard';
4
- export class CheckboardComponent {
5
- constructor() {
6
- this.white = 'transparent';
7
- this.size = 8;
8
- this.grey = 'rgba(0,0,0,.08)';
9
- }
10
- ngOnInit() {
11
- const background = getCheckerboard(this.white, this.grey, this.size);
12
- this.gridStyles = {
13
- borderRadius: this.borderRadius,
14
- boxShadow: this.boxShadow,
15
- background: `url(${background}) center left`,
16
- };
17
- }
18
- }
19
- CheckboardComponent.decorators = [
20
- { type: Component, args: [{
21
- selector: 'color-checkboard',
22
- template: `<div class="grid" [ngStyle]="gridStyles"></div>`,
23
- preserveWhitespaces: false,
24
- changeDetection: ChangeDetectionStrategy.OnPush,
25
- styles: [`
26
- .grid {
27
- top: 0px;
28
- right: 0px;
29
- bottom: 0px;
30
- left: 0px;
31
- position: absolute;
32
- }
33
- `]
34
- },] }
35
- ];
36
- CheckboardComponent.propDecorators = {
37
- white: [{ type: Input }],
38
- size: [{ type: Input }],
39
- grey: [{ type: Input }],
40
- boxShadow: [{ type: Input }],
41
- borderRadius: [{ type: Input }]
42
- };
43
- export class CheckboardModule {
44
- }
45
- CheckboardModule.decorators = [
46
- { type: NgModule, args: [{
47
- declarations: [CheckboardComponent],
48
- exports: [CheckboardComponent],
49
- imports: [CommonModule],
50
- },] }
51
- ];
52
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2NvbW1vbi9jaGVja2JvYXJkLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxFQUNMLFFBQVEsR0FFVCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFtQnZELE1BQU0sT0FBTyxtQkFBbUI7SUFqQmhDO1FBa0JXLFVBQUssR0FBRyxhQUFhLENBQUM7UUFDdEIsU0FBSSxHQUFHLENBQUMsQ0FBQztRQUNULFNBQUksR0FBRyxpQkFBaUIsQ0FBQztJQWFwQyxDQUFDO0lBUkMsUUFBUTtRQUNOLE1BQU0sVUFBVSxHQUFHLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3JFLElBQUksQ0FBQyxVQUFVLEdBQUc7WUFDaEIsWUFBWSxFQUFFLElBQUksQ0FBQyxZQUFZO1lBQy9CLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBUztZQUN6QixVQUFVLEVBQUUsT0FBTyxVQUFVLGVBQWU7U0FDN0MsQ0FBQztJQUNKLENBQUM7OztZQWhDRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtnQkFDNUIsUUFBUSxFQUFFLGlEQUFpRDtnQkFZM0QsbUJBQW1CLEVBQUUsS0FBSztnQkFDMUIsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07eUJBWDdDOzs7Ozs7OztHQVFEO2FBSUY7OztvQkFFRSxLQUFLO21CQUNMLEtBQUs7bUJBQ0wsS0FBSzt3QkFDTCxLQUFLOzJCQUNMLEtBQUs7O0FBa0JSLE1BQU0sT0FBTyxnQkFBZ0I7OztZQUw1QixRQUFRLFNBQUM7Z0JBQ1IsWUFBWSxFQUFFLENBQUMsbUJBQW1CLENBQUM7Z0JBQ25DLE9BQU8sRUFBRSxDQUFDLG1CQUFtQixDQUFDO2dCQUM5QixPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7YUFDeEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIE5nTW9kdWxlLFxuICBPbkluaXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBnZXRDaGVja2VyYm9hcmQgfSBmcm9tICcuL2hlbHBlcnMvY2hlY2tib2FyZCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWNoZWNrYm9hcmQnLFxuICB0ZW1wbGF0ZTogYDxkaXYgY2xhc3M9XCJncmlkXCIgW25nU3R5bGVdPVwiZ3JpZFN0eWxlc1wiPjwvZGl2PmAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgLmdyaWQge1xuICAgIHRvcDogMHB4O1xuICAgIHJpZ2h0OiAwcHg7XG4gICAgYm90dG9tOiAwcHg7XG4gICAgbGVmdDogMHB4O1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgfVxuICBgLFxuICBdLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIENoZWNrYm9hcmRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSB3aGl0ZSA9ICd0cmFuc3BhcmVudCc7XG4gIEBJbnB1dCgpIHNpemUgPSA4O1xuICBASW5wdXQoKSBncmV5ID0gJ3JnYmEoMCwwLDAsLjA4KSc7XG4gIEBJbnB1dCgpIGJveFNoYWRvdyE6IHN0cmluZztcbiAgQElucHV0KCkgYm9yZGVyUmFkaXVzITogc3RyaW5nO1xuICBncmlkU3R5bGVzITogUmVjb3JkPHN0cmluZywgc3RyaW5nPjtcblxuICBuZ09uSW5pdCgpIHtcbiAgICBjb25zdCBiYWNrZ3JvdW5kID0gZ2V0Q2hlY2tlcmJvYXJkKHRoaXMud2hpdGUsIHRoaXMuZ3JleSwgdGhpcy5zaXplKTtcbiAgICB0aGlzLmdyaWRTdHlsZXMgPSB7XG4gICAgICBib3JkZXJSYWRpdXM6IHRoaXMuYm9yZGVyUmFkaXVzLFxuICAgICAgYm94U2hhZG93OiB0aGlzLmJveFNoYWRvdyxcbiAgICAgIGJhY2tncm91bmQ6IGB1cmwoJHtiYWNrZ3JvdW5kfSkgY2VudGVyIGxlZnRgLFxuICAgIH07XG4gIH1cbn1cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbQ2hlY2tib2FyZENvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtDaGVja2JvYXJkQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIENoZWNrYm9hcmRNb2R1bGUge31cbiJdfQ==