ngx-color 8.0.2 → 9.0.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 (220) hide show
  1. package/README.md +2 -3
  2. package/alpha/alpha-picker.component.d.ts +1 -1
  3. package/alpha.component.d.ts +1 -1
  4. package/block/block-swatches.component.d.ts +1 -1
  5. package/block/block.component.d.ts +1 -1
  6. package/checkboard.component.d.ts +1 -1
  7. package/chrome/chrome-fields.component.d.ts +1 -1
  8. package/chrome/chrome.component.d.ts +1 -1
  9. package/circle/circle-swatch.component.d.ts +1 -1
  10. package/circle/circle.component.d.ts +1 -1
  11. package/color-wrap.component.d.ts +1 -1
  12. package/compact/compact-color.component.d.ts +1 -1
  13. package/compact/compact-fields.component.d.ts +1 -1
  14. package/compact/compact.component.d.ts +1 -1
  15. package/coordinates.directive.d.ts +1 -1
  16. package/editable-input.component.d.ts +1 -1
  17. package/esm2022/alpha/alpha-picker.component.mjs +102 -0
  18. package/esm2022/alpha.component.mjs +146 -0
  19. package/esm2022/block/block-swatches.component.mjs +63 -0
  20. package/esm2022/block/block.component.mjs +160 -0
  21. package/esm2022/checkboard.component.mjs +53 -0
  22. package/esm2022/chrome/chrome-fields.component.mjs +317 -0
  23. package/esm2022/chrome/chrome.component.mjs +187 -0
  24. package/esm2022/circle/circle-swatch.component.mjs +69 -0
  25. package/esm2022/circle/circle.component.mjs +136 -0
  26. package/esm2022/color-wrap.component.mjs +173 -0
  27. package/esm2022/compact/compact-color.component.mjs +71 -0
  28. package/esm2022/compact/compact-fields.component.mjs +165 -0
  29. package/esm2022/compact/compact.component.mjs +156 -0
  30. package/esm2022/coordinates.directive.mjs +108 -0
  31. package/esm2022/editable-input.component.mjs +212 -0
  32. package/esm2022/github/github-swatch.component.mjs +53 -0
  33. package/esm2022/github/github.component.mjs +114 -0
  34. package/esm2022/hue/hue-picker.component.mjs +102 -0
  35. package/esm2022/hue.component.mjs +128 -0
  36. package/esm2022/material/material.component.mjs +188 -0
  37. package/esm2022/photoshop/photoshop-button.component.mjs +33 -0
  38. package/esm2022/photoshop/photoshop-fields.component.mjs +214 -0
  39. package/esm2022/photoshop/photoshop-previews.component.mjs +40 -0
  40. package/esm2022/photoshop/photoshop.component.mjs +187 -0
  41. package/esm2022/raised.component.mjs +50 -0
  42. package/esm2022/saturation.component.mjs +100 -0
  43. package/esm2022/shade/shade-picker.component.mjs +94 -0
  44. package/esm2022/shade.component.mjs +133 -0
  45. package/esm2022/sketch/sketch-fields.component.mjs +211 -0
  46. package/esm2022/sketch/sketch-preset-colors.component.mjs +68 -0
  47. package/esm2022/sketch/sketch.component.mjs +215 -0
  48. package/esm2022/slider/slider-swatch.component.mjs +55 -0
  49. package/esm2022/slider/slider-swatches.component.mjs +119 -0
  50. package/esm2022/slider/slider.component.mjs +104 -0
  51. package/esm2022/swatch.component.mjs +112 -0
  52. package/esm2022/swatches/swatches-color.component.mjs +105 -0
  53. package/esm2022/swatches/swatches-group.component.mjs +50 -0
  54. package/esm2022/swatches/swatches.component.mjs +244 -0
  55. package/esm2022/twitter/twitter.component.mjs +161 -0
  56. package/{fesm2020 → fesm2022}/ngx-color-alpha.mjs +30 -30
  57. package/fesm2022/ngx-color-alpha.mjs.map +1 -0
  58. package/{fesm2020 → fesm2022}/ngx-color-block.mjs +65 -66
  59. package/fesm2022/ngx-color-block.mjs.map +1 -0
  60. package/{fesm2015 → fesm2022}/ngx-color-chrome.mjs +77 -74
  61. package/{fesm2020 → fesm2022}/ngx-color-chrome.mjs.map +1 -1
  62. package/{fesm2015 → fesm2022}/ngx-color-circle.mjs +61 -62
  63. package/fesm2022/ngx-color-circle.mjs.map +1 -0
  64. package/{fesm2015 → fesm2022}/ngx-color-compact.mjs +136 -136
  65. package/{fesm2015 → fesm2022}/ngx-color-compact.mjs.map +1 -1
  66. package/{fesm2015 → fesm2022}/ngx-color-github.mjs +53 -54
  67. package/{fesm2020 → fesm2022}/ngx-color-github.mjs.map +1 -1
  68. package/{fesm2020 → fesm2022}/ngx-color-hue.mjs +32 -32
  69. package/fesm2022/ngx-color-hue.mjs.map +1 -0
  70. package/{fesm2015 → fesm2022}/ngx-color-material.mjs +59 -59
  71. package/{fesm2015 → fesm2022}/ngx-color-material.mjs.map +1 -1
  72. package/{fesm2020 → fesm2022}/ngx-color-photoshop.mjs +111 -113
  73. package/{fesm2015 → fesm2022}/ngx-color-photoshop.mjs.map +1 -1
  74. package/{fesm2015 → fesm2022}/ngx-color-shade.mjs +29 -29
  75. package/fesm2022/ngx-color-shade.mjs.map +1 -0
  76. package/{fesm2015 → fesm2022}/ngx-color-sketch.mjs +96 -95
  77. package/fesm2022/ngx-color-sketch.mjs.map +1 -0
  78. package/{fesm2020 → fesm2022}/ngx-color-slider.mjs +46 -45
  79. package/{fesm2015 → fesm2022}/ngx-color-slider.mjs.map +1 -1
  80. package/{fesm2015 → fesm2022}/ngx-color-swatches.mjs +182 -182
  81. package/fesm2022/ngx-color-swatches.mjs.map +1 -0
  82. package/{fesm2015 → fesm2022}/ngx-color-twitter.mjs +55 -55
  83. package/{fesm2015 → fesm2022}/ngx-color-twitter.mjs.map +1 -1
  84. package/{fesm2020 → fesm2022}/ngx-color.mjs +200 -160
  85. package/fesm2022/ngx-color.mjs.map +1 -0
  86. package/github/github-swatch.component.d.ts +1 -1
  87. package/github/github.component.d.ts +1 -1
  88. package/hue/hue-picker.component.d.ts +1 -1
  89. package/hue.component.d.ts +1 -1
  90. package/material/material.component.d.ts +1 -1
  91. package/package.json +59 -84
  92. package/photoshop/photoshop-button.component.d.ts +1 -1
  93. package/photoshop/photoshop-fields.component.d.ts +1 -1
  94. package/photoshop/photoshop-previews.component.d.ts +1 -1
  95. package/photoshop/photoshop.component.d.ts +1 -1
  96. package/raised.component.d.ts +2 -2
  97. package/saturation.component.d.ts +1 -1
  98. package/shade/shade-picker.component.d.ts +1 -1
  99. package/shade.component.d.ts +1 -1
  100. package/sketch/sketch-fields.component.d.ts +1 -1
  101. package/sketch/sketch-preset-colors.component.d.ts +1 -1
  102. package/sketch/sketch.component.d.ts +1 -1
  103. package/slider/slider-swatch.component.d.ts +1 -1
  104. package/slider/slider-swatches.component.d.ts +1 -1
  105. package/slider/slider.component.d.ts +1 -1
  106. package/swatch.component.d.ts +1 -1
  107. package/swatches/swatches-color.component.d.ts +1 -1
  108. package/swatches/swatches-group.component.d.ts +1 -1
  109. package/swatches/swatches.component.d.ts +1 -1
  110. package/twitter/twitter.component.d.ts +1 -1
  111. package/esm2020/alpha/alpha-picker.component.mjs +0 -100
  112. package/esm2020/alpha.component.mjs +0 -138
  113. package/esm2020/block/block-swatches.component.mjs +0 -63
  114. package/esm2020/block/block.component.mjs +0 -158
  115. package/esm2020/checkboard.component.mjs +0 -50
  116. package/esm2020/chrome/chrome-fields.component.mjs +0 -314
  117. package/esm2020/chrome/chrome.component.mjs +0 -184
  118. package/esm2020/circle/circle-swatch.component.mjs +0 -69
  119. package/esm2020/circle/circle.component.mjs +0 -134
  120. package/esm2020/color-wrap.component.mjs +0 -163
  121. package/esm2020/compact/compact-color.component.mjs +0 -70
  122. package/esm2020/compact/compact-fields.component.mjs +0 -164
  123. package/esm2020/compact/compact.component.mjs +0 -154
  124. package/esm2020/coordinates.directive.mjs +0 -104
  125. package/esm2020/editable-input.component.mjs +0 -199
  126. package/esm2020/github/github-swatch.component.mjs +0 -53
  127. package/esm2020/github/github.component.mjs +0 -112
  128. package/esm2020/hue/hue-picker.component.mjs +0 -100
  129. package/esm2020/hue.component.mjs +0 -124
  130. package/esm2020/material/material.component.mjs +0 -186
  131. package/esm2020/photoshop/photoshop-button.component.mjs +0 -34
  132. package/esm2020/photoshop/photoshop-fields.component.mjs +0 -212
  133. package/esm2020/photoshop/photoshop-previews.component.mjs +0 -40
  134. package/esm2020/photoshop/photoshop.component.mjs +0 -185
  135. package/esm2020/raised.component.mjs +0 -50
  136. package/esm2020/saturation.component.mjs +0 -92
  137. package/esm2020/shade/shade-picker.component.mjs +0 -92
  138. package/esm2020/shade.component.mjs +0 -125
  139. package/esm2020/sketch/sketch-fields.component.mjs +0 -209
  140. package/esm2020/sketch/sketch-preset-colors.component.mjs +0 -68
  141. package/esm2020/sketch/sketch.component.mjs +0 -212
  142. package/esm2020/slider/slider-swatch.component.mjs +0 -52
  143. package/esm2020/slider/slider-swatches.component.mjs +0 -119
  144. package/esm2020/slider/slider.component.mjs +0 -102
  145. package/esm2020/swatch.component.mjs +0 -110
  146. package/esm2020/swatches/swatches-color.component.mjs +0 -104
  147. package/esm2020/swatches/swatches-group.component.mjs +0 -49
  148. package/esm2020/swatches/swatches.component.mjs +0 -242
  149. package/esm2020/twitter/twitter.component.mjs +0 -159
  150. package/fesm2015/ngx-color-alpha.mjs +0 -107
  151. package/fesm2015/ngx-color-alpha.mjs.map +0 -1
  152. package/fesm2015/ngx-color-block.mjs +0 -223
  153. package/fesm2015/ngx-color-block.mjs.map +0 -1
  154. package/fesm2015/ngx-color-chrome.mjs.map +0 -1
  155. package/fesm2015/ngx-color-circle.mjs.map +0 -1
  156. package/fesm2015/ngx-color-github.mjs.map +0 -1
  157. package/fesm2015/ngx-color-hue.mjs +0 -107
  158. package/fesm2015/ngx-color-hue.mjs.map +0 -1
  159. package/fesm2015/ngx-color-photoshop.mjs +0 -467
  160. package/fesm2015/ngx-color-shade.mjs.map +0 -1
  161. package/fesm2015/ngx-color-sketch.mjs.map +0 -1
  162. package/fesm2015/ngx-color-slider.mjs +0 -273
  163. package/fesm2015/ngx-color-swatches.mjs.map +0 -1
  164. package/fesm2015/ngx-color.mjs +0 -1202
  165. package/fesm2015/ngx-color.mjs.map +0 -1
  166. package/fesm2020/ngx-color-alpha.mjs.map +0 -1
  167. package/fesm2020/ngx-color-block.mjs.map +0 -1
  168. package/fesm2020/ngx-color-chrome.mjs +0 -499
  169. package/fesm2020/ngx-color-circle.mjs +0 -207
  170. package/fesm2020/ngx-color-circle.mjs.map +0 -1
  171. package/fesm2020/ngx-color-compact.mjs +0 -385
  172. package/fesm2020/ngx-color-compact.mjs.map +0 -1
  173. package/fesm2020/ngx-color-github.mjs +0 -169
  174. package/fesm2020/ngx-color-hue.mjs.map +0 -1
  175. package/fesm2020/ngx-color-material.mjs +0 -193
  176. package/fesm2020/ngx-color-material.mjs.map +0 -1
  177. package/fesm2020/ngx-color-photoshop.mjs.map +0 -1
  178. package/fesm2020/ngx-color-shade.mjs +0 -99
  179. package/fesm2020/ngx-color-shade.mjs.map +0 -1
  180. package/fesm2020/ngx-color-sketch.mjs +0 -485
  181. package/fesm2020/ngx-color-sketch.mjs.map +0 -1
  182. package/fesm2020/ngx-color-slider.mjs.map +0 -1
  183. package/fesm2020/ngx-color-swatches.mjs +0 -391
  184. package/fesm2020/ngx-color-swatches.mjs.map +0 -1
  185. package/fesm2020/ngx-color-twitter.mjs +0 -166
  186. package/fesm2020/ngx-color-twitter.mjs.map +0 -1
  187. package/fesm2020/ngx-color.mjs.map +0 -1
  188. /package/{esm2020 → esm2022}/alpha/ngx-color-alpha.mjs +0 -0
  189. /package/{esm2020 → esm2022}/alpha/public_api.mjs +0 -0
  190. /package/{esm2020 → esm2022}/block/ngx-color-block.mjs +0 -0
  191. /package/{esm2020 → esm2022}/block/public_api.mjs +0 -0
  192. /package/{esm2020 → esm2022}/chrome/ngx-color-chrome.mjs +0 -0
  193. /package/{esm2020 → esm2022}/chrome/public_api.mjs +0 -0
  194. /package/{esm2020 → esm2022}/circle/ngx-color-circle.mjs +0 -0
  195. /package/{esm2020 → esm2022}/circle/public_api.mjs +0 -0
  196. /package/{esm2020 → esm2022}/compact/ngx-color-compact.mjs +0 -0
  197. /package/{esm2020 → esm2022}/compact/public_api.mjs +0 -0
  198. /package/{esm2020 → esm2022}/github/ngx-color-github.mjs +0 -0
  199. /package/{esm2020 → esm2022}/github/public_api.mjs +0 -0
  200. /package/{esm2020 → esm2022}/helpers/checkboard.mjs +0 -0
  201. /package/{esm2020 → esm2022}/helpers/color.interfaces.mjs +0 -0
  202. /package/{esm2020 → esm2022}/helpers/color.mjs +0 -0
  203. /package/{esm2020 → esm2022}/hue/ngx-color-hue.mjs +0 -0
  204. /package/{esm2020 → esm2022}/hue/public_api.mjs +0 -0
  205. /package/{esm2020 → esm2022}/material/ngx-color-material.mjs +0 -0
  206. /package/{esm2020 → esm2022}/material/public_api.mjs +0 -0
  207. /package/{esm2020 → esm2022}/ngx-color.mjs +0 -0
  208. /package/{esm2020 → esm2022}/photoshop/ngx-color-photoshop.mjs +0 -0
  209. /package/{esm2020 → esm2022}/photoshop/public_api.mjs +0 -0
  210. /package/{esm2020 → esm2022}/public_api.mjs +0 -0
  211. /package/{esm2020 → esm2022}/shade/ngx-color-shade.mjs +0 -0
  212. /package/{esm2020 → esm2022}/shade/public_api.mjs +0 -0
  213. /package/{esm2020 → esm2022}/sketch/ngx-color-sketch.mjs +0 -0
  214. /package/{esm2020 → esm2022}/sketch/public_api.mjs +0 -0
  215. /package/{esm2020 → esm2022}/slider/ngx-color-slider.mjs +0 -0
  216. /package/{esm2020 → esm2022}/slider/public_api.mjs +0 -0
  217. /package/{esm2020 → esm2022}/swatches/ngx-color-swatches.mjs +0 -0
  218. /package/{esm2020 → esm2022}/swatches/public_api.mjs +0 -0
  219. /package/{esm2020 → esm2022}/twitter/ngx-color-twitter.mjs +0 -0
  220. /package/{esm2020 → esm2022}/twitter/public_api.mjs +0 -0
@@ -1,207 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
3
- import * as i1 from 'ngx-color';
4
- import { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';
5
- import * as i1$1 from '@angular/common';
6
- import { CommonModule } from '@angular/common';
7
- import { red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange, brown, blueGrey } from 'material-colors';
8
- import { TinyColor } from '@ctrl/tinycolor';
9
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
10
-
11
- class CircleSwatchComponent {
12
- constructor() {
13
- this.circleSize = 28;
14
- this.circleSpacing = 14;
15
- this.focus = false;
16
- this.onClick = new EventEmitter();
17
- this.onSwatchHover = new EventEmitter();
18
- this.focusStyle = {};
19
- this.swatchStyle = {
20
- borderRadius: '50%',
21
- background: 'transparent',
22
- transition: '100ms box-shadow ease 0s',
23
- };
24
- }
25
- ngOnChanges() {
26
- this.swatchStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}`;
27
- this.focusStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}, 0 0 5px ${this.color}`;
28
- if (this.focus) {
29
- this.focusStyle.boxShadow = `inset 0 0 0 3px ${this.color}, 0 0 5px ${this.color}`;
30
- }
31
- }
32
- handleClick({ hex, $event }) {
33
- this.onClick.emit({ hex, $event });
34
- }
35
- }
36
- CircleSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CircleSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
37
- CircleSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: CircleSwatchComponent, selector: "color-circle-swatch", inputs: { color: "color", circleSize: "circleSize", circleSpacing: "circleSpacing", focus: "focus" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, usesOnChanges: true, ngImport: i0, template: `
38
- <div class="circle-swatch"
39
- [style.width.px]="circleSize" [style.height.px]="circleSize"
40
- [style.margin-right.px]="circleSpacing" [style.margin-bottom.px]="circleSpacing"
41
- >
42
- <color-swatch
43
- [color]="color" [style]="swatchStyle" [focus]="focus" [focusStyle]="focusStyle"
44
- (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)">
45
- </color-swatch>
46
- <div class="clear"></div>
47
- </div>
48
- `, isInline: true, styles: [".circle-swatch{transform:scale(1);transition:transform .1s ease}.circle-swatch:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "component", type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
49
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CircleSwatchComponent, decorators: [{
50
- type: Component,
51
- args: [{ selector: 'color-circle-swatch', template: `
52
- <div class="circle-swatch"
53
- [style.width.px]="circleSize" [style.height.px]="circleSize"
54
- [style.margin-right.px]="circleSpacing" [style.margin-bottom.px]="circleSpacing"
55
- >
56
- <color-swatch
57
- [color]="color" [style]="swatchStyle" [focus]="focus" [focusStyle]="focusStyle"
58
- (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)">
59
- </color-swatch>
60
- <div class="clear"></div>
61
- </div>
62
- `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".circle-swatch{transform:scale(1);transition:transform .1s ease}.circle-swatch:hover{transform:scale(1.2)}\n"] }]
63
- }], propDecorators: { color: [{
64
- type: Input
65
- }], circleSize: [{
66
- type: Input
67
- }], circleSpacing: [{
68
- type: Input
69
- }], focus: [{
70
- type: Input
71
- }], onClick: [{
72
- type: Output
73
- }], onSwatchHover: [{
74
- type: Output
75
- }] } });
76
-
77
- class CircleComponent extends ColorWrap {
78
- constructor() {
79
- super();
80
- /** Pixel value for picker width */
81
- this.width = 252;
82
- /** Color squares to display */
83
- this.colors = [
84
- red['500'],
85
- pink['500'],
86
- purple['500'],
87
- deepPurple['500'],
88
- indigo['500'],
89
- blue['500'],
90
- lightBlue['500'],
91
- cyan['500'],
92
- teal['500'],
93
- green['500'],
94
- lightGreen['500'],
95
- lime['500'],
96
- yellow['500'],
97
- amber['500'],
98
- orange['500'],
99
- deepOrange['500'],
100
- brown['500'],
101
- blueGrey['500'],
102
- ];
103
- /** Value for circle size */
104
- this.circleSize = 28;
105
- /** Value for spacing between circles */
106
- this.circleSpacing = 14;
107
- }
108
- isActive(color) {
109
- return new TinyColor(this.hex).equals(color);
110
- }
111
- handleBlockChange({ hex, $event }) {
112
- if (isValidHex(hex)) {
113
- this.handleChange({ hex, source: 'hex' }, $event);
114
- }
115
- }
116
- handleValueChange({ data, $event }) {
117
- this.handleChange(data, $event);
118
- }
119
- }
120
- CircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
121
- CircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: CircleComponent, selector: "color-circle", inputs: { width: "width", colors: "colors", circleSize: "circleSize", circleSpacing: "circleSpacing" }, providers: [
122
- {
123
- provide: NG_VALUE_ACCESSOR,
124
- useExisting: forwardRef(() => CircleComponent),
125
- multi: true,
126
- },
127
- {
128
- provide: ColorWrap,
129
- useExisting: forwardRef(() => CircleComponent),
130
- },
131
- ], usesInheritance: true, ngImport: i0, template: `
132
- <div
133
- class="circle-picker {{ className }}"
134
- [style.width.px]="width"
135
- [style.margin-right.px]="-circleSpacing"
136
- [style.margin-bottom.px]="-circleSpacing"
137
- >
138
- <color-circle-swatch
139
- *ngFor="let color of colors"
140
- [circleSize]="circleSize"
141
- [circleSpacing]="circleSpacing"
142
- [color]="color"
143
- [focus]="isActive(color)"
144
- (onClick)="handleBlockChange($event)"
145
- (onSwatchHover)="onSwatchHover.emit($event)"
146
- ></color-circle-swatch>
147
- </div>
148
- `, isInline: true, styles: [".circle-picker{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(function () { return CircleSwatchComponent; }), selector: "color-circle-swatch", inputs: ["color", "circleSize", "circleSpacing", "focus"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
149
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CircleComponent, decorators: [{
150
- type: Component,
151
- args: [{ selector: 'color-circle', template: `
152
- <div
153
- class="circle-picker {{ className }}"
154
- [style.width.px]="width"
155
- [style.margin-right.px]="-circleSpacing"
156
- [style.margin-bottom.px]="-circleSpacing"
157
- >
158
- <color-circle-swatch
159
- *ngFor="let color of colors"
160
- [circleSize]="circleSize"
161
- [circleSpacing]="circleSpacing"
162
- [color]="color"
163
- [focus]="isActive(color)"
164
- (onClick)="handleBlockChange($event)"
165
- (onSwatchHover)="onSwatchHover.emit($event)"
166
- ></color-circle-swatch>
167
- </div>
168
- `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
169
- {
170
- provide: NG_VALUE_ACCESSOR,
171
- useExisting: forwardRef(() => CircleComponent),
172
- multi: true,
173
- },
174
- {
175
- provide: ColorWrap,
176
- useExisting: forwardRef(() => CircleComponent),
177
- },
178
- ], styles: [".circle-picker{display:flex;flex-wrap:wrap}\n"] }]
179
- }], ctorParameters: function () { return []; }, propDecorators: { width: [{
180
- type: Input
181
- }], colors: [{
182
- type: Input
183
- }], circleSize: [{
184
- type: Input
185
- }], circleSpacing: [{
186
- type: Input
187
- }] } });
188
- class ColorCircleModule {
189
- }
190
- ColorCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
191
- ColorCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorCircleModule, declarations: [CircleComponent, CircleSwatchComponent], imports: [CommonModule, SwatchModule], exports: [CircleComponent, CircleSwatchComponent] });
192
- ColorCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorCircleModule, imports: [CommonModule, SwatchModule] });
193
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorCircleModule, decorators: [{
194
- type: NgModule,
195
- args: [{
196
- declarations: [CircleComponent, CircleSwatchComponent],
197
- exports: [CircleComponent, CircleSwatchComponent],
198
- imports: [CommonModule, SwatchModule],
199
- }]
200
- }] });
201
-
202
- /**
203
- * Generated bundle index. Do not edit.
204
- */
205
-
206
- export { CircleComponent, CircleSwatchComponent, ColorCircleModule };
207
- //# sourceMappingURL=ngx-color-circle.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ngx-color-circle.mjs","sources":["../../src/lib/circle/circle-swatch.component.ts","../../src/lib/circle/circle.component.ts","../../src/lib/circle/ngx-color-circle.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n} from '@angular/core';\n\n@Component({\n selector: 'color-circle-swatch',\n template: `\n <div class=\"circle-swatch\"\n [style.width.px]=\"circleSize\" [style.height.px]=\"circleSize\"\n [style.margin-right.px]=\"circleSpacing\" [style.margin-bottom.px]=\"circleSpacing\"\n >\n <color-swatch\n [color]=\"color\" [style]=\"swatchStyle\" [focus]=\"focus\" [focusStyle]=\"focusStyle\"\n (onClick)=\"handleClick($event)\" (onHover)=\"onSwatchHover.emit($event)\">\n </color-swatch>\n <div class=\"clear\"></div>\n </div>\n `,\n styles: [\n `\n .circle-swatch {\n transform: scale(1);\n transition: transform 100ms ease;\n }\n .circle-swatch:hover {\n transform: scale(1.2);\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class CircleSwatchComponent implements OnChanges {\n @Input() color!: string;\n @Input() circleSize = 28;\n @Input() circleSpacing = 14;\n @Input() focus = false;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n focusStyle: Record<string, string> = {};\n swatchStyle: Record<string, string> = {\n borderRadius: '50%',\n background: 'transparent',\n transition: '100ms box-shadow ease 0s',\n };\n\n ngOnChanges() {\n this.swatchStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}`;\n this.focusStyle.boxShadow = `inset 0 0 0 ${ this.circleSize / 2 }px ${ this.color }, 0 0 5px ${ this.color }`;\n if (this.focus) {\n this.focusStyle.boxShadow = `inset 0 0 0 3px ${ this.color }, 0 0 5px ${ this.color }`;\n }\n }\n handleClick({ hex, $event }) {\n this.onClick.emit({ hex, $event });\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\nimport {\n amber,\n blue,\n blueGrey,\n brown,\n cyan,\n deepOrange,\n deepPurple,\n green,\n indigo,\n lightBlue,\n lightGreen,\n lime,\n orange,\n pink,\n purple,\n red,\n teal,\n yellow,\n} from 'material-colors';\nimport { TinyColor } from '@ctrl/tinycolor';\n\nimport { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';\nimport { CircleSwatchComponent } from './circle-swatch.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-circle',\n template: `\n <div\n class=\"circle-picker {{ className }}\"\n [style.width.px]=\"width\"\n [style.margin-right.px]=\"-circleSpacing\"\n [style.margin-bottom.px]=\"-circleSpacing\"\n >\n <color-circle-swatch\n *ngFor=\"let color of colors\"\n [circleSize]=\"circleSize\"\n [circleSpacing]=\"circleSpacing\"\n [color]=\"color\"\n [focus]=\"isActive(color)\"\n (onClick)=\"handleBlockChange($event)\"\n (onSwatchHover)=\"onSwatchHover.emit($event)\"\n ></color-circle-swatch>\n </div>\n `,\n styles: [\n `\n .circle-picker {\n display: flex;\n flex-wrap: wrap;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CircleComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => CircleComponent),\n },\n ]\n})\nexport class CircleComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 252;\n /** Color squares to display */\n @Input()\n colors: string[] = [\n red['500'],\n pink['500'],\n purple['500'],\n deepPurple['500'],\n indigo['500'],\n blue['500'],\n lightBlue['500'],\n cyan['500'],\n teal['500'],\n green['500'],\n lightGreen['500'],\n lime['500'],\n yellow['500'],\n amber['500'],\n orange['500'],\n deepOrange['500'],\n brown['500'],\n blueGrey['500'],\n ];\n /** Value for circle size */\n @Input() circleSize = 28;\n /** Value for spacing between circles */\n @Input() circleSpacing = 14;\n\n constructor() {\n super();\n }\n isActive(color: string) {\n return new TinyColor(this.hex).equals(color);\n }\n handleBlockChange({ hex, $event }: { hex: string, $event: Event }) {\n if (isValidHex(hex)) {\n this.handleChange({ hex, source: 'hex' }, $event);\n }\n }\n handleValueChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [CircleComponent, CircleSwatchComponent],\n exports: [CircleComponent, CircleSwatchComponent],\n imports: [CommonModule, SwatchModule],\n})\nexport class ColorCircleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1"],"mappings":"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"}
@@ -1,385 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
3
- import * as i1 from 'ngx-color';
4
- import { getContrastingColor, isValidHex, ColorWrap, EditableInputModule, SwatchModule, RaisedModule } from 'ngx-color';
5
- import * as i1$1 from '@angular/common';
6
- import { CommonModule } from '@angular/common';
7
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
8
-
9
- class CompactColorComponent {
10
- constructor() {
11
- this.onClick = new EventEmitter();
12
- this.onSwatchHover = new EventEmitter();
13
- this.swatchStyle = {
14
- width: '15px',
15
- height: '15px',
16
- float: 'left',
17
- marginRight: '5px',
18
- marginBottom: '5px',
19
- position: 'relative',
20
- cursor: 'pointer',
21
- };
22
- this.swatchFocus = {};
23
- this.getContrastingColor = getContrastingColor;
24
- }
25
- ngOnChanges() {
26
- this.swatchStyle.background = this.color;
27
- this.swatchFocus.boxShadow = `0 0 4px ${this.color}`;
28
- if (this.color.toLowerCase() === '#ffffff') {
29
- this.swatchStyle.boxShadow = 'inset 0 0 0 1px #ddd';
30
- }
31
- }
32
- handleClick({ hex, $event }) {
33
- this.onClick.emit({ hex, $event });
34
- }
35
- }
36
- CompactColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CompactColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
37
- CompactColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: CompactColorComponent, selector: "color-compact-color", inputs: { color: "color", active: "active" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, usesOnChanges: true, ngImport: i0, template: `
38
- <div class="compact-color">
39
- <color-swatch class="swatch"
40
- [color]="color" [style]="swatchStyle"
41
- [focusStyle]="swatchFocus"
42
- (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)"
43
- >
44
- <div class="compact-dot"
45
- [class.active]="active" [style.background]="getContrastingColor(color)"
46
- ></div>
47
- </color-swatch>
48
- </div>
49
- `, isInline: true, styles: [".compact-dot{position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;opacity:0}.compact-dot.active{opacity:1}\n"], dependencies: [{ kind: "component", type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
50
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CompactColorComponent, decorators: [{
51
- type: Component,
52
- args: [{ selector: 'color-compact-color', template: `
53
- <div class="compact-color">
54
- <color-swatch class="swatch"
55
- [color]="color" [style]="swatchStyle"
56
- [focusStyle]="swatchFocus"
57
- (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)"
58
- >
59
- <div class="compact-dot"
60
- [class.active]="active" [style.background]="getContrastingColor(color)"
61
- ></div>
62
- </color-swatch>
63
- </div>
64
- `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".compact-dot{position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;opacity:0}.compact-dot.active{opacity:1}\n"] }]
65
- }], propDecorators: { color: [{
66
- type: Input
67
- }], active: [{
68
- type: Input
69
- }], onClick: [{
70
- type: Output
71
- }], onSwatchHover: [{
72
- type: Output
73
- }] } });
74
-
75
- class CompactFieldsComponent {
76
- constructor() {
77
- this.onChange = new EventEmitter();
78
- this.HEXWrap = {
79
- marginTop: '-3px',
80
- marginBottom: '-3px',
81
- // flex: '6 1 0%',
82
- position: 'relative',
83
- };
84
- this.HEXinput = {
85
- width: '80%',
86
- padding: '0px',
87
- paddingLeft: '20%',
88
- border: 'none',
89
- outline: 'none',
90
- background: 'none',
91
- fontSize: '12px',
92
- color: '#333',
93
- height: '16px',
94
- };
95
- this.HEXlabel = {
96
- display: 'none',
97
- };
98
- this.RGBwrap = {
99
- marginTop: '-3px',
100
- marginBottom: '-3px',
101
- // flex: '3 1 0%',
102
- position: 'relative',
103
- };
104
- this.RGBinput = {
105
- width: '80%',
106
- padding: '0px',
107
- paddingLeft: '30%',
108
- border: 'none',
109
- outline: 'none',
110
- background: 'none',
111
- fontSize: '12px',
112
- color: '#333',
113
- height: '16px',
114
- };
115
- this.RGBlabel = {
116
- position: 'absolute',
117
- top: '6px',
118
- left: '0px',
119
- 'line-height': '16px',
120
- 'text-transform': 'uppercase',
121
- fontSize: '12px',
122
- color: '#999',
123
- };
124
- }
125
- handleChange({ data, $event }) {
126
- if (data.hex) {
127
- if (isValidHex(data.hex)) {
128
- this.onChange.emit({
129
- data: {
130
- hex: data.hex,
131
- source: 'hex',
132
- },
133
- $event,
134
- });
135
- }
136
- }
137
- else {
138
- this.onChange.emit({
139
- data: {
140
- r: data.r || this.rgb.r,
141
- g: data.g || this.rgb.g,
142
- b: data.b || this.rgb.b,
143
- source: 'rgb',
144
- },
145
- $event,
146
- });
147
- }
148
- }
149
- }
150
- CompactFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CompactFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
151
- CompactFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: CompactFieldsComponent, selector: "color-compact-fields", inputs: { hex: "hex", rgb: "rgb" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
152
- <div class="compact-fields">
153
- <div class="compact-active" [style.background]="hex"></div>
154
- <div style="flex: 6 1 0%;">
155
- <color-editable-input
156
- [style]="{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }"
157
- label="hex"
158
- [value]="hex"
159
- (onChange)="handleChange($event)"
160
- ></color-editable-input>
161
- </div>
162
- <div style="flex: 3 1 0%">
163
- <color-editable-input
164
- [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
165
- label="r"
166
- [value]="rgb.r"
167
- (onChange)="handleChange($event)"
168
- ></color-editable-input>
169
- </div>
170
- <div style="flex: 3 1 0%">
171
- <color-editable-input
172
- [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
173
- label="g"
174
- [value]="rgb.g"
175
- (onChange)="handleChange($event)"
176
- ></color-editable-input>
177
- </div>
178
- <div style="flex: 3 1 0%">
179
- <color-editable-input
180
- [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
181
- label="b"
182
- [value]="rgb.b"
183
- (onChange)="handleChange($event)"
184
- ></color-editable-input>
185
- </div>
186
- </div>
187
- `, isInline: true, styles: [".compact-fields{display:flex;padding-bottom:6px;padding-right:5px;position:relative}.compact-active{position:absolute;top:6px;left:5px;height:9px;width:9px}\n"], dependencies: [{ kind: "component", type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
188
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CompactFieldsComponent, decorators: [{
189
- type: Component,
190
- args: [{ selector: 'color-compact-fields', template: `
191
- <div class="compact-fields">
192
- <div class="compact-active" [style.background]="hex"></div>
193
- <div style="flex: 6 1 0%;">
194
- <color-editable-input
195
- [style]="{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }"
196
- label="hex"
197
- [value]="hex"
198
- (onChange)="handleChange($event)"
199
- ></color-editable-input>
200
- </div>
201
- <div style="flex: 3 1 0%">
202
- <color-editable-input
203
- [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
204
- label="r"
205
- [value]="rgb.r"
206
- (onChange)="handleChange($event)"
207
- ></color-editable-input>
208
- </div>
209
- <div style="flex: 3 1 0%">
210
- <color-editable-input
211
- [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
212
- label="g"
213
- [value]="rgb.g"
214
- (onChange)="handleChange($event)"
215
- ></color-editable-input>
216
- </div>
217
- <div style="flex: 3 1 0%">
218
- <color-editable-input
219
- [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
220
- label="b"
221
- [value]="rgb.b"
222
- (onChange)="handleChange($event)"
223
- ></color-editable-input>
224
- </div>
225
- </div>
226
- `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".compact-fields{display:flex;padding-bottom:6px;padding-right:5px;position:relative}.compact-active{position:absolute;top:6px;left:5px;height:9px;width:9px}\n"] }]
227
- }], propDecorators: { hex: [{
228
- type: Input
229
- }], rgb: [{
230
- type: Input
231
- }], onChange: [{
232
- type: Output
233
- }] } });
234
-
235
- class CompactComponent extends ColorWrap {
236
- constructor() {
237
- super();
238
- /** Color squares to display */
239
- this.colors = [
240
- '#4D4D4D',
241
- '#999999',
242
- '#FFFFFF',
243
- '#F44E3B',
244
- '#FE9200',
245
- '#FCDC00',
246
- '#DBDF00',
247
- '#A4DD00',
248
- '#68CCCA',
249
- '#73D8FF',
250
- '#AEA1FF',
251
- '#FDA1FF',
252
- '#333333',
253
- '#808080',
254
- '#cccccc',
255
- '#D33115',
256
- '#E27300',
257
- '#FCC400',
258
- '#B0BC00',
259
- '#68BC00',
260
- '#16A5A5',
261
- '#009CE0',
262
- '#7B64FF',
263
- '#FA28FF',
264
- '#000000',
265
- '#666666',
266
- '#B3B3B3',
267
- '#9F0500',
268
- '#C45100',
269
- '#FB9E00',
270
- '#808900',
271
- '#194D33',
272
- '#0C797D',
273
- '#0062B1',
274
- '#653294',
275
- '#AB149E',
276
- ];
277
- this.zDepth = 1;
278
- this.radius = 1;
279
- this.background = '#fff';
280
- this.disableAlpha = true;
281
- }
282
- handleBlockChange({ hex, $event }) {
283
- if (isValidHex(hex)) {
284
- this.handleChange({ hex, source: 'hex' }, $event);
285
- }
286
- }
287
- handleValueChange({ data, $event }) {
288
- this.handleChange(data, $event);
289
- }
290
- }
291
- CompactComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CompactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
292
- CompactComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: CompactComponent, selector: "color-compact", inputs: { colors: "colors", zDepth: "zDepth", radius: "radius", background: "background" }, providers: [
293
- {
294
- provide: NG_VALUE_ACCESSOR,
295
- useExisting: forwardRef(() => CompactComponent),
296
- multi: true,
297
- },
298
- {
299
- provide: ColorWrap,
300
- useExisting: forwardRef(() => CompactComponent),
301
- },
302
- ], usesInheritance: true, ngImport: i0, template: `
303
- <color-raised class="color-compact" [zDepth]="zDepth" [background]="background" [radius]="radius">
304
- <div class="compact-picker {{ className }}">
305
- <div>
306
- <color-compact-color
307
- *ngFor="let color of colors" [color]="color"
308
- [active]="color.toLowerCase() === hex.toLowerCase()"
309
- (onClick)="handleBlockChange($event)"
310
- ></color-compact-color>
311
- <div class="compact-clear"></div>
312
- </div>
313
- <color-compact-fields
314
- [hex]="hex"
315
- [rgb]="rgb"
316
- (onChange)="handleValueChange($event)"
317
- ></color-compact-fields>
318
- </div>
319
- </color-raised>
320
- `, isInline: true, styles: [".color-compact{background:#f6f6f6;radius:4px}.compact-picker{padding-top:5px;padding-left:5px;box-sizing:border-box;width:245px}.compact-clear{clear:both}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(function () { return i1.RaisedComponent; }), selector: "color-raised", inputs: ["zDepth", "radius", "background"] }, { kind: "component", type: i0.forwardRef(function () { return CompactColorComponent; }), selector: "color-compact-color", inputs: ["color", "active"], outputs: ["onClick", "onSwatchHover"] }, { kind: "component", type: i0.forwardRef(function () { return CompactFieldsComponent; }), selector: "color-compact-fields", inputs: ["hex", "rgb"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
321
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CompactComponent, decorators: [{
322
- type: Component,
323
- args: [{ selector: 'color-compact', template: `
324
- <color-raised class="color-compact" [zDepth]="zDepth" [background]="background" [radius]="radius">
325
- <div class="compact-picker {{ className }}">
326
- <div>
327
- <color-compact-color
328
- *ngFor="let color of colors" [color]="color"
329
- [active]="color.toLowerCase() === hex.toLowerCase()"
330
- (onClick)="handleBlockChange($event)"
331
- ></color-compact-color>
332
- <div class="compact-clear"></div>
333
- </div>
334
- <color-compact-fields
335
- [hex]="hex"
336
- [rgb]="rgb"
337
- (onChange)="handleValueChange($event)"
338
- ></color-compact-fields>
339
- </div>
340
- </color-raised>
341
- `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
342
- {
343
- provide: NG_VALUE_ACCESSOR,
344
- useExisting: forwardRef(() => CompactComponent),
345
- multi: true,
346
- },
347
- {
348
- provide: ColorWrap,
349
- useExisting: forwardRef(() => CompactComponent),
350
- },
351
- ], styles: [".color-compact{background:#f6f6f6;radius:4px}.compact-picker{padding-top:5px;padding-left:5px;box-sizing:border-box;width:245px}.compact-clear{clear:both}\n"] }]
352
- }], ctorParameters: function () { return []; }, propDecorators: { colors: [{
353
- type: Input
354
- }], zDepth: [{
355
- type: Input
356
- }], radius: [{
357
- type: Input
358
- }], background: [{
359
- type: Input
360
- }] } });
361
- class ColorCompactModule {
362
- }
363
- ColorCompactModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorCompactModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
364
- ColorCompactModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorCompactModule, declarations: [CompactComponent, CompactColorComponent,
365
- CompactFieldsComponent], imports: [CommonModule, EditableInputModule, SwatchModule, RaisedModule], exports: [CompactComponent, CompactColorComponent, CompactFieldsComponent] });
366
- ColorCompactModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorCompactModule, imports: [CommonModule, EditableInputModule, SwatchModule, RaisedModule] });
367
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorCompactModule, decorators: [{
368
- type: NgModule,
369
- args: [{
370
- declarations: [
371
- CompactComponent,
372
- CompactColorComponent,
373
- CompactFieldsComponent,
374
- ],
375
- exports: [CompactComponent, CompactColorComponent, CompactFieldsComponent],
376
- imports: [CommonModule, EditableInputModule, SwatchModule, RaisedModule],
377
- }]
378
- }] });
379
-
380
- /**
381
- * Generated bundle index. Do not edit.
382
- */
383
-
384
- export { ColorCompactModule, CompactColorComponent, CompactComponent, CompactFieldsComponent };
385
- //# sourceMappingURL=ngx-color-compact.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ngx-color-compact.mjs","sources":["../../src/lib/compact/compact-color.component.ts","../../src/lib/compact/compact-fields.component.ts","../../src/lib/compact/compact.component.ts","../../src/lib/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 provide: ColorWrap,\n useExisting: forwardRef(() => CompactComponent),\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 './public_api';\n"],"names":["i1","i2"],"mappings":"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"}