ngx-color 8.0.0 → 8.0.3

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 (187) hide show
  1. package/README.md +0 -1
  2. package/alpha/alpha-picker.component.d.ts +28 -0
  3. package/alpha/index.d.ts +5 -0
  4. package/alpha/public_api.d.ts +1 -0
  5. package/block/block-swatches.component.d.ts +24 -0
  6. package/block/block.component.d.ts +36 -0
  7. package/block/index.d.ts +5 -0
  8. package/block/public_api.d.ts +2 -0
  9. package/chrome/chrome-fields.component.d.ts +22 -0
  10. package/chrome/chrome.component.d.ts +25 -0
  11. package/chrome/index.d.ts +5 -0
  12. package/chrome/public_api.d.ts +2 -0
  13. package/circle/circle-swatch.component.d.ts +19 -0
  14. package/circle/circle.component.d.ts +32 -0
  15. package/circle/index.d.ts +5 -0
  16. package/circle/public_api.d.ts +2 -0
  17. package/compact/compact-color.component.d.ts +19 -0
  18. package/compact/compact-fields.component.d.ts +32 -0
  19. package/compact/compact.component.d.ts +30 -0
  20. package/compact/index.d.ts +5 -0
  21. package/compact/public_api.d.ts +3 -0
  22. package/coordinates.directive.d.ts +1 -1
  23. package/esm2020/alpha/alpha-picker.component.mjs +100 -0
  24. package/esm2020/alpha/ngx-color-alpha.mjs +5 -0
  25. package/esm2020/alpha/public_api.mjs +2 -0
  26. package/esm2020/alpha.component.mjs +7 -7
  27. package/esm2020/block/block-swatches.component.mjs +63 -0
  28. package/esm2020/block/block.component.mjs +158 -0
  29. package/esm2020/block/ngx-color-block.mjs +5 -0
  30. package/esm2020/block/public_api.mjs +3 -0
  31. package/esm2020/checkboard.component.mjs +7 -7
  32. package/esm2020/chrome/chrome-fields.component.mjs +314 -0
  33. package/esm2020/chrome/chrome.component.mjs +184 -0
  34. package/esm2020/chrome/ngx-color-chrome.mjs +5 -0
  35. package/esm2020/chrome/public_api.mjs +3 -0
  36. package/esm2020/circle/circle-swatch.component.mjs +69 -0
  37. package/esm2020/circle/circle.component.mjs +134 -0
  38. package/esm2020/circle/ngx-color-circle.mjs +5 -0
  39. package/esm2020/circle/public_api.mjs +3 -0
  40. package/esm2020/color-wrap.component.mjs +10 -10
  41. package/esm2020/compact/compact-color.component.mjs +70 -0
  42. package/esm2020/compact/compact-fields.component.mjs +164 -0
  43. package/esm2020/compact/compact.component.mjs +154 -0
  44. package/esm2020/compact/ngx-color-compact.mjs +5 -0
  45. package/esm2020/compact/public_api.mjs +4 -0
  46. package/esm2020/coordinates.directive.mjs +9 -9
  47. package/esm2020/editable-input.component.mjs +10 -14
  48. package/esm2020/github/github-swatch.component.mjs +53 -0
  49. package/esm2020/github/github.component.mjs +112 -0
  50. package/esm2020/github/ngx-color-github.mjs +5 -0
  51. package/esm2020/github/public_api.mjs +3 -0
  52. package/esm2020/hue/hue-picker.component.mjs +100 -0
  53. package/esm2020/hue/ngx-color-hue.mjs +5 -0
  54. package/esm2020/hue/public_api.mjs +2 -0
  55. package/esm2020/hue.component.mjs +7 -7
  56. package/esm2020/material/material.component.mjs +186 -0
  57. package/esm2020/material/ngx-color-material.mjs +5 -0
  58. package/esm2020/material/public_api.mjs +2 -0
  59. package/esm2020/photoshop/ngx-color-photoshop.mjs +5 -0
  60. package/esm2020/photoshop/photoshop-button.component.mjs +34 -0
  61. package/esm2020/photoshop/photoshop-fields.component.mjs +212 -0
  62. package/esm2020/photoshop/photoshop-previews.component.mjs +40 -0
  63. package/esm2020/photoshop/photoshop.component.mjs +185 -0
  64. package/esm2020/photoshop/public_api.mjs +5 -0
  65. package/esm2020/raised.component.mjs +7 -7
  66. package/esm2020/saturation.component.mjs +7 -7
  67. package/esm2020/shade/ngx-color-shade.mjs +5 -0
  68. package/esm2020/shade/public_api.mjs +2 -0
  69. package/esm2020/shade/shade-picker.component.mjs +92 -0
  70. package/esm2020/shade.component.mjs +7 -7
  71. package/esm2020/sketch/ngx-color-sketch.mjs +5 -0
  72. package/esm2020/sketch/public_api.mjs +4 -0
  73. package/esm2020/sketch/sketch-fields.component.mjs +209 -0
  74. package/esm2020/sketch/sketch-preset-colors.component.mjs +68 -0
  75. package/esm2020/sketch/sketch.component.mjs +212 -0
  76. package/esm2020/slider/ngx-color-slider.mjs +5 -0
  77. package/esm2020/slider/public_api.mjs +4 -0
  78. package/esm2020/slider/slider-swatch.component.mjs +52 -0
  79. package/esm2020/slider/slider-swatches.component.mjs +119 -0
  80. package/esm2020/slider/slider.component.mjs +102 -0
  81. package/esm2020/swatch.component.mjs +7 -7
  82. package/esm2020/swatches/ngx-color-swatches.mjs +5 -0
  83. package/esm2020/swatches/public_api.mjs +4 -0
  84. package/esm2020/swatches/swatches-color.component.mjs +104 -0
  85. package/esm2020/swatches/swatches-group.component.mjs +49 -0
  86. package/esm2020/swatches/swatches.component.mjs +242 -0
  87. package/esm2020/twitter/ngx-color-twitter.mjs +5 -0
  88. package/esm2020/twitter/public_api.mjs +2 -0
  89. package/esm2020/twitter/twitter.component.mjs +159 -0
  90. package/fesm2015/ngx-color-alpha.mjs +107 -0
  91. package/fesm2015/ngx-color-alpha.mjs.map +1 -0
  92. package/fesm2015/ngx-color-block.mjs +223 -0
  93. package/fesm2015/ngx-color-block.mjs.map +1 -0
  94. package/fesm2015/ngx-color-chrome.mjs +499 -0
  95. package/fesm2015/ngx-color-chrome.mjs.map +1 -0
  96. package/fesm2015/ngx-color-circle.mjs +207 -0
  97. package/fesm2015/ngx-color-circle.mjs.map +1 -0
  98. package/fesm2015/ngx-color-compact.mjs +385 -0
  99. package/fesm2015/ngx-color-compact.mjs.map +1 -0
  100. package/fesm2015/ngx-color-github.mjs +169 -0
  101. package/fesm2015/ngx-color-github.mjs.map +1 -0
  102. package/fesm2015/ngx-color-hue.mjs +107 -0
  103. package/fesm2015/ngx-color-hue.mjs.map +1 -0
  104. package/fesm2015/ngx-color-material.mjs +193 -0
  105. package/fesm2015/ngx-color-material.mjs.map +1 -0
  106. package/fesm2015/ngx-color-photoshop.mjs +467 -0
  107. package/fesm2015/ngx-color-photoshop.mjs.map +1 -0
  108. package/fesm2015/ngx-color-shade.mjs +99 -0
  109. package/fesm2015/ngx-color-shade.mjs.map +1 -0
  110. package/fesm2015/ngx-color-sketch.mjs +485 -0
  111. package/fesm2015/ngx-color-sketch.mjs.map +1 -0
  112. package/fesm2015/ngx-color-slider.mjs +273 -0
  113. package/fesm2015/ngx-color-slider.mjs.map +1 -0
  114. package/fesm2015/ngx-color-swatches.mjs +391 -0
  115. package/fesm2015/ngx-color-swatches.mjs.map +1 -0
  116. package/fesm2015/ngx-color-twitter.mjs +166 -0
  117. package/fesm2015/ngx-color-twitter.mjs.map +1 -0
  118. package/fesm2015/ngx-color.mjs +78 -80
  119. package/fesm2015/ngx-color.mjs.map +1 -1
  120. package/fesm2020/ngx-color-alpha.mjs +107 -0
  121. package/fesm2020/ngx-color-alpha.mjs.map +1 -0
  122. package/fesm2020/ngx-color-block.mjs +223 -0
  123. package/fesm2020/ngx-color-block.mjs.map +1 -0
  124. package/fesm2020/ngx-color-chrome.mjs +499 -0
  125. package/fesm2020/ngx-color-chrome.mjs.map +1 -0
  126. package/fesm2020/ngx-color-circle.mjs +207 -0
  127. package/fesm2020/ngx-color-circle.mjs.map +1 -0
  128. package/fesm2020/ngx-color-compact.mjs +385 -0
  129. package/fesm2020/ngx-color-compact.mjs.map +1 -0
  130. package/fesm2020/ngx-color-github.mjs +169 -0
  131. package/fesm2020/ngx-color-github.mjs.map +1 -0
  132. package/fesm2020/ngx-color-hue.mjs +107 -0
  133. package/fesm2020/ngx-color-hue.mjs.map +1 -0
  134. package/fesm2020/ngx-color-material.mjs +193 -0
  135. package/fesm2020/ngx-color-material.mjs.map +1 -0
  136. package/fesm2020/ngx-color-photoshop.mjs +467 -0
  137. package/fesm2020/ngx-color-photoshop.mjs.map +1 -0
  138. package/fesm2020/ngx-color-shade.mjs +99 -0
  139. package/fesm2020/ngx-color-shade.mjs.map +1 -0
  140. package/fesm2020/ngx-color-sketch.mjs +485 -0
  141. package/fesm2020/ngx-color-sketch.mjs.map +1 -0
  142. package/fesm2020/ngx-color-slider.mjs +273 -0
  143. package/fesm2020/ngx-color-slider.mjs.map +1 -0
  144. package/fesm2020/ngx-color-swatches.mjs +391 -0
  145. package/fesm2020/ngx-color-swatches.mjs.map +1 -0
  146. package/fesm2020/ngx-color-twitter.mjs +166 -0
  147. package/fesm2020/ngx-color-twitter.mjs.map +1 -0
  148. package/fesm2020/ngx-color.mjs +75 -79
  149. package/fesm2020/ngx-color.mjs.map +1 -1
  150. package/github/github-swatch.component.d.ts +19 -0
  151. package/github/github.component.d.ts +28 -0
  152. package/github/index.d.ts +5 -0
  153. package/github/public_api.d.ts +2 -0
  154. package/hue/hue-picker.component.d.ts +29 -0
  155. package/hue/index.d.ts +5 -0
  156. package/hue/public_api.d.ts +1 -0
  157. package/material/index.d.ts +5 -0
  158. package/material/material.component.d.ts +39 -0
  159. package/material/public_api.d.ts +1 -0
  160. package/package.json +113 -1
  161. package/photoshop/index.d.ts +5 -0
  162. package/photoshop/photoshop-button.component.d.ts +9 -0
  163. package/photoshop/photoshop-fields.component.d.ts +22 -0
  164. package/photoshop/photoshop-previews.component.d.ts +11 -0
  165. package/photoshop/photoshop.component.d.ts +33 -0
  166. package/photoshop/public_api.d.ts +4 -0
  167. package/shade/index.d.ts +5 -0
  168. package/shade/public_api.d.ts +1 -0
  169. package/shade/shade-picker.component.d.ts +27 -0
  170. package/sketch/index.d.ts +5 -0
  171. package/sketch/public_api.d.ts +3 -0
  172. package/sketch/sketch-fields.component.d.ts +23 -0
  173. package/sketch/sketch-preset-colors.component.d.ts +24 -0
  174. package/sketch/sketch.component.d.ts +32 -0
  175. package/slider/index.d.ts +5 -0
  176. package/slider/public_api.d.ts +3 -0
  177. package/slider/slider-swatch.component.d.ts +16 -0
  178. package/slider/slider-swatches.component.d.ts +15 -0
  179. package/slider/slider.component.d.ts +22 -0
  180. package/swatches/index.d.ts +5 -0
  181. package/swatches/public_api.d.ts +3 -0
  182. package/swatches/swatches-color.component.d.ts +18 -0
  183. package/swatches/swatches-group.component.d.ts +10 -0
  184. package/swatches/swatches.component.d.ts +29 -0
  185. package/twitter/index.d.ts +5 -0
  186. package/twitter/public_api.d.ts +1 -0
  187. package/twitter/twitter.component.d.ts +31 -0
@@ -0,0 +1,391 @@
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 { getContrastingColor, ColorWrap, SwatchModule, RaisedModule } from 'ngx-color';
5
+ import * as i1 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 { NG_VALUE_ACCESSOR } from '@angular/forms';
9
+
10
+ class SwatchesColorComponent {
11
+ constructor() {
12
+ this.first = false;
13
+ this.last = false;
14
+ this.onClick = new EventEmitter();
15
+ this.onSwatchHover = new EventEmitter();
16
+ this.getContrastingColor = getContrastingColor;
17
+ this.colorStyle = {
18
+ width: '40px',
19
+ height: '24px',
20
+ cursor: 'pointer',
21
+ marginBottom: '1px',
22
+ };
23
+ this.focusStyle = {};
24
+ }
25
+ ngOnInit() {
26
+ this.colorStyle.background = this.color;
27
+ this.focusStyle.boxShadow = `0 0 4px ${this.color}`;
28
+ if (this.first) {
29
+ this.colorStyle.borderRadius = '2px 2px 0 0';
30
+ }
31
+ if (this.last) {
32
+ this.colorStyle.borderRadius = '0 0 2px 2px';
33
+ }
34
+ if (this.color === '#FFFFFF') {
35
+ this.colorStyle.boxShadow = 'inset 0 0 0 1px #ddd';
36
+ }
37
+ }
38
+ handleClick($event) {
39
+ this.onClick.emit({
40
+ data: {
41
+ hex: this.color,
42
+ source: 'hex',
43
+ },
44
+ $event,
45
+ });
46
+ }
47
+ }
48
+ SwatchesColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchesColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
49
+ SwatchesColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SwatchesColorComponent, selector: "color-swatches-color", inputs: { color: "color", first: "first", last: "last", active: "active" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
50
+ <color-swatch
51
+ [color]="color"
52
+ [style]="colorStyle"
53
+ [focusStyle]="focusStyle"
54
+ [class.first]="first"
55
+ [class.last]="last"
56
+ (click)="handleClick($event)"
57
+ (keydown.enter)="handleClick($event)"
58
+ (onHover)="onSwatchHover.emit($event)"
59
+ >
60
+ <div class="swatch-check" *ngIf="active" [class.first]="first" [class.last]="last">
61
+ <svg
62
+ style="width: 24px; height: 24px;"
63
+ viewBox="0 0 24 24"
64
+ [style.fill]="getContrastingColor(color)"
65
+ >
66
+ <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
67
+ </svg>
68
+ </div>
69
+ </color-swatch>
70
+ `, isInline: true, styles: [".swatches-group{padding-bottom:10px;width:40px;float:left;margin-right:10px}.swatch-check{display:flex;margin-left:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
71
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchesColorComponent, decorators: [{
72
+ type: Component,
73
+ args: [{ selector: 'color-swatches-color', template: `
74
+ <color-swatch
75
+ [color]="color"
76
+ [style]="colorStyle"
77
+ [focusStyle]="focusStyle"
78
+ [class.first]="first"
79
+ [class.last]="last"
80
+ (click)="handleClick($event)"
81
+ (keydown.enter)="handleClick($event)"
82
+ (onHover)="onSwatchHover.emit($event)"
83
+ >
84
+ <div class="swatch-check" *ngIf="active" [class.first]="first" [class.last]="last">
85
+ <svg
86
+ style="width: 24px; height: 24px;"
87
+ viewBox="0 0 24 24"
88
+ [style.fill]="getContrastingColor(color)"
89
+ >
90
+ <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
91
+ </svg>
92
+ </div>
93
+ </color-swatch>
94
+ `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".swatches-group{padding-bottom:10px;width:40px;float:left;margin-right:10px}.swatch-check{display:flex;margin-left:8px}\n"] }]
95
+ }], propDecorators: { color: [{
96
+ type: Input
97
+ }], first: [{
98
+ type: Input
99
+ }], last: [{
100
+ type: Input
101
+ }], active: [{
102
+ type: Input
103
+ }], onClick: [{
104
+ type: Output
105
+ }], onSwatchHover: [{
106
+ type: Output
107
+ }] } });
108
+
109
+ class SwatchesGroupComponent {
110
+ constructor() {
111
+ this.onClick = new EventEmitter();
112
+ this.onSwatchHover = new EventEmitter();
113
+ }
114
+ }
115
+ SwatchesGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchesGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
116
+ SwatchesGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SwatchesGroupComponent, selector: "color-swatches-group", inputs: { group: "group", active: "active" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
117
+ <div class="swatches-group">
118
+ <color-swatches-color
119
+ *ngFor="let color of group; let idx = index"
120
+ [active]="color.toLowerCase() === active"
121
+ [color]="color"
122
+ [first]="idx === 0"
123
+ [last]="idx === group.length - 1"
124
+ (onClick)="onClick.emit($event)"
125
+ >
126
+ </color-swatches-color>
127
+ </div>
128
+ `, isInline: true, styles: [".swatches-group{padding-bottom:10px;width:40px;float:left;margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SwatchesColorComponent, selector: "color-swatches-color", inputs: ["color", "first", "last", "active"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
129
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchesGroupComponent, decorators: [{
130
+ type: Component,
131
+ args: [{ selector: 'color-swatches-group', template: `
132
+ <div class="swatches-group">
133
+ <color-swatches-color
134
+ *ngFor="let color of group; let idx = index"
135
+ [active]="color.toLowerCase() === active"
136
+ [color]="color"
137
+ [first]="idx === 0"
138
+ [last]="idx === group.length - 1"
139
+ (onClick)="onClick.emit($event)"
140
+ >
141
+ </color-swatches-color>
142
+ </div>
143
+ `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".swatches-group{padding-bottom:10px;width:40px;float:left;margin-right:10px}\n"] }]
144
+ }], propDecorators: { group: [{
145
+ type: Input
146
+ }], active: [{
147
+ type: Input
148
+ }], onClick: [{
149
+ type: Output
150
+ }], onSwatchHover: [{
151
+ type: Output
152
+ }] } });
153
+
154
+ class SwatchesComponent extends ColorWrap {
155
+ constructor() {
156
+ super();
157
+ /** Pixel value for picker width */
158
+ this.width = 320;
159
+ /** Color squares to display */
160
+ this.height = 240;
161
+ /** An array of color groups, each with an array of colors */
162
+ this.colors = [
163
+ [
164
+ red['900'],
165
+ red['700'],
166
+ red['500'],
167
+ red['300'],
168
+ red['100'],
169
+ ],
170
+ [
171
+ pink['900'],
172
+ pink['700'],
173
+ pink['500'],
174
+ pink['300'],
175
+ pink['100'],
176
+ ],
177
+ [
178
+ purple['900'],
179
+ purple['700'],
180
+ purple['500'],
181
+ purple['300'],
182
+ purple['100'],
183
+ ],
184
+ [
185
+ deepPurple['900'],
186
+ deepPurple['700'],
187
+ deepPurple['500'],
188
+ deepPurple['300'],
189
+ deepPurple['100'],
190
+ ],
191
+ [
192
+ indigo['900'],
193
+ indigo['700'],
194
+ indigo['500'],
195
+ indigo['300'],
196
+ indigo['100'],
197
+ ],
198
+ [
199
+ blue['900'],
200
+ blue['700'],
201
+ blue['500'],
202
+ blue['300'],
203
+ blue['100'],
204
+ ],
205
+ [
206
+ lightBlue['900'],
207
+ lightBlue['700'],
208
+ lightBlue['500'],
209
+ lightBlue['300'],
210
+ lightBlue['100'],
211
+ ],
212
+ [
213
+ cyan['900'],
214
+ cyan['700'],
215
+ cyan['500'],
216
+ cyan['300'],
217
+ cyan['100'],
218
+ ],
219
+ [
220
+ teal['900'],
221
+ teal['700'],
222
+ teal['500'],
223
+ teal['300'],
224
+ teal['100'],
225
+ ],
226
+ [
227
+ '#194D33',
228
+ green['700'],
229
+ green['500'],
230
+ green['300'],
231
+ green['100'],
232
+ ],
233
+ [
234
+ lightGreen['900'],
235
+ lightGreen['700'],
236
+ lightGreen['500'],
237
+ lightGreen['300'],
238
+ lightGreen['100'],
239
+ ],
240
+ [
241
+ lime['900'],
242
+ lime['700'],
243
+ lime['500'],
244
+ lime['300'],
245
+ lime['100'],
246
+ ],
247
+ [
248
+ yellow['900'],
249
+ yellow['700'],
250
+ yellow['500'],
251
+ yellow['300'],
252
+ yellow['100'],
253
+ ],
254
+ [
255
+ amber['900'],
256
+ amber['700'],
257
+ amber['500'],
258
+ amber['300'],
259
+ amber['100'],
260
+ ],
261
+ [
262
+ orange['900'],
263
+ orange['700'],
264
+ orange['500'],
265
+ orange['300'],
266
+ orange['100'],
267
+ ],
268
+ [
269
+ deepOrange['900'],
270
+ deepOrange['700'],
271
+ deepOrange['500'],
272
+ deepOrange['300'],
273
+ deepOrange['100'],
274
+ ],
275
+ [
276
+ brown['900'],
277
+ brown['700'],
278
+ brown['500'],
279
+ brown['300'],
280
+ brown['100'],
281
+ ],
282
+ [
283
+ blueGrey['900'],
284
+ blueGrey['700'],
285
+ blueGrey['500'],
286
+ blueGrey['300'],
287
+ blueGrey['100'],
288
+ ],
289
+ ['#000000', '#525252', '#969696', '#D9D9D9', '#FFFFFF'],
290
+ ];
291
+ this.zDepth = 1;
292
+ this.radius = 1;
293
+ this.background = '#fff';
294
+ }
295
+ handlePickerChange({ data, $event }) {
296
+ this.handleChange(data, $event);
297
+ }
298
+ }
299
+ SwatchesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
300
+ SwatchesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SwatchesComponent, selector: "color-swatches", inputs: { width: "width", height: "height", colors: "colors", zDepth: "zDepth", radius: "radius", background: "background" }, providers: [
301
+ {
302
+ provide: NG_VALUE_ACCESSOR,
303
+ useExisting: forwardRef(() => SwatchesComponent),
304
+ multi: true,
305
+ },
306
+ {
307
+ provide: ColorWrap,
308
+ useExisting: forwardRef(() => SwatchesComponent),
309
+ },
310
+ ], usesInheritance: true, ngImport: i0, template: `
311
+ <div class="swatches-picker {{ className }}"
312
+ [style.width.px]="width" [style.height.px]="height">
313
+ <color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
314
+ <div class="swatches-overflow" [style.height.px]="height">
315
+ <div class="swatches-body">
316
+ <color-swatches-group
317
+ *ngFor="let group of colors"
318
+ [group]="group" [active]="hex"
319
+ (onClick)="handlePickerChange($event)"
320
+ ></color-swatches-group>
321
+ </div>
322
+ </div>
323
+ </color-raised>
324
+ </div>
325
+ `, isInline: true, styles: [".swatches-overflow{overflow-y:scroll}.swatches-overflow{padding:16px 0 6px 16px}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(function () { return i2.RaisedComponent; }), selector: "color-raised", inputs: ["zDepth", "radius", "background"] }, { kind: "component", type: i0.forwardRef(function () { return SwatchesGroupComponent; }), selector: "color-swatches-group", inputs: ["group", "active"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
326
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchesComponent, decorators: [{
327
+ type: Component,
328
+ args: [{ selector: 'color-swatches', template: `
329
+ <div class="swatches-picker {{ className }}"
330
+ [style.width.px]="width" [style.height.px]="height">
331
+ <color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
332
+ <div class="swatches-overflow" [style.height.px]="height">
333
+ <div class="swatches-body">
334
+ <color-swatches-group
335
+ *ngFor="let group of colors"
336
+ [group]="group" [active]="hex"
337
+ (onClick)="handlePickerChange($event)"
338
+ ></color-swatches-group>
339
+ </div>
340
+ </div>
341
+ </color-raised>
342
+ </div>
343
+ `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
344
+ {
345
+ provide: NG_VALUE_ACCESSOR,
346
+ useExisting: forwardRef(() => SwatchesComponent),
347
+ multi: true,
348
+ },
349
+ {
350
+ provide: ColorWrap,
351
+ useExisting: forwardRef(() => SwatchesComponent),
352
+ },
353
+ ], styles: [".swatches-overflow{overflow-y:scroll}.swatches-overflow{padding:16px 0 6px 16px}\n"] }]
354
+ }], ctorParameters: function () { return []; }, propDecorators: { width: [{
355
+ type: Input
356
+ }], height: [{
357
+ type: Input
358
+ }], colors: [{
359
+ type: Input
360
+ }], zDepth: [{
361
+ type: Input
362
+ }], radius: [{
363
+ type: Input
364
+ }], background: [{
365
+ type: Input
366
+ }] } });
367
+ class ColorSwatchesModule {
368
+ }
369
+ ColorSwatchesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorSwatchesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
370
+ ColorSwatchesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorSwatchesModule, declarations: [SwatchesComponent, SwatchesGroupComponent,
371
+ SwatchesColorComponent], imports: [CommonModule, SwatchModule, RaisedModule], exports: [SwatchesComponent, SwatchesGroupComponent, SwatchesColorComponent] });
372
+ ColorSwatchesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorSwatchesModule, imports: [CommonModule, SwatchModule, RaisedModule] });
373
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorSwatchesModule, decorators: [{
374
+ type: NgModule,
375
+ args: [{
376
+ declarations: [
377
+ SwatchesComponent,
378
+ SwatchesGroupComponent,
379
+ SwatchesColorComponent,
380
+ ],
381
+ exports: [SwatchesComponent, SwatchesGroupComponent, SwatchesColorComponent],
382
+ imports: [CommonModule, SwatchModule, RaisedModule],
383
+ }]
384
+ }] });
385
+
386
+ /**
387
+ * Generated bundle index. Do not edit.
388
+ */
389
+
390
+ export { ColorSwatchesModule, SwatchesColorComponent, SwatchesComponent, SwatchesGroupComponent };
391
+ //# sourceMappingURL=ngx-color-swatches.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ngx-color-swatches.mjs","sources":["../../src/lib/swatches/swatches-color.component.ts","../../src/lib/swatches/swatches-group.component.ts","../../src/lib/swatches/swatches.component.ts","../../src/lib/swatches/ngx-color-swatches.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnInit,\n Output,\n} from '@angular/core';\n\nimport { getContrastingColor } from 'ngx-color';\n\n@Component({\n selector: 'color-swatches-color',\n template: `\n <color-swatch\n [color]=\"color\"\n [style]=\"colorStyle\"\n [focusStyle]=\"focusStyle\"\n [class.first]=\"first\"\n [class.last]=\"last\"\n (click)=\"handleClick($event)\"\n (keydown.enter)=\"handleClick($event)\"\n (onHover)=\"onSwatchHover.emit($event)\"\n >\n <div class=\"swatch-check\" *ngIf=\"active\" [class.first]=\"first\" [class.last]=\"last\">\n <svg\n style=\"width: 24px; height: 24px;\"\n viewBox=\"0 0 24 24\"\n [style.fill]=\"getContrastingColor(color)\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n </div>\n </color-swatch>\n `,\n styles: [\n `\n .swatches-group {\n padding-bottom: 10px;\n width: 40px;\n float: left;\n margin-right: 10px;\n }\n .swatch-check {\n display: flex;\n margin-left: 8px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class SwatchesColorComponent implements OnInit {\n @Input() color!: string;\n @Input() first = false;\n @Input() last = false;\n @Input() active!: boolean;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n getContrastingColor = getContrastingColor;\n colorStyle: Record<string, string> = {\n width: '40px',\n height: '24px',\n cursor: 'pointer',\n marginBottom: '1px',\n };\n focusStyle: Record<string, string> = {};\n\n ngOnInit() {\n this.colorStyle.background = this.color;\n this.focusStyle.boxShadow = `0 0 4px ${this.color}`;\n if (this.first) {\n this.colorStyle.borderRadius = '2px 2px 0 0';\n }\n if (this.last) {\n this.colorStyle.borderRadius = '0 0 2px 2px';\n }\n if (this.color === '#FFFFFF') {\n this.colorStyle.boxShadow = 'inset 0 0 0 1px #ddd';\n }\n }\n handleClick($event) {\n this.onClick.emit({\n data: {\n hex: this.color,\n source: 'hex',\n },\n $event,\n });\n }\n}\n","import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\n@Component({\n selector: 'color-swatches-group',\n template: `\n <div class=\"swatches-group\">\n <color-swatches-color\n *ngFor=\"let color of group; let idx = index\"\n [active]=\"color.toLowerCase() === active\"\n [color]=\"color\"\n [first]=\"idx === 0\"\n [last]=\"idx === group.length - 1\"\n (onClick)=\"onClick.emit($event)\"\n >\n </color-swatches-color>\n </div>\n `,\n styles: [\n `\n .swatches-group {\n padding-bottom: 10px;\n width: 40px;\n float: left;\n margin-right: 10px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class SwatchesGroupComponent {\n @Input() group!: string[];\n @Input() active!: string;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\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';\n\nimport { ColorWrap, RaisedModule, SwatchModule, zDepth } from 'ngx-color';\nimport { SwatchesColorComponent } from './swatches-color.component';\nimport { SwatchesGroupComponent } from './swatches-group.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-swatches',\n template: `\n <div class=\"swatches-picker {{ className }}\"\n [style.width.px]=\"width\" [style.height.px]=\"height\">\n <color-raised [zDepth]=\"zDepth\" [background]=\"background\" [radius]=\"radius\">\n <div class=\"swatches-overflow\" [style.height.px]=\"height\">\n <div class=\"swatches-body\">\n <color-swatches-group\n *ngFor=\"let group of colors\"\n [group]=\"group\" [active]=\"hex\"\n (onClick)=\"handlePickerChange($event)\"\n ></color-swatches-group>\n </div>\n </div>\n </color-raised>\n </div>\n `,\n styles: [\n `\n .swatches-overflow {\n overflow-y: scroll;\n }\n .swatches-overflow {\n padding: 16px 0 6px 16px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SwatchesComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => SwatchesComponent),\n },\n ]\n})\nexport class SwatchesComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 320;\n /** Color squares to display */\n @Input() height: string | number = 240;\n /** An array of color groups, each with an array of colors */\n @Input()\n colors: string[][] = [\n [\n red['900'],\n red['700'],\n red['500'],\n red['300'],\n red['100'],\n ],\n [\n pink['900'],\n pink['700'],\n pink['500'],\n pink['300'],\n pink['100'],\n ],\n [\n purple['900'],\n purple['700'],\n purple['500'],\n purple['300'],\n purple['100'],\n ],\n [\n deepPurple['900'],\n deepPurple['700'],\n deepPurple['500'],\n deepPurple['300'],\n deepPurple['100'],\n ],\n [\n indigo['900'],\n indigo['700'],\n indigo['500'],\n indigo['300'],\n indigo['100'],\n ],\n [\n blue['900'],\n blue['700'],\n blue['500'],\n blue['300'],\n blue['100'],\n ],\n [\n lightBlue['900'],\n lightBlue['700'],\n lightBlue['500'],\n lightBlue['300'],\n lightBlue['100'],\n ],\n [\n cyan['900'],\n cyan['700'],\n cyan['500'],\n cyan['300'],\n cyan['100'],\n ],\n [\n teal['900'],\n teal['700'],\n teal['500'],\n teal['300'],\n teal['100'],\n ],\n [\n '#194D33',\n green['700'],\n green['500'],\n green['300'],\n green['100'],\n ],\n [\n lightGreen['900'],\n lightGreen['700'],\n lightGreen['500'],\n lightGreen['300'],\n lightGreen['100'],\n ],\n [\n lime['900'],\n lime['700'],\n lime['500'],\n lime['300'],\n lime['100'],\n ],\n [\n yellow['900'],\n yellow['700'],\n yellow['500'],\n yellow['300'],\n yellow['100'],\n ],\n [\n amber['900'],\n amber['700'],\n amber['500'],\n amber['300'],\n amber['100'],\n ],\n [\n orange['900'],\n orange['700'],\n orange['500'],\n orange['300'],\n orange['100'],\n ],\n [\n deepOrange['900'],\n deepOrange['700'],\n deepOrange['500'],\n deepOrange['300'],\n deepOrange['100'],\n ],\n [\n brown['900'],\n brown['700'],\n brown['500'],\n brown['300'],\n brown['100'],\n ],\n [\n blueGrey['900'],\n blueGrey['700'],\n blueGrey['500'],\n blueGrey['300'],\n blueGrey['100'],\n ],\n ['#000000', '#525252', '#969696', '#D9D9D9', '#FFFFFF'],\n ];\n @Input() zDepth: zDepth = 1;\n @Input() radius = 1;\n @Input() background = '#fff';\n\n constructor() {\n super();\n }\n\n handlePickerChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [\n SwatchesComponent,\n SwatchesGroupComponent,\n SwatchesColorComponent,\n ],\n exports: [SwatchesComponent, SwatchesGroupComponent, SwatchesColorComponent],\n imports: [CommonModule, SwatchModule, RaisedModule],\n})\nexport class ColorSwatchesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i2.SwatchesColorComponent"],"mappings":"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"}
@@ -0,0 +1,166 @@
1
+ import * as i1 from '@angular/common';
2
+ import { CommonModule } from '@angular/common';
3
+ import * as i0 from '@angular/core';
4
+ import { forwardRef, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
5
+ import * as i2 from 'ngx-color';
6
+ import { ColorWrap, isValidHex, SwatchModule, EditableInputModule } from 'ngx-color';
7
+ import { NG_VALUE_ACCESSOR } from '@angular/forms';
8
+
9
+ class TwitterComponent extends ColorWrap {
10
+ constructor() {
11
+ super();
12
+ /** Pixel value for picker width */
13
+ this.width = 276;
14
+ /** Color squares to display */
15
+ this.colors = [
16
+ '#FF6900',
17
+ '#FCB900',
18
+ '#7BDCB5',
19
+ '#00D084',
20
+ '#8ED1FC',
21
+ '#0693E3',
22
+ '#ABB8C3',
23
+ '#EB144C',
24
+ '#F78DA7',
25
+ '#9900EF',
26
+ ];
27
+ this.triangle = 'top-left';
28
+ this.swatchStyle = {
29
+ width: '30px',
30
+ height: '30px',
31
+ borderRadius: '4px',
32
+ fontSize: '0',
33
+ };
34
+ this.input = {
35
+ borderRadius: '4px',
36
+ borderBottomLeftRadius: '0',
37
+ borderTopLeftRadius: '0',
38
+ border: '1px solid #e6ecf0',
39
+ boxSizing: 'border-box',
40
+ display: 'inline',
41
+ fontSize: '14px',
42
+ height: '30px',
43
+ padding: '0',
44
+ paddingLeft: '6px',
45
+ width: '100%',
46
+ color: '#657786',
47
+ };
48
+ this.disableAlpha = true;
49
+ }
50
+ focus(color) {
51
+ return { boxShadow: `0 0 4px ${color}` };
52
+ }
53
+ handleBlockChange({ hex, $event }) {
54
+ if (isValidHex(hex)) {
55
+ // this.hex = hex;
56
+ this.handleChange({ hex, source: 'hex' }, $event);
57
+ }
58
+ }
59
+ handleValueChange({ data, $event }) {
60
+ this.handleBlockChange({ hex: data, $event });
61
+ }
62
+ }
63
+ TwitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: TwitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
64
+ TwitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: TwitterComponent, selector: "color-twitter", inputs: { width: "width", colors: "colors", triangle: "triangle" }, providers: [
65
+ {
66
+ provide: NG_VALUE_ACCESSOR,
67
+ useExisting: forwardRef(() => TwitterComponent),
68
+ multi: true,
69
+ },
70
+ {
71
+ provide: ColorWrap,
72
+ useExisting: forwardRef(() => TwitterComponent),
73
+ },
74
+ ], usesInheritance: true, ngImport: i0, template: `
75
+ <div class="twitter-picker {{ triangle }}-triangle {{ className }}" [style.width.px]="width">
76
+ <div class="triangleShadow"></div>
77
+ <div class="triangle"></div>
78
+ <div class="twitter-body">
79
+ <div class="twitter-swatch" *ngFor="let color of colors">
80
+ <color-swatch
81
+ [color]="color"
82
+ [style]="swatchStyle"
83
+ [focusStyle]="focus(color)"
84
+ (onClick)="handleBlockChange($event)"
85
+ (onHover)="onSwatchHover.emit($event)"
86
+ ></color-swatch>
87
+ </div>
88
+ <div class="twitter-hash">
89
+ <div>#</div>
90
+ </div>
91
+ <div class="twitter-input">
92
+ <color-editable-input
93
+ [style]="{ input: input }"
94
+ [value]="hex.replace('#', '')"
95
+ (onChange)="handleValueChange($event)"
96
+ ></color-editable-input>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ `, isInline: true, styles: [".twitter-picker{background:rgb(255,255,255);border:0px solid rgba(0,0,0,.25);box-shadow:#00000040 0 1px 4px;border-radius:4px;position:relative;box-sizing:border-box}.triangleShadow{width:0px;height:0px;border-style:solid;border-width:0px 9px 10px;border-color:transparent transparent rgba(0,0,0,.1);position:absolute}.triangle{width:0px;height:0px;border-style:solid;border-width:0px 9px 10px;border-color:transparent transparent rgb(255,255,255);position:absolute}.hide-triangle>.triangle{display:none}.hide-triangle>.triangleShadow{display:none}.top-left-triangle>.triangle{top:-10px;left:12px}.top-left-triangle>.triangleShadow{top:-11px;left:12px}.top-right-triangle>.triangle{top:-10px;right:12px}.top-right-triangle>.triangleShadow{top:-11px;right:12px}.twitter-body{padding:15px 9px 9px 15px}.twitter-swatch{width:30px;height:30px;display:inline-block;margin:0 6px 0 0}.twitter-hash{background:rgb(240,240,240);height:30px;width:30px;border-radius:4px 0 0 4px;color:#98a1a4;margin-left:-3px;display:inline-block}.twitter-hash>div{position:absolute;align-items:center;justify-content:center;height:30px;width:30px;display:flex}.twitter-input{display:inline-block;margin-top:-6px;font-size:10px;height:27px;padding:0;position:relative;top:6px;vertical-align:top;width:108px;margin-left:-4px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }, { kind: "component", type: i2.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
101
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: TwitterComponent, decorators: [{
102
+ type: Component,
103
+ args: [{ selector: 'color-twitter', template: `
104
+ <div class="twitter-picker {{ triangle }}-triangle {{ className }}" [style.width.px]="width">
105
+ <div class="triangleShadow"></div>
106
+ <div class="triangle"></div>
107
+ <div class="twitter-body">
108
+ <div class="twitter-swatch" *ngFor="let color of colors">
109
+ <color-swatch
110
+ [color]="color"
111
+ [style]="swatchStyle"
112
+ [focusStyle]="focus(color)"
113
+ (onClick)="handleBlockChange($event)"
114
+ (onHover)="onSwatchHover.emit($event)"
115
+ ></color-swatch>
116
+ </div>
117
+ <div class="twitter-hash">
118
+ <div>#</div>
119
+ </div>
120
+ <div class="twitter-input">
121
+ <color-editable-input
122
+ [style]="{ input: input }"
123
+ [value]="hex.replace('#', '')"
124
+ (onChange)="handleValueChange($event)"
125
+ ></color-editable-input>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
130
+ {
131
+ provide: NG_VALUE_ACCESSOR,
132
+ useExisting: forwardRef(() => TwitterComponent),
133
+ multi: true,
134
+ },
135
+ {
136
+ provide: ColorWrap,
137
+ useExisting: forwardRef(() => TwitterComponent),
138
+ },
139
+ ], styles: [".twitter-picker{background:rgb(255,255,255);border:0px solid rgba(0,0,0,.25);box-shadow:#00000040 0 1px 4px;border-radius:4px;position:relative;box-sizing:border-box}.triangleShadow{width:0px;height:0px;border-style:solid;border-width:0px 9px 10px;border-color:transparent transparent rgba(0,0,0,.1);position:absolute}.triangle{width:0px;height:0px;border-style:solid;border-width:0px 9px 10px;border-color:transparent transparent rgb(255,255,255);position:absolute}.hide-triangle>.triangle{display:none}.hide-triangle>.triangleShadow{display:none}.top-left-triangle>.triangle{top:-10px;left:12px}.top-left-triangle>.triangleShadow{top:-11px;left:12px}.top-right-triangle>.triangle{top:-10px;right:12px}.top-right-triangle>.triangleShadow{top:-11px;right:12px}.twitter-body{padding:15px 9px 9px 15px}.twitter-swatch{width:30px;height:30px;display:inline-block;margin:0 6px 0 0}.twitter-hash{background:rgb(240,240,240);height:30px;width:30px;border-radius:4px 0 0 4px;color:#98a1a4;margin-left:-3px;display:inline-block}.twitter-hash>div{position:absolute;align-items:center;justify-content:center;height:30px;width:30px;display:flex}.twitter-input{display:inline-block;margin-top:-6px;font-size:10px;height:27px;padding:0;position:relative;top:6px;vertical-align:top;width:108px;margin-left:-4px}\n"] }]
140
+ }], ctorParameters: function () { return []; }, propDecorators: { width: [{
141
+ type: Input
142
+ }], colors: [{
143
+ type: Input
144
+ }], triangle: [{
145
+ type: Input
146
+ }] } });
147
+ class ColorTwitterModule {
148
+ }
149
+ ColorTwitterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorTwitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
150
+ ColorTwitterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorTwitterModule, declarations: [TwitterComponent], imports: [CommonModule, SwatchModule, EditableInputModule], exports: [TwitterComponent] });
151
+ ColorTwitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorTwitterModule, imports: [CommonModule, SwatchModule, EditableInputModule] });
152
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorTwitterModule, decorators: [{
153
+ type: NgModule,
154
+ args: [{
155
+ declarations: [TwitterComponent],
156
+ exports: [TwitterComponent],
157
+ imports: [CommonModule, SwatchModule, EditableInputModule],
158
+ }]
159
+ }] });
160
+
161
+ /**
162
+ * Generated bundle index. Do not edit.
163
+ */
164
+
165
+ export { ColorTwitterModule, TwitterComponent };
166
+ //# sourceMappingURL=ngx-color-twitter.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ngx-color-twitter.mjs","sources":["../../src/lib/twitter/twitter.component.ts","../../src/lib/twitter/ngx-color-twitter.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, EditableInputModule, isValidHex, SwatchModule } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-twitter',\n template: `\n <div class=\"twitter-picker {{ triangle }}-triangle {{ className }}\" [style.width.px]=\"width\">\n <div class=\"triangleShadow\"></div>\n <div class=\"triangle\"></div>\n <div class=\"twitter-body\">\n <div class=\"twitter-swatch\" *ngFor=\"let color of colors\">\n <color-swatch\n [color]=\"color\"\n [style]=\"swatchStyle\"\n [focusStyle]=\"focus(color)\"\n (onClick)=\"handleBlockChange($event)\"\n (onHover)=\"onSwatchHover.emit($event)\"\n ></color-swatch>\n </div>\n <div class=\"twitter-hash\">\n <div>#</div>\n </div>\n <div class=\"twitter-input\">\n <color-editable-input\n [style]=\"{ input: input }\"\n [value]=\"hex.replace('#', '')\"\n (onChange)=\"handleValueChange($event)\"\n ></color-editable-input>\n </div>\n </div>\n </div>\n `,\n styles: [\n `\n .twitter-picker {\n background: rgb(255, 255, 255);\n border: 0px solid rgba(0, 0, 0, 0.25);\n box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;\n border-radius: 4px;\n position: relative;\n box-sizing: border-box;\n }\n .triangleShadow {\n width: 0px;\n height: 0px;\n border-style: solid;\n border-width: 0px 9px 10px;\n border-color: transparent transparent rgba(0, 0, 0, 0.1);\n position: absolute;\n }\n .triangle {\n width: 0px;\n height: 0px;\n border-style: solid;\n border-width: 0px 9px 10px;\n border-color: transparent transparent rgb(255, 255, 255);\n position: absolute;\n }\n .hide-triangle > .triangle {\n display: none;\n }\n .hide-triangle > .triangleShadow {\n display: none;\n }\n .top-left-triangle > .triangle {\n top: -10px;\n left: 12px;\n }\n .top-left-triangle > .triangleShadow {\n top: -11px;\n left: 12px;\n }\n .top-right-triangle > .triangle {\n top: -10px;\n right: 12px;\n }\n .top-right-triangle > .triangleShadow {\n top: -11px;\n right: 12px;\n }\n .twitter-body {\n padding: 15px 9px 9px 15px;\n }\n .twitter-swatch {\n width: 30px;\n height: 30px;\n display: inline-block;\n margin: 0 6px 0 0;\n }\n .twitter-hash {\n background: rgb(240, 240, 240);\n height: 30px;\n width: 30px;\n border-radius: 4px 0px 0px 4px;\n color: rgb(152, 161, 164);\n margin-left: -3px;\n display: inline-block;\n\n }\n .twitter-hash > div {\n position: absolute;\n align-items: center;\n justify-content: center;\n height: 30px;\n width: 30px;\n display: flex;\n }\n .twitter-input {\n position: relative;\n display: inline-block;\n margin-top: -6px;\n font-size: 10px;\n height: 27px;\n padding: 0;\n position: relative;\n top: 6px;\n vertical-align: top;\n width: 108px;\n margin-left: -4px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => TwitterComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => TwitterComponent),\n },\n ]\n})\nexport class TwitterComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 276;\n /** Color squares to display */\n @Input() colors = [\n '#FF6900',\n '#FCB900',\n '#7BDCB5',\n '#00D084',\n '#8ED1FC',\n '#0693E3',\n '#ABB8C3',\n '#EB144C',\n '#F78DA7',\n '#9900EF',\n ];\n @Input() triangle: 'hide' | 'top-left' | 'top-right' | 'bottom-right' = 'top-left';\n\n swatchStyle: {[key: string]: string} = {\n width: '30px',\n height: '30px',\n borderRadius: '4px',\n fontSize: '0',\n };\n input: {[key: string]: string} = {\n borderRadius: '4px',\n borderBottomLeftRadius: '0',\n borderTopLeftRadius: '0',\n border: '1px solid #e6ecf0',\n boxSizing: 'border-box',\n display: 'inline',\n fontSize: '14px',\n height: '30px',\n padding: '0',\n paddingLeft: '6px',\n width: '100%',\n color: '#657786',\n };\n disableAlpha = true;\n\n constructor() {\n super();\n }\n\n focus(color: string) {\n return { boxShadow: `0 0 4px ${color}` };\n }\n\n handleBlockChange({ hex, $event }: any) {\n if (isValidHex(hex)) {\n // this.hex = hex;\n this.handleChange({ hex, source: 'hex' }, $event);\n }\n }\n\n handleValueChange({ data, $event }: any) {\n this.handleBlockChange({ hex: data, $event });\n }\n}\n\n@NgModule({\n declarations: [TwitterComponent],\n exports: [TwitterComponent],\n imports: [CommonModule, SwatchModule, EditableInputModule],\n})\nexport class ColorTwitterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}