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,467 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
3
- import * as i1 from 'ngx-color';
4
- import { isValidHex, ColorWrap, EditableInputModule, HueModule, AlphaModule, SwatchModule, SaturationModule } from 'ngx-color';
5
- import { CommonModule } from '@angular/common';
6
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
7
-
8
- class PhotoshopButtonComponent {
9
- constructor() {
10
- this.label = '';
11
- this.active = false;
12
- this.onClick = new EventEmitter();
13
- }
14
- }
15
- PhotoshopButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
16
- PhotoshopButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: PhotoshopButtonComponent, selector: "color-photoshop-button", inputs: { label: "label", active: "active" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
17
- <div class="photoshop-button" [class.active]="active"
18
- (click)="onClick.emit($event)"
19
- >
20
- {{ label }}
21
- </div>
22
- `, isInline: true, styles: [".photoshop-button{background-image:linear-gradient(-180deg,rgb(255,255,255) 0%,rgb(230,230,230) 100%);border:1px solid rgb(135,135,135);border-radius:2px;height:22px;box-shadow:#eaeaea 0 1px;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;cursor:pointer}.photoshop-button.active{box-shadow:0 0 0 1px #878787}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
23
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopButtonComponent, decorators: [{
24
- type: Component,
25
- args: [{ selector: 'color-photoshop-button', template: `
26
- <div class="photoshop-button" [class.active]="active"
27
- (click)="onClick.emit($event)"
28
- >
29
- {{ label }}
30
- </div>
31
- `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".photoshop-button{background-image:linear-gradient(-180deg,rgb(255,255,255) 0%,rgb(230,230,230) 100%);border:1px solid rgb(135,135,135);border-radius:2px;height:22px;box-shadow:#eaeaea 0 1px;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;cursor:pointer}.photoshop-button.active{box-shadow:0 0 0 1px #878787}\n"] }]
32
- }], propDecorators: { label: [{
33
- type: Input
34
- }], active: [{
35
- type: Input
36
- }], onClick: [{
37
- type: Output
38
- }] } });
39
-
40
- class PhotoshopFieldsComponent {
41
- constructor() {
42
- this.onChange = new EventEmitter();
43
- this.RGBinput = {
44
- marginLeft: '35%',
45
- width: '40%',
46
- height: '22px',
47
- border: '1px solid rgb(136, 136, 136)',
48
- boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 1px inset, rgb(236, 236, 236) 0px 1px 0px 0px',
49
- marginBottom: '2px',
50
- fontSize: '13px',
51
- paddingLeft: '3px',
52
- marginRight: '10px',
53
- };
54
- this.RGBwrap = {
55
- position: 'relative',
56
- };
57
- this.RGBlabel = {
58
- left: '0px',
59
- width: '34px',
60
- textTransform: 'uppercase',
61
- fontSize: '13px',
62
- height: '24px',
63
- lineHeight: '24px',
64
- position: 'absolute',
65
- };
66
- this.HEXinput = {
67
- marginLeft: '20%',
68
- width: '80%',
69
- height: '22px',
70
- border: '1px solid #888888',
71
- boxShadow: 'inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC',
72
- marginBottom: '3px',
73
- fontSize: '13px',
74
- paddingLeft: '3px',
75
- };
76
- this.HEXwrap = {
77
- position: 'relative',
78
- };
79
- this.HEXlabel = {
80
- position: 'absolute',
81
- top: '0px',
82
- left: '0px',
83
- width: '14px',
84
- textTransform: 'uppercase',
85
- fontSize: '13px',
86
- height: '24px',
87
- lineHeight: '24px',
88
- };
89
- }
90
- round(v) {
91
- return Math.round(v);
92
- }
93
- handleValueChange({ data, $event }) {
94
- if (data['#']) {
95
- if (isValidHex(data['#'])) {
96
- this.onChange.emit({
97
- data: {
98
- hex: data['#'],
99
- source: 'hex',
100
- },
101
- $event,
102
- });
103
- }
104
- }
105
- else if (data.r || data.g || data.b) {
106
- this.onChange.emit({
107
- data: {
108
- r: data.r || this.rgb.r,
109
- g: data.g || this.rgb.g,
110
- b: data.b || this.rgb.b,
111
- source: 'rgb',
112
- },
113
- $event,
114
- });
115
- }
116
- else if (data.h || data.s || data.v) {
117
- this.onChange.emit({
118
- data: {
119
- h: data.h || this.hsv.h,
120
- s: data.s || this.hsv.s,
121
- v: data.v || this.hsv.v,
122
- source: 'hsv',
123
- },
124
- $event,
125
- });
126
- }
127
- }
128
- }
129
- PhotoshopFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
130
- PhotoshopFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: PhotoshopFieldsComponent, selector: "color-photoshop-fields", inputs: { rgb: "rgb", hsv: "hsv", hex: "hex" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
131
- <div class="photoshop-fields">
132
- <color-editable-input
133
- [value]="round(hsv.h)"
134
- label="h"
135
- (onChange)="handleValueChange($event)"
136
- [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
137
- ></color-editable-input>
138
- <color-editable-input
139
- [value]="round(hsv.s * 100)"
140
- label="s"
141
- (onChange)="handleValueChange($event)"
142
- [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
143
- ></color-editable-input>
144
- <color-editable-input
145
- [value]="round(hsv.v * 100)"
146
- label="v"
147
- (onChange)="handleValueChange($event)"
148
- [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
149
- ></color-editable-input>
150
- <div class="photoshop-divider"></div>
151
- <color-editable-input
152
- [value]="rgb.r"
153
- label="r"
154
- (onChange)="handleValueChange($event)"
155
- [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
156
- ></color-editable-input>
157
- <color-editable-input
158
- [value]="rgb.g"
159
- label="g"
160
- (onChange)="handleValueChange($event)"
161
- [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
162
- ></color-editable-input>
163
- <color-editable-input
164
- [value]="rgb.b"
165
- label="b"
166
- (onChange)="handleValueChange($event)"
167
- [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
168
- ></color-editable-input>
169
- <div class="photoshop-divider"></div>
170
- <color-editable-input
171
- [value]="hex.replace('#', '')"
172
- label="#"
173
- (onChange)="handleValueChange($event)"
174
- [style]="{input: HEXinput, wrap: HEXwrap, label: HEXlabel}"
175
- ></color-editable-input>
176
- <div class="photoshop-field-symbols">
177
- <div class="photoshop-symbol">°</div>
178
- <div class="photoshop-symbol">%</div>
179
- <div class="photoshop-symbol">%</div>
180
- </div>
181
- </div>
182
- `, isInline: true, styles: [".photoshop-fields{padding-top:5px;padding-bottom:9px;width:85px;position:relative}.photoshop-field-symbols{position:absolute;top:5px;right:-7px;font-size:13px}.photoshop-symbol{height:24px;line-height:24px;padding-bottom:7px}.photoshop-divider{height:5px}\n"], dependencies: [{ kind: "component", type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
183
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopFieldsComponent, decorators: [{
184
- type: Component,
185
- args: [{ selector: 'color-photoshop-fields', template: `
186
- <div class="photoshop-fields">
187
- <color-editable-input
188
- [value]="round(hsv.h)"
189
- label="h"
190
- (onChange)="handleValueChange($event)"
191
- [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
192
- ></color-editable-input>
193
- <color-editable-input
194
- [value]="round(hsv.s * 100)"
195
- label="s"
196
- (onChange)="handleValueChange($event)"
197
- [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
198
- ></color-editable-input>
199
- <color-editable-input
200
- [value]="round(hsv.v * 100)"
201
- label="v"
202
- (onChange)="handleValueChange($event)"
203
- [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
204
- ></color-editable-input>
205
- <div class="photoshop-divider"></div>
206
- <color-editable-input
207
- [value]="rgb.r"
208
- label="r"
209
- (onChange)="handleValueChange($event)"
210
- [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
211
- ></color-editable-input>
212
- <color-editable-input
213
- [value]="rgb.g"
214
- label="g"
215
- (onChange)="handleValueChange($event)"
216
- [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
217
- ></color-editable-input>
218
- <color-editable-input
219
- [value]="rgb.b"
220
- label="b"
221
- (onChange)="handleValueChange($event)"
222
- [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
223
- ></color-editable-input>
224
- <div class="photoshop-divider"></div>
225
- <color-editable-input
226
- [value]="hex.replace('#', '')"
227
- label="#"
228
- (onChange)="handleValueChange($event)"
229
- [style]="{input: HEXinput, wrap: HEXwrap, label: HEXlabel}"
230
- ></color-editable-input>
231
- <div class="photoshop-field-symbols">
232
- <div class="photoshop-symbol">°</div>
233
- <div class="photoshop-symbol">%</div>
234
- <div class="photoshop-symbol">%</div>
235
- </div>
236
- </div>
237
- `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".photoshop-fields{padding-top:5px;padding-bottom:9px;width:85px;position:relative}.photoshop-field-symbols{position:absolute;top:5px;right:-7px;font-size:13px}.photoshop-symbol{height:24px;line-height:24px;padding-bottom:7px}.photoshop-divider{height:5px}\n"] }]
238
- }], propDecorators: { rgb: [{
239
- type: Input
240
- }], hsv: [{
241
- type: Input
242
- }], hex: [{
243
- type: Input
244
- }], onChange: [{
245
- type: Output
246
- }] } });
247
-
248
- class PhotoshopPreviewsComponent {
249
- constructor() {
250
- this.currentColor = '';
251
- this.backgroundNew = '';
252
- }
253
- ngOnChanges() {
254
- this.backgroundNew = `rgb(${this.rgb.r},${this.rgb.g}, ${this.rgb.b})`;
255
- }
256
- }
257
- PhotoshopPreviewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopPreviewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
258
- PhotoshopPreviewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: PhotoshopPreviewsComponent, selector: "color-photoshop-previews", inputs: { rgb: "rgb", currentColor: "currentColor" }, usesOnChanges: true, ngImport: i0, template: `
259
- <div>
260
- <div class="photoshop-label">new</div>
261
- <div class="photoshop-swatches">
262
- <div class="photoshop-new" [style.background]="backgroundNew"></div>
263
- <div class="photoshop-current" [style.background]="currentColor"></div>
264
- </div>
265
- <div class="photoshop-label">current</div>
266
- </div>
267
- `, isInline: true, styles: [".photoshop-swatches{border:1px solid #B3B3B3;border-bottom:1px solid #F0F0F0;margin-bottom:2px;margin-top:1px}.photoshop-new{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 1px #000}.photoshop-current{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 -1px #000}.photoshop-label{font-size:14px;color:#000;text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
268
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopPreviewsComponent, decorators: [{
269
- type: Component,
270
- args: [{ selector: 'color-photoshop-previews', template: `
271
- <div>
272
- <div class="photoshop-label">new</div>
273
- <div class="photoshop-swatches">
274
- <div class="photoshop-new" [style.background]="backgroundNew"></div>
275
- <div class="photoshop-current" [style.background]="currentColor"></div>
276
- </div>
277
- <div class="photoshop-label">current</div>
278
- </div>
279
- `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".photoshop-swatches{border:1px solid #B3B3B3;border-bottom:1px solid #F0F0F0;margin-bottom:2px;margin-top:1px}.photoshop-new{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 1px #000}.photoshop-current{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 -1px #000}.photoshop-label{font-size:14px;color:#000;text-align:center}\n"] }]
280
- }], propDecorators: { rgb: [{
281
- type: Input
282
- }], currentColor: [{
283
- type: Input
284
- }] } });
285
-
286
- class PhotoshopComponent extends ColorWrap {
287
- constructor() {
288
- super();
289
- /** Title text */
290
- this.header = 'Color Picker';
291
- this.onAccept = new EventEmitter();
292
- this.onCancel = new EventEmitter();
293
- this.circle = {
294
- width: '12px',
295
- height: '12px',
296
- borderRadius: '6px',
297
- boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',
298
- transform: 'translate(-6px, -10px)',
299
- };
300
- }
301
- handleValueChange({ data, $event }) {
302
- this.handleChange(data, $event);
303
- }
304
- }
305
- PhotoshopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
306
- PhotoshopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: PhotoshopComponent, selector: "color-photoshop", inputs: { header: "header" }, outputs: { onAccept: "onAccept", onCancel: "onCancel" }, providers: [
307
- {
308
- provide: NG_VALUE_ACCESSOR,
309
- useExisting: forwardRef(() => PhotoshopComponent),
310
- multi: true,
311
- },
312
- {
313
- provide: ColorWrap,
314
- useExisting: forwardRef(() => PhotoshopComponent),
315
- },
316
- ], usesInheritance: true, ngImport: i0, template: `
317
- <div class="photoshop-picker {{ className }}">
318
- <div class="photoshop-head">{{ header }}</div>
319
- <div class="photoshop-body">
320
- <div class="photoshop-saturation">
321
- <color-saturation
322
- [hsl]="hsl" [hsv]="hsv" [circle]="circle"
323
- (onChange)="handleValueChange($event)"
324
- ></color-saturation>
325
- </div>
326
- <div class="photoshop-hue">
327
- <color-hue direction="vertical"
328
- [hsl]="hsl" [hidePointer]="true"
329
- (onChange)="handleValueChange($event)"
330
- ></color-hue>
331
- </div>
332
- <div class="photoshop-controls">
333
- <div class="photoshop-top">
334
- <div class="photoshop-previews">
335
- <color-photoshop-previews
336
- [rgb]="rgb" [currentColor]="currentColor"
337
- ></color-photoshop-previews>
338
- </div>
339
- <div class="photoshop-actions">
340
- <color-photoshop-button label="OK"
341
- [active]="true" (onClick)="onAccept.emit($event)"
342
- ></color-photoshop-button>
343
- <color-photoshop-button label="Cancel"
344
- (onClick)="onCancel.emit($event)"
345
- >
346
- </color-photoshop-button>
347
- <color-photoshop-fields
348
- [rgb]="rgb" [hex]="hex" [hsv]="hsv"
349
- (onChange)="handleValueChange($event)"
350
- ></color-photoshop-fields>
351
- </div>
352
- </div>
353
- </div>
354
- </div>
355
- </div>
356
- `, isInline: true, styles: [".photoshop-picker{background:rgb(220,220,220);border-radius:4px;box-shadow:#00000040 0 0 0 1px,#00000026 0 8px 16px;box-sizing:initial;width:513px}.photoshop-head{background-image:linear-gradient(-180deg,rgb(240,240,240) 0%,rgb(212,212,212) 100%);border-bottom:1px solid rgb(177,177,177);box-shadow:#fff3 0 1px inset,#00000005 0 -1px inset;height:23px;line-height:24px;border-radius:4px 4px 0 0;font-size:13px;color:#4d4d4d;text-align:center}.photoshop-body{padding:15px 15px 0;display:flex}.photoshop-saturation{width:256px;height:256px;position:relative;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial;overflow:hidden}.photoshop-hue{position:relative;height:256px;width:23px;margin-left:10px;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial}.photoshop-controls{width:180px;margin-left:10px}.photoshop-top{display:flex}.photoshop-previews{width:60px}.photoshop-actions{flex:1 1 0%;margin-left:20px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(function () { return i1.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i1.SaturationComponent; }), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return PhotoshopPreviewsComponent; }), selector: "color-photoshop-previews", inputs: ["rgb", "currentColor"] }, { kind: "component", type: i0.forwardRef(function () { return PhotoshopButtonComponent; }), selector: "color-photoshop-button", inputs: ["label", "active"], outputs: ["onClick"] }, { kind: "component", type: i0.forwardRef(function () { return PhotoshopFieldsComponent; }), selector: "color-photoshop-fields", inputs: ["rgb", "hsv", "hex"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
357
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopComponent, decorators: [{
358
- type: Component,
359
- args: [{ selector: 'color-photoshop', template: `
360
- <div class="photoshop-picker {{ className }}">
361
- <div class="photoshop-head">{{ header }}</div>
362
- <div class="photoshop-body">
363
- <div class="photoshop-saturation">
364
- <color-saturation
365
- [hsl]="hsl" [hsv]="hsv" [circle]="circle"
366
- (onChange)="handleValueChange($event)"
367
- ></color-saturation>
368
- </div>
369
- <div class="photoshop-hue">
370
- <color-hue direction="vertical"
371
- [hsl]="hsl" [hidePointer]="true"
372
- (onChange)="handleValueChange($event)"
373
- ></color-hue>
374
- </div>
375
- <div class="photoshop-controls">
376
- <div class="photoshop-top">
377
- <div class="photoshop-previews">
378
- <color-photoshop-previews
379
- [rgb]="rgb" [currentColor]="currentColor"
380
- ></color-photoshop-previews>
381
- </div>
382
- <div class="photoshop-actions">
383
- <color-photoshop-button label="OK"
384
- [active]="true" (onClick)="onAccept.emit($event)"
385
- ></color-photoshop-button>
386
- <color-photoshop-button label="Cancel"
387
- (onClick)="onCancel.emit($event)"
388
- >
389
- </color-photoshop-button>
390
- <color-photoshop-fields
391
- [rgb]="rgb" [hex]="hex" [hsv]="hsv"
392
- (onChange)="handleValueChange($event)"
393
- ></color-photoshop-fields>
394
- </div>
395
- </div>
396
- </div>
397
- </div>
398
- </div>
399
- `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
400
- {
401
- provide: NG_VALUE_ACCESSOR,
402
- useExisting: forwardRef(() => PhotoshopComponent),
403
- multi: true,
404
- },
405
- {
406
- provide: ColorWrap,
407
- useExisting: forwardRef(() => PhotoshopComponent),
408
- },
409
- ], styles: [".photoshop-picker{background:rgb(220,220,220);border-radius:4px;box-shadow:#00000040 0 0 0 1px,#00000026 0 8px 16px;box-sizing:initial;width:513px}.photoshop-head{background-image:linear-gradient(-180deg,rgb(240,240,240) 0%,rgb(212,212,212) 100%);border-bottom:1px solid rgb(177,177,177);box-shadow:#fff3 0 1px inset,#00000005 0 -1px inset;height:23px;line-height:24px;border-radius:4px 4px 0 0;font-size:13px;color:#4d4d4d;text-align:center}.photoshop-body{padding:15px 15px 0;display:flex}.photoshop-saturation{width:256px;height:256px;position:relative;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial;overflow:hidden}.photoshop-hue{position:relative;height:256px;width:23px;margin-left:10px;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial}.photoshop-controls{width:180px;margin-left:10px}.photoshop-top{display:flex}.photoshop-previews{width:60px}.photoshop-actions{flex:1 1 0%;margin-left:20px}\n"] }]
410
- }], ctorParameters: function () { return []; }, propDecorators: { header: [{
411
- type: Input
412
- }], onAccept: [{
413
- type: Output
414
- }], onCancel: [{
415
- type: Output
416
- }] } });
417
- class ColorPhotoshopModule {
418
- }
419
- ColorPhotoshopModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPhotoshopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
420
- ColorPhotoshopModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorPhotoshopModule, declarations: [PhotoshopComponent, PhotoshopPreviewsComponent,
421
- PhotoshopButtonComponent,
422
- PhotoshopFieldsComponent], imports: [CommonModule,
423
- EditableInputModule,
424
- HueModule,
425
- AlphaModule,
426
- SwatchModule,
427
- SaturationModule], exports: [PhotoshopComponent, PhotoshopPreviewsComponent,
428
- PhotoshopButtonComponent,
429
- PhotoshopFieldsComponent] });
430
- ColorPhotoshopModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPhotoshopModule, imports: [CommonModule,
431
- EditableInputModule,
432
- HueModule,
433
- AlphaModule,
434
- SwatchModule,
435
- SaturationModule] });
436
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPhotoshopModule, decorators: [{
437
- type: NgModule,
438
- args: [{
439
- declarations: [
440
- PhotoshopComponent,
441
- PhotoshopPreviewsComponent,
442
- PhotoshopButtonComponent,
443
- PhotoshopFieldsComponent,
444
- ],
445
- exports: [
446
- PhotoshopComponent,
447
- PhotoshopPreviewsComponent,
448
- PhotoshopButtonComponent,
449
- PhotoshopFieldsComponent,
450
- ],
451
- imports: [
452
- CommonModule,
453
- EditableInputModule,
454
- HueModule,
455
- AlphaModule,
456
- SwatchModule,
457
- SaturationModule,
458
- ],
459
- }]
460
- }] });
461
-
462
- /**
463
- * Generated bundle index. Do not edit.
464
- */
465
-
466
- export { ColorPhotoshopModule, PhotoshopButtonComponent, PhotoshopComponent, PhotoshopFieldsComponent, PhotoshopPreviewsComponent };
467
- //# sourceMappingURL=ngx-color-photoshop.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ngx-color-photoshop.mjs","sources":["../../src/lib/photoshop/photoshop-button.component.ts","../../src/lib/photoshop/photoshop-fields.component.ts","../../src/lib/photoshop/photoshop-previews.component.ts","../../src/lib/photoshop/photoshop.component.ts","../../src/lib/photoshop/ngx-color-photoshop.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\n@Component({\n selector: 'color-photoshop-button',\n template: `\n <div class=\"photoshop-button\" [class.active]=\"active\"\n (click)=\"onClick.emit($event)\"\n >\n {{ label }}\n </div>\n `,\n styles: [\n `\n .photoshop-button {\n background-image: linear-gradient(\n -180deg,\n rgb(255, 255, 255) 0%,\n rgb(230, 230, 230) 100%\n );\n border: 1px solid rgb(135, 135, 135);\n border-radius: 2px;\n height: 22px;\n box-shadow: rgb(234, 234, 234) 0px 1px 0px 0px;\n font-size: 14px;\n color: rgb(0, 0, 0);\n line-height: 20px;\n text-align: center;\n margin-bottom: 10px;\n cursor: pointer;\n }\n .photoshop-button.active {\n box-shadow: 0 0 0 1px #878787;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class PhotoshopButtonComponent {\n @Input() label = '';\n @Input() active = false;\n @Output() onClick = new EventEmitter<Event>();\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\nimport { isValidHex, HSV, RGB } from 'ngx-color';\n\n@Component({\n selector: 'color-photoshop-fields',\n template: `\n <div class=\"photoshop-fields\">\n <color-editable-input\n [value]=\"round(hsv.h)\"\n label=\"h\"\n (onChange)=\"handleValueChange($event)\"\n [style]=\"{input: RGBinput, wrap: RGBwrap, label: RGBlabel}\"\n ></color-editable-input>\n <color-editable-input\n [value]=\"round(hsv.s * 100)\"\n label=\"s\"\n (onChange)=\"handleValueChange($event)\"\n [style]=\"{input: RGBinput, wrap: RGBwrap, label: RGBlabel}\"\n ></color-editable-input>\n <color-editable-input\n [value]=\"round(hsv.v * 100)\"\n label=\"v\"\n (onChange)=\"handleValueChange($event)\"\n [style]=\"{input: RGBinput, wrap: RGBwrap, label: RGBlabel}\"\n ></color-editable-input>\n <div class=\"photoshop-divider\"></div>\n <color-editable-input\n [value]=\"rgb.r\"\n label=\"r\"\n (onChange)=\"handleValueChange($event)\"\n [style]=\"{input: RGBinput, wrap: RGBwrap, label: RGBlabel}\"\n ></color-editable-input>\n <color-editable-input\n [value]=\"rgb.g\"\n label=\"g\"\n (onChange)=\"handleValueChange($event)\"\n [style]=\"{input: RGBinput, wrap: RGBwrap, label: RGBlabel}\"\n ></color-editable-input>\n <color-editable-input\n [value]=\"rgb.b\"\n label=\"b\"\n (onChange)=\"handleValueChange($event)\"\n [style]=\"{input: RGBinput, wrap: RGBwrap, label: RGBlabel}\"\n ></color-editable-input>\n <div class=\"photoshop-divider\"></div>\n <color-editable-input\n [value]=\"hex.replace('#', '')\"\n label=\"#\"\n (onChange)=\"handleValueChange($event)\"\n [style]=\"{input: HEXinput, wrap: HEXwrap, label: HEXlabel}\"\n ></color-editable-input>\n <div class=\"photoshop-field-symbols\">\n <div class=\"photoshop-symbol\">°</div>\n <div class=\"photoshop-symbol\">%</div>\n <div class=\"photoshop-symbol\">%</div>\n </div>\n </div>\n `,\n styles: [\n `\n .photoshop-fields {\n padding-top: 5px;\n padding-bottom: 9px;\n width: 85px;\n position: relative;\n }\n .photoshop-field-symbols {\n position: absolute;\n top: 5px;\n right: -7px;\n font-size: 13px;\n }\n .photoshop-symbol {\n height: 24px;\n line-height: 24px;\n padding-bottom: 7px;\n }\n .photoshop-divider {\n height: 5px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class PhotoshopFieldsComponent {\n @Input() rgb!: RGB;\n @Input() hsv!: HSV;\n @Input() hex!: string;\n @Output() onChange = new EventEmitter<any>();\n RGBinput: Record<string, string> = {\n marginLeft: '35%',\n width: '40%',\n height: '22px',\n border: '1px solid rgb(136, 136, 136)',\n boxShadow:\n 'rgba(0, 0, 0, 0.1) 0px 1px 1px inset, rgb(236, 236, 236) 0px 1px 0px 0px',\n marginBottom: '2px',\n fontSize: '13px',\n paddingLeft: '3px',\n marginRight: '10px',\n };\n RGBwrap: Record<string, string> = {\n position: 'relative',\n };\n RGBlabel: Record<string, string> = {\n left: '0px',\n width: '34px',\n textTransform: 'uppercase',\n fontSize: '13px',\n height: '24px',\n lineHeight: '24px',\n position: 'absolute',\n };\n HEXinput: Record<string, string> = {\n marginLeft: '20%',\n width: '80%',\n height: '22px',\n border: '1px solid #888888',\n boxShadow: 'inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC',\n marginBottom: '3px',\n fontSize: '13px',\n paddingLeft: '3px',\n };\n HEXwrap: Record<string, string> = {\n position: 'relative',\n };\n HEXlabel: Record<string, string> = {\n position: 'absolute',\n top: '0px',\n left: '0px',\n width: '14px',\n textTransform: 'uppercase',\n fontSize: '13px',\n height: '24px',\n lineHeight: '24px',\n };\n\n round(v) {\n return Math.round(v);\n }\n handleValueChange({ data, $event }) {\n if (data['#']) {\n if (isValidHex(data['#'])) {\n this.onChange.emit({\n data: {\n hex: data['#'],\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.h || data.s || data.v) {\n this.onChange.emit({\n data: {\n h: data.h || this.hsv.h,\n s: data.s || this.hsv.s,\n v: data.v || this.hsv.v,\n source: 'hsv',\n },\n $event,\n });\n }\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n Input,\n OnChanges,\n} from '@angular/core';\nimport { RGB } from 'ngx-color';\n\n@Component({\n selector: 'color-photoshop-previews',\n template: `\n <div>\n <div class=\"photoshop-label\">new</div>\n <div class=\"photoshop-swatches\">\n <div class=\"photoshop-new\" [style.background]=\"backgroundNew\"></div>\n <div class=\"photoshop-current\" [style.background]=\"currentColor\"></div>\n </div>\n <div class=\"photoshop-label\">current</div>\n </div>\n `,\n styles: [\n `\n .photoshop-swatches {\n border: 1px solid #B3B3B3;\n border-bottom: 1px solid #F0F0F0;\n margin-bottom: 2px;\n margin-top: 1px;\n }\n .photoshop-new {\n height: 34px;\n box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;\n }\n .photoshop-current {\n height: 34px;\n box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;\n }\n .photoshop-label {\n font-size: 14px;\n color: #000;\n text-align: center;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class PhotoshopPreviewsComponent implements OnChanges {\n @Input() rgb!: RGB;\n @Input() currentColor = '';\n backgroundNew = '';\n\n ngOnChanges() {\n this.backgroundNew = `rgb(${this.rgb.r},${this.rgb.g}, ${this.rgb.b})`;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, Input, NgModule, Output } from '@angular/core';\n\nimport { AlphaModule, ColorWrap, EditableInputModule, HueModule, SaturationModule, SwatchModule } from 'ngx-color';\nimport { PhotoshopButtonComponent } from './photoshop-button.component';\nimport { PhotoshopFieldsComponent } from './photoshop-fields.component';\nimport { PhotoshopPreviewsComponent } from './photoshop-previews.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-photoshop',\n template: `\n <div class=\"photoshop-picker {{ className }}\">\n <div class=\"photoshop-head\">{{ header }}</div>\n <div class=\"photoshop-body\">\n <div class=\"photoshop-saturation\">\n <color-saturation\n [hsl]=\"hsl\" [hsv]=\"hsv\" [circle]=\"circle\"\n (onChange)=\"handleValueChange($event)\"\n ></color-saturation>\n </div>\n <div class=\"photoshop-hue\">\n <color-hue direction=\"vertical\"\n [hsl]=\"hsl\" [hidePointer]=\"true\"\n (onChange)=\"handleValueChange($event)\"\n ></color-hue>\n </div>\n <div class=\"photoshop-controls\">\n <div class=\"photoshop-top\">\n <div class=\"photoshop-previews\">\n <color-photoshop-previews\n [rgb]=\"rgb\" [currentColor]=\"currentColor\"\n ></color-photoshop-previews>\n </div>\n <div class=\"photoshop-actions\">\n <color-photoshop-button label=\"OK\"\n [active]=\"true\" (onClick)=\"onAccept.emit($event)\"\n ></color-photoshop-button>\n <color-photoshop-button label=\"Cancel\"\n (onClick)=\"onCancel.emit($event)\"\n >\n </color-photoshop-button>\n <color-photoshop-fields\n [rgb]=\"rgb\" [hex]=\"hex\" [hsv]=\"hsv\"\n (onChange)=\"handleValueChange($event)\"\n ></color-photoshop-fields>\n </div>\n </div>\n </div>\n </div>\n </div>\n `,\n styles: [\n `\n .photoshop-picker {\n background: rgb(220, 220, 220);\n border-radius: 4px;\n box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 8px 16px;\n box-sizing: initial; width: 513px;\n }\n .photoshop-head {\n background-image: linear-gradient(\n -180deg,\n rgb(240, 240, 240) 0%,\n rgb(212, 212, 212) 100%\n );\n border-bottom: 1px solid rgb(177, 177, 177);\n box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,\n rgba(0, 0, 0, 0.02) 0px -1px 0px 0px inset;\n height: 23px;\n line-height: 24px;\n border-radius: 4px 4px 0px 0px;\n font-size: 13px;\n color: rgb(77, 77, 77);\n text-align: center;\n }\n .photoshop-body {\n padding: 15px 15px 0px;\n display: flex;\n }\n .photoshop-saturation {\n width: 256px;\n height: 256px;\n position: relative;\n border-width: 2px;\n border-style: solid;\n border-color: rgb(179, 179, 179) rgb(179, 179, 179) rgb(240, 240, 240);\n border-image: initial;\n overflow: hidden;\n }\n .photoshop-hue {\n position: relative;\n height: 256px;\n width: 23px;\n margin-left: 10px;\n border-width: 2px;\n border-style: solid;\n border-color: rgb(179, 179, 179) rgb(179, 179, 179) rgb(240, 240, 240);\n border-image: initial;\n }\n .photoshop-controls {\n width: 180px;\n margin-left: 10px;\n }\n .photoshop-top {\n display: flex;\n }\n .photoshop-previews {\n width: 60px;\n }\n .photoshop-actions {\n -webkit-box-flex: 1;\n flex: 1 1 0%;\n margin-left: 20px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PhotoshopComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => PhotoshopComponent),\n },\n ]\n})\nexport class PhotoshopComponent extends ColorWrap {\n /** Title text */\n @Input() header = 'Color Picker';\n @Output() onAccept = new EventEmitter<Event>();\n @Output() onCancel = new EventEmitter<Event>();\n circle = {\n width: '12px',\n height: '12px',\n borderRadius: '6px',\n boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',\n transform: 'translate(-6px, -10px)',\n };\n constructor() {\n super();\n }\n handleValueChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [\n PhotoshopComponent,\n PhotoshopPreviewsComponent,\n PhotoshopButtonComponent,\n PhotoshopFieldsComponent,\n ],\n exports: [\n PhotoshopComponent,\n PhotoshopPreviewsComponent,\n PhotoshopButtonComponent,\n PhotoshopFieldsComponent,\n ],\n imports: [\n CommonModule,\n EditableInputModule,\n HueModule,\n AlphaModule,\n SwatchModule,\n SaturationModule,\n ],\n})\nexport class ColorPhotoshopModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
@@ -1,99 +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, ShadeModule } from 'ngx-color';
6
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
7
-
8
- class ShadeSliderComponent 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.pointer = {
16
- width: '18px',
17
- height: '18px',
18
- borderRadius: '50%',
19
- transform: 'translate(-9px, -2px)',
20
- boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
21
- };
22
- }
23
- ngOnChanges() {
24
- this.setState(toState(this.color, this.oldHue));
25
- }
26
- handlePickerChange({ data, $event }) {
27
- this.handleChange(data, $event);
28
- }
29
- }
30
- ShadeSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ShadeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
31
- ShadeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: ShadeSliderComponent, selector: "color-shade-picker", inputs: { width: "width", height: "height" }, providers: [
32
- {
33
- provide: NG_VALUE_ACCESSOR,
34
- useExisting: forwardRef(() => ShadeSliderComponent),
35
- multi: true,
36
- },
37
- {
38
- provide: ColorWrap,
39
- useExisting: forwardRef(() => ShadeSliderComponent),
40
- },
41
- ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
42
- <div class="shade-slider {{ className || '' }}"
43
- [style.width.px]="width" [style.height.px]="height">
44
- <color-shade
45
- [hsl]="hsl"
46
- [rgb]="rgb"
47
- [pointer]="pointer"
48
- (onChange)="handlePickerChange($event)"
49
- ></color-shade>
50
- </div>
51
- `, isInline: true, styles: [".shade-slider{position:relative}\n"], dependencies: [{ kind: "component", type: i1.ShadeComponent, selector: "color-shade", inputs: ["hsl", "rgb", "pointer", "shadow", "radius"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
52
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ShadeSliderComponent, decorators: [{
53
- type: Component,
54
- args: [{ selector: 'color-shade-picker', template: `
55
- <div class="shade-slider {{ className || '' }}"
56
- [style.width.px]="width" [style.height.px]="height">
57
- <color-shade
58
- [hsl]="hsl"
59
- [rgb]="rgb"
60
- [pointer]="pointer"
61
- (onChange)="handlePickerChange($event)"
62
- ></color-shade>
63
- </div>
64
- `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
65
- {
66
- provide: NG_VALUE_ACCESSOR,
67
- useExisting: forwardRef(() => ShadeSliderComponent),
68
- multi: true,
69
- },
70
- {
71
- provide: ColorWrap,
72
- useExisting: forwardRef(() => ShadeSliderComponent),
73
- },
74
- ], styles: [".shade-slider{position:relative}\n"] }]
75
- }], ctorParameters: function () { return []; }, propDecorators: { width: [{
76
- type: Input
77
- }], height: [{
78
- type: Input
79
- }] } });
80
- class ColorShadeModule {
81
- }
82
- ColorShadeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorShadeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
83
- ColorShadeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorShadeModule, declarations: [ShadeSliderComponent], imports: [CommonModule, ShadeModule], exports: [ShadeSliderComponent] });
84
- ColorShadeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorShadeModule, imports: [CommonModule, ShadeModule] });
85
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorShadeModule, decorators: [{
86
- type: NgModule,
87
- args: [{
88
- declarations: [ShadeSliderComponent],
89
- exports: [ShadeSliderComponent],
90
- imports: [CommonModule, ShadeModule],
91
- }]
92
- }] });
93
-
94
- /**
95
- * Generated bundle index. Do not edit.
96
- */
97
-
98
- export { ColorShadeModule, ShadeSliderComponent };
99
- //# sourceMappingURL=ngx-color-shade.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ngx-color-shade.mjs","sources":["../../src/lib/shade/shade-picker.component.ts","../../src/lib/shade/ngx-color-shade.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule, OnChanges } from '@angular/core';\nimport { ColorWrap, ShadeModule, toState } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-shade-picker',\n template: `\n <div class=\"shade-slider {{ className || '' }}\"\n [style.width.px]=\"width\" [style.height.px]=\"height\">\n <color-shade\n [hsl]=\"hsl\"\n [rgb]=\"rgb\"\n [pointer]=\"pointer\"\n (onChange)=\"handlePickerChange($event)\"\n ></color-shade>\n </div>\n `,\n styles: [\n `\n .shade-slider {\n position: relative;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ShadeSliderComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => ShadeSliderComponent),\n },\n ]\n})\nexport class ShadeSliderComponent 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 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 this.setState(toState(this.color, this.oldHue));\n }\n handlePickerChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [ShadeSliderComponent],\n exports: [ShadeSliderComponent],\n imports: [CommonModule, ShadeModule],\n})\nexport class ColorShadeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}