ngx-color 8.0.3 → 10.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 (200) 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 +2 -3
  16. package/editable-input.component.d.ts +1 -1
  17. package/{fesm2020 → fesm2022}/ngx-color-alpha.mjs +36 -38
  18. package/fesm2022/ngx-color-alpha.mjs.map +1 -0
  19. package/fesm2022/ngx-color-block.mjs +233 -0
  20. package/fesm2022/ngx-color-block.mjs.map +1 -0
  21. package/fesm2022/ngx-color-chrome.mjs +543 -0
  22. package/fesm2022/ngx-color-chrome.mjs.map +1 -0
  23. package/fesm2022/ngx-color-circle.mjs +223 -0
  24. package/fesm2022/ngx-color-circle.mjs.map +1 -0
  25. package/fesm2022/ngx-color-compact.mjs +403 -0
  26. package/fesm2022/ngx-color-compact.mjs.map +1 -0
  27. package/fesm2022/ngx-color-github.mjs +167 -0
  28. package/fesm2022/ngx-color-github.mjs.map +1 -0
  29. package/fesm2022/ngx-color-hue.mjs +109 -0
  30. package/fesm2022/ngx-color-hue.mjs.map +1 -0
  31. package/fesm2022/ngx-color-material.mjs +209 -0
  32. package/fesm2022/ngx-color-material.mjs.map +1 -0
  33. package/fesm2022/ngx-color-photoshop.mjs +475 -0
  34. package/fesm2022/ngx-color-photoshop.mjs.map +1 -0
  35. package/{fesm2015 → fesm2022}/ngx-color-shade.mjs +41 -35
  36. package/fesm2022/ngx-color-shade.mjs.map +1 -0
  37. package/fesm2022/ngx-color-sketch.mjs +491 -0
  38. package/fesm2022/ngx-color-sketch.mjs.map +1 -0
  39. package/fesm2022/ngx-color-slider.mjs +282 -0
  40. package/fesm2022/ngx-color-slider.mjs.map +1 -0
  41. package/fesm2022/ngx-color-swatches.mjs +293 -0
  42. package/fesm2022/ngx-color-swatches.mjs.map +1 -0
  43. package/fesm2022/ngx-color-twitter.mjs +169 -0
  44. package/fesm2022/ngx-color-twitter.mjs.map +1 -0
  45. package/{fesm2020 → fesm2022}/ngx-color.mjs +348 -264
  46. package/fesm2022/ngx-color.mjs.map +1 -0
  47. package/github/github-swatch.component.d.ts +1 -1
  48. package/github/github.component.d.ts +1 -1
  49. package/hue/hue-picker.component.d.ts +1 -1
  50. package/hue.component.d.ts +1 -1
  51. package/material/material.component.d.ts +1 -1
  52. package/package.json +29 -84
  53. package/photoshop/photoshop-button.component.d.ts +1 -1
  54. package/photoshop/photoshop-fields.component.d.ts +1 -1
  55. package/photoshop/photoshop-previews.component.d.ts +1 -1
  56. package/photoshop/photoshop.component.d.ts +1 -1
  57. package/raised.component.d.ts +2 -2
  58. package/saturation.component.d.ts +1 -1
  59. package/shade/shade-picker.component.d.ts +1 -1
  60. package/shade.component.d.ts +1 -1
  61. package/sketch/sketch-fields.component.d.ts +1 -1
  62. package/sketch/sketch-preset-colors.component.d.ts +1 -1
  63. package/sketch/sketch.component.d.ts +1 -1
  64. package/slider/slider-swatch.component.d.ts +1 -1
  65. package/slider/slider-swatches.component.d.ts +1 -1
  66. package/slider/slider.component.d.ts +1 -1
  67. package/swatch.component.d.ts +1 -1
  68. package/swatches/swatches-color.component.d.ts +1 -1
  69. package/swatches/swatches-group.component.d.ts +1 -1
  70. package/swatches/swatches.component.d.ts +1 -1
  71. package/twitter/twitter.component.d.ts +1 -1
  72. package/esm2020/alpha/alpha-picker.component.mjs +0 -100
  73. package/esm2020/alpha/ngx-color-alpha.mjs +0 -5
  74. package/esm2020/alpha/public_api.mjs +0 -2
  75. package/esm2020/alpha.component.mjs +0 -138
  76. package/esm2020/block/block-swatches.component.mjs +0 -63
  77. package/esm2020/block/block.component.mjs +0 -158
  78. package/esm2020/block/ngx-color-block.mjs +0 -5
  79. package/esm2020/block/public_api.mjs +0 -3
  80. package/esm2020/checkboard.component.mjs +0 -50
  81. package/esm2020/chrome/chrome-fields.component.mjs +0 -314
  82. package/esm2020/chrome/chrome.component.mjs +0 -184
  83. package/esm2020/chrome/ngx-color-chrome.mjs +0 -5
  84. package/esm2020/chrome/public_api.mjs +0 -3
  85. package/esm2020/circle/circle-swatch.component.mjs +0 -69
  86. package/esm2020/circle/circle.component.mjs +0 -134
  87. package/esm2020/circle/ngx-color-circle.mjs +0 -5
  88. package/esm2020/circle/public_api.mjs +0 -3
  89. package/esm2020/color-wrap.component.mjs +0 -163
  90. package/esm2020/compact/compact-color.component.mjs +0 -70
  91. package/esm2020/compact/compact-fields.component.mjs +0 -164
  92. package/esm2020/compact/compact.component.mjs +0 -154
  93. package/esm2020/compact/ngx-color-compact.mjs +0 -5
  94. package/esm2020/compact/public_api.mjs +0 -4
  95. package/esm2020/coordinates.directive.mjs +0 -104
  96. package/esm2020/editable-input.component.mjs +0 -199
  97. package/esm2020/github/github-swatch.component.mjs +0 -53
  98. package/esm2020/github/github.component.mjs +0 -112
  99. package/esm2020/github/ngx-color-github.mjs +0 -5
  100. package/esm2020/github/public_api.mjs +0 -3
  101. package/esm2020/helpers/checkboard.mjs +0 -33
  102. package/esm2020/helpers/color.interfaces.mjs +0 -2
  103. package/esm2020/helpers/color.mjs +0 -60
  104. package/esm2020/hue/hue-picker.component.mjs +0 -100
  105. package/esm2020/hue/ngx-color-hue.mjs +0 -5
  106. package/esm2020/hue/public_api.mjs +0 -2
  107. package/esm2020/hue.component.mjs +0 -124
  108. package/esm2020/material/material.component.mjs +0 -186
  109. package/esm2020/material/ngx-color-material.mjs +0 -5
  110. package/esm2020/material/public_api.mjs +0 -2
  111. package/esm2020/ngx-color.mjs +0 -5
  112. package/esm2020/photoshop/ngx-color-photoshop.mjs +0 -5
  113. package/esm2020/photoshop/photoshop-button.component.mjs +0 -34
  114. package/esm2020/photoshop/photoshop-fields.component.mjs +0 -212
  115. package/esm2020/photoshop/photoshop-previews.component.mjs +0 -40
  116. package/esm2020/photoshop/photoshop.component.mjs +0 -185
  117. package/esm2020/photoshop/public_api.mjs +0 -5
  118. package/esm2020/public_api.mjs +0 -14
  119. package/esm2020/raised.component.mjs +0 -50
  120. package/esm2020/saturation.component.mjs +0 -92
  121. package/esm2020/shade/ngx-color-shade.mjs +0 -5
  122. package/esm2020/shade/public_api.mjs +0 -2
  123. package/esm2020/shade/shade-picker.component.mjs +0 -92
  124. package/esm2020/shade.component.mjs +0 -125
  125. package/esm2020/sketch/ngx-color-sketch.mjs +0 -5
  126. package/esm2020/sketch/public_api.mjs +0 -4
  127. package/esm2020/sketch/sketch-fields.component.mjs +0 -209
  128. package/esm2020/sketch/sketch-preset-colors.component.mjs +0 -68
  129. package/esm2020/sketch/sketch.component.mjs +0 -212
  130. package/esm2020/slider/ngx-color-slider.mjs +0 -5
  131. package/esm2020/slider/public_api.mjs +0 -4
  132. package/esm2020/slider/slider-swatch.component.mjs +0 -52
  133. package/esm2020/slider/slider-swatches.component.mjs +0 -119
  134. package/esm2020/slider/slider.component.mjs +0 -102
  135. package/esm2020/swatch.component.mjs +0 -110
  136. package/esm2020/swatches/ngx-color-swatches.mjs +0 -5
  137. package/esm2020/swatches/public_api.mjs +0 -4
  138. package/esm2020/swatches/swatches-color.component.mjs +0 -104
  139. package/esm2020/swatches/swatches-group.component.mjs +0 -49
  140. package/esm2020/swatches/swatches.component.mjs +0 -242
  141. package/esm2020/twitter/ngx-color-twitter.mjs +0 -5
  142. package/esm2020/twitter/public_api.mjs +0 -2
  143. package/esm2020/twitter/twitter.component.mjs +0 -159
  144. package/fesm2015/ngx-color-alpha.mjs +0 -107
  145. package/fesm2015/ngx-color-alpha.mjs.map +0 -1
  146. package/fesm2015/ngx-color-block.mjs +0 -223
  147. package/fesm2015/ngx-color-block.mjs.map +0 -1
  148. package/fesm2015/ngx-color-chrome.mjs +0 -499
  149. package/fesm2015/ngx-color-chrome.mjs.map +0 -1
  150. package/fesm2015/ngx-color-circle.mjs +0 -207
  151. package/fesm2015/ngx-color-circle.mjs.map +0 -1
  152. package/fesm2015/ngx-color-compact.mjs +0 -385
  153. package/fesm2015/ngx-color-compact.mjs.map +0 -1
  154. package/fesm2015/ngx-color-github.mjs +0 -169
  155. package/fesm2015/ngx-color-github.mjs.map +0 -1
  156. package/fesm2015/ngx-color-hue.mjs +0 -107
  157. package/fesm2015/ngx-color-hue.mjs.map +0 -1
  158. package/fesm2015/ngx-color-material.mjs +0 -193
  159. package/fesm2015/ngx-color-material.mjs.map +0 -1
  160. package/fesm2015/ngx-color-photoshop.mjs +0 -467
  161. package/fesm2015/ngx-color-photoshop.mjs.map +0 -1
  162. package/fesm2015/ngx-color-shade.mjs.map +0 -1
  163. package/fesm2015/ngx-color-sketch.mjs +0 -485
  164. package/fesm2015/ngx-color-sketch.mjs.map +0 -1
  165. package/fesm2015/ngx-color-slider.mjs +0 -273
  166. package/fesm2015/ngx-color-slider.mjs.map +0 -1
  167. package/fesm2015/ngx-color-swatches.mjs +0 -391
  168. package/fesm2015/ngx-color-swatches.mjs.map +0 -1
  169. package/fesm2015/ngx-color-twitter.mjs +0 -166
  170. package/fesm2015/ngx-color-twitter.mjs.map +0 -1
  171. package/fesm2015/ngx-color.mjs +0 -1202
  172. package/fesm2015/ngx-color.mjs.map +0 -1
  173. package/fesm2020/ngx-color-alpha.mjs.map +0 -1
  174. package/fesm2020/ngx-color-block.mjs +0 -223
  175. package/fesm2020/ngx-color-block.mjs.map +0 -1
  176. package/fesm2020/ngx-color-chrome.mjs +0 -499
  177. package/fesm2020/ngx-color-chrome.mjs.map +0 -1
  178. package/fesm2020/ngx-color-circle.mjs +0 -207
  179. package/fesm2020/ngx-color-circle.mjs.map +0 -1
  180. package/fesm2020/ngx-color-compact.mjs +0 -385
  181. package/fesm2020/ngx-color-compact.mjs.map +0 -1
  182. package/fesm2020/ngx-color-github.mjs +0 -169
  183. package/fesm2020/ngx-color-github.mjs.map +0 -1
  184. package/fesm2020/ngx-color-hue.mjs +0 -107
  185. package/fesm2020/ngx-color-hue.mjs.map +0 -1
  186. package/fesm2020/ngx-color-material.mjs +0 -193
  187. package/fesm2020/ngx-color-material.mjs.map +0 -1
  188. package/fesm2020/ngx-color-photoshop.mjs +0 -467
  189. package/fesm2020/ngx-color-photoshop.mjs.map +0 -1
  190. package/fesm2020/ngx-color-shade.mjs +0 -99
  191. package/fesm2020/ngx-color-shade.mjs.map +0 -1
  192. package/fesm2020/ngx-color-sketch.mjs +0 -485
  193. package/fesm2020/ngx-color-sketch.mjs.map +0 -1
  194. package/fesm2020/ngx-color-slider.mjs +0 -273
  195. package/fesm2020/ngx-color-slider.mjs.map +0 -1
  196. package/fesm2020/ngx-color-swatches.mjs +0 -391
  197. package/fesm2020/ngx-color-swatches.mjs.map +0 -1
  198. package/fesm2020/ngx-color-twitter.mjs +0 -166
  199. package/fesm2020/ngx-color-twitter.mjs.map +0 -1
  200. package/fesm2020/ngx-color.mjs.map +0 -1
@@ -1,499 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
3
- import * as i2 from 'ngx-color';
4
- import { isValidHex, ColorWrap, AlphaModule, CheckboardModule, EditableInputModule, HueModule, SaturationModule } from 'ngx-color';
5
- import { TinyColor } from '@ctrl/tinycolor';
6
- import * as i1 from '@angular/common';
7
- import { CommonModule } from '@angular/common';
8
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
9
-
10
- class ChromeFieldsComponent {
11
- constructor() {
12
- this.onChange = new EventEmitter();
13
- this.view = '';
14
- this.input = {
15
- fontSize: '11px',
16
- color: '#333',
17
- width: '100%',
18
- borderRadius: '2px',
19
- border: 'none',
20
- boxShadow: 'inset 0 0 0 1px #dadada',
21
- height: '21px',
22
- 'text-align': 'center',
23
- };
24
- this.label = {
25
- 'text-transform': 'uppercase',
26
- fontSize: '11px',
27
- 'line-height': '11px',
28
- color: '#969696',
29
- 'text-align': 'center',
30
- display: 'block',
31
- marginTop: '12px',
32
- };
33
- }
34
- ngOnInit() {
35
- if (this.hsl.a === 1 && this.view !== 'hex') {
36
- this.view = 'hex';
37
- }
38
- else if (this.view !== 'rgb' && this.view !== 'hsl') {
39
- this.view = 'rgb';
40
- }
41
- }
42
- toggleViews() {
43
- if (this.view === 'hex') {
44
- this.view = 'rgb';
45
- }
46
- else if (this.view === 'rgb') {
47
- this.view = 'hsl';
48
- }
49
- else if (this.view === 'hsl') {
50
- if (this.hsl.a === 1) {
51
- this.view = 'hex';
52
- }
53
- else {
54
- this.view = 'rgb';
55
- }
56
- }
57
- }
58
- round(value) {
59
- return Math.round(value);
60
- }
61
- handleChange({ data, $event }) {
62
- if (data.hex) {
63
- if (isValidHex(data.hex)) {
64
- const color = new TinyColor(data.hex);
65
- this.onChange.emit({
66
- data: {
67
- hex: this.disableAlpha ? color.toHex() : color.toHex8(),
68
- source: 'hex',
69
- },
70
- $event,
71
- });
72
- }
73
- }
74
- else if (data.r || data.g || data.b) {
75
- this.onChange.emit({
76
- data: {
77
- r: data.r || this.rgb.r,
78
- g: data.g || this.rgb.g,
79
- b: data.b || this.rgb.b,
80
- source: 'rgb',
81
- },
82
- $event,
83
- });
84
- }
85
- else if (data.a) {
86
- if (data.a < 0) {
87
- data.a = 0;
88
- }
89
- else if (data.a > 1) {
90
- data.a = 1;
91
- }
92
- if (this.disableAlpha) {
93
- data.a = 1;
94
- }
95
- this.onChange.emit({
96
- data: {
97
- h: this.hsl.h,
98
- s: this.hsl.s,
99
- l: this.hsl.l,
100
- a: Math.round(data.a * 100) / 100,
101
- source: 'rgb',
102
- },
103
- $event,
104
- });
105
- }
106
- else if (data.h || data.s || data.l) {
107
- const s = data.s && data.s.replace('%', '');
108
- const l = data.l && data.l.replace('%', '');
109
- this.onChange.emit({
110
- data: {
111
- h: data.h || this.hsl.h,
112
- s: Number(s || this.hsl.s),
113
- l: Number(l || this.hsl.l),
114
- source: 'hsl',
115
- },
116
- $event,
117
- });
118
- }
119
- }
120
- }
121
- ChromeFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ChromeFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
122
- ChromeFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: ChromeFieldsComponent, selector: "color-chrome-fields", inputs: { disableAlpha: "disableAlpha", hsl: "hsl", rgb: "rgb", hex: "hex" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
123
- <div class="chrome-wrap">
124
- <div class="chrome-fields">
125
- <ng-template [ngIf]="view === 'hex'">
126
- <div class="chrome-field">
127
- <color-editable-input
128
- [style]="{ input: input, label: label }"
129
- label="hex" [value]="hex"
130
- (onChange)="handleChange($event)"
131
- ></color-editable-input>
132
- </div>
133
- </ng-template>
134
- <ng-template [ngIf]="view === 'rgb'">
135
- <div class="chrome-field">
136
- <color-editable-input
137
- [style]="{ input: input, label: label }"
138
- label="r" [value]="rgb.r"
139
- (onChange)="handleChange($event)"
140
- ></color-editable-input>
141
- </div>
142
- <div class="chrome-field">
143
- <color-editable-input
144
- [style]="{ input: input, label: label }"
145
- label="g" [value]="rgb.g"
146
- (onChange)="handleChange($event)"
147
- ></color-editable-input>
148
- </div>
149
- <div class="chrome-field">
150
- <color-editable-input
151
- [style]="{ input: input, label: label }"
152
- label="b" [value]="rgb.b"
153
- (onChange)="handleChange($event)"
154
- ></color-editable-input>
155
- </div>
156
- <div class="chrome-field">
157
- <color-editable-input *ngIf="!disableAlpha"
158
- [style]="{ input: input, label: label }"
159
- label="a" [value]="rgb.a"
160
- [arrowOffset]="0.01"
161
- (onChange)="handleChange($event)"
162
- ></color-editable-input>
163
- </div>
164
- </ng-template>
165
- <ng-template [ngIf]="view === 'hsl'">
166
- <div class="chrome-field">
167
- <color-editable-input
168
- [style]="{ input: input, label: label }"
169
- label="h"
170
- [value]="round(hsl.h)"
171
- (onChange)="handleChange($event)"
172
- ></color-editable-input>
173
- </div>
174
- <div class="chrome-field">
175
- <color-editable-input
176
- [style]="{ input: input, label: label }"
177
- label="s" [value]="round(hsl.s * 100) + '%'"
178
- (onChange)="handleChange($event)"
179
- ></color-editable-input>
180
- </div>
181
- <div class="chrome-field">
182
- <color-editable-input
183
- [style]="{ input: input, label: label }"
184
- label="l" [value]="round(hsl.l * 100) + '%'"
185
- (onChange)="handleChange($event)"
186
- ></color-editable-input>
187
- </div>
188
- <div class="chrome-field">
189
- <color-editable-input *ngIf="!disableAlpha"
190
- [style]="{ input: input, label: label }"
191
- label="a" [value]="hsl.a"
192
- [arrowOffset]="0.01"
193
- (onChange)="handleChange($event)"
194
- ></color-editable-input>
195
- </div>
196
- </ng-template>
197
- </div>
198
-
199
- <div class="chrome-toggle">
200
- <div class="chrome-icon" (click)="toggleViews()" #icon>
201
- <svg class="chrome-toggle-svg" viewBox="0 0 24 24">
202
- <path #iconUp fill="#333"
203
- d="M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
204
- />
205
- <path #iconDown fill="#333"
206
- d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"
207
- />
208
- </svg>
209
- </div>
210
- </div>
211
- </div>
212
- `, isInline: true, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
213
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ChromeFieldsComponent, decorators: [{
214
- type: Component,
215
- args: [{ selector: 'color-chrome-fields', template: `
216
- <div class="chrome-wrap">
217
- <div class="chrome-fields">
218
- <ng-template [ngIf]="view === 'hex'">
219
- <div class="chrome-field">
220
- <color-editable-input
221
- [style]="{ input: input, label: label }"
222
- label="hex" [value]="hex"
223
- (onChange)="handleChange($event)"
224
- ></color-editable-input>
225
- </div>
226
- </ng-template>
227
- <ng-template [ngIf]="view === 'rgb'">
228
- <div class="chrome-field">
229
- <color-editable-input
230
- [style]="{ input: input, label: label }"
231
- label="r" [value]="rgb.r"
232
- (onChange)="handleChange($event)"
233
- ></color-editable-input>
234
- </div>
235
- <div class="chrome-field">
236
- <color-editable-input
237
- [style]="{ input: input, label: label }"
238
- label="g" [value]="rgb.g"
239
- (onChange)="handleChange($event)"
240
- ></color-editable-input>
241
- </div>
242
- <div class="chrome-field">
243
- <color-editable-input
244
- [style]="{ input: input, label: label }"
245
- label="b" [value]="rgb.b"
246
- (onChange)="handleChange($event)"
247
- ></color-editable-input>
248
- </div>
249
- <div class="chrome-field">
250
- <color-editable-input *ngIf="!disableAlpha"
251
- [style]="{ input: input, label: label }"
252
- label="a" [value]="rgb.a"
253
- [arrowOffset]="0.01"
254
- (onChange)="handleChange($event)"
255
- ></color-editable-input>
256
- </div>
257
- </ng-template>
258
- <ng-template [ngIf]="view === 'hsl'">
259
- <div class="chrome-field">
260
- <color-editable-input
261
- [style]="{ input: input, label: label }"
262
- label="h"
263
- [value]="round(hsl.h)"
264
- (onChange)="handleChange($event)"
265
- ></color-editable-input>
266
- </div>
267
- <div class="chrome-field">
268
- <color-editable-input
269
- [style]="{ input: input, label: label }"
270
- label="s" [value]="round(hsl.s * 100) + '%'"
271
- (onChange)="handleChange($event)"
272
- ></color-editable-input>
273
- </div>
274
- <div class="chrome-field">
275
- <color-editable-input
276
- [style]="{ input: input, label: label }"
277
- label="l" [value]="round(hsl.l * 100) + '%'"
278
- (onChange)="handleChange($event)"
279
- ></color-editable-input>
280
- </div>
281
- <div class="chrome-field">
282
- <color-editable-input *ngIf="!disableAlpha"
283
- [style]="{ input: input, label: label }"
284
- label="a" [value]="hsl.a"
285
- [arrowOffset]="0.01"
286
- (onChange)="handleChange($event)"
287
- ></color-editable-input>
288
- </div>
289
- </ng-template>
290
- </div>
291
-
292
- <div class="chrome-toggle">
293
- <div class="chrome-icon" (click)="toggleViews()" #icon>
294
- <svg class="chrome-toggle-svg" viewBox="0 0 24 24">
295
- <path #iconUp fill="#333"
296
- d="M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
297
- />
298
- <path #iconDown fill="#333"
299
- d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"
300
- />
301
- </svg>
302
- </div>
303
- </div>
304
- </div>
305
- `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"] }]
306
- }], propDecorators: { disableAlpha: [{
307
- type: Input
308
- }], hsl: [{
309
- type: Input
310
- }], rgb: [{
311
- type: Input
312
- }], hex: [{
313
- type: Input
314
- }], onChange: [{
315
- type: Output
316
- }] } });
317
-
318
- class ChromeComponent extends ColorWrap {
319
- constructor() {
320
- super();
321
- /** Remove alpha slider and options from picker */
322
- this.disableAlpha = false;
323
- this.circle = {
324
- width: '12px',
325
- height: '12px',
326
- borderRadius: '6px',
327
- boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',
328
- transform: 'translate(-6px, -8px)',
329
- };
330
- this.pointer = {
331
- width: '12px',
332
- height: '12px',
333
- borderRadius: '6px',
334
- transform: 'translate(-6px, -2px)',
335
- backgroundColor: 'rgb(248, 248, 248)',
336
- boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
337
- };
338
- }
339
- afterValidChange() {
340
- const alpha = this.disableAlpha ? 1 : this.rgb.a;
341
- this.activeBackground = `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${alpha})`;
342
- }
343
- handleValueChange({ data, $event }) {
344
- this.handleChange(data, $event);
345
- }
346
- }
347
- ChromeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ChromeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
348
- ChromeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: ChromeComponent, selector: "color-chrome", inputs: { disableAlpha: "disableAlpha" }, providers: [
349
- {
350
- provide: NG_VALUE_ACCESSOR,
351
- useExisting: forwardRef(() => ChromeComponent),
352
- multi: true,
353
- },
354
- {
355
- provide: ColorWrap,
356
- useExisting: forwardRef(() => ChromeComponent),
357
- },
358
- ], usesInheritance: true, ngImport: i0, template: `
359
- <div class="chrome-picker {{ className }}">
360
- <div class="saturation">
361
- <color-saturation
362
- [hsl]="hsl"
363
- [hsv]="hsv"
364
- [circle]="circle"
365
- (onChange)="handleValueChange($event)"
366
- ></color-saturation>
367
- </div>
368
- <div class="chrome-body">
369
- <div class="chrome-controls">
370
- <div class="chrome-color">
371
- <div class="chrome-swatch">
372
- <div class="chrome-active"
373
- [style.background]="activeBackground"
374
- ></div>
375
- <color-checkboard></color-checkboard>
376
- </div>
377
- </div>
378
- <div class="chrome-toggles">
379
- <div class="chrome-hue">
380
- <color-hue
381
- [radius]="2"
382
- [hsl]="hsl"
383
- [pointer]="pointer"
384
- (onChange)="handleValueChange($event)"
385
- ></color-hue>
386
- </div>
387
- <div class="chrome-alpha" *ngIf="!disableAlpha">
388
- <color-alpha
389
- [radius]="2" [rgb]="rgb" [hsl]="hsl"
390
- [pointer]="pointer" (onChange)="handleValueChange($event)"
391
- ></color-alpha>
392
- </div>
393
- </div>
394
- </div>
395
- <color-chrome-fields
396
- [rgb]="rgb" [hsl]="hsl" [hex]="hex"
397
- [disableAlpha]="disableAlpha"
398
- (onChange)="handleValueChange($event)"
399
- ></color-chrome-fields>
400
- </div>
401
- </div>
402
- `, isInline: true, styles: [".chrome-picker{background:#fff;border-radius:2px;box-shadow:0 0 2px #0000004d,0 4px 8px #0000004d;box-sizing:initial;width:225px;font-family:Menlo}.chrome-controls{display:flex}.chrome-color{width:42px}.chrome-body{padding:14px 14px 12px}.chrome-active{position:absolute;top:0;bottom:0;left:0;right:0;border-radius:20px;box-shadow:inset 0 0 0 1px #0000001a;z-index:2}.chrome-swatch{width:28px;height:28px;border-radius:15px;position:relative;overflow:hidden}.saturation{width:100%;padding-bottom:55%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.chrome-toggles{flex:1}.chrome-hue{height:10px;position:relative;margin-bottom:8px}.chrome-alpha{height:10px;position:relative}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i2.AlphaComponent; }), selector: "color-alpha", inputs: ["hsl", "rgb", "pointer", "shadow", "radius", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i2.CheckboardComponent; }), selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { kind: "component", type: i0.forwardRef(function () { return i2.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i2.SaturationComponent; }), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return ChromeFieldsComponent; }), selector: "color-chrome-fields", inputs: ["disableAlpha", "hsl", "rgb", "hex"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
403
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ChromeComponent, decorators: [{
404
- type: Component,
405
- args: [{ selector: 'color-chrome', template: `
406
- <div class="chrome-picker {{ className }}">
407
- <div class="saturation">
408
- <color-saturation
409
- [hsl]="hsl"
410
- [hsv]="hsv"
411
- [circle]="circle"
412
- (onChange)="handleValueChange($event)"
413
- ></color-saturation>
414
- </div>
415
- <div class="chrome-body">
416
- <div class="chrome-controls">
417
- <div class="chrome-color">
418
- <div class="chrome-swatch">
419
- <div class="chrome-active"
420
- [style.background]="activeBackground"
421
- ></div>
422
- <color-checkboard></color-checkboard>
423
- </div>
424
- </div>
425
- <div class="chrome-toggles">
426
- <div class="chrome-hue">
427
- <color-hue
428
- [radius]="2"
429
- [hsl]="hsl"
430
- [pointer]="pointer"
431
- (onChange)="handleValueChange($event)"
432
- ></color-hue>
433
- </div>
434
- <div class="chrome-alpha" *ngIf="!disableAlpha">
435
- <color-alpha
436
- [radius]="2" [rgb]="rgb" [hsl]="hsl"
437
- [pointer]="pointer" (onChange)="handleValueChange($event)"
438
- ></color-alpha>
439
- </div>
440
- </div>
441
- </div>
442
- <color-chrome-fields
443
- [rgb]="rgb" [hsl]="hsl" [hex]="hex"
444
- [disableAlpha]="disableAlpha"
445
- (onChange)="handleValueChange($event)"
446
- ></color-chrome-fields>
447
- </div>
448
- </div>
449
- `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
450
- {
451
- provide: NG_VALUE_ACCESSOR,
452
- useExisting: forwardRef(() => ChromeComponent),
453
- multi: true,
454
- },
455
- {
456
- provide: ColorWrap,
457
- useExisting: forwardRef(() => ChromeComponent),
458
- },
459
- ], styles: [".chrome-picker{background:#fff;border-radius:2px;box-shadow:0 0 2px #0000004d,0 4px 8px #0000004d;box-sizing:initial;width:225px;font-family:Menlo}.chrome-controls{display:flex}.chrome-color{width:42px}.chrome-body{padding:14px 14px 12px}.chrome-active{position:absolute;top:0;bottom:0;left:0;right:0;border-radius:20px;box-shadow:inset 0 0 0 1px #0000001a;z-index:2}.chrome-swatch{width:28px;height:28px;border-radius:15px;position:relative;overflow:hidden}.saturation{width:100%;padding-bottom:55%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.chrome-toggles{flex:1}.chrome-hue{height:10px;position:relative;margin-bottom:8px}.chrome-alpha{height:10px;position:relative}\n"] }]
460
- }], ctorParameters: function () { return []; }, propDecorators: { disableAlpha: [{
461
- type: Input
462
- }] } });
463
- class ColorChromeModule {
464
- }
465
- ColorChromeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorChromeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
466
- ColorChromeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorChromeModule, declarations: [ChromeComponent, ChromeFieldsComponent], imports: [CommonModule,
467
- AlphaModule,
468
- CheckboardModule,
469
- EditableInputModule,
470
- HueModule,
471
- SaturationModule], exports: [ChromeComponent, ChromeFieldsComponent] });
472
- ColorChromeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorChromeModule, imports: [CommonModule,
473
- AlphaModule,
474
- CheckboardModule,
475
- EditableInputModule,
476
- HueModule,
477
- SaturationModule] });
478
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorChromeModule, decorators: [{
479
- type: NgModule,
480
- args: [{
481
- declarations: [ChromeComponent, ChromeFieldsComponent],
482
- exports: [ChromeComponent, ChromeFieldsComponent],
483
- imports: [
484
- CommonModule,
485
- AlphaModule,
486
- CheckboardModule,
487
- EditableInputModule,
488
- HueModule,
489
- SaturationModule,
490
- ],
491
- }]
492
- }] });
493
-
494
- /**
495
- * Generated bundle index. Do not edit.
496
- */
497
-
498
- export { ChromeComponent, ChromeFieldsComponent, ColorChromeModule };
499
- //# sourceMappingURL=ngx-color-chrome.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ngx-color-chrome.mjs","sources":["../../src/lib/chrome/chrome-fields.component.ts","../../src/lib/chrome/chrome.component.ts","../../src/lib/chrome/ngx-color-chrome.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnInit,\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-chrome-fields',\n template: `\n <div class=\"chrome-wrap\">\n <div class=\"chrome-fields\">\n <ng-template [ngIf]=\"view === 'hex'\">\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"hex\" [value]=\"hex\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"view === 'rgb'\">\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"r\" [value]=\"rgb.r\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"g\" [value]=\"rgb.g\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"b\" [value]=\"rgb.b\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input *ngIf=\"!disableAlpha\"\n [style]=\"{ input: input, label: label }\"\n label=\"a\" [value]=\"rgb.a\"\n [arrowOffset]=\"0.01\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"view === 'hsl'\">\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"h\"\n [value]=\"round(hsl.h)\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"s\" [value]=\"round(hsl.s * 100) + '%'\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"l\" [value]=\"round(hsl.l * 100) + '%'\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input *ngIf=\"!disableAlpha\"\n [style]=\"{ input: input, label: label }\"\n label=\"a\" [value]=\"hsl.a\"\n [arrowOffset]=\"0.01\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n </ng-template>\n </div>\n\n <div class=\"chrome-toggle\">\n <div class=\"chrome-icon\" (click)=\"toggleViews()\" #icon>\n <svg class=\"chrome-toggle-svg\" viewBox=\"0 0 24 24\">\n <path #iconUp fill=\"#333\"\n d=\"M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z\"\n />\n <path #iconDown fill=\"#333\"\n d=\"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z\"\n />\n </svg>\n </div>\n </div>\n </div>\n `,\n styles: [\n `\n .chrome-wrap {\n padding-top: 16px;\n display: flex;\n }\n .chrome-fields {\n flex: 1;\n display: flex;\n margin-left: -6px;\n }\n .chrome-field {\n padding-left: 6px;\n width: 100%;\n }\n .chrome-toggle {\n width: 32px;\n text-align: right;\n position: relative;\n }\n .chrome-icon {\n margin-right: -4px;\n margin-top: 12px;\n cursor: pointer;\n position: relative;\n }\n .chrome-toggle-svg {\n width: 24px;\n height: 24px;\n border: 1px transparent solid;\n border-radius: 5px;\n }\n .chrome-toggle-svg:hover {\n background: #eee;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class ChromeFieldsComponent implements OnInit {\n @Input() disableAlpha!: boolean;\n @Input() hsl!: HSLA;\n @Input() rgb!: RGBA;\n @Input() hex!: string;\n @Output() onChange = new EventEmitter<any>();\n view = '';\n input: Record<string, string> = {\n fontSize: '11px',\n color: '#333',\n width: '100%',\n borderRadius: '2px',\n border: 'none',\n boxShadow: 'inset 0 0 0 1px #dadada',\n height: '21px',\n 'text-align': 'center',\n };\n label: Record<string, string> = {\n 'text-transform': 'uppercase',\n fontSize: '11px',\n 'line-height': '11px',\n color: '#969696',\n 'text-align': 'center',\n display: 'block',\n marginTop: '12px',\n };\n\n ngOnInit() {\n if (this.hsl.a === 1 && this.view !== 'hex') {\n this.view = 'hex';\n } else if (this.view !== 'rgb' && this.view !== 'hsl') {\n this.view = 'rgb';\n }\n }\n toggleViews() {\n if (this.view === 'hex') {\n this.view = 'rgb';\n } else if (this.view === 'rgb') {\n this.view = 'hsl';\n } else if (this.view === 'hsl') {\n if (this.hsl.a === 1) {\n this.view = 'hex';\n } else {\n this.view = 'rgb';\n }\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 ? 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 > 1) {\n data.a = 1;\n }\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 const s = data.s && data.s.replace('%', '');\n const l = data.l && data.l.replace('%', '');\n this.onChange.emit({\n data: {\n h: data.h || this.hsl.h,\n s: Number(s || this.hsl.s),\n l: Number(l || this.hsl.l),\n source: 'hsl',\n },\n $event,\n });\n }\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { AlphaModule, CheckboardModule, ColorWrap, EditableInputModule, HueModule, SaturationModule } from 'ngx-color';\nimport { ChromeFieldsComponent } from './chrome-fields.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-chrome',\n template: `\n <div class=\"chrome-picker {{ className }}\">\n <div class=\"saturation\">\n <color-saturation\n [hsl]=\"hsl\"\n [hsv]=\"hsv\"\n [circle]=\"circle\"\n (onChange)=\"handleValueChange($event)\"\n ></color-saturation>\n </div>\n <div class=\"chrome-body\">\n <div class=\"chrome-controls\">\n <div class=\"chrome-color\">\n <div class=\"chrome-swatch\">\n <div class=\"chrome-active\"\n [style.background]=\"activeBackground\"\n ></div>\n <color-checkboard></color-checkboard>\n </div>\n </div>\n <div class=\"chrome-toggles\">\n <div class=\"chrome-hue\">\n <color-hue\n [radius]=\"2\"\n [hsl]=\"hsl\"\n [pointer]=\"pointer\"\n (onChange)=\"handleValueChange($event)\"\n ></color-hue>\n </div>\n <div class=\"chrome-alpha\" *ngIf=\"!disableAlpha\">\n <color-alpha\n [radius]=\"2\" [rgb]=\"rgb\" [hsl]=\"hsl\"\n [pointer]=\"pointer\" (onChange)=\"handleValueChange($event)\"\n ></color-alpha>\n </div>\n </div>\n </div>\n <color-chrome-fields\n [rgb]=\"rgb\" [hsl]=\"hsl\" [hex]=\"hex\"\n [disableAlpha]=\"disableAlpha\"\n (onChange)=\"handleValueChange($event)\"\n ></color-chrome-fields>\n </div>\n </div>\n `,\n styles: [\n `\n .chrome-picker {\n background: #fff;\n border-radius: 2px;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3);\n box-sizing: initial;\n width: 225px;\n font-family: 'Menlo';\n }\n .chrome-controls {\n display: flex;\n }\n .chrome-color {\n width: 42px;\n }\n .chrome-body {\n padding: 14px 14px 12px;\n }\n .chrome-active {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 20px;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n z-index: 2;\n }\n .chrome-swatch {\n width: 28px;\n height: 28px;\n border-radius: 15px;\n position: relative;\n overflow: hidden;\n }\n .saturation {\n width: 100%;\n padding-bottom: 55%;\n position: relative;\n border-radius: 2px 2px 0 0;\n overflow: hidden;\n }\n .chrome-toggles {\n flex: 1;\n }\n .chrome-hue {\n height: 10px;\n position: relative;\n margin-bottom: 8px;\n }\n .chrome-alpha {\n height: 10px;\n position: relative;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ChromeComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => ChromeComponent),\n },\n ]\n})\nexport class ChromeComponent extends ColorWrap {\n /** Remove alpha slider and options from picker */\n @Input() disableAlpha = false;\n circle: Record<string, string> = {\n width: '12px',\n height: '12px',\n borderRadius: '6px',\n boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',\n transform: 'translate(-6px, -8px)',\n };\n pointer: Record<string, string> = {\n width: '12px',\n height: '12px',\n borderRadius: '6px',\n transform: 'translate(-6px, -2px)',\n backgroundColor: 'rgb(248, 248, 248)',\n boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n };\n activeBackground!: string;\n\n constructor() {\n super();\n }\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}\n\n@NgModule({\n declarations: [ChromeComponent, ChromeFieldsComponent],\n exports: [ChromeComponent, ChromeFieldsComponent],\n imports: [\n CommonModule,\n AlphaModule,\n CheckboardModule,\n EditableInputModule,\n HueModule,\n SaturationModule,\n ],\n})\nexport class ColorChromeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}