ngx-color 7.3.1 → 8.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 (212) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +281 -0
  3. package/alpha.component.d.ts +1 -1
  4. package/checkboard.component.d.ts +1 -1
  5. package/color-wrap.component.d.ts +1 -1
  6. package/coordinates.directive.d.ts +1 -1
  7. package/editable-input.component.d.ts +1 -1
  8. package/esm2020/alpha.component.mjs +13 -61
  9. package/esm2020/checkboard.component.mjs +9 -25
  10. package/esm2020/color-wrap.component.mjs +8 -8
  11. package/esm2020/coordinates.directive.mjs +7 -7
  12. package/esm2020/editable-input.component.mjs +11 -25
  13. package/esm2020/hue.component.mjs +13 -54
  14. package/esm2020/raised.component.mjs +10 -49
  15. package/esm2020/saturation.component.mjs +13 -57
  16. package/esm2020/shade.component.mjs +11 -51
  17. package/esm2020/swatch.component.mjs +13 -28
  18. package/fesm2015/ngx-color.mjs +92 -349
  19. package/fesm2015/ngx-color.mjs.map +1 -1
  20. package/fesm2020/ngx-color.mjs +92 -349
  21. package/fesm2020/ngx-color.mjs.map +1 -1
  22. package/hue.component.d.ts +1 -1
  23. package/{ngx-color.d.ts → index.d.ts} +0 -0
  24. package/package.json +11 -123
  25. package/raised.component.d.ts +1 -1
  26. package/saturation.component.d.ts +1 -1
  27. package/shade.component.d.ts +1 -1
  28. package/swatch.component.d.ts +1 -1
  29. package/alpha/alpha-picker.component.d.ts +0 -28
  30. package/alpha/ngx-color-alpha.d.ts +0 -5
  31. package/alpha/package.json +0 -17
  32. package/alpha/public_api.d.ts +0 -1
  33. package/block/block-swatches.component.d.ts +0 -24
  34. package/block/block.component.d.ts +0 -36
  35. package/block/ngx-color-block.d.ts +0 -5
  36. package/block/package.json +0 -16
  37. package/block/public_api.d.ts +0 -2
  38. package/chrome/chrome-fields.component.d.ts +0 -22
  39. package/chrome/chrome.component.d.ts +0 -25
  40. package/chrome/ngx-color-chrome.d.ts +0 -5
  41. package/chrome/package.json +0 -16
  42. package/chrome/public_api.d.ts +0 -2
  43. package/circle/circle-swatch.component.d.ts +0 -19
  44. package/circle/circle.component.d.ts +0 -32
  45. package/circle/ngx-color-circle.d.ts +0 -5
  46. package/circle/package.json +0 -19
  47. package/circle/public_api.d.ts +0 -2
  48. package/compact/compact-color.component.d.ts +0 -19
  49. package/compact/compact-fields.component.d.ts +0 -32
  50. package/compact/compact.component.d.ts +0 -30
  51. package/compact/ngx-color-compact.d.ts +0 -5
  52. package/compact/package.json +0 -16
  53. package/compact/public_api.d.ts +0 -3
  54. package/esm2020/alpha/alpha-picker.component.mjs +0 -116
  55. package/esm2020/alpha/ngx-color-alpha.mjs +0 -5
  56. package/esm2020/alpha/public_api.mjs +0 -2
  57. package/esm2020/block/block-swatches.component.mjs +0 -74
  58. package/esm2020/block/block.component.mjs +0 -199
  59. package/esm2020/block/ngx-color-block.mjs +0 -5
  60. package/esm2020/block/public_api.mjs +0 -3
  61. package/esm2020/chrome/chrome-fields.component.mjs +0 -356
  62. package/esm2020/chrome/chrome.component.mjs +0 -249
  63. package/esm2020/chrome/ngx-color-chrome.mjs +0 -5
  64. package/esm2020/chrome/public_api.mjs +0 -3
  65. package/esm2020/circle/circle-swatch.component.mjs +0 -85
  66. package/esm2020/circle/circle.component.mjs +0 -148
  67. package/esm2020/circle/ngx-color-circle.mjs +0 -5
  68. package/esm2020/circle/public_api.mjs +0 -3
  69. package/esm2020/compact/compact-color.component.mjs +0 -91
  70. package/esm2020/compact/compact-fields.component.mjs +0 -186
  71. package/esm2020/compact/compact.component.mjs +0 -177
  72. package/esm2020/compact/ngx-color-compact.mjs +0 -5
  73. package/esm2020/compact/public_api.mjs +0 -4
  74. package/esm2020/github/github-swatch.component.mjs +0 -67
  75. package/esm2020/github/github.component.mjs +0 -179
  76. package/esm2020/github/ngx-color-github.mjs +0 -5
  77. package/esm2020/github/public_api.mjs +0 -3
  78. package/esm2020/hue/hue-picker.component.mjs +0 -113
  79. package/esm2020/hue/ngx-color-hue.mjs +0 -5
  80. package/esm2020/hue/public_api.mjs +0 -2
  81. package/esm2020/material/material.component.mjs +0 -211
  82. package/esm2020/material/ngx-color-material.mjs +0 -5
  83. package/esm2020/material/public_api.mjs +0 -2
  84. package/esm2020/photoshop/ngx-color-photoshop.mjs +0 -5
  85. package/esm2020/photoshop/photoshop-button.component.mjs +0 -63
  86. package/esm2020/photoshop/photoshop-fields.component.mjs +0 -241
  87. package/esm2020/photoshop/photoshop-previews.component.mjs +0 -68
  88. package/esm2020/photoshop/photoshop.component.mjs +0 -258
  89. package/esm2020/photoshop/public_api.mjs +0 -5
  90. package/esm2020/shade/ngx-color-shade.mjs +0 -5
  91. package/esm2020/shade/public_api.mjs +0 -2
  92. package/esm2020/shade/shade-picker.component.mjs +0 -105
  93. package/esm2020/sketch/ngx-color-sketch.mjs +0 -5
  94. package/esm2020/sketch/public_api.mjs +0 -4
  95. package/esm2020/sketch/sketch-fields.component.mjs +0 -243
  96. package/esm2020/sketch/sketch-preset-colors.component.mjs +0 -98
  97. package/esm2020/sketch/sketch.component.mjs +0 -283
  98. package/esm2020/slider/ngx-color-slider.mjs +0 -5
  99. package/esm2020/slider/public_api.mjs +0 -4
  100. package/esm2020/slider/slider-swatch.component.mjs +0 -80
  101. package/esm2020/slider/slider-swatches.component.mjs +0 -135
  102. package/esm2020/slider/slider.component.mjs +0 -116
  103. package/esm2020/swatches/ngx-color-swatches.mjs +0 -5
  104. package/esm2020/swatches/public_api.mjs +0 -4
  105. package/esm2020/swatches/swatches-color.component.mjs +0 -123
  106. package/esm2020/swatches/swatches-group.component.mjs +0 -64
  107. package/esm2020/swatches/swatches.component.mjs +0 -258
  108. package/esm2020/twitter/ngx-color-twitter.mjs +0 -5
  109. package/esm2020/twitter/public_api.mjs +0 -2
  110. package/esm2020/twitter/twitter.component.mjs +0 -255
  111. package/fesm2015/ngx-color-alpha.mjs +0 -123
  112. package/fesm2015/ngx-color-alpha.mjs.map +0 -1
  113. package/fesm2015/ngx-color-block.mjs +0 -275
  114. package/fesm2015/ngx-color-block.mjs.map +0 -1
  115. package/fesm2015/ngx-color-chrome.mjs +0 -606
  116. package/fesm2015/ngx-color-chrome.mjs.map +0 -1
  117. package/fesm2015/ngx-color-circle.mjs +0 -237
  118. package/fesm2015/ngx-color-circle.mjs.map +0 -1
  119. package/fesm2015/ngx-color-compact.mjs +0 -451
  120. package/fesm2015/ngx-color-compact.mjs.map +0 -1
  121. package/fesm2015/ngx-color-github.mjs +0 -250
  122. package/fesm2015/ngx-color-github.mjs.map +0 -1
  123. package/fesm2015/ngx-color-hue.mjs +0 -120
  124. package/fesm2015/ngx-color-hue.mjs.map +0 -1
  125. package/fesm2015/ngx-color-material.mjs +0 -218
  126. package/fesm2015/ngx-color-material.mjs.map +0 -1
  127. package/fesm2015/ngx-color-photoshop.mjs +0 -626
  128. package/fesm2015/ngx-color-photoshop.mjs.map +0 -1
  129. package/fesm2015/ngx-color-shade.mjs +0 -112
  130. package/fesm2015/ngx-color-shade.mjs.map +0 -1
  131. package/fesm2015/ngx-color-sketch.mjs +0 -620
  132. package/fesm2015/ngx-color-sketch.mjs.map +0 -1
  133. package/fesm2015/ngx-color-slider.mjs +0 -331
  134. package/fesm2015/ngx-color-slider.mjs.map +0 -1
  135. package/fesm2015/ngx-color-swatches.mjs +0 -441
  136. package/fesm2015/ngx-color-swatches.mjs.map +0 -1
  137. package/fesm2015/ngx-color-twitter.mjs +0 -262
  138. package/fesm2015/ngx-color-twitter.mjs.map +0 -1
  139. package/fesm2020/ngx-color-alpha.mjs +0 -123
  140. package/fesm2020/ngx-color-alpha.mjs.map +0 -1
  141. package/fesm2020/ngx-color-block.mjs +0 -275
  142. package/fesm2020/ngx-color-block.mjs.map +0 -1
  143. package/fesm2020/ngx-color-chrome.mjs +0 -606
  144. package/fesm2020/ngx-color-chrome.mjs.map +0 -1
  145. package/fesm2020/ngx-color-circle.mjs +0 -237
  146. package/fesm2020/ngx-color-circle.mjs.map +0 -1
  147. package/fesm2020/ngx-color-compact.mjs +0 -451
  148. package/fesm2020/ngx-color-compact.mjs.map +0 -1
  149. package/fesm2020/ngx-color-github.mjs +0 -250
  150. package/fesm2020/ngx-color-github.mjs.map +0 -1
  151. package/fesm2020/ngx-color-hue.mjs +0 -120
  152. package/fesm2020/ngx-color-hue.mjs.map +0 -1
  153. package/fesm2020/ngx-color-material.mjs +0 -218
  154. package/fesm2020/ngx-color-material.mjs.map +0 -1
  155. package/fesm2020/ngx-color-photoshop.mjs +0 -626
  156. package/fesm2020/ngx-color-photoshop.mjs.map +0 -1
  157. package/fesm2020/ngx-color-shade.mjs +0 -112
  158. package/fesm2020/ngx-color-shade.mjs.map +0 -1
  159. package/fesm2020/ngx-color-sketch.mjs +0 -620
  160. package/fesm2020/ngx-color-sketch.mjs.map +0 -1
  161. package/fesm2020/ngx-color-slider.mjs +0 -331
  162. package/fesm2020/ngx-color-slider.mjs.map +0 -1
  163. package/fesm2020/ngx-color-swatches.mjs +0 -441
  164. package/fesm2020/ngx-color-swatches.mjs.map +0 -1
  165. package/fesm2020/ngx-color-twitter.mjs +0 -262
  166. package/fesm2020/ngx-color-twitter.mjs.map +0 -1
  167. package/github/github-swatch.component.d.ts +0 -19
  168. package/github/github.component.d.ts +0 -28
  169. package/github/ngx-color-github.d.ts +0 -5
  170. package/github/package.json +0 -16
  171. package/github/public_api.d.ts +0 -2
  172. package/hue/hue-picker.component.d.ts +0 -29
  173. package/hue/ngx-color-hue.d.ts +0 -5
  174. package/hue/package.json +0 -15
  175. package/hue/public_api.d.ts +0 -1
  176. package/material/material.component.d.ts +0 -39
  177. package/material/ngx-color-material.d.ts +0 -5
  178. package/material/package.json +0 -15
  179. package/material/public_api.d.ts +0 -1
  180. package/photoshop/ngx-color-photoshop.d.ts +0 -5
  181. package/photoshop/package.json +0 -15
  182. package/photoshop/photoshop-button.component.d.ts +0 -9
  183. package/photoshop/photoshop-fields.component.d.ts +0 -22
  184. package/photoshop/photoshop-previews.component.d.ts +0 -11
  185. package/photoshop/photoshop.component.d.ts +0 -33
  186. package/photoshop/public_api.d.ts +0 -4
  187. package/shade/ngx-color-shade.d.ts +0 -5
  188. package/shade/package.json +0 -17
  189. package/shade/public_api.d.ts +0 -1
  190. package/shade/shade-picker.component.d.ts +0 -27
  191. package/sketch/ngx-color-sketch.d.ts +0 -5
  192. package/sketch/package.json +0 -15
  193. package/sketch/public_api.d.ts +0 -3
  194. package/sketch/sketch-fields.component.d.ts +0 -23
  195. package/sketch/sketch-preset-colors.component.d.ts +0 -24
  196. package/sketch/sketch.component.d.ts +0 -32
  197. package/slider/ngx-color-slider.d.ts +0 -5
  198. package/slider/package.json +0 -15
  199. package/slider/public_api.d.ts +0 -3
  200. package/slider/slider-swatch.component.d.ts +0 -16
  201. package/slider/slider-swatches.component.d.ts +0 -15
  202. package/slider/slider.component.d.ts +0 -22
  203. package/swatches/ngx-color-swatches.d.ts +0 -5
  204. package/swatches/package.json +0 -18
  205. package/swatches/public_api.d.ts +0 -3
  206. package/swatches/swatches-color.component.d.ts +0 -18
  207. package/swatches/swatches-group.component.d.ts +0 -10
  208. package/swatches/swatches.component.d.ts +0 -29
  209. package/twitter/ngx-color-twitter.d.ts +0 -5
  210. package/twitter/package.json +0 -15
  211. package/twitter/public_api.d.ts +0 -1
  212. package/twitter/twitter.component.d.ts +0 -31
@@ -1,237 +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: "13.0.0", ngImport: i0, type: CircleSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
37
- CircleSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", 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"], components: [{ 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: "13.0.0", ngImport: i0, type: CircleSwatchComponent, decorators: [{
50
- type: Component,
51
- args: [{
52
- selector: 'color-circle-swatch',
53
- template: `
54
- <div class="circle-swatch"
55
- [style.width.px]="circleSize" [style.height.px]="circleSize"
56
- [style.margin-right.px]="circleSpacing" [style.margin-bottom.px]="circleSpacing"
57
- >
58
- <color-swatch
59
- [color]="color" [style]="swatchStyle" [focus]="focus" [focusStyle]="focusStyle"
60
- (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)">
61
- </color-swatch>
62
- <div class="clear"></div>
63
- </div>
64
- `,
65
- styles: [
66
- `
67
- .circle-swatch {
68
- transform: scale(1);
69
- transition: transform 100ms ease;
70
- }
71
- .circle-swatch:hover {
72
- transform: scale(1.2);
73
- }
74
- `,
75
- ],
76
- changeDetection: ChangeDetectionStrategy.OnPush,
77
- preserveWhitespaces: false,
78
- }]
79
- }], propDecorators: { color: [{
80
- type: Input
81
- }], circleSize: [{
82
- type: Input
83
- }], circleSpacing: [{
84
- type: Input
85
- }], focus: [{
86
- type: Input
87
- }], onClick: [{
88
- type: Output
89
- }], onSwatchHover: [{
90
- type: Output
91
- }] } });
92
-
93
- class CircleComponent extends ColorWrap {
94
- constructor() {
95
- super();
96
- /** Pixel value for picker width */
97
- this.width = 252;
98
- /** Color squares to display */
99
- this.colors = [
100
- red['500'],
101
- pink['500'],
102
- purple['500'],
103
- deepPurple['500'],
104
- indigo['500'],
105
- blue['500'],
106
- lightBlue['500'],
107
- cyan['500'],
108
- teal['500'],
109
- green['500'],
110
- lightGreen['500'],
111
- lime['500'],
112
- yellow['500'],
113
- amber['500'],
114
- orange['500'],
115
- deepOrange['500'],
116
- brown['500'],
117
- blueGrey['500'],
118
- ];
119
- /** Value for circle size */
120
- this.circleSize = 28;
121
- /** Value for spacing between circles */
122
- this.circleSpacing = 14;
123
- }
124
- isActive(color) {
125
- return new TinyColor(this.hex).equals(color);
126
- }
127
- handleBlockChange({ hex, $event }) {
128
- if (isValidHex(hex)) {
129
- this.handleChange({ hex, source: 'hex' }, $event);
130
- }
131
- }
132
- handleValueChange({ data, $event }) {
133
- this.handleChange(data, $event);
134
- }
135
- }
136
- CircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
137
- CircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: CircleComponent, selector: "color-circle", inputs: { width: "width", colors: "colors", circleSize: "circleSize", circleSpacing: "circleSpacing" }, providers: [
138
- {
139
- provide: NG_VALUE_ACCESSOR,
140
- useExisting: forwardRef(() => CircleComponent),
141
- multi: true,
142
- },
143
- {
144
- provide: ColorWrap,
145
- useExisting: forwardRef(() => CircleComponent),
146
- },
147
- ], usesInheritance: true, ngImport: i0, template: `
148
- <div
149
- class="circle-picker {{ className }}"
150
- [style.width.px]="width"
151
- [style.margin-right.px]="-circleSpacing"
152
- [style.margin-bottom.px]="-circleSpacing"
153
- >
154
- <color-circle-swatch
155
- *ngFor="let color of colors"
156
- [circleSize]="circleSize"
157
- [circleSpacing]="circleSpacing"
158
- [color]="color"
159
- [focus]="isActive(color)"
160
- (onClick)="handleBlockChange($event)"
161
- (onSwatchHover)="onSwatchHover.emit($event)"
162
- ></color-circle-swatch>
163
- </div>
164
- `, isInline: true, styles: [".circle-picker{display:flex;flex-wrap:wrap}\n"], components: [{ type: i0.forwardRef(function () { return CircleSwatchComponent; }), selector: "color-circle-swatch", inputs: ["color", "circleSize", "circleSpacing", "focus"], outputs: ["onClick", "onSwatchHover"] }], directives: [{ type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
165
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CircleComponent, decorators: [{
166
- type: Component,
167
- args: [{
168
- selector: 'color-circle',
169
- template: `
170
- <div
171
- class="circle-picker {{ className }}"
172
- [style.width.px]="width"
173
- [style.margin-right.px]="-circleSpacing"
174
- [style.margin-bottom.px]="-circleSpacing"
175
- >
176
- <color-circle-swatch
177
- *ngFor="let color of colors"
178
- [circleSize]="circleSize"
179
- [circleSpacing]="circleSpacing"
180
- [color]="color"
181
- [focus]="isActive(color)"
182
- (onClick)="handleBlockChange($event)"
183
- (onSwatchHover)="onSwatchHover.emit($event)"
184
- ></color-circle-swatch>
185
- </div>
186
- `,
187
- styles: [
188
- `
189
- .circle-picker {
190
- display: flex;
191
- flex-wrap: wrap;
192
- }
193
- `,
194
- ],
195
- changeDetection: ChangeDetectionStrategy.OnPush,
196
- preserveWhitespaces: false,
197
- providers: [
198
- {
199
- provide: NG_VALUE_ACCESSOR,
200
- useExisting: forwardRef(() => CircleComponent),
201
- multi: true,
202
- },
203
- {
204
- provide: ColorWrap,
205
- useExisting: forwardRef(() => CircleComponent),
206
- },
207
- ]
208
- }]
209
- }], ctorParameters: function () { return []; }, propDecorators: { width: [{
210
- type: Input
211
- }], colors: [{
212
- type: Input
213
- }], circleSize: [{
214
- type: Input
215
- }], circleSpacing: [{
216
- type: Input
217
- }] } });
218
- class ColorCircleModule {
219
- }
220
- ColorCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
221
- ColorCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, declarations: [CircleComponent, CircleSwatchComponent], imports: [CommonModule, SwatchModule], exports: [CircleComponent, CircleSwatchComponent] });
222
- ColorCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, imports: [[CommonModule, SwatchModule]] });
223
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, decorators: [{
224
- type: NgModule,
225
- args: [{
226
- declarations: [CircleComponent, CircleSwatchComponent],
227
- exports: [CircleComponent, CircleSwatchComponent],
228
- imports: [CommonModule, SwatchModule],
229
- }]
230
- }] });
231
-
232
- /**
233
- * Generated bundle index. Do not edit.
234
- */
235
-
236
- export { CircleComponent, CircleSwatchComponent, ColorCircleModule };
237
- //# 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":[],"mappings":"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"}