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,262 +0,0 @@
1
- import * as i2 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 i1 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: "13.0.0", ngImport: i0, type: TwitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
64
- TwitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", 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"], components: [{ type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }, { type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
101
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TwitterComponent, decorators: [{
102
- type: Component,
103
- args: [{
104
- selector: 'color-twitter',
105
- template: `
106
- <div class="twitter-picker {{ triangle }}-triangle {{ className }}" [style.width.px]="width">
107
- <div class="triangleShadow"></div>
108
- <div class="triangle"></div>
109
- <div class="twitter-body">
110
- <div class="twitter-swatch" *ngFor="let color of colors">
111
- <color-swatch
112
- [color]="color"
113
- [style]="swatchStyle"
114
- [focusStyle]="focus(color)"
115
- (onClick)="handleBlockChange($event)"
116
- (onHover)="onSwatchHover.emit($event)"
117
- ></color-swatch>
118
- </div>
119
- <div class="twitter-hash">
120
- <div>#</div>
121
- </div>
122
- <div class="twitter-input">
123
- <color-editable-input
124
- [style]="{ input: input }"
125
- [value]="hex.replace('#', '')"
126
- (onChange)="handleValueChange($event)"
127
- ></color-editable-input>
128
- </div>
129
- </div>
130
- </div>
131
- `,
132
- styles: [
133
- `
134
- .twitter-picker {
135
- background: rgb(255, 255, 255);
136
- border: 0px solid rgba(0, 0, 0, 0.25);
137
- box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;
138
- border-radius: 4px;
139
- position: relative;
140
- box-sizing: border-box;
141
- }
142
- .triangleShadow {
143
- width: 0px;
144
- height: 0px;
145
- border-style: solid;
146
- border-width: 0px 9px 10px;
147
- border-color: transparent transparent rgba(0, 0, 0, 0.1);
148
- position: absolute;
149
- }
150
- .triangle {
151
- width: 0px;
152
- height: 0px;
153
- border-style: solid;
154
- border-width: 0px 9px 10px;
155
- border-color: transparent transparent rgb(255, 255, 255);
156
- position: absolute;
157
- }
158
- .hide-triangle > .triangle {
159
- display: none;
160
- }
161
- .hide-triangle > .triangleShadow {
162
- display: none;
163
- }
164
- .top-left-triangle > .triangle {
165
- top: -10px;
166
- left: 12px;
167
- }
168
- .top-left-triangle > .triangleShadow {
169
- top: -11px;
170
- left: 12px;
171
- }
172
- .top-right-triangle > .triangle {
173
- top: -10px;
174
- right: 12px;
175
- }
176
- .top-right-triangle > .triangleShadow {
177
- top: -11px;
178
- right: 12px;
179
- }
180
- .twitter-body {
181
- padding: 15px 9px 9px 15px;
182
- }
183
- .twitter-swatch {
184
- width: 30px;
185
- height: 30px;
186
- display: inline-block;
187
- margin: 0 6px 0 0;
188
- }
189
- .twitter-hash {
190
- background: rgb(240, 240, 240);
191
- height: 30px;
192
- width: 30px;
193
- border-radius: 4px 0px 0px 4px;
194
- color: rgb(152, 161, 164);
195
- margin-left: -3px;
196
- display: inline-block;
197
-
198
- }
199
- .twitter-hash > div {
200
- position: absolute;
201
- align-items: center;
202
- justify-content: center;
203
- height: 30px;
204
- width: 30px;
205
- display: flex;
206
- }
207
- .twitter-input {
208
- position: relative;
209
- display: inline-block;
210
- margin-top: -6px;
211
- font-size: 10px;
212
- height: 27px;
213
- padding: 0;
214
- position: relative;
215
- top: 6px;
216
- vertical-align: top;
217
- width: 108px;
218
- margin-left: -4px;
219
- }
220
- `,
221
- ],
222
- changeDetection: ChangeDetectionStrategy.OnPush,
223
- preserveWhitespaces: false,
224
- providers: [
225
- {
226
- provide: NG_VALUE_ACCESSOR,
227
- useExisting: forwardRef(() => TwitterComponent),
228
- multi: true,
229
- },
230
- {
231
- provide: ColorWrap,
232
- useExisting: forwardRef(() => TwitterComponent),
233
- },
234
- ]
235
- }]
236
- }], ctorParameters: function () { return []; }, propDecorators: { width: [{
237
- type: Input
238
- }], colors: [{
239
- type: Input
240
- }], triangle: [{
241
- type: Input
242
- }] } });
243
- class ColorTwitterModule {
244
- }
245
- ColorTwitterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorTwitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
246
- ColorTwitterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorTwitterModule, declarations: [TwitterComponent], imports: [CommonModule, SwatchModule, EditableInputModule], exports: [TwitterComponent] });
247
- ColorTwitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorTwitterModule, imports: [[CommonModule, SwatchModule, EditableInputModule]] });
248
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorTwitterModule, decorators: [{
249
- type: NgModule,
250
- args: [{
251
- declarations: [TwitterComponent],
252
- exports: [TwitterComponent],
253
- imports: [CommonModule, SwatchModule, EditableInputModule],
254
- }]
255
- }] });
256
-
257
- /**
258
- * Generated bundle index. Do not edit.
259
- */
260
-
261
- export { ColorTwitterModule, TwitterComponent };
262
- //# sourceMappingURL=ngx-color-twitter.mjs.map
@@ -1 +0,0 @@
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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"}
@@ -1,123 +0,0 @@
1
- import { CommonModule } from '@angular/common';
2
- import * as i0 from '@angular/core';
3
- import { forwardRef, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
4
- import * as i1 from 'ngx-color';
5
- import { ColorWrap, toState, AlphaModule, CheckboardModule } from 'ngx-color';
6
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
7
-
8
- class AlphaPickerComponent extends ColorWrap {
9
- constructor() {
10
- super();
11
- /** Pixel value for picker width */
12
- this.width = 316;
13
- /** Pixel value for picker height */
14
- this.height = 16;
15
- this.direction = 'horizontal';
16
- this.pointer = {
17
- width: '18px',
18
- height: '18px',
19
- borderRadius: '50%',
20
- transform: 'translate(-9px, -2px)',
21
- boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
22
- };
23
- }
24
- ngOnChanges() {
25
- if (this.direction === 'vertical') {
26
- this.pointer.transform = 'translate(-3px, -9px)';
27
- }
28
- this.setState(toState(this.color, this.oldHue));
29
- }
30
- handlePickerChange({ data, $event }) {
31
- this.handleChange(data, $event);
32
- }
33
- }
34
- AlphaPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: AlphaPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
35
- AlphaPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: AlphaPickerComponent, selector: "color-alpha-picker", inputs: { width: "width", height: "height", direction: "direction" }, providers: [
36
- {
37
- provide: NG_VALUE_ACCESSOR,
38
- useExisting: forwardRef(() => AlphaPickerComponent),
39
- multi: true,
40
- },
41
- {
42
- provide: ColorWrap,
43
- useExisting: forwardRef(() => AlphaPickerComponent)
44
- }
45
- ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
46
- <div class="alpha-picker {{ className }}"
47
- [style.width.px]="width" [style.height.px]="height">
48
- <color-alpha
49
- [hsl]="hsl"
50
- [rgb]="rgb"
51
- [pointer]="pointer"
52
- [direction]="direction"
53
- (onChange)="handlePickerChange($event)"
54
- ></color-alpha>
55
- </div>
56
- `, isInline: true, styles: [".alpha-picker{position:relative}.color-alpha{radius:2px}\n"], components: [{ type: i1.AlphaComponent, selector: "color-alpha", inputs: ["hsl", "rgb", "pointer", "shadow", "radius", "direction"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
57
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: AlphaPickerComponent, decorators: [{
58
- type: Component,
59
- args: [{
60
- selector: 'color-alpha-picker',
61
- template: `
62
- <div class="alpha-picker {{ className }}"
63
- [style.width.px]="width" [style.height.px]="height">
64
- <color-alpha
65
- [hsl]="hsl"
66
- [rgb]="rgb"
67
- [pointer]="pointer"
68
- [direction]="direction"
69
- (onChange)="handlePickerChange($event)"
70
- ></color-alpha>
71
- </div>
72
- `,
73
- styles: [
74
- `
75
- .alpha-picker {
76
- position: relative;
77
- }
78
- .color-alpha {
79
- radius: 2px;
80
- }
81
- `,
82
- ],
83
- changeDetection: ChangeDetectionStrategy.OnPush,
84
- preserveWhitespaces: false,
85
- providers: [
86
- {
87
- provide: NG_VALUE_ACCESSOR,
88
- useExisting: forwardRef(() => AlphaPickerComponent),
89
- multi: true,
90
- },
91
- {
92
- provide: ColorWrap,
93
- useExisting: forwardRef(() => AlphaPickerComponent)
94
- }
95
- ]
96
- }]
97
- }], ctorParameters: function () { return []; }, propDecorators: { width: [{
98
- type: Input
99
- }], height: [{
100
- type: Input
101
- }], direction: [{
102
- type: Input
103
- }] } });
104
- class ColorAlphaModule {
105
- }
106
- ColorAlphaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorAlphaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
107
- ColorAlphaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorAlphaModule, declarations: [AlphaPickerComponent], imports: [CommonModule, AlphaModule, CheckboardModule], exports: [AlphaPickerComponent] });
108
- ColorAlphaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorAlphaModule, imports: [[CommonModule, AlphaModule, CheckboardModule]] });
109
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorAlphaModule, decorators: [{
110
- type: NgModule,
111
- args: [{
112
- declarations: [AlphaPickerComponent],
113
- exports: [AlphaPickerComponent],
114
- imports: [CommonModule, AlphaModule, CheckboardModule],
115
- }]
116
- }] });
117
-
118
- /**
119
- * Generated bundle index. Do not edit.
120
- */
121
-
122
- export { AlphaPickerComponent, ColorAlphaModule };
123
- //# sourceMappingURL=ngx-color-alpha.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ngx-color-alpha.mjs","sources":["../../src/lib/alpha/alpha-picker.component.ts","../../src/lib/alpha/ngx-color-alpha.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule, OnChanges } from '@angular/core';\n\nimport { AlphaModule, CheckboardModule, ColorWrap, toState } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-alpha-picker',\n template: `\n <div class=\"alpha-picker {{ className }}\"\n [style.width.px]=\"width\" [style.height.px]=\"height\">\n <color-alpha\n [hsl]=\"hsl\"\n [rgb]=\"rgb\"\n [pointer]=\"pointer\"\n [direction]=\"direction\"\n (onChange)=\"handlePickerChange($event)\"\n ></color-alpha>\n </div>\n `,\n styles: [\n `\n .alpha-picker {\n position: relative;\n }\n .color-alpha {\n radius: 2px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AlphaPickerComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => AlphaPickerComponent)\n }\n ]\n})\nexport class AlphaPickerComponent extends ColorWrap implements OnChanges {\n /** Pixel value for picker width */\n @Input() width: string | number = 316;\n /** Pixel value for picker height */\n @Input() height: string | number = 16;\n @Input() direction: 'horizontal' | 'vertical' = 'horizontal';\n pointer: {[key: string]: string} = {\n width: '18px',\n height: '18px',\n borderRadius: '50%',\n transform: 'translate(-9px, -2px)',\n boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n };\n\n constructor() {\n super();\n }\n ngOnChanges() {\n if (this.direction === 'vertical') {\n this.pointer.transform = 'translate(-3px, -9px)';\n }\n this.setState(toState(this.color, this.oldHue));\n }\n handlePickerChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [AlphaPickerComponent],\n exports: [AlphaPickerComponent],\n imports: [CommonModule, AlphaModule, CheckboardModule],\n})\nexport class ColorAlphaModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;MA4Ca,oBAAqB,SAAQ,SAAS;IAcjD;QACE,KAAK,EAAE,CAAC;;QAbD,UAAK,GAAoB,GAAG,CAAC;;QAE7B,WAAM,GAAoB,EAAE,CAAC;QAC7B,cAAS,GAA8B,YAAY,CAAC;QAC7D,YAAO,GAA4B;YACjC,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,uBAAuB;YAClC,SAAS,EAAE,iCAAiC;SAC7C,CAAC;KAID;IACD,WAAW;QACT,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE;YACjC,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,uBAAuB,CAAC;SAClD;QACD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;KACjD;IACD,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;KACjC;;iHAzBU,oBAAoB;qGAApB,oBAAoB,mHAZpB;QACT;YACE,OAAO,EAAE,iBAAiB;YAC1B,WAAW,EAAE,UAAU,CAAC,MAAM,oBAAoB,CAAC;YACnD,KAAK,EAAE,IAAI;SACZ;QACD;YACE,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,UAAU,CAAC,MAAM,oBAAoB,CAAC;SACpD;KACF,sEAlCS;;;;;;;;;;;GAWT;2FAyBU,oBAAoB;kBAtChC,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE;;;;;;;;;;;GAWT;oBACD,MAAM,EAAE;wBACN;;;;;;;GAOD;qBACA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,mBAAmB,EAAE,KAAK;oBAC1B,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,0BAA0B,CAAC;4BACnD,KAAK,EAAE,IAAI;yBACZ;wBACD;4BACE,OAAO,EAAE,SAAS;4BAClB,WAAW,EAAE,UAAU,CAAC,0BAA0B,CAAC;yBACpD;qBACF;iBACF;0EAGU,KAAK;sBAAb,KAAK;gBAEG,MAAM;sBAAd,KAAK;gBACG,SAAS;sBAAjB,KAAK;;MA4BK,gBAAgB;;6GAAhB,gBAAgB;8GAAhB,gBAAgB,iBAjChB,oBAAoB,aA+BrB,YAAY,EAAE,WAAW,EAAE,gBAAgB,aA/B1C,oBAAoB;8GAiCpB,gBAAgB,YAFlB,CAAC,YAAY,EAAE,WAAW,EAAE,gBAAgB,CAAC;2FAE3C,gBAAgB;kBAL5B,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,oBAAoB,CAAC;oBACpC,OAAO,EAAE,CAAC,oBAAoB,CAAC;oBAC/B,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,gBAAgB,CAAC;iBACvD;;;AC5ED;;;;;;"}