ngx-color 7.0.1 → 7.3.0

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 (339) hide show
  1. package/alpha/alpha-picker.component.d.ts +8 -0
  2. package/alpha/esm2020/alpha-picker.component.mjs +116 -0
  3. package/alpha/{esm2015/ngx-color-alpha.js → esm2020/ngx-color-alpha.mjs} +2 -2
  4. package/alpha/esm2020/public_api.mjs +2 -0
  5. package/alpha/fesm2015/ngx-color-alpha.mjs +123 -0
  6. package/alpha/fesm2015/ngx-color-alpha.mjs.map +1 -0
  7. package/alpha/fesm2020/ngx-color-alpha.mjs +123 -0
  8. package/alpha/fesm2020/ngx-color-alpha.mjs.map +1 -0
  9. package/alpha/ngx-color-alpha.d.ts +2 -1
  10. package/alpha/package.json +19 -7
  11. package/alpha/public_api.d.ts +1 -0
  12. package/alpha.component.d.ts +9 -0
  13. package/block/block-swatches.component.d.ts +3 -0
  14. package/block/block.component.d.ts +9 -0
  15. package/block/esm2020/block-swatches.component.mjs +76 -0
  16. package/block/esm2020/block.component.mjs +199 -0
  17. package/block/esm2020/ngx-color-block.mjs +5 -0
  18. package/block/esm2020/public_api.mjs +3 -0
  19. package/block/fesm2015/ngx-color-block.mjs +277 -0
  20. package/block/fesm2015/ngx-color-block.mjs.map +1 -0
  21. package/block/fesm2020/ngx-color-block.mjs +277 -0
  22. package/block/fesm2020/ngx-color-block.mjs.map +1 -0
  23. package/block/ngx-color-block.d.ts +2 -2
  24. package/block/package.json +19 -7
  25. package/block/public_api.d.ts +2 -0
  26. package/checkboard.component.d.ts +7 -0
  27. package/chrome/chrome-fields.component.d.ts +3 -0
  28. package/chrome/chrome.component.d.ts +9 -0
  29. package/chrome/esm2020/chrome-fields.component.mjs +356 -0
  30. package/chrome/esm2020/chrome.component.mjs +249 -0
  31. package/chrome/esm2020/ngx-color-chrome.mjs +5 -0
  32. package/chrome/esm2020/public_api.mjs +3 -0
  33. package/chrome/fesm2015/ngx-color-chrome.mjs +606 -0
  34. package/chrome/fesm2015/ngx-color-chrome.mjs.map +1 -0
  35. package/chrome/fesm2020/ngx-color-chrome.mjs +606 -0
  36. package/chrome/fesm2020/ngx-color-chrome.mjs.map +1 -0
  37. package/chrome/ngx-color-chrome.d.ts +2 -2
  38. package/chrome/package.json +19 -7
  39. package/chrome/public_api.d.ts +2 -0
  40. package/circle/circle-swatch.component.d.ts +3 -0
  41. package/circle/circle.component.d.ts +9 -0
  42. package/circle/esm2020/circle-swatch.component.mjs +85 -0
  43. package/circle/esm2020/circle.component.mjs +148 -0
  44. package/circle/esm2020/ngx-color-circle.mjs +5 -0
  45. package/circle/esm2020/public_api.mjs +3 -0
  46. package/circle/fesm2015/ngx-color-circle.mjs +237 -0
  47. package/circle/fesm2015/ngx-color-circle.mjs.map +1 -0
  48. package/circle/fesm2020/ngx-color-circle.mjs +237 -0
  49. package/circle/fesm2020/ngx-color-circle.mjs.map +1 -0
  50. package/circle/ngx-color-circle.d.ts +2 -2
  51. package/circle/package.json +19 -7
  52. package/circle/public_api.d.ts +2 -0
  53. package/color-wrap.component.d.ts +27 -2
  54. package/compact/compact-color.component.d.ts +3 -0
  55. package/compact/compact-fields.component.d.ts +3 -0
  56. package/compact/compact.component.d.ts +10 -0
  57. package/compact/esm2020/compact-color.component.mjs +91 -0
  58. package/compact/esm2020/compact-fields.component.mjs +186 -0
  59. package/compact/esm2020/compact.component.mjs +177 -0
  60. package/compact/esm2020/ngx-color-compact.mjs +5 -0
  61. package/compact/esm2020/public_api.mjs +4 -0
  62. package/compact/fesm2015/ngx-color-compact.mjs +451 -0
  63. package/compact/fesm2015/ngx-color-compact.mjs.map +1 -0
  64. package/compact/fesm2020/ngx-color-compact.mjs +451 -0
  65. package/compact/fesm2020/ngx-color-compact.mjs.map +1 -0
  66. package/compact/ngx-color-compact.d.ts +2 -3
  67. package/compact/package.json +19 -7
  68. package/compact/public_api.d.ts +3 -0
  69. package/coordinates.directive.d.ts +6 -0
  70. package/editable-input.component.d.ts +8 -0
  71. package/esm2020/alpha.component.mjs +186 -0
  72. package/esm2020/checkboard.component.mjs +66 -0
  73. package/esm2020/color-wrap.component.mjs +163 -0
  74. package/esm2020/coordinates.directive.mjs +104 -0
  75. package/esm2020/editable-input.component.mjs +217 -0
  76. package/{esm2015/helpers/checkboard.js → esm2020/helpers/checkboard.mjs} +0 -0
  77. package/{esm2015/helpers/color.interfaces.js → esm2020/helpers/color.interfaces.mjs} +0 -0
  78. package/{esm2015/helpers/color.js → esm2020/helpers/color.mjs} +0 -0
  79. package/esm2020/hue.component.mjs +165 -0
  80. package/{esm2015/ngx-color.js → esm2020/ngx-color.mjs} +0 -0
  81. package/{esm2015/public_api.js → esm2020/public_api.mjs} +0 -0
  82. package/esm2020/raised.component.mjs +89 -0
  83. package/esm2020/saturation.component.mjs +136 -0
  84. package/esm2020/shade.component.mjs +165 -0
  85. package/esm2020/swatch.component.mjs +125 -0
  86. package/fesm2015/ngx-color.mjs +1461 -0
  87. package/fesm2015/ngx-color.mjs.map +1 -0
  88. package/fesm2020/ngx-color.mjs +1466 -0
  89. package/fesm2020/ngx-color.mjs.map +1 -0
  90. package/github/esm2020/github-swatch.component.mjs +67 -0
  91. package/github/esm2020/github.component.mjs +179 -0
  92. package/github/esm2020/ngx-color-github.mjs +5 -0
  93. package/github/esm2020/public_api.mjs +3 -0
  94. package/github/fesm2015/ngx-color-github.mjs +250 -0
  95. package/github/fesm2015/ngx-color-github.mjs.map +1 -0
  96. package/github/fesm2020/ngx-color-github.mjs +250 -0
  97. package/github/fesm2020/ngx-color-github.mjs.map +1 -0
  98. package/github/github-swatch.component.d.ts +3 -0
  99. package/github/github.component.d.ts +9 -0
  100. package/github/ngx-color-github.d.ts +2 -2
  101. package/github/package.json +19 -7
  102. package/github/public_api.d.ts +2 -0
  103. package/helpers/checkboard.d.ts +2 -2
  104. package/hue/esm2020/hue-picker.component.mjs +113 -0
  105. package/hue/{esm2015/ngx-color-hue.js → esm2020/ngx-color-hue.mjs} +2 -2
  106. package/hue/esm2020/public_api.mjs +2 -0
  107. package/hue/fesm2015/ngx-color-hue.mjs +120 -0
  108. package/hue/fesm2015/ngx-color-hue.mjs.map +1 -0
  109. package/hue/fesm2020/ngx-color-hue.mjs +120 -0
  110. package/hue/fesm2020/ngx-color-hue.mjs.map +1 -0
  111. package/hue/hue-picker.component.d.ts +8 -0
  112. package/hue/ngx-color-hue.d.ts +2 -1
  113. package/hue/package.json +19 -7
  114. package/hue/public_api.d.ts +1 -0
  115. package/hue.component.d.ts +8 -0
  116. package/material/esm2020/material.component.mjs +211 -0
  117. package/material/{esm2015/ngx-color-material.js → esm2020/ngx-color-material.mjs} +2 -2
  118. package/material/esm2020/public_api.mjs +2 -0
  119. package/material/fesm2015/ngx-color-material.mjs +218 -0
  120. package/material/fesm2015/ngx-color-material.mjs.map +1 -0
  121. package/material/fesm2020/ngx-color-material.mjs +218 -0
  122. package/material/fesm2020/ngx-color-material.mjs.map +1 -0
  123. package/material/material.component.d.ts +8 -0
  124. package/material/ngx-color-material.d.ts +2 -1
  125. package/material/package.json +19 -7
  126. package/material/public_api.d.ts +1 -0
  127. package/ngx-color.d.ts +1 -0
  128. package/package.json +20 -8
  129. package/photoshop/esm2020/ngx-color-photoshop.mjs +5 -0
  130. package/photoshop/esm2020/photoshop-button.component.mjs +63 -0
  131. package/photoshop/esm2020/photoshop-fields.component.mjs +241 -0
  132. package/photoshop/esm2020/photoshop-previews.component.mjs +68 -0
  133. package/photoshop/esm2020/photoshop.component.mjs +258 -0
  134. package/photoshop/esm2020/public_api.mjs +5 -0
  135. package/photoshop/fesm2015/ngx-color-photoshop.mjs +626 -0
  136. package/photoshop/fesm2015/ngx-color-photoshop.mjs.map +1 -0
  137. package/photoshop/fesm2020/ngx-color-photoshop.mjs +626 -0
  138. package/photoshop/fesm2020/ngx-color-photoshop.mjs.map +1 -0
  139. package/photoshop/ngx-color-photoshop.d.ts +2 -4
  140. package/photoshop/package.json +19 -7
  141. package/photoshop/photoshop-button.component.d.ts +3 -0
  142. package/photoshop/photoshop-fields.component.d.ts +3 -0
  143. package/photoshop/photoshop-previews.component.d.ts +3 -0
  144. package/photoshop/photoshop.component.d.ts +11 -0
  145. package/photoshop/public_api.d.ts +4 -0
  146. package/raised.component.d.ts +7 -0
  147. package/saturation.component.d.ts +8 -0
  148. package/shade/{esm2015/ngx-color-shade.js → esm2020/ngx-color-shade.mjs} +2 -2
  149. package/shade/esm2020/public_api.mjs +2 -0
  150. package/shade/esm2020/shade-picker.component.mjs +105 -0
  151. package/shade/fesm2015/ngx-color-shade.mjs +112 -0
  152. package/shade/fesm2015/ngx-color-shade.mjs.map +1 -0
  153. package/shade/fesm2020/ngx-color-shade.mjs +112 -0
  154. package/shade/fesm2020/ngx-color-shade.mjs.map +1 -0
  155. package/shade/ngx-color-shade.d.ts +2 -1
  156. package/shade/package.json +19 -7
  157. package/shade/public_api.d.ts +1 -0
  158. package/shade/shade-picker.component.d.ts +8 -0
  159. package/shade.component.d.ts +8 -0
  160. package/sketch/esm2020/ngx-color-sketch.mjs +5 -0
  161. package/sketch/esm2020/public_api.mjs +4 -0
  162. package/sketch/esm2020/sketch-fields.component.mjs +243 -0
  163. package/sketch/esm2020/sketch-preset-colors.component.mjs +98 -0
  164. package/sketch/esm2020/sketch.component.mjs +283 -0
  165. package/sketch/fesm2015/ngx-color-sketch.mjs +620 -0
  166. package/sketch/fesm2015/ngx-color-sketch.mjs.map +1 -0
  167. package/sketch/fesm2020/ngx-color-sketch.mjs +620 -0
  168. package/sketch/fesm2020/ngx-color-sketch.mjs.map +1 -0
  169. package/sketch/ngx-color-sketch.d.ts +2 -3
  170. package/sketch/package.json +19 -7
  171. package/sketch/public_api.d.ts +3 -0
  172. package/sketch/sketch-fields.component.d.ts +3 -0
  173. package/sketch/sketch-preset-colors.component.d.ts +3 -0
  174. package/sketch/sketch.component.d.ts +10 -0
  175. package/slider/esm2020/ngx-color-slider.mjs +5 -0
  176. package/slider/esm2020/public_api.mjs +4 -0
  177. package/slider/esm2020/slider-swatch.component.mjs +80 -0
  178. package/slider/esm2020/slider-swatches.component.mjs +135 -0
  179. package/slider/esm2020/slider.component.mjs +116 -0
  180. package/slider/fesm2015/ngx-color-slider.mjs +331 -0
  181. package/slider/fesm2015/ngx-color-slider.mjs.map +1 -0
  182. package/slider/fesm2020/ngx-color-slider.mjs +331 -0
  183. package/slider/fesm2020/ngx-color-slider.mjs.map +1 -0
  184. package/slider/ngx-color-slider.d.ts +2 -3
  185. package/slider/package.json +19 -7
  186. package/slider/public_api.d.ts +3 -0
  187. package/slider/slider-swatch.component.d.ts +3 -0
  188. package/slider/slider-swatches.component.d.ts +3 -0
  189. package/slider/slider.component.d.ts +10 -0
  190. package/swatch.component.d.ts +8 -0
  191. package/swatches/esm2020/ngx-color-swatches.mjs +5 -0
  192. package/swatches/esm2020/public_api.mjs +4 -0
  193. package/swatches/esm2020/swatches-color.component.mjs +123 -0
  194. package/swatches/esm2020/swatches-group.component.mjs +64 -0
  195. package/swatches/esm2020/swatches.component.mjs +258 -0
  196. package/swatches/fesm2015/ngx-color-swatches.mjs +441 -0
  197. package/swatches/fesm2015/ngx-color-swatches.mjs.map +1 -0
  198. package/swatches/fesm2020/ngx-color-swatches.mjs +441 -0
  199. package/swatches/fesm2020/ngx-color-swatches.mjs.map +1 -0
  200. package/swatches/ngx-color-swatches.d.ts +2 -3
  201. package/swatches/package.json +19 -7
  202. package/swatches/public_api.d.ts +3 -0
  203. package/swatches/swatches-color.component.d.ts +3 -0
  204. package/swatches/swatches-group.component.d.ts +3 -0
  205. package/swatches/swatches.component.d.ts +10 -0
  206. package/twitter/{esm2015/ngx-color-twitter.js → esm2020/ngx-color-twitter.mjs} +2 -2
  207. package/twitter/esm2020/public_api.mjs +2 -0
  208. package/twitter/esm2020/twitter.component.mjs +255 -0
  209. package/twitter/fesm2015/ngx-color-twitter.mjs +262 -0
  210. package/twitter/fesm2015/ngx-color-twitter.mjs.map +1 -0
  211. package/twitter/fesm2020/ngx-color-twitter.mjs +262 -0
  212. package/twitter/fesm2020/ngx-color-twitter.mjs.map +1 -0
  213. package/twitter/ngx-color-twitter.d.ts +2 -1
  214. package/twitter/package.json +19 -7
  215. package/twitter/public_api.d.ts +1 -0
  216. package/twitter/twitter.component.d.ts +8 -0
  217. package/alpha/bundles/ngx-color-alpha.umd.js +0 -387
  218. package/alpha/bundles/ngx-color-alpha.umd.js.map +0 -1
  219. package/alpha/esm2015/alpha-picker.component.js +0 -72
  220. package/alpha/fesm2015/ngx-color-alpha.js +0 -79
  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 -455
  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 -139
  227. package/block/esm2015/ngx-color-block.js +0 -6
  228. package/block/fesm2015/ngx-color-block.js +0 -202
  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 -951
  232. package/bundles/ngx-color.umd.js.map +0 -1
  233. package/chrome/bundles/ngx-color-chrome.umd.js +0 -526
  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 -161
  237. package/chrome/esm2015/ngx-color-chrome.js +0 -6
  238. package/chrome/fesm2015/ngx-color-chrome.js +0 -420
  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 -452
  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 -97
  245. package/circle/esm2015/ngx-color-circle.js +0 -6
  246. package/circle/fesm2015/ngx-color-circle.js +0 -165
  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 -562
  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 -123
  254. package/compact/esm2015/ngx-color-compact.js +0 -7
  255. package/compact/fesm2015/ngx-color-compact.js +0 -336
  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 -82
  261. package/esm2015/coordinates.directive.js +0 -85
  262. package/esm2015/editable-input.component.js +0 -181
  263. package/esm2015/hue.component.js +0 -140
  264. package/esm2015/raised.component.js +0 -73
  265. package/esm2015/saturation.component.js +0 -111
  266. package/esm2015/shade.component.js +0 -127
  267. package/esm2015/swatch.component.js +0 -85
  268. package/fesm2015/ngx-color.js +0 -1164
  269. package/fesm2015/ngx-color.js.map +0 -1
  270. package/github/bundles/ngx-color-github.umd.js +0 -430
  271. package/github/bundles/ngx-color-github.umd.js.map +0 -1
  272. package/github/esm2015/github-swatch.component.js +0 -48
  273. package/github/esm2015/github.component.js +0 -134
  274. package/github/esm2015/ngx-color-github.js +0 -6
  275. package/github/fesm2015/ngx-color-github.js +0 -187
  276. package/github/fesm2015/ngx-color-github.js.map +0 -1
  277. package/github/ngx-color-github.metadata.json +0 -1
  278. package/hue/bundles/ngx-color-hue.umd.js +0 -390
  279. package/hue/bundles/ngx-color-hue.umd.js.map +0 -1
  280. package/hue/esm2015/hue-picker.component.js +0 -70
  281. package/hue/fesm2015/ngx-color-hue.js +0 -77
  282. package/hue/fesm2015/ngx-color-hue.js.map +0 -1
  283. package/hue/ngx-color-hue.metadata.json +0 -1
  284. package/material/bundles/ngx-color-material.umd.js +0 -438
  285. package/material/bundles/ngx-color-material.umd.js.map +0 -1
  286. package/material/esm2015/material.component.js +0 -149
  287. package/material/fesm2015/ngx-color-material.js +0 -156
  288. package/material/fesm2015/ngx-color-material.js.map +0 -1
  289. package/material/ngx-color-material.metadata.json +0 -1
  290. package/ngx-color.metadata.json +0 -1
  291. package/photoshop/bundles/ngx-color-photoshop.umd.js +0 -554
  292. package/photoshop/bundles/ngx-color-photoshop.umd.js.map +0 -1
  293. package/photoshop/esm2015/ngx-color-photoshop.js +0 -8
  294. package/photoshop/esm2015/photoshop-button.component.js +0 -50
  295. package/photoshop/esm2015/photoshop-fields.component.js +0 -180
  296. package/photoshop/esm2015/photoshop-previews.component.js +0 -53
  297. package/photoshop/esm2015/photoshop.component.js +0 -169
  298. package/photoshop/fesm2015/ngx-color-photoshop.js +0 -452
  299. package/photoshop/fesm2015/ngx-color-photoshop.js.map +0 -1
  300. package/photoshop/ngx-color-photoshop.metadata.json +0 -1
  301. package/shade/bundles/ngx-color-shade.umd.js +0 -382
  302. package/shade/bundles/ngx-color-shade.umd.js.map +0 -1
  303. package/shade/esm2015/shade-picker.component.js +0 -63
  304. package/shade/fesm2015/ngx-color-shade.js +0 -70
  305. package/shade/fesm2015/ngx-color-shade.js.map +0 -1
  306. package/shade/ngx-color-shade.metadata.json +0 -1
  307. package/sketch/bundles/ngx-color-sketch.umd.js +0 -568
  308. package/sketch/bundles/ngx-color-sketch.umd.js.map +0 -1
  309. package/sketch/esm2015/ngx-color-sketch.js +0 -7
  310. package/sketch/esm2015/sketch-fields.component.js +0 -181
  311. package/sketch/esm2015/sketch-preset-colors.component.js +0 -76
  312. package/sketch/esm2015/sketch.component.js +0 -191
  313. package/sketch/fesm2015/ngx-color-sketch.js +0 -450
  314. package/sketch/fesm2015/ngx-color-sketch.js.map +0 -1
  315. package/sketch/ngx-color-sketch.metadata.json +0 -1
  316. package/slider/bundles/ngx-color-slider.umd.js +0 -453
  317. package/slider/bundles/ngx-color-slider.umd.js.map +0 -1
  318. package/slider/esm2015/ngx-color-slider.js +0 -7
  319. package/slider/esm2015/slider-swatch.component.js +0 -65
  320. package/slider/esm2015/slider-swatches.component.js +0 -84
  321. package/slider/esm2015/slider.component.js +0 -69
  322. package/slider/fesm2015/ngx-color-slider.js +0 -221
  323. package/slider/fesm2015/ngx-color-slider.js.map +0 -1
  324. package/slider/ngx-color-slider.metadata.json +0 -1
  325. package/swatches/bundles/ngx-color-swatches.umd.js +0 -595
  326. package/swatches/bundles/ngx-color-swatches.umd.js.map +0 -1
  327. package/swatches/esm2015/ngx-color-swatches.js +0 -7
  328. package/swatches/esm2015/swatches-color.component.js +0 -90
  329. package/swatches/esm2015/swatches-group.component.js +0 -42
  330. package/swatches/esm2015/swatches.component.js +0 -205
  331. package/swatches/fesm2015/ngx-color-swatches.js +0 -339
  332. package/swatches/fesm2015/ngx-color-swatches.js.map +0 -1
  333. package/swatches/ngx-color-swatches.metadata.json +0 -1
  334. package/twitter/bundles/ngx-color-twitter.umd.js +0 -416
  335. package/twitter/bundles/ngx-color-twitter.umd.js.map +0 -1
  336. package/twitter/esm2015/twitter.component.js +0 -195
  337. package/twitter/fesm2015/ngx-color-twitter.js +0 -202
  338. package/twitter/fesm2015/ngx-color-twitter.js.map +0 -1
  339. package/twitter/ngx-color-twitter.metadata.json +0 -1
@@ -1,195 +0,0 @@
1
- import { CommonModule } from '@angular/common';
2
- import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
3
- import { ColorWrap, EditableInputModule, SwatchModule, isValidHex } from 'ngx-color';
4
- export class TwitterComponent extends ColorWrap {
5
- constructor() {
6
- super();
7
- /** Pixel value for picker width */
8
- this.width = 276;
9
- /** Color squares to display */
10
- this.colors = [
11
- '#FF6900',
12
- '#FCB900',
13
- '#7BDCB5',
14
- '#00D084',
15
- '#8ED1FC',
16
- '#0693E3',
17
- '#ABB8C3',
18
- '#EB144C',
19
- '#F78DA7',
20
- '#9900EF',
21
- ];
22
- this.triangle = 'top-left';
23
- this.swatchStyle = {
24
- width: '30px',
25
- height: '30px',
26
- borderRadius: '4px',
27
- fontSize: '0',
28
- };
29
- this.input = {
30
- borderRadius: '4px',
31
- borderBottomLeftRadius: '0',
32
- borderTopLeftRadius: '0',
33
- border: '1px solid #e6ecf0',
34
- boxSizing: 'border-box',
35
- display: 'inline',
36
- fontSize: '14px',
37
- height: '30px',
38
- padding: '0',
39
- paddingLeft: '6px',
40
- width: '100%',
41
- color: '#657786',
42
- };
43
- this.disableAlpha = true;
44
- }
45
- focus(color) {
46
- return { boxShadow: `0 0 4px ${color}` };
47
- }
48
- handleBlockChange({ hex, $event }) {
49
- if (isValidHex(hex)) {
50
- // this.hex = hex;
51
- this.handleChange({ hex, source: 'hex' }, $event);
52
- }
53
- }
54
- handleValueChange({ data, $event }) {
55
- this.handleBlockChange({ hex: data, $event });
56
- }
57
- }
58
- TwitterComponent.decorators = [
59
- { type: Component, args: [{
60
- selector: 'color-twitter',
61
- template: `
62
- <div class="twitter-picker {{ triangle }}-triangle {{ className }}" [style.width.px]="width">
63
- <div class="triangleShadow"></div>
64
- <div class="triangle"></div>
65
- <div class="twitter-body">
66
- <div class="twitter-swatch" *ngFor="let color of colors">
67
- <color-swatch
68
- [color]="color"
69
- [style]="swatchStyle"
70
- [focusStyle]="focus(color)"
71
- (onClick)="handleBlockChange($event)"
72
- (onHover)="onSwatchHover.emit($event)"
73
- ></color-swatch>
74
- </div>
75
- <div class="twitter-hash">
76
- <div>#</div>
77
- </div>
78
- <div class="twitter-input">
79
- <color-editable-input
80
- [style]="{ input: input }"
81
- [value]="hex.replace('#', '')"
82
- (onChange)="handleValueChange($event)"
83
- ></color-editable-input>
84
- </div>
85
- </div>
86
- </div>
87
- `,
88
- changeDetection: ChangeDetectionStrategy.OnPush,
89
- preserveWhitespaces: false,
90
- styles: [`
91
- .twitter-picker {
92
- background: rgb(255, 255, 255);
93
- border: 0px solid rgba(0, 0, 0, 0.25);
94
- box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;
95
- border-radius: 4px;
96
- position: relative;
97
- box-sizing: border-box;
98
- }
99
- .triangleShadow {
100
- width: 0px;
101
- height: 0px;
102
- border-style: solid;
103
- border-width: 0px 9px 10px;
104
- border-color: transparent transparent rgba(0, 0, 0, 0.1);
105
- position: absolute;
106
- }
107
- .triangle {
108
- width: 0px;
109
- height: 0px;
110
- border-style: solid;
111
- border-width: 0px 9px 10px;
112
- border-color: transparent transparent rgb(255, 255, 255);
113
- position: absolute;
114
- }
115
- .hide-triangle > .triangle {
116
- display: none;
117
- }
118
- .hide-triangle > .triangleShadow {
119
- display: none;
120
- }
121
- .top-left-triangle > .triangle {
122
- top: -10px;
123
- left: 12px;
124
- }
125
- .top-left-triangle > .triangleShadow {
126
- top: -11px;
127
- left: 12px;
128
- }
129
- .top-right-triangle > .triangle {
130
- top: -10px;
131
- right: 12px;
132
- }
133
- .top-right-triangle > .triangleShadow {
134
- top: -11px;
135
- right: 12px;
136
- }
137
- .twitter-body {
138
- padding: 15px 9px 9px 15px;
139
- }
140
- .twitter-swatch {
141
- width: 30px;
142
- height: 30px;
143
- display: inline-block;
144
- margin: 0 6px 0 0;
145
- }
146
- .twitter-hash {
147
- background: rgb(240, 240, 240);
148
- height: 30px;
149
- width: 30px;
150
- border-radius: 4px 0px 0px 4px;
151
- color: rgb(152, 161, 164);
152
- margin-left: -3px;
153
- display: inline-block;
154
-
155
- }
156
- .twitter-hash > div {
157
- position: absolute;
158
- align-items: center;
159
- justify-content: center;
160
- height: 30px;
161
- width: 30px;
162
- display: flex;
163
- }
164
- .twitter-input {
165
- position: relative;
166
- display: inline-block;
167
- margin-top: -6px;
168
- font-size: 10px;
169
- height: 27px;
170
- padding: 0;
171
- position: relative;
172
- top: 6px;
173
- vertical-align: top;
174
- width: 108px;
175
- margin-left: -4px;
176
- }
177
- `]
178
- },] }
179
- ];
180
- TwitterComponent.ctorParameters = () => [];
181
- TwitterComponent.propDecorators = {
182
- width: [{ type: Input }],
183
- colors: [{ type: Input }],
184
- triangle: [{ type: Input }]
185
- };
186
- export class ColorTwitterModule {
187
- }
188
- ColorTwitterModule.decorators = [
189
- { type: NgModule, args: [{
190
- declarations: [TwitterComponent],
191
- exports: [TwitterComponent],
192
- imports: [CommonModule, SwatchModule, EditableInputModule],
193
- },] }
194
- ];
195
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHdpdHRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvdHdpdHRlci90d2l0dGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXBGLE9BQU8sRUFBRSxTQUFTLEVBQUUsbUJBQW1CLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQTRIckYsTUFBTSxPQUFPLGdCQUFpQixTQUFRLFNBQVM7SUF3QzdDO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUF4Q1YsbUNBQW1DO1FBQzFCLFVBQUssR0FBb0IsR0FBRyxDQUFDO1FBQ3RDLCtCQUErQjtRQUN0QixXQUFNLEdBQUc7WUFDaEIsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztTQUNWLENBQUM7UUFDTyxhQUFRLEdBQXVELFVBQVUsQ0FBQztRQUVuRixnQkFBVyxHQUE0QjtZQUNyQyxLQUFLLEVBQUUsTUFBTTtZQUNiLE1BQU0sRUFBRSxNQUFNO1lBQ2QsWUFBWSxFQUFFLEtBQUs7WUFDbkIsUUFBUSxFQUFFLEdBQUc7U0FDZCxDQUFDO1FBQ0YsVUFBSyxHQUE0QjtZQUMvQixZQUFZLEVBQUUsS0FBSztZQUNuQixzQkFBc0IsRUFBRSxHQUFHO1lBQzNCLG1CQUFtQixFQUFFLEdBQUc7WUFDeEIsTUFBTSxFQUFFLG1CQUFtQjtZQUMzQixTQUFTLEVBQUUsWUFBWTtZQUN2QixPQUFPLEVBQUUsUUFBUTtZQUNqQixRQUFRLEVBQUUsTUFBTTtZQUNoQixNQUFNLEVBQUUsTUFBTTtZQUNkLE9BQU8sRUFBRSxHQUFHO1lBQ1osV0FBVyxFQUFFLEtBQUs7WUFDbEIsS0FBSyxFQUFFLE1BQU07WUFDYixLQUFLLEVBQUUsU0FBUztTQUNqQixDQUFDO1FBQ0YsaUJBQVksR0FBRyxJQUFJLENBQUM7SUFJcEIsQ0FBQztJQUVELEtBQUssQ0FBQyxLQUFhO1FBQ2pCLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxLQUFLLEVBQUUsRUFBRSxDQUFDO0lBQzNDLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQU87UUFDcEMsSUFBSSxVQUFVLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDbkIsa0JBQWtCO1lBQ2xCLElBQUksQ0FBQyxZQUFZLENBQUMsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxFQUFFLE1BQU0sQ0FBQyxDQUFDO1NBQ25EO0lBQ0gsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBTztRQUNyQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsRUFBRSxHQUFHLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDaEQsQ0FBQzs7O1lBbkxGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsZUFBZTtnQkFDekIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTBCVDtnQkEyRkQsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07Z0JBQy9DLG1CQUFtQixFQUFFLEtBQUs7eUJBMUZ4Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBdUZEO2FBSUY7Ozs7b0JBR0UsS0FBSztxQkFFTCxLQUFLO3VCQVlMLEtBQUs7O0FBaURSLE1BQU0sT0FBTyxrQkFBa0I7OztZQUw5QixRQUFRLFNBQUM7Z0JBQ1IsWUFBWSxFQUFFLENBQUMsZ0JBQWdCLENBQUM7Z0JBQ2hDLE9BQU8sRUFBRSxDQUFDLGdCQUFnQixDQUFDO2dCQUMzQixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsWUFBWSxFQUFFLG1CQUFtQixDQUFDO2FBQzNEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0LCBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBDb2xvcldyYXAsIEVkaXRhYmxlSW5wdXRNb2R1bGUsIFN3YXRjaE1vZHVsZSwgaXNWYWxpZEhleCB9IGZyb20gJ25neC1jb2xvcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLXR3aXR0ZXInLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwidHdpdHRlci1waWNrZXIge3sgdHJpYW5nbGUgfX0tdHJpYW5nbGUge3sgY2xhc3NOYW1lIH19XCIgW3N0eWxlLndpZHRoLnB4XT1cIndpZHRoXCI+XG4gICAgPGRpdiBjbGFzcz1cInRyaWFuZ2xlU2hhZG93XCI+PC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInRyaWFuZ2xlXCI+PC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInR3aXR0ZXItYm9keVwiPlxuICAgICAgPGRpdiBjbGFzcz1cInR3aXR0ZXItc3dhdGNoXCIgKm5nRm9yPVwibGV0IGNvbG9yIG9mIGNvbG9yc1wiPlxuICAgICAgICA8Y29sb3Itc3dhdGNoXG4gICAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgICBbc3R5bGVdPVwic3dhdGNoU3R5bGVcIlxuICAgICAgICAgIFtmb2N1c1N0eWxlXT1cImZvY3VzKGNvbG9yKVwiXG4gICAgICAgICAgKG9uQ2xpY2spPVwiaGFuZGxlQmxvY2tDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgKG9uSG92ZXIpPVwib25Td2F0Y2hIb3Zlci5lbWl0KCRldmVudClcIlxuICAgICAgICA+PC9jb2xvci1zd2F0Y2g+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJ0d2l0dGVyLWhhc2hcIj5cbiAgICAgICAgPGRpdj4jPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJ0d2l0dGVyLWlucHV0XCI+XG4gICAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgICAgIFtzdHlsZV09XCJ7IGlucHV0OiBpbnB1dCB9XCJcbiAgICAgICAgICBbdmFsdWVdPVwiaGV4LnJlcGxhY2UoJyMnLCAnJylcIlxuICAgICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAudHdpdHRlci1waWNrZXIge1xuICAgICAgYmFja2dyb3VuZDogcmdiKDI1NSwgMjU1LCAyNTUpO1xuICAgICAgYm9yZGVyOiAwcHggc29saWQgcmdiYSgwLCAwLCAwLCAwLjI1KTtcbiAgICAgIGJveC1zaGFkb3c6IHJnYmEoMCwgMCwgMCwgMC4yNSkgMHB4IDFweCA0cHg7XG4gICAgICBib3JkZXItcmFkaXVzOiA0cHg7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIH1cbiAgICAudHJpYW5nbGVTaGFkb3cge1xuICAgICAgd2lkdGg6IDBweDtcbiAgICAgIGhlaWdodDogMHB4O1xuICAgICAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgICAgIGJvcmRlci13aWR0aDogMHB4IDlweCAxMHB4O1xuICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudCB0cmFuc3BhcmVudCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgfVxuICAgIC50cmlhbmdsZSB7XG4gICAgICB3aWR0aDogMHB4O1xuICAgICAgaGVpZ2h0OiAwcHg7XG4gICAgICBib3JkZXItc3R5bGU6IHNvbGlkO1xuICAgICAgYm9yZGVyLXdpZHRoOiAwcHggOXB4IDEwcHg7XG4gICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50IHJnYigyNTUsIDI1NSwgMjU1KTtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB9XG4gICAgLmhpZGUtdHJpYW5nbGUgPiAudHJpYW5nbGUge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gICAgLmhpZGUtdHJpYW5nbGUgPiAudHJpYW5nbGVTaGFkb3cge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gICAgLnRvcC1sZWZ0LXRyaWFuZ2xlID4gLnRyaWFuZ2xlIHtcbiAgICAgIHRvcDogLTEwcHg7XG4gICAgICBsZWZ0OiAxMnB4O1xuICAgIH1cbiAgICAudG9wLWxlZnQtdHJpYW5nbGUgPiAudHJpYW5nbGVTaGFkb3cge1xuICAgICAgdG9wOiAtMTFweDtcbiAgICAgIGxlZnQ6IDEycHg7XG4gICAgfVxuICAgIC50b3AtcmlnaHQtdHJpYW5nbGUgPiAudHJpYW5nbGUge1xuICAgICAgdG9wOiAtMTBweDtcbiAgICAgIHJpZ2h0OiAxMnB4O1xuICAgIH1cbiAgICAudG9wLXJpZ2h0LXRyaWFuZ2xlID4gLnRyaWFuZ2xlU2hhZG93IHtcbiAgICAgIHRvcDogLTExcHg7XG4gICAgICByaWdodDogMTJweDtcbiAgICB9XG4gICAgLnR3aXR0ZXItYm9keSB7XG4gICAgICBwYWRkaW5nOiAxNXB4IDlweCA5cHggMTVweDtcbiAgICB9XG4gICAgLnR3aXR0ZXItc3dhdGNoIHtcbiAgICAgIHdpZHRoOiAzMHB4O1xuICAgICAgaGVpZ2h0OiAzMHB4O1xuICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgbWFyZ2luOiAwIDZweCAwIDA7XG4gICAgfVxuICAgIC50d2l0dGVyLWhhc2gge1xuICAgICAgYmFja2dyb3VuZDogcmdiKDI0MCwgMjQwLCAyNDApO1xuICAgICAgaGVpZ2h0OiAzMHB4O1xuICAgICAgd2lkdGg6IDMwcHg7XG4gICAgICBib3JkZXItcmFkaXVzOiA0cHggMHB4IDBweCA0cHg7XG4gICAgICBjb2xvcjogcmdiKDE1MiwgMTYxLCAxNjQpO1xuICAgICAgbWFyZ2luLWxlZnQ6IC0zcHg7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5cbiAgICB9XG4gICAgLnR3aXR0ZXItaGFzaCA+IGRpdiB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICBoZWlnaHQ6IDMwcHg7XG4gICAgICB3aWR0aDogMzBweDtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuICAgIC50d2l0dGVyLWlucHV0IHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgIG1hcmdpbi10b3A6IC02cHg7XG4gICAgICBmb250LXNpemU6IDEwcHg7XG4gICAgICBoZWlnaHQ6IDI3cHg7XG4gICAgICBwYWRkaW5nOiAwO1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgdG9wOiA2cHg7XG4gICAgICB2ZXJ0aWNhbC1hbGlnbjogdG9wO1xuICAgICAgd2lkdGg6IDEwOHB4O1xuICAgICAgbWFyZ2luLWxlZnQ6IC00cHg7XG4gICAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIFR3aXR0ZXJDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICAvKiogUGl4ZWwgdmFsdWUgZm9yIHBpY2tlciB3aWR0aCAqL1xuICBASW5wdXQoKSB3aWR0aDogc3RyaW5nIHwgbnVtYmVyID0gMjc2O1xuICAvKiogQ29sb3Igc3F1YXJlcyB0byBkaXNwbGF5ICovXG4gIEBJbnB1dCgpIGNvbG9ycyA9IFtcbiAgICAnI0ZGNjkwMCcsXG4gICAgJyNGQ0I5MDAnLFxuICAgICcjN0JEQ0I1JyxcbiAgICAnIzAwRDA4NCcsXG4gICAgJyM4RUQxRkMnLFxuICAgICcjMDY5M0UzJyxcbiAgICAnI0FCQjhDMycsXG4gICAgJyNFQjE0NEMnLFxuICAgICcjRjc4REE3JyxcbiAgICAnIzk5MDBFRicsXG4gIF07XG4gIEBJbnB1dCgpIHRyaWFuZ2xlOiAnaGlkZScgfCAndG9wLWxlZnQnIHwgJ3RvcC1yaWdodCcgfCAnYm90dG9tLXJpZ2h0JyA9ICd0b3AtbGVmdCc7XG5cbiAgc3dhdGNoU3R5bGU6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIHdpZHRoOiAnMzBweCcsXG4gICAgaGVpZ2h0OiAnMzBweCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnNHB4JyxcbiAgICBmb250U2l6ZTogJzAnLFxuICB9O1xuICBpbnB1dDoge1trZXk6IHN0cmluZ106IHN0cmluZ30gPSB7XG4gICAgYm9yZGVyUmFkaXVzOiAnNHB4JyxcbiAgICBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiAnMCcsXG4gICAgYm9yZGVyVG9wTGVmdFJhZGl1czogJzAnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAjZTZlY2YwJyxcbiAgICBib3hTaXppbmc6ICdib3JkZXItYm94JyxcbiAgICBkaXNwbGF5OiAnaW5saW5lJyxcbiAgICBmb250U2l6ZTogJzE0cHgnLFxuICAgIGhlaWdodDogJzMwcHgnLFxuICAgIHBhZGRpbmc6ICcwJyxcbiAgICBwYWRkaW5nTGVmdDogJzZweCcsXG4gICAgd2lkdGg6ICcxMDAlJyxcbiAgICBjb2xvcjogJyM2NTc3ODYnLFxuICB9O1xuICBkaXNhYmxlQWxwaGEgPSB0cnVlO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBmb2N1cyhjb2xvcjogc3RyaW5nKSB7XG4gICAgcmV0dXJuIHsgYm94U2hhZG93OiBgMCAwIDRweCAke2NvbG9yfWAgfTtcbiAgfVxuXG4gIGhhbmRsZUJsb2NrQ2hhbmdlKHsgaGV4LCAkZXZlbnQgfTogYW55KSB7XG4gICAgaWYgKGlzVmFsaWRIZXgoaGV4KSkge1xuICAgICAgLy8gdGhpcy5oZXggPSBoZXg7XG4gICAgICB0aGlzLmhhbmRsZUNoYW5nZSh7IGhleCwgc291cmNlOiAnaGV4JyB9LCAkZXZlbnQpO1xuICAgIH1cbiAgfVxuXG4gIGhhbmRsZVZhbHVlQ2hhbmdlKHsgZGF0YSwgJGV2ZW50IH06IGFueSkge1xuICAgIHRoaXMuaGFuZGxlQmxvY2tDaGFuZ2UoeyBoZXg6IGRhdGEsICRldmVudCB9KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtUd2l0dGVyQ29tcG9uZW50XSxcbiAgZXhwb3J0czogW1R3aXR0ZXJDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBTd2F0Y2hNb2R1bGUsIEVkaXRhYmxlSW5wdXRNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBDb2xvclR3aXR0ZXJNb2R1bGUge31cbiJdfQ==
@@ -1,202 +0,0 @@
1
- import { CommonModule } from '@angular/common';
2
- import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
3
- import { ColorWrap, isValidHex, SwatchModule, EditableInputModule } from 'ngx-color';
4
-
5
- class TwitterComponent extends ColorWrap {
6
- constructor() {
7
- super();
8
- /** Pixel value for picker width */
9
- this.width = 276;
10
- /** Color squares to display */
11
- this.colors = [
12
- '#FF6900',
13
- '#FCB900',
14
- '#7BDCB5',
15
- '#00D084',
16
- '#8ED1FC',
17
- '#0693E3',
18
- '#ABB8C3',
19
- '#EB144C',
20
- '#F78DA7',
21
- '#9900EF',
22
- ];
23
- this.triangle = 'top-left';
24
- this.swatchStyle = {
25
- width: '30px',
26
- height: '30px',
27
- borderRadius: '4px',
28
- fontSize: '0',
29
- };
30
- this.input = {
31
- borderRadius: '4px',
32
- borderBottomLeftRadius: '0',
33
- borderTopLeftRadius: '0',
34
- border: '1px solid #e6ecf0',
35
- boxSizing: 'border-box',
36
- display: 'inline',
37
- fontSize: '14px',
38
- height: '30px',
39
- padding: '0',
40
- paddingLeft: '6px',
41
- width: '100%',
42
- color: '#657786',
43
- };
44
- this.disableAlpha = true;
45
- }
46
- focus(color) {
47
- return { boxShadow: `0 0 4px ${color}` };
48
- }
49
- handleBlockChange({ hex, $event }) {
50
- if (isValidHex(hex)) {
51
- // this.hex = hex;
52
- this.handleChange({ hex, source: 'hex' }, $event);
53
- }
54
- }
55
- handleValueChange({ data, $event }) {
56
- this.handleBlockChange({ hex: data, $event });
57
- }
58
- }
59
- TwitterComponent.decorators = [
60
- { type: Component, args: [{
61
- selector: 'color-twitter',
62
- template: `
63
- <div class="twitter-picker {{ triangle }}-triangle {{ className }}" [style.width.px]="width">
64
- <div class="triangleShadow"></div>
65
- <div class="triangle"></div>
66
- <div class="twitter-body">
67
- <div class="twitter-swatch" *ngFor="let color of colors">
68
- <color-swatch
69
- [color]="color"
70
- [style]="swatchStyle"
71
- [focusStyle]="focus(color)"
72
- (onClick)="handleBlockChange($event)"
73
- (onHover)="onSwatchHover.emit($event)"
74
- ></color-swatch>
75
- </div>
76
- <div class="twitter-hash">
77
- <div>#</div>
78
- </div>
79
- <div class="twitter-input">
80
- <color-editable-input
81
- [style]="{ input: input }"
82
- [value]="hex.replace('#', '')"
83
- (onChange)="handleValueChange($event)"
84
- ></color-editable-input>
85
- </div>
86
- </div>
87
- </div>
88
- `,
89
- changeDetection: ChangeDetectionStrategy.OnPush,
90
- preserveWhitespaces: false,
91
- styles: [`
92
- .twitter-picker {
93
- background: rgb(255, 255, 255);
94
- border: 0px solid rgba(0, 0, 0, 0.25);
95
- box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;
96
- border-radius: 4px;
97
- position: relative;
98
- box-sizing: border-box;
99
- }
100
- .triangleShadow {
101
- width: 0px;
102
- height: 0px;
103
- border-style: solid;
104
- border-width: 0px 9px 10px;
105
- border-color: transparent transparent rgba(0, 0, 0, 0.1);
106
- position: absolute;
107
- }
108
- .triangle {
109
- width: 0px;
110
- height: 0px;
111
- border-style: solid;
112
- border-width: 0px 9px 10px;
113
- border-color: transparent transparent rgb(255, 255, 255);
114
- position: absolute;
115
- }
116
- .hide-triangle > .triangle {
117
- display: none;
118
- }
119
- .hide-triangle > .triangleShadow {
120
- display: none;
121
- }
122
- .top-left-triangle > .triangle {
123
- top: -10px;
124
- left: 12px;
125
- }
126
- .top-left-triangle > .triangleShadow {
127
- top: -11px;
128
- left: 12px;
129
- }
130
- .top-right-triangle > .triangle {
131
- top: -10px;
132
- right: 12px;
133
- }
134
- .top-right-triangle > .triangleShadow {
135
- top: -11px;
136
- right: 12px;
137
- }
138
- .twitter-body {
139
- padding: 15px 9px 9px 15px;
140
- }
141
- .twitter-swatch {
142
- width: 30px;
143
- height: 30px;
144
- display: inline-block;
145
- margin: 0 6px 0 0;
146
- }
147
- .twitter-hash {
148
- background: rgb(240, 240, 240);
149
- height: 30px;
150
- width: 30px;
151
- border-radius: 4px 0px 0px 4px;
152
- color: rgb(152, 161, 164);
153
- margin-left: -3px;
154
- display: inline-block;
155
-
156
- }
157
- .twitter-hash > div {
158
- position: absolute;
159
- align-items: center;
160
- justify-content: center;
161
- height: 30px;
162
- width: 30px;
163
- display: flex;
164
- }
165
- .twitter-input {
166
- position: relative;
167
- display: inline-block;
168
- margin-top: -6px;
169
- font-size: 10px;
170
- height: 27px;
171
- padding: 0;
172
- position: relative;
173
- top: 6px;
174
- vertical-align: top;
175
- width: 108px;
176
- margin-left: -4px;
177
- }
178
- `]
179
- },] }
180
- ];
181
- TwitterComponent.ctorParameters = () => [];
182
- TwitterComponent.propDecorators = {
183
- width: [{ type: Input }],
184
- colors: [{ type: Input }],
185
- triangle: [{ type: Input }]
186
- };
187
- class ColorTwitterModule {
188
- }
189
- ColorTwitterModule.decorators = [
190
- { type: NgModule, args: [{
191
- declarations: [TwitterComponent],
192
- exports: [TwitterComponent],
193
- imports: [CommonModule, SwatchModule, EditableInputModule],
194
- },] }
195
- ];
196
-
197
- /**
198
- * Generated bundle index. Do not edit.
199
- */
200
-
201
- export { ColorTwitterModule, TwitterComponent };
202
- //# sourceMappingURL=ngx-color-twitter.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ngx-color-twitter.js","sources":["../../../../src/lib/components/twitter/twitter.component.ts","../../../../src/lib/components/twitter/ngx-color-twitter.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, EditableInputModule, SwatchModule, isValidHex } from 'ngx-color';\n\n@Component({\n selector: 'color-twitter',\n template: `\n <div class=\"twitter-picker {{ triangle }}-triangle {{ className }}\" [style.width.px]=\"width\">\n <div class=\"triangleShadow\"></div>\n <div class=\"triangle\"></div>\n <div class=\"twitter-body\">\n <div class=\"twitter-swatch\" *ngFor=\"let color of colors\">\n <color-swatch\n [color]=\"color\"\n [style]=\"swatchStyle\"\n [focusStyle]=\"focus(color)\"\n (onClick)=\"handleBlockChange($event)\"\n (onHover)=\"onSwatchHover.emit($event)\"\n ></color-swatch>\n </div>\n <div class=\"twitter-hash\">\n <div>#</div>\n </div>\n <div class=\"twitter-input\">\n <color-editable-input\n [style]=\"{ input: input }\"\n [value]=\"hex.replace('#', '')\"\n (onChange)=\"handleValueChange($event)\"\n ></color-editable-input>\n </div>\n </div>\n </div>\n `,\n styles: [\n `\n .twitter-picker {\n background: rgb(255, 255, 255);\n border: 0px solid rgba(0, 0, 0, 0.25);\n box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;\n border-radius: 4px;\n position: relative;\n box-sizing: border-box;\n }\n .triangleShadow {\n width: 0px;\n height: 0px;\n border-style: solid;\n border-width: 0px 9px 10px;\n border-color: transparent transparent rgba(0, 0, 0, 0.1);\n position: absolute;\n }\n .triangle {\n width: 0px;\n height: 0px;\n border-style: solid;\n border-width: 0px 9px 10px;\n border-color: transparent transparent rgb(255, 255, 255);\n position: absolute;\n }\n .hide-triangle > .triangle {\n display: none;\n }\n .hide-triangle > .triangleShadow {\n display: none;\n }\n .top-left-triangle > .triangle {\n top: -10px;\n left: 12px;\n }\n .top-left-triangle > .triangleShadow {\n top: -11px;\n left: 12px;\n }\n .top-right-triangle > .triangle {\n top: -10px;\n right: 12px;\n }\n .top-right-triangle > .triangleShadow {\n top: -11px;\n right: 12px;\n }\n .twitter-body {\n padding: 15px 9px 9px 15px;\n }\n .twitter-swatch {\n width: 30px;\n height: 30px;\n display: inline-block;\n margin: 0 6px 0 0;\n }\n .twitter-hash {\n background: rgb(240, 240, 240);\n height: 30px;\n width: 30px;\n border-radius: 4px 0px 0px 4px;\n color: rgb(152, 161, 164);\n margin-left: -3px;\n display: inline-block;\n\n }\n .twitter-hash > div {\n position: absolute;\n align-items: center;\n justify-content: center;\n height: 30px;\n width: 30px;\n display: flex;\n }\n .twitter-input {\n position: relative;\n display: inline-block;\n margin-top: -6px;\n font-size: 10px;\n height: 27px;\n padding: 0;\n position: relative;\n top: 6px;\n vertical-align: top;\n width: 108px;\n margin-left: -4px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class TwitterComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 276;\n /** Color squares to display */\n @Input() colors = [\n '#FF6900',\n '#FCB900',\n '#7BDCB5',\n '#00D084',\n '#8ED1FC',\n '#0693E3',\n '#ABB8C3',\n '#EB144C',\n '#F78DA7',\n '#9900EF',\n ];\n @Input() triangle: 'hide' | 'top-left' | 'top-right' | 'bottom-right' = 'top-left';\n\n swatchStyle: {[key: string]: string} = {\n width: '30px',\n height: '30px',\n borderRadius: '4px',\n fontSize: '0',\n };\n input: {[key: string]: string} = {\n borderRadius: '4px',\n borderBottomLeftRadius: '0',\n borderTopLeftRadius: '0',\n border: '1px solid #e6ecf0',\n boxSizing: 'border-box',\n display: 'inline',\n fontSize: '14px',\n height: '30px',\n padding: '0',\n paddingLeft: '6px',\n width: '100%',\n color: '#657786',\n };\n disableAlpha = true;\n\n constructor() {\n super();\n }\n\n focus(color: string) {\n return { boxShadow: `0 0 4px ${color}` };\n }\n\n handleBlockChange({ hex, $event }: any) {\n if (isValidHex(hex)) {\n // this.hex = hex;\n this.handleChange({ hex, source: 'hex' }, $event);\n }\n }\n\n handleValueChange({ data, $event }: any) {\n this.handleBlockChange({ hex: data, $event });\n }\n}\n\n@NgModule({\n declarations: [TwitterComponent],\n exports: [TwitterComponent],\n imports: [CommonModule, SwatchModule, EditableInputModule],\n})\nexport class ColorTwitterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './twitter.component';\n"],"names":[],"mappings":";;;;MA+Ha,gBAAiB,SAAQ,SAAS;IAwC7C;QACE,KAAK,EAAE,CAAC;;QAvCD,UAAK,GAAoB,GAAG,CAAC;;QAE7B,WAAM,GAAG;YAChB,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;SACV,CAAC;QACO,aAAQ,GAAuD,UAAU,CAAC;QAEnF,gBAAW,GAA4B;YACrC,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,GAAG;SACd,CAAC;QACF,UAAK,GAA4B;YAC/B,YAAY,EAAE,KAAK;YACnB,sBAAsB,EAAE,GAAG;YAC3B,mBAAmB,EAAE,GAAG;YACxB,MAAM,EAAE,mBAAmB;YAC3B,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,QAAQ;YACjB,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,GAAG;YACZ,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,SAAS;SACjB,CAAC;QACF,iBAAY,GAAG,IAAI,CAAC;KAInB;IAED,KAAK,CAAC,KAAa;QACjB,OAAO,EAAE,SAAS,EAAE,WAAW,KAAK,EAAE,EAAE,CAAC;KAC1C;IAED,iBAAiB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAO;QACpC,IAAI,UAAU,CAAC,GAAG,CAAC,EAAE;;YAEnB,IAAI,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,CAAC,CAAC;SACnD;KACF;IAED,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAO;QACrC,IAAI,CAAC,iBAAiB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;KAC/C;;;YAnLF,SAAS,SAAC;gBACT,QAAQ,EAAE,eAAe;gBACzB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BT;gBA2FD,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,mBAAmB,EAAE,KAAK;yBA1FxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFD;aAIF;;;;oBAGE,KAAK;qBAEL,KAAK;uBAYL,KAAK;;MAiDK,kBAAkB;;;YAL9B,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,gBAAgB,CAAC;gBAChC,OAAO,EAAE,CAAC,gBAAgB,CAAC;gBAC3B,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,mBAAmB,CAAC;aAC3D;;;AC/LD;;;;;;"}
@@ -1 +0,0 @@
1
- {"__symbolic":"module","version":4,"metadata":{"TwitterComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":127,"character":38},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"color-twitter","template":"\n <div class=\"twitter-picker {{ triangle }}-triangle {{ className }}\" [style.width.px]=\"width\">\n <div class=\"triangleShadow\"></div>\n <div class=\"triangle\"></div>\n <div class=\"twitter-body\">\n <div class=\"twitter-swatch\" *ngFor=\"let color of colors\">\n <color-swatch\n [color]=\"color\"\n [style]=\"swatchStyle\"\n [focusStyle]=\"focus(color)\"\n (onClick)=\"handleBlockChange($event)\"\n (onHover)=\"onSwatchHover.emit($event)\"\n ></color-swatch>\n </div>\n <div class=\"twitter-hash\">\n <div>#</div>\n </div>\n <div class=\"twitter-input\">\n <color-editable-input\n [style]=\"{ input: input }\"\n [value]=\"hex.replace('#', '')\"\n (onChange)=\"handleValueChange($event)\"\n ></color-editable-input>\n </div>\n </div>\n </div>\n ","styles":["\n .twitter-picker {\n background: rgb(255, 255, 255);\n border: 0px solid rgba(0, 0, 0, 0.25);\n box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;\n border-radius: 4px;\n position: relative;\n box-sizing: border-box;\n }\n .triangleShadow {\n width: 0px;\n height: 0px;\n border-style: solid;\n border-width: 0px 9px 10px;\n border-color: transparent transparent rgba(0, 0, 0, 0.1);\n position: absolute;\n }\n .triangle {\n width: 0px;\n height: 0px;\n border-style: solid;\n border-width: 0px 9px 10px;\n border-color: transparent transparent rgb(255, 255, 255);\n position: absolute;\n }\n .hide-triangle > .triangle {\n display: none;\n }\n .hide-triangle > .triangleShadow {\n display: none;\n }\n .top-left-triangle > .triangle {\n top: -10px;\n left: 12px;\n }\n .top-left-triangle > .triangleShadow {\n top: -11px;\n left: 12px;\n }\n .top-right-triangle > .triangle {\n top: -10px;\n right: 12px;\n }\n .top-right-triangle > .triangleShadow {\n top: -11px;\n right: 12px;\n }\n .twitter-body {\n padding: 15px 9px 9px 15px;\n }\n .twitter-swatch {\n width: 30px;\n height: 30px;\n display: inline-block;\n margin: 0 6px 0 0;\n }\n .twitter-hash {\n background: rgb(240, 240, 240);\n height: 30px;\n width: 30px;\n border-radius: 4px 0px 0px 4px;\n color: rgb(152, 161, 164);\n margin-left: -3px;\n display: inline-block;\n\n }\n .twitter-hash > div {\n position: absolute;\n align-items: center;\n justify-content: center;\n height: 30px;\n width: 30px;\n display: flex;\n }\n .twitter-input {\n position: relative;\n display: inline-block;\n margin-top: -6px;\n font-size: 10px;\n height: 27px;\n padding: 0;\n position: relative;\n top: 6px;\n vertical-align: top;\n width: 108px;\n margin-left: -4px;\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":124,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3}}]}],"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":3}}]}],"triangle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"focus":[{"__symbolic":"method"}],"handleBlockChange":[{"__symbolic":"method"}],"handleValueChange":[{"__symbolic":"method"}]}},"ColorTwitterModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":187,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TwitterComponent"}],"exports":[{"__symbolic":"reference","name":"TwitterComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":190,"character":12},{"__symbolic":"reference","module":"ngx-color","name":"SwatchModule","line":190,"character":26},{"__symbolic":"reference","module":"ngx-color","name":"EditableInputModule","line":190,"character":40}]}]}],"members":{}}},"origins":{"TwitterComponent":"./twitter.component","ColorTwitterModule":"./twitter.component"},"importAs":"ngx-color/twitter"}