ngx-color 7.3.3 → 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 (211) hide show
  1. package/README.md +2 -1
  2. package/alpha.component.d.ts +1 -1
  3. package/checkboard.component.d.ts +1 -1
  4. package/color-wrap.component.d.ts +1 -1
  5. package/coordinates.directive.d.ts +1 -1
  6. package/editable-input.component.d.ts +1 -1
  7. package/esm2020/alpha.component.mjs +13 -61
  8. package/esm2020/checkboard.component.mjs +9 -25
  9. package/esm2020/color-wrap.component.mjs +8 -8
  10. package/esm2020/coordinates.directive.mjs +7 -7
  11. package/esm2020/editable-input.component.mjs +11 -25
  12. package/esm2020/hue.component.mjs +13 -54
  13. package/esm2020/raised.component.mjs +10 -49
  14. package/esm2020/saturation.component.mjs +13 -57
  15. package/esm2020/shade.component.mjs +11 -51
  16. package/esm2020/swatch.component.mjs +13 -28
  17. package/fesm2015/ngx-color.mjs +92 -349
  18. package/fesm2015/ngx-color.mjs.map +1 -1
  19. package/fesm2020/ngx-color.mjs +92 -349
  20. package/fesm2020/ngx-color.mjs.map +1 -1
  21. package/hue.component.d.ts +1 -1
  22. package/{ngx-color.d.ts → index.d.ts} +0 -0
  23. package/package.json +6 -119
  24. package/raised.component.d.ts +1 -1
  25. package/saturation.component.d.ts +1 -1
  26. package/shade.component.d.ts +1 -1
  27. package/swatch.component.d.ts +1 -1
  28. package/alpha/alpha-picker.component.d.ts +0 -28
  29. package/alpha/ngx-color-alpha.d.ts +0 -5
  30. package/alpha/package.json +0 -17
  31. package/alpha/public_api.d.ts +0 -1
  32. package/block/block-swatches.component.d.ts +0 -24
  33. package/block/block.component.d.ts +0 -36
  34. package/block/ngx-color-block.d.ts +0 -5
  35. package/block/package.json +0 -16
  36. package/block/public_api.d.ts +0 -2
  37. package/chrome/chrome-fields.component.d.ts +0 -22
  38. package/chrome/chrome.component.d.ts +0 -25
  39. package/chrome/ngx-color-chrome.d.ts +0 -5
  40. package/chrome/package.json +0 -16
  41. package/chrome/public_api.d.ts +0 -2
  42. package/circle/circle-swatch.component.d.ts +0 -19
  43. package/circle/circle.component.d.ts +0 -32
  44. package/circle/ngx-color-circle.d.ts +0 -5
  45. package/circle/package.json +0 -19
  46. package/circle/public_api.d.ts +0 -2
  47. package/compact/compact-color.component.d.ts +0 -19
  48. package/compact/compact-fields.component.d.ts +0 -32
  49. package/compact/compact.component.d.ts +0 -30
  50. package/compact/ngx-color-compact.d.ts +0 -5
  51. package/compact/package.json +0 -16
  52. package/compact/public_api.d.ts +0 -3
  53. package/esm2020/alpha/alpha-picker.component.mjs +0 -116
  54. package/esm2020/alpha/ngx-color-alpha.mjs +0 -5
  55. package/esm2020/alpha/public_api.mjs +0 -2
  56. package/esm2020/block/block-swatches.component.mjs +0 -74
  57. package/esm2020/block/block.component.mjs +0 -199
  58. package/esm2020/block/ngx-color-block.mjs +0 -5
  59. package/esm2020/block/public_api.mjs +0 -3
  60. package/esm2020/chrome/chrome-fields.component.mjs +0 -356
  61. package/esm2020/chrome/chrome.component.mjs +0 -249
  62. package/esm2020/chrome/ngx-color-chrome.mjs +0 -5
  63. package/esm2020/chrome/public_api.mjs +0 -3
  64. package/esm2020/circle/circle-swatch.component.mjs +0 -85
  65. package/esm2020/circle/circle.component.mjs +0 -148
  66. package/esm2020/circle/ngx-color-circle.mjs +0 -5
  67. package/esm2020/circle/public_api.mjs +0 -3
  68. package/esm2020/compact/compact-color.component.mjs +0 -91
  69. package/esm2020/compact/compact-fields.component.mjs +0 -186
  70. package/esm2020/compact/compact.component.mjs +0 -177
  71. package/esm2020/compact/ngx-color-compact.mjs +0 -5
  72. package/esm2020/compact/public_api.mjs +0 -4
  73. package/esm2020/github/github-swatch.component.mjs +0 -67
  74. package/esm2020/github/github.component.mjs +0 -179
  75. package/esm2020/github/ngx-color-github.mjs +0 -5
  76. package/esm2020/github/public_api.mjs +0 -3
  77. package/esm2020/hue/hue-picker.component.mjs +0 -113
  78. package/esm2020/hue/ngx-color-hue.mjs +0 -5
  79. package/esm2020/hue/public_api.mjs +0 -2
  80. package/esm2020/material/material.component.mjs +0 -211
  81. package/esm2020/material/ngx-color-material.mjs +0 -5
  82. package/esm2020/material/public_api.mjs +0 -2
  83. package/esm2020/photoshop/ngx-color-photoshop.mjs +0 -5
  84. package/esm2020/photoshop/photoshop-button.component.mjs +0 -63
  85. package/esm2020/photoshop/photoshop-fields.component.mjs +0 -241
  86. package/esm2020/photoshop/photoshop-previews.component.mjs +0 -68
  87. package/esm2020/photoshop/photoshop.component.mjs +0 -258
  88. package/esm2020/photoshop/public_api.mjs +0 -5
  89. package/esm2020/shade/ngx-color-shade.mjs +0 -5
  90. package/esm2020/shade/public_api.mjs +0 -2
  91. package/esm2020/shade/shade-picker.component.mjs +0 -105
  92. package/esm2020/sketch/ngx-color-sketch.mjs +0 -5
  93. package/esm2020/sketch/public_api.mjs +0 -4
  94. package/esm2020/sketch/sketch-fields.component.mjs +0 -243
  95. package/esm2020/sketch/sketch-preset-colors.component.mjs +0 -98
  96. package/esm2020/sketch/sketch.component.mjs +0 -283
  97. package/esm2020/slider/ngx-color-slider.mjs +0 -5
  98. package/esm2020/slider/public_api.mjs +0 -4
  99. package/esm2020/slider/slider-swatch.component.mjs +0 -80
  100. package/esm2020/slider/slider-swatches.component.mjs +0 -135
  101. package/esm2020/slider/slider.component.mjs +0 -116
  102. package/esm2020/swatches/ngx-color-swatches.mjs +0 -5
  103. package/esm2020/swatches/public_api.mjs +0 -4
  104. package/esm2020/swatches/swatches-color.component.mjs +0 -123
  105. package/esm2020/swatches/swatches-group.component.mjs +0 -64
  106. package/esm2020/swatches/swatches.component.mjs +0 -258
  107. package/esm2020/twitter/ngx-color-twitter.mjs +0 -5
  108. package/esm2020/twitter/public_api.mjs +0 -2
  109. package/esm2020/twitter/twitter.component.mjs +0 -255
  110. package/fesm2015/ngx-color-alpha.mjs +0 -123
  111. package/fesm2015/ngx-color-alpha.mjs.map +0 -1
  112. package/fesm2015/ngx-color-block.mjs +0 -275
  113. package/fesm2015/ngx-color-block.mjs.map +0 -1
  114. package/fesm2015/ngx-color-chrome.mjs +0 -606
  115. package/fesm2015/ngx-color-chrome.mjs.map +0 -1
  116. package/fesm2015/ngx-color-circle.mjs +0 -237
  117. package/fesm2015/ngx-color-circle.mjs.map +0 -1
  118. package/fesm2015/ngx-color-compact.mjs +0 -451
  119. package/fesm2015/ngx-color-compact.mjs.map +0 -1
  120. package/fesm2015/ngx-color-github.mjs +0 -250
  121. package/fesm2015/ngx-color-github.mjs.map +0 -1
  122. package/fesm2015/ngx-color-hue.mjs +0 -120
  123. package/fesm2015/ngx-color-hue.mjs.map +0 -1
  124. package/fesm2015/ngx-color-material.mjs +0 -218
  125. package/fesm2015/ngx-color-material.mjs.map +0 -1
  126. package/fesm2015/ngx-color-photoshop.mjs +0 -626
  127. package/fesm2015/ngx-color-photoshop.mjs.map +0 -1
  128. package/fesm2015/ngx-color-shade.mjs +0 -112
  129. package/fesm2015/ngx-color-shade.mjs.map +0 -1
  130. package/fesm2015/ngx-color-sketch.mjs +0 -620
  131. package/fesm2015/ngx-color-sketch.mjs.map +0 -1
  132. package/fesm2015/ngx-color-slider.mjs +0 -331
  133. package/fesm2015/ngx-color-slider.mjs.map +0 -1
  134. package/fesm2015/ngx-color-swatches.mjs +0 -441
  135. package/fesm2015/ngx-color-swatches.mjs.map +0 -1
  136. package/fesm2015/ngx-color-twitter.mjs +0 -262
  137. package/fesm2015/ngx-color-twitter.mjs.map +0 -1
  138. package/fesm2020/ngx-color-alpha.mjs +0 -123
  139. package/fesm2020/ngx-color-alpha.mjs.map +0 -1
  140. package/fesm2020/ngx-color-block.mjs +0 -275
  141. package/fesm2020/ngx-color-block.mjs.map +0 -1
  142. package/fesm2020/ngx-color-chrome.mjs +0 -606
  143. package/fesm2020/ngx-color-chrome.mjs.map +0 -1
  144. package/fesm2020/ngx-color-circle.mjs +0 -237
  145. package/fesm2020/ngx-color-circle.mjs.map +0 -1
  146. package/fesm2020/ngx-color-compact.mjs +0 -451
  147. package/fesm2020/ngx-color-compact.mjs.map +0 -1
  148. package/fesm2020/ngx-color-github.mjs +0 -250
  149. package/fesm2020/ngx-color-github.mjs.map +0 -1
  150. package/fesm2020/ngx-color-hue.mjs +0 -120
  151. package/fesm2020/ngx-color-hue.mjs.map +0 -1
  152. package/fesm2020/ngx-color-material.mjs +0 -218
  153. package/fesm2020/ngx-color-material.mjs.map +0 -1
  154. package/fesm2020/ngx-color-photoshop.mjs +0 -626
  155. package/fesm2020/ngx-color-photoshop.mjs.map +0 -1
  156. package/fesm2020/ngx-color-shade.mjs +0 -112
  157. package/fesm2020/ngx-color-shade.mjs.map +0 -1
  158. package/fesm2020/ngx-color-sketch.mjs +0 -620
  159. package/fesm2020/ngx-color-sketch.mjs.map +0 -1
  160. package/fesm2020/ngx-color-slider.mjs +0 -331
  161. package/fesm2020/ngx-color-slider.mjs.map +0 -1
  162. package/fesm2020/ngx-color-swatches.mjs +0 -441
  163. package/fesm2020/ngx-color-swatches.mjs.map +0 -1
  164. package/fesm2020/ngx-color-twitter.mjs +0 -262
  165. package/fesm2020/ngx-color-twitter.mjs.map +0 -1
  166. package/github/github-swatch.component.d.ts +0 -19
  167. package/github/github.component.d.ts +0 -28
  168. package/github/ngx-color-github.d.ts +0 -5
  169. package/github/package.json +0 -16
  170. package/github/public_api.d.ts +0 -2
  171. package/hue/hue-picker.component.d.ts +0 -29
  172. package/hue/ngx-color-hue.d.ts +0 -5
  173. package/hue/package.json +0 -15
  174. package/hue/public_api.d.ts +0 -1
  175. package/material/material.component.d.ts +0 -39
  176. package/material/ngx-color-material.d.ts +0 -5
  177. package/material/package.json +0 -15
  178. package/material/public_api.d.ts +0 -1
  179. package/photoshop/ngx-color-photoshop.d.ts +0 -5
  180. package/photoshop/package.json +0 -15
  181. package/photoshop/photoshop-button.component.d.ts +0 -9
  182. package/photoshop/photoshop-fields.component.d.ts +0 -22
  183. package/photoshop/photoshop-previews.component.d.ts +0 -11
  184. package/photoshop/photoshop.component.d.ts +0 -33
  185. package/photoshop/public_api.d.ts +0 -4
  186. package/shade/ngx-color-shade.d.ts +0 -5
  187. package/shade/package.json +0 -17
  188. package/shade/public_api.d.ts +0 -1
  189. package/shade/shade-picker.component.d.ts +0 -27
  190. package/sketch/ngx-color-sketch.d.ts +0 -5
  191. package/sketch/package.json +0 -15
  192. package/sketch/public_api.d.ts +0 -3
  193. package/sketch/sketch-fields.component.d.ts +0 -23
  194. package/sketch/sketch-preset-colors.component.d.ts +0 -24
  195. package/sketch/sketch.component.d.ts +0 -32
  196. package/slider/ngx-color-slider.d.ts +0 -5
  197. package/slider/package.json +0 -15
  198. package/slider/public_api.d.ts +0 -3
  199. package/slider/slider-swatch.component.d.ts +0 -16
  200. package/slider/slider-swatches.component.d.ts +0 -15
  201. package/slider/slider.component.d.ts +0 -22
  202. package/swatches/ngx-color-swatches.d.ts +0 -5
  203. package/swatches/package.json +0 -18
  204. package/swatches/public_api.d.ts +0 -3
  205. package/swatches/swatches-color.component.d.ts +0 -18
  206. package/swatches/swatches-group.component.d.ts +0 -10
  207. package/swatches/swatches.component.d.ts +0 -29
  208. package/twitter/ngx-color-twitter.d.ts +0 -5
  209. package/twitter/package.json +0 -15
  210. package/twitter/public_api.d.ts +0 -1
  211. package/twitter/twitter.component.d.ts +0 -31
@@ -1,620 +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 { isValidHex, ColorWrap, AlphaModule, CheckboardModule, EditableInputModule, HueModule, SaturationModule, SwatchModule } from 'ngx-color';
5
- import { TinyColor } from '@ctrl/tinycolor';
6
- import * as i2 from '@angular/common';
7
- import { CommonModule } from '@angular/common';
8
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
9
-
10
- class SketchFieldsComponent {
11
- constructor() {
12
- this.disableAlpha = false;
13
- this.onChange = new EventEmitter();
14
- this.input = {
15
- width: '100%',
16
- padding: '4px 10% 3px',
17
- border: 'none',
18
- boxSizing: 'border-box',
19
- boxShadow: 'inset 0 0 0 1px #ccc',
20
- fontSize: '11px',
21
- };
22
- this.label = {
23
- display: 'block',
24
- textAlign: 'center',
25
- fontSize: '11px',
26
- color: '#222',
27
- paddingTop: '3px',
28
- paddingBottom: '4px',
29
- textTransform: 'capitalize',
30
- };
31
- }
32
- round(value) {
33
- return Math.round(value);
34
- }
35
- handleChange({ data, $event }) {
36
- if (data.hex) {
37
- if (isValidHex(data.hex)) {
38
- const color = new TinyColor(data.hex);
39
- this.onChange.emit({
40
- data: {
41
- hex: this.disableAlpha || data.hex.length <= 6 ? color.toHex() : color.toHex8(),
42
- source: 'hex',
43
- },
44
- $event,
45
- });
46
- }
47
- }
48
- else if (data.r || data.g || data.b) {
49
- this.onChange.emit({
50
- data: {
51
- r: data.r || this.rgb.r,
52
- g: data.g || this.rgb.g,
53
- b: data.b || this.rgb.b,
54
- source: 'rgb',
55
- },
56
- $event,
57
- });
58
- }
59
- else if (data.a) {
60
- if (data.a < 0) {
61
- data.a = 0;
62
- }
63
- else if (data.a > 100) {
64
- data.a = 100;
65
- }
66
- data.a /= 100;
67
- if (this.disableAlpha) {
68
- data.a = 1;
69
- }
70
- this.onChange.emit({
71
- data: {
72
- h: this.hsl.h,
73
- s: this.hsl.s,
74
- l: this.hsl.l,
75
- a: Math.round(data.a * 100) / 100,
76
- source: 'rgb',
77
- },
78
- $event,
79
- });
80
- }
81
- else if (data.h || data.s || data.l) {
82
- this.onChange.emit({
83
- data: {
84
- h: data.h || this.hsl.h,
85
- s: Number((data.s && data.s) || this.hsl.s),
86
- l: Number((data.l && data.l) || this.hsl.l),
87
- source: 'hsl',
88
- },
89
- $event,
90
- });
91
- }
92
- }
93
- }
94
- SketchFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SketchFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
95
- SketchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SketchFieldsComponent, selector: "color-sketch-fields", inputs: { hsl: "hsl", rgb: "rgb", hex: "hex", disableAlpha: "disableAlpha" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
96
- <div class="sketch-fields">
97
- <div class="sketch-double">
98
- <color-editable-input
99
- [style]="{ input: input, label: label }"
100
- label="hex"
101
- [value]="hex.replace('#', '')"
102
- (onChange)="handleChange($event)"
103
- ></color-editable-input>
104
- </div>
105
- <div class="sketch-single">
106
- <color-editable-input
107
- [style]="{ input: input, label: label }"
108
- label="r"
109
- [value]="rgb.r"
110
- (onChange)="handleChange($event)"
111
- [dragLabel]="true"
112
- [dragMax]="255"
113
- ></color-editable-input>
114
- </div>
115
- <div class="sketch-single">
116
- <color-editable-input
117
- [style]="{ input: input, label: label }"
118
- label="g"
119
- [value]="rgb.g"
120
- (onChange)="handleChange($event)"
121
- [dragLabel]="true"
122
- [dragMax]="255"
123
- ></color-editable-input>
124
- </div>
125
- <div class="sketch-single">
126
- <color-editable-input
127
- [style]="{ input: input, label: label }"
128
- label="b"
129
- [value]="rgb.b"
130
- (onChange)="handleChange($event)"
131
- [dragLabel]="true"
132
- [dragMax]="255"
133
- ></color-editable-input>
134
- </div>
135
- <div class="sketch-alpha" *ngIf="disableAlpha === false">
136
- <color-editable-input
137
- [style]="{ input: input, label: label }"
138
- label="a"
139
- [value]="round(rgb.a * 100)"
140
- (onChange)="handleChange($event)"
141
- [dragLabel]="true"
142
- [dragMax]="100"
143
- ></color-editable-input>
144
- </div>
145
- </div>
146
- `, isInline: true, styles: [".sketch-fields{display:flex;padding-top:4px}.sketch-double{flex:2 1 0%}.sketch-single{flex:1 1 0%;padding-left:6px}.sketch-alpha{flex:1 1 0%;padding-left:6px}:host-context([dir=rtl]) .sketch-single{padding-right:6px;padding-left:0}:host-context([dir=rtl]) .sketch-alpha{padding-right:6px;padding-left:0}\n"], components: [{ type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
147
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SketchFieldsComponent, decorators: [{
148
- type: Component,
149
- args: [{
150
- selector: 'color-sketch-fields',
151
- template: `
152
- <div class="sketch-fields">
153
- <div class="sketch-double">
154
- <color-editable-input
155
- [style]="{ input: input, label: label }"
156
- label="hex"
157
- [value]="hex.replace('#', '')"
158
- (onChange)="handleChange($event)"
159
- ></color-editable-input>
160
- </div>
161
- <div class="sketch-single">
162
- <color-editable-input
163
- [style]="{ input: input, label: label }"
164
- label="r"
165
- [value]="rgb.r"
166
- (onChange)="handleChange($event)"
167
- [dragLabel]="true"
168
- [dragMax]="255"
169
- ></color-editable-input>
170
- </div>
171
- <div class="sketch-single">
172
- <color-editable-input
173
- [style]="{ input: input, label: label }"
174
- label="g"
175
- [value]="rgb.g"
176
- (onChange)="handleChange($event)"
177
- [dragLabel]="true"
178
- [dragMax]="255"
179
- ></color-editable-input>
180
- </div>
181
- <div class="sketch-single">
182
- <color-editable-input
183
- [style]="{ input: input, label: label }"
184
- label="b"
185
- [value]="rgb.b"
186
- (onChange)="handleChange($event)"
187
- [dragLabel]="true"
188
- [dragMax]="255"
189
- ></color-editable-input>
190
- </div>
191
- <div class="sketch-alpha" *ngIf="disableAlpha === false">
192
- <color-editable-input
193
- [style]="{ input: input, label: label }"
194
- label="a"
195
- [value]="round(rgb.a * 100)"
196
- (onChange)="handleChange($event)"
197
- [dragLabel]="true"
198
- [dragMax]="100"
199
- ></color-editable-input>
200
- </div>
201
- </div>
202
- `,
203
- styles: [
204
- `
205
- .sketch-fields {
206
- display: flex;
207
- padding-top: 4px;
208
- }
209
- .sketch-double {
210
- -webkit-box-flex: 2;
211
- flex: 2 1 0%;
212
- }
213
- .sketch-single {
214
- flex: 1 1 0%;
215
- padding-left: 6px;
216
- }
217
- .sketch-alpha {
218
- -webkit-box-flex: 1;
219
- flex: 1 1 0%;
220
- padding-left: 6px;
221
- }
222
- :host-context([dir=rtl]) .sketch-single {
223
- padding-right: 6px;
224
- padding-left: 0;
225
- }
226
- :host-context([dir=rtl]) .sketch-alpha {
227
- padding-right: 6px;
228
- padding-left: 0;
229
- }
230
- `,
231
- ],
232
- changeDetection: ChangeDetectionStrategy.OnPush,
233
- preserveWhitespaces: false,
234
- }]
235
- }], propDecorators: { hsl: [{
236
- type: Input
237
- }], rgb: [{
238
- type: Input
239
- }], hex: [{
240
- type: Input
241
- }], disableAlpha: [{
242
- type: Input
243
- }], onChange: [{
244
- type: Output
245
- }] } });
246
-
247
- class SketchPresetColorsComponent {
248
- constructor() {
249
- this.onClick = new EventEmitter();
250
- this.onSwatchHover = new EventEmitter();
251
- this.swatchStyle = {
252
- borderRadius: '3px',
253
- boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)',
254
- };
255
- }
256
- handleClick({ hex, $event }) {
257
- this.onClick.emit({ hex, $event });
258
- }
259
- normalizeValue(val) {
260
- if (typeof val === 'string') {
261
- return { color: val };
262
- }
263
- return val;
264
- }
265
- focusStyle(val) {
266
- const c = this.normalizeValue(val);
267
- return {
268
- boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,
269
- };
270
- }
271
- }
272
- SketchPresetColorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SketchPresetColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
273
- SketchPresetColorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SketchPresetColorsComponent, selector: "color-sketch-preset-colors", inputs: { colors: "colors" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
274
- <div class="sketch-swatches">
275
- <div class="sketch-wrap" *ngFor="let c of colors">
276
- <color-swatch
277
- [color]="normalizeValue(c).color"
278
- [style]="swatchStyle"
279
- [focusStyle]="focusStyle(c)"
280
- (onClick)="handleClick($event)"
281
- (onHover)="onSwatchHover.emit($event)"
282
- class="swatch"
283
- ></color-swatch>
284
- </div>
285
- </div>
286
- `, isInline: true, styles: [".sketch-swatches{position:relative;display:flex;flex-wrap:wrap;margin:0 -10px;padding:10px 0 0 10px;border-top:1px solid rgb(238,238,238)}.sketch-wrap{width:16px;height:16px;margin:0 10px 10px 0}:host-context([dir=rtl]) .sketch-swatches{padding-right:10px;padding-left:0}:host-context([dir=rtl]) .sketch-wrap{margin-left:10px;margin-right:0}\n"], components: [{ type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
287
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SketchPresetColorsComponent, decorators: [{
288
- type: Component,
289
- args: [{
290
- selector: 'color-sketch-preset-colors',
291
- template: `
292
- <div class="sketch-swatches">
293
- <div class="sketch-wrap" *ngFor="let c of colors">
294
- <color-swatch
295
- [color]="normalizeValue(c).color"
296
- [style]="swatchStyle"
297
- [focusStyle]="focusStyle(c)"
298
- (onClick)="handleClick($event)"
299
- (onHover)="onSwatchHover.emit($event)"
300
- class="swatch"
301
- ></color-swatch>
302
- </div>
303
- </div>
304
- `,
305
- styles: [
306
- `
307
- .sketch-swatches {
308
- position: relative;
309
- display: flex;
310
- flex-wrap: wrap;
311
- margin: 0px -10px;
312
- padding: 10px 0px 0px 10px;
313
- border-top: 1px solid rgb(238, 238, 238);
314
- }
315
- .sketch-wrap {
316
- width: 16px;
317
- height: 16px;
318
- margin: 0px 10px 10px 0px;
319
- }
320
- :host-context([dir=rtl]) .sketch-swatches {
321
- padding-right: 10px;
322
- padding-left: 0;
323
- }
324
- :host-context([dir=rtl]) .sketch-wrap {
325
- margin-left: 10px;
326
- margin-right: 0;
327
- }
328
- `,
329
- ],
330
- changeDetection: ChangeDetectionStrategy.OnPush,
331
- preserveWhitespaces: false,
332
- }]
333
- }], propDecorators: { colors: [{
334
- type: Input
335
- }], onClick: [{
336
- type: Output
337
- }], onSwatchHover: [{
338
- type: Output
339
- }] } });
340
-
341
- class SketchComponent extends ColorWrap {
342
- constructor() {
343
- super();
344
- /** Remove alpha slider and options from picker */
345
- this.disableAlpha = false;
346
- /** Hex strings for default colors at bottom of picker */
347
- this.presetColors = [
348
- '#D0021B',
349
- '#F5A623',
350
- '#F8E71C',
351
- '#8B572A',
352
- '#7ED321',
353
- '#417505',
354
- '#BD10E0',
355
- '#9013FE',
356
- '#4A90E2',
357
- '#50E3C2',
358
- '#B8E986',
359
- '#000000',
360
- '#4A4A4A',
361
- '#9B9B9B',
362
- '#FFFFFF',
363
- ];
364
- /** Width of picker */
365
- this.width = 200;
366
- }
367
- afterValidChange() {
368
- const alpha = this.disableAlpha ? 1 : this.rgb.a;
369
- this.activeBackground = `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${alpha})`;
370
- }
371
- handleValueChange({ data, $event }) {
372
- this.handleChange(data, $event);
373
- }
374
- handleBlockChange({ hex, $event }) {
375
- if (isValidHex(hex)) {
376
- // this.hex = hex;
377
- this.handleChange({
378
- hex,
379
- source: 'hex',
380
- }, $event);
381
- }
382
- }
383
- }
384
- SketchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SketchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
385
- SketchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SketchComponent, selector: "color-sketch", inputs: { disableAlpha: "disableAlpha", presetColors: "presetColors", width: "width" }, providers: [
386
- {
387
- provide: NG_VALUE_ACCESSOR,
388
- useExisting: forwardRef(() => SketchComponent),
389
- multi: true,
390
- },
391
- {
392
- provide: ColorWrap,
393
- useExisting: forwardRef(() => SketchComponent),
394
- },
395
- ], usesInheritance: true, ngImport: i0, template: `
396
- <div class="sketch-picker {{ className }}" [style.width]="width">
397
- <div class="sketch-saturation">
398
- <color-saturation [hsl]="hsl" [hsv]="hsv"
399
- (onChange)="handleValueChange($event)"
400
- >
401
- </color-saturation>
402
- </div>
403
- <div class="sketch-controls">
404
- <div class="sketch-sliders">
405
- <div class="sketch-hue">
406
- <color-hue [hsl]="hsl"
407
- (onChange)="handleValueChange($event)"
408
- ></color-hue>
409
- </div>
410
- <div class="sketch-alpha" *ngIf="disableAlpha === false">
411
- <color-alpha
412
- [radius]="2" [rgb]="rgb" [hsl]="hsl"
413
- (onChange)="handleValueChange($event)"
414
- ></color-alpha>
415
- </div>
416
- </div>
417
- <div class="sketch-color">
418
- <color-checkboard></color-checkboard>
419
- <div class="sketch-active" [style.background]="activeBackground"></div>
420
- </div>
421
- </div>
422
- <div class="sketch-fields-container">
423
- <color-sketch-fields
424
- [rgb]="rgb" [hsl]="hsl" [hex]="hex"
425
- [disableAlpha]="disableAlpha"
426
- (onChange)="handleValueChange($event)"
427
- ></color-sketch-fields>
428
- </div>
429
- <div class="sketch-swatches-container" *ngIf="presetColors && presetColors.length">
430
- <color-sketch-preset-colors
431
- [colors]="presetColors"
432
- (onClick)="handleBlockChange($event)"
433
- (onSwatchHover)="onSwatchHover.emit($event)"
434
- ></color-sketch-preset-colors>
435
- </div>
436
- </div>
437
- `, isInline: true, styles: [".sketch-picker{padding:10px 10px 3px;box-sizing:initial;background:#fff;border-radius:4px;box-shadow:0 0 0 1px #00000026,0 8px 16px #00000026}.sketch-saturation{width:100%;padding-bottom:75%;position:relative;overflow:hidden}.sketch-fields-container{display:block}.sketch-swatches-container{display:block}.sketch-controls{display:flex}.sketch-sliders{padding:4px 0;flex:1 1 0%}.sketch-hue{position:relative;height:10px;overflow:hidden}.sketch-alpha{position:relative;height:10px;margin-top:4px;overflow:hidden}.sketch-color{width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;border-radius:3px}.sketch-active{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-radius:2px;box-shadow:#00000026 0 0 0 1px inset,#00000040 0 0 4px inset}:host-context([dir=rtl]) .sketch-color{margin-right:4px;margin-left:0}\n"], components: [{ type: i0.forwardRef(function () { return i1.SaturationComponent; }), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return i1.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return i1.AlphaComponent; }), selector: "color-alpha", inputs: ["hsl", "rgb", "pointer", "shadow", "radius", "direction"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return i1.CheckboardComponent; }), selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { type: i0.forwardRef(function () { return SketchFieldsComponent; }), selector: "color-sketch-fields", inputs: ["hsl", "rgb", "hex", "disableAlpha"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return SketchPresetColorsComponent; }), selector: "color-sketch-preset-colors", inputs: ["colors"], outputs: ["onClick", "onSwatchHover"] }], directives: [{ type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
438
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SketchComponent, decorators: [{
439
- type: Component,
440
- args: [{
441
- selector: 'color-sketch',
442
- template: `
443
- <div class="sketch-picker {{ className }}" [style.width]="width">
444
- <div class="sketch-saturation">
445
- <color-saturation [hsl]="hsl" [hsv]="hsv"
446
- (onChange)="handleValueChange($event)"
447
- >
448
- </color-saturation>
449
- </div>
450
- <div class="sketch-controls">
451
- <div class="sketch-sliders">
452
- <div class="sketch-hue">
453
- <color-hue [hsl]="hsl"
454
- (onChange)="handleValueChange($event)"
455
- ></color-hue>
456
- </div>
457
- <div class="sketch-alpha" *ngIf="disableAlpha === false">
458
- <color-alpha
459
- [radius]="2" [rgb]="rgb" [hsl]="hsl"
460
- (onChange)="handleValueChange($event)"
461
- ></color-alpha>
462
- </div>
463
- </div>
464
- <div class="sketch-color">
465
- <color-checkboard></color-checkboard>
466
- <div class="sketch-active" [style.background]="activeBackground"></div>
467
- </div>
468
- </div>
469
- <div class="sketch-fields-container">
470
- <color-sketch-fields
471
- [rgb]="rgb" [hsl]="hsl" [hex]="hex"
472
- [disableAlpha]="disableAlpha"
473
- (onChange)="handleValueChange($event)"
474
- ></color-sketch-fields>
475
- </div>
476
- <div class="sketch-swatches-container" *ngIf="presetColors && presetColors.length">
477
- <color-sketch-preset-colors
478
- [colors]="presetColors"
479
- (onClick)="handleBlockChange($event)"
480
- (onSwatchHover)="onSwatchHover.emit($event)"
481
- ></color-sketch-preset-colors>
482
- </div>
483
- </div>
484
- `,
485
- styles: [
486
- `
487
- .sketch-picker {
488
- padding: 10px 10px 3px;
489
- box-sizing: initial;
490
- background: #fff;
491
- border-radius: 4px;
492
- box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);
493
- }
494
- .sketch-saturation {
495
- width: 100%;
496
- padding-bottom: 75%;
497
- position: relative;
498
- overflow: hidden;
499
- }
500
- .sketch-fields-container {
501
- display: block;
502
- }
503
- .sketch-swatches-container {
504
- display: block;
505
- }
506
- .sketch-controls {
507
- display: flex;
508
- }
509
- .sketch-sliders {
510
- padding: 4px 0px;
511
- -webkit-box-flex: 1;
512
- flex: 1 1 0%;
513
- }
514
- .sketch-hue {
515
- position: relative;
516
- height: 10px;
517
- overflow: hidden;
518
- }
519
- .sketch-alpha {
520
- position: relative;
521
- height: 10px;
522
- margin-top: 4px;
523
- overflow: hidden;
524
- }
525
- .sketch-color {
526
- width: 24px;
527
- height: 24px;
528
- position: relative;
529
- margin-top: 4px;
530
- margin-left: 4px;
531
- border-radius: 3px;
532
- }
533
- .sketch-active {
534
- position: absolute;
535
- top: 0px;
536
- right: 0px;
537
- bottom: 0px;
538
- left: 0px;
539
- border-radius: 2px;
540
- box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset;
541
- }
542
- :host-context([dir=rtl]) .sketch-color {
543
- margin-right: 4px;
544
- margin-left: 0;
545
- }
546
- `,
547
- ],
548
- changeDetection: ChangeDetectionStrategy.OnPush,
549
- preserveWhitespaces: false,
550
- providers: [
551
- {
552
- provide: NG_VALUE_ACCESSOR,
553
- useExisting: forwardRef(() => SketchComponent),
554
- multi: true,
555
- },
556
- {
557
- provide: ColorWrap,
558
- useExisting: forwardRef(() => SketchComponent),
559
- },
560
- ]
561
- }]
562
- }], ctorParameters: function () { return []; }, propDecorators: { disableAlpha: [{
563
- type: Input
564
- }], presetColors: [{
565
- type: Input
566
- }], width: [{
567
- type: Input
568
- }] } });
569
- class ColorSketchModule {
570
- }
571
- ColorSketchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSketchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
572
- ColorSketchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSketchModule, declarations: [SketchComponent, SketchFieldsComponent,
573
- SketchPresetColorsComponent], imports: [CommonModule,
574
- AlphaModule,
575
- CheckboardModule,
576
- EditableInputModule,
577
- HueModule,
578
- SaturationModule,
579
- SwatchModule], exports: [SketchComponent, SketchFieldsComponent,
580
- SketchPresetColorsComponent] });
581
- ColorSketchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSketchModule, imports: [[
582
- CommonModule,
583
- AlphaModule,
584
- CheckboardModule,
585
- EditableInputModule,
586
- HueModule,
587
- SaturationModule,
588
- SwatchModule,
589
- ]] });
590
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSketchModule, decorators: [{
591
- type: NgModule,
592
- args: [{
593
- declarations: [
594
- SketchComponent,
595
- SketchFieldsComponent,
596
- SketchPresetColorsComponent,
597
- ],
598
- exports: [
599
- SketchComponent,
600
- SketchFieldsComponent,
601
- SketchPresetColorsComponent,
602
- ],
603
- imports: [
604
- CommonModule,
605
- AlphaModule,
606
- CheckboardModule,
607
- EditableInputModule,
608
- HueModule,
609
- SaturationModule,
610
- SwatchModule,
611
- ],
612
- }]
613
- }] });
614
-
615
- /**
616
- * Generated bundle index. Do not edit.
617
- */
618
-
619
- export { ColorSketchModule, SketchComponent, SketchFieldsComponent, SketchPresetColorsComponent };
620
- //# sourceMappingURL=ngx-color-sketch.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ngx-color-sketch.mjs","sources":["../../src/lib/sketch/sketch-fields.component.ts","../../src/lib/sketch/sketch-preset-colors.component.ts","../../src/lib/sketch/sketch.component.ts","../../src/lib/sketch/ngx-color-sketch.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\nimport { isValidHex, HSLA, RGBA } from 'ngx-color';\nimport { TinyColor } from '@ctrl/tinycolor';\n\n@Component({\n selector: 'color-sketch-fields',\n template: `\n <div class=\"sketch-fields\">\n <div class=\"sketch-double\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"hex\"\n [value]=\"hex.replace('#', '')\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"sketch-single\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"r\"\n [value]=\"rgb.r\"\n (onChange)=\"handleChange($event)\"\n [dragLabel]=\"true\"\n [dragMax]=\"255\"\n ></color-editable-input>\n </div>\n <div class=\"sketch-single\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"g\"\n [value]=\"rgb.g\"\n (onChange)=\"handleChange($event)\"\n [dragLabel]=\"true\"\n [dragMax]=\"255\"\n ></color-editable-input>\n </div>\n <div class=\"sketch-single\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"b\"\n [value]=\"rgb.b\"\n (onChange)=\"handleChange($event)\"\n [dragLabel]=\"true\"\n [dragMax]=\"255\"\n ></color-editable-input>\n </div>\n <div class=\"sketch-alpha\" *ngIf=\"disableAlpha === false\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"a\"\n [value]=\"round(rgb.a * 100)\"\n (onChange)=\"handleChange($event)\"\n [dragLabel]=\"true\"\n [dragMax]=\"100\"\n ></color-editable-input>\n </div>\n </div>\n `,\n styles: [\n `\n .sketch-fields {\n display: flex;\n padding-top: 4px;\n }\n .sketch-double {\n -webkit-box-flex: 2;\n flex: 2 1 0%;\n }\n .sketch-single {\n flex: 1 1 0%;\n padding-left: 6px;\n }\n .sketch-alpha {\n -webkit-box-flex: 1;\n flex: 1 1 0%;\n padding-left: 6px;\n }\n :host-context([dir=rtl]) .sketch-single {\n padding-right: 6px;\n padding-left: 0;\n }\n :host-context([dir=rtl]) .sketch-alpha {\n padding-right: 6px;\n padding-left: 0;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class SketchFieldsComponent {\n @Input() hsl!: HSLA;\n @Input() rgb!: RGBA;\n @Input() hex!: string;\n @Input() disableAlpha = false;\n @Output() onChange = new EventEmitter<any>();\n input: {[key: string]: string} = {\n width: '100%',\n padding: '4px 10% 3px',\n border: 'none',\n boxSizing: 'border-box',\n boxShadow: 'inset 0 0 0 1px #ccc',\n fontSize: '11px',\n };\n label: {[key: string]: string} = {\n display: 'block',\n textAlign: 'center',\n fontSize: '11px',\n color: '#222',\n paddingTop: '3px',\n paddingBottom: '4px',\n textTransform: 'capitalize',\n };\n\n round(value) {\n return Math.round(value);\n }\n handleChange({ data, $event }) {\n if (data.hex) {\n if (isValidHex(data.hex)) {\n const color = new TinyColor(data.hex);\n this.onChange.emit({\n data: {\n hex: this.disableAlpha || data.hex.length <= 6 ? color.toHex() : color.toHex8(),\n source: 'hex',\n },\n $event,\n });\n }\n } else if (data.r || data.g || data.b) {\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 } else if (data.a) {\n if (data.a < 0) {\n data.a = 0;\n } else if (data.a > 100) {\n data.a = 100;\n }\n data.a /= 100;\n\n if (this.disableAlpha) {\n data.a = 1;\n }\n\n this.onChange.emit({\n data: {\n h: this.hsl.h,\n s: this.hsl.s,\n l: this.hsl.l,\n a: Math.round(data.a * 100) / 100,\n source: 'rgb',\n },\n $event,\n });\n } else if (data.h || data.s || data.l) {\n this.onChange.emit({\n data: {\n h: data.h || this.hsl.h,\n s: Number((data.s && data.s) || this.hsl.s),\n l: Number((data.l && data.l) || this.hsl.l),\n source: 'hsl',\n },\n $event,\n });\n }\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\nimport { Shape } from 'ngx-color';\n\n@Component({\n selector: 'color-sketch-preset-colors',\n template: `\n <div class=\"sketch-swatches\">\n <div class=\"sketch-wrap\" *ngFor=\"let c of colors\">\n <color-swatch\n [color]=\"normalizeValue(c).color\"\n [style]=\"swatchStyle\"\n [focusStyle]=\"focusStyle(c)\"\n (onClick)=\"handleClick($event)\"\n (onHover)=\"onSwatchHover.emit($event)\"\n class=\"swatch\"\n ></color-swatch>\n </div>\n </div>\n `,\n styles: [\n `\n .sketch-swatches {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n margin: 0px -10px;\n padding: 10px 0px 0px 10px;\n border-top: 1px solid rgb(238, 238, 238);\n }\n .sketch-wrap {\n width: 16px;\n height: 16px;\n margin: 0px 10px 10px 0px;\n }\n :host-context([dir=rtl]) .sketch-swatches {\n padding-right: 10px;\n padding-left: 0;\n }\n :host-context([dir=rtl]) .sketch-wrap {\n margin-left: 10px;\n margin-right: 0;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class SketchPresetColorsComponent {\n @Input() colors!: string[];\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n swatchStyle = {\n borderRadius: '3px',\n boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)',\n };\n\n handleClick({ hex, $event }) {\n this.onClick.emit({ hex, $event });\n }\n normalizeValue(val: string | Shape) {\n if (typeof val === 'string') {\n return { color: val };\n }\n return val;\n }\n focusStyle(val: string | Shape) {\n const c = this.normalizeValue(val);\n return {\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,\n };\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport {\n AlphaModule,\n CheckboardModule,\n ColorWrap,\n EditableInputModule,\n HueModule,\n isValidHex,\n SaturationModule,\n SwatchModule,\n} from 'ngx-color';\nimport { SketchFieldsComponent } from './sketch-fields.component';\nimport { SketchPresetColorsComponent } from './sketch-preset-colors.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-sketch',\n template: `\n <div class=\"sketch-picker {{ className }}\" [style.width]=\"width\">\n <div class=\"sketch-saturation\">\n <color-saturation [hsl]=\"hsl\" [hsv]=\"hsv\"\n (onChange)=\"handleValueChange($event)\"\n >\n </color-saturation>\n </div>\n <div class=\"sketch-controls\">\n <div class=\"sketch-sliders\">\n <div class=\"sketch-hue\">\n <color-hue [hsl]=\"hsl\"\n (onChange)=\"handleValueChange($event)\"\n ></color-hue>\n </div>\n <div class=\"sketch-alpha\" *ngIf=\"disableAlpha === false\">\n <color-alpha\n [radius]=\"2\" [rgb]=\"rgb\" [hsl]=\"hsl\"\n (onChange)=\"handleValueChange($event)\"\n ></color-alpha>\n </div>\n </div>\n <div class=\"sketch-color\">\n <color-checkboard></color-checkboard>\n <div class=\"sketch-active\" [style.background]=\"activeBackground\"></div>\n </div>\n </div>\n <div class=\"sketch-fields-container\">\n <color-sketch-fields\n [rgb]=\"rgb\" [hsl]=\"hsl\" [hex]=\"hex\"\n [disableAlpha]=\"disableAlpha\"\n (onChange)=\"handleValueChange($event)\"\n ></color-sketch-fields>\n </div>\n <div class=\"sketch-swatches-container\" *ngIf=\"presetColors && presetColors.length\">\n <color-sketch-preset-colors\n [colors]=\"presetColors\"\n (onClick)=\"handleBlockChange($event)\"\n (onSwatchHover)=\"onSwatchHover.emit($event)\"\n ></color-sketch-preset-colors>\n </div>\n </div>\n `,\n styles: [\n `\n .sketch-picker {\n padding: 10px 10px 3px;\n box-sizing: initial;\n background: #fff;\n border-radius: 4px;\n box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);\n }\n .sketch-saturation {\n width: 100%;\n padding-bottom: 75%;\n position: relative;\n overflow: hidden;\n }\n .sketch-fields-container {\n display: block;\n }\n .sketch-swatches-container {\n display: block;\n }\n .sketch-controls {\n display: flex;\n }\n .sketch-sliders {\n padding: 4px 0px;\n -webkit-box-flex: 1;\n flex: 1 1 0%;\n }\n .sketch-hue {\n position: relative;\n height: 10px;\n overflow: hidden;\n }\n .sketch-alpha {\n position: relative;\n height: 10px;\n margin-top: 4px;\n overflow: hidden;\n }\n .sketch-color {\n width: 24px;\n height: 24px;\n position: relative;\n margin-top: 4px;\n margin-left: 4px;\n border-radius: 3px;\n }\n .sketch-active {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border-radius: 2px;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset;\n }\n :host-context([dir=rtl]) .sketch-color {\n margin-right: 4px;\n margin-left: 0;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SketchComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => SketchComponent),\n },\n ]\n})\nexport class SketchComponent extends ColorWrap {\n /** Remove alpha slider and options from picker */\n @Input() disableAlpha = false;\n /** Hex strings for default colors at bottom of picker */\n @Input() presetColors = [\n '#D0021B',\n '#F5A623',\n '#F8E71C',\n '#8B572A',\n '#7ED321',\n '#417505',\n '#BD10E0',\n '#9013FE',\n '#4A90E2',\n '#50E3C2',\n '#B8E986',\n '#000000',\n '#4A4A4A',\n '#9B9B9B',\n '#FFFFFF',\n ];\n /** Width of picker */\n @Input() width = 200;\n activeBackground!: string;\n constructor() {\n super();\n }\n afterValidChange() {\n const alpha = this.disableAlpha ? 1 : this.rgb.a;\n this.activeBackground = `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${alpha})`;\n }\n handleValueChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n handleBlockChange({ hex, $event }) {\n if (isValidHex(hex)) {\n // this.hex = hex;\n this.handleChange(\n {\n hex,\n source: 'hex',\n },\n $event,\n );\n }\n }\n}\n\n@NgModule({\n declarations: [\n SketchComponent,\n SketchFieldsComponent,\n SketchPresetColorsComponent,\n ],\n exports: [\n SketchComponent,\n SketchFieldsComponent,\n SketchPresetColorsComponent,\n ],\n imports: [\n CommonModule,\n AlphaModule,\n CheckboardModule,\n EditableInputModule,\n HueModule,\n SaturationModule,\n SwatchModule,\n ],\n})\nexport class ColorSketchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}