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,331 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
3
- import { CommonModule } from '@angular/common';
4
- import * as i1 from 'ngx-color';
5
- import { ColorWrap, HueModule, SwatchModule } from 'ngx-color';
6
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
7
-
8
- class SliderSwatchComponent {
9
- constructor() {
10
- this.first = false;
11
- this.last = false;
12
- this.onClick = new EventEmitter();
13
- }
14
- ngOnChanges() {
15
- this.background = `hsl(${this.hsl.h}, 50%, ${this.offset * 100}%)`;
16
- }
17
- handleClick($event) {
18
- this.onClick.emit({
19
- data: {
20
- h: this.hsl.h,
21
- s: 0.5,
22
- l: this.offset,
23
- source: 'hsl',
24
- },
25
- $event,
26
- });
27
- }
28
- }
29
- SliderSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
30
- SliderSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SliderSwatchComponent, selector: "color-slider-swatch", inputs: { hsl: "hsl", active: "active", offset: "offset", first: "first", last: "last" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
31
- <div class="slider-swatch" [style.background]="background"
32
- [class.first]="first" [class.last]="last" [class.active]="active"
33
- (click)="handleClick($event)"
34
- ></div>
35
- `, isInline: true, styles: [".slider-swatch{height:12px;background:rgb(121,211,166);cursor:pointer}.slider-swatch.active{transform:scaleY(1.8);border-radius:3.6px/2px}.slider-swatch.first{border-radius:2px 0 0 2px}.slider-swatch.last{border-radius:0 2px 2px 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
36
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderSwatchComponent, decorators: [{
37
- type: Component,
38
- args: [{
39
- selector: 'color-slider-swatch',
40
- template: `
41
- <div class="slider-swatch" [style.background]="background"
42
- [class.first]="first" [class.last]="last" [class.active]="active"
43
- (click)="handleClick($event)"
44
- ></div>
45
- `,
46
- styles: [
47
- `
48
- .slider-swatch {
49
- height: 12px;
50
- background: rgb(121, 211, 166);
51
- cursor: pointer;
52
- }
53
- .slider-swatch.active {
54
- transform: scaleY(1.8);
55
- border-top-right-radius: 3.6px 2px;
56
- border-top-left-radius: 3.6px 2px;
57
- border-bottom-right-radius: 3.6px 2px;
58
- border-bottom-left-radius: 3.6px 2px;
59
- }
60
- .slider-swatch.first {
61
- border-radius: 2px 0px 0px 2px;
62
- }
63
- .slider-swatch.last {
64
- border-radius: 0px 2px 2px 0px;
65
- }
66
-
67
- `,
68
- ],
69
- changeDetection: ChangeDetectionStrategy.OnPush,
70
- preserveWhitespaces: false,
71
- }]
72
- }], propDecorators: { hsl: [{
73
- type: Input
74
- }], active: [{
75
- type: Input
76
- }], offset: [{
77
- type: Input
78
- }], first: [{
79
- type: Input
80
- }], last: [{
81
- type: Input
82
- }], onClick: [{
83
- type: Output
84
- }] } });
85
-
86
- class SliderSwatchesComponent {
87
- constructor() {
88
- this.onClick = new EventEmitter();
89
- this.onSwatchHover = new EventEmitter();
90
- }
91
- active(l, s) {
92
- return (Math.round(this.hsl.l * 100) / 100 === l &&
93
- Math.round(this.hsl.s * 100) / 100 === s);
94
- }
95
- handleClick({ data, $event }) {
96
- this.onClick.emit({ data, $event });
97
- }
98
- }
99
- SliderSwatchesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderSwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
100
- SliderSwatchesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SliderSwatchesComponent, selector: "color-slider-swatches", inputs: { hsl: "hsl" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
101
- <div class="slider-swatches">
102
- <div class="slider-swatch-wrap">
103
- <color-slider-swatch
104
- [hsl]="hsl"
105
- [offset]=".80"
106
- [active]="active(0.80, 0.50)"
107
- (onClick)="handleClick($event)"
108
- [first]="true"
109
- ></color-slider-swatch>
110
- </div>
111
- <div class="slider-swatch-wrap">
112
- <color-slider-swatch
113
- [hsl]="hsl"
114
- [offset]=".65"
115
- [active]="active(0.65, 0.50)"
116
- (onClick)="handleClick($event)"
117
- ></color-slider-swatch>
118
- </div>
119
- <div class="slider-swatch-wrap">
120
- <color-slider-swatch
121
- [hsl]="hsl"
122
- [offset]=".50"
123
- [active]="active(0.50, 0.50)"
124
- (onClick)="handleClick($event)"
125
- ></color-slider-swatch>
126
- </div>
127
- <div class="slider-swatch-wrap">
128
- <color-slider-swatch
129
- [hsl]="hsl"
130
- [offset]=".35"
131
- [active]="active(0.35, 0.50)"
132
- (onClick)="handleClick($event)"
133
- ></color-slider-swatch>
134
- </div>
135
- <div class="slider-swatch-wrap">
136
- <color-slider-swatch
137
- [hsl]="hsl"
138
- [offset]=".20"
139
- [active]="active(0.20, 0.50)"
140
- (onClick)="handleClick($event)"
141
- [last]="true"
142
- ></color-slider-swatch>
143
- </div>
144
- </div>
145
- `, isInline: true, styles: [".slider-swatches{margin-top:20px}.slider-swatch-wrap{box-sizing:border-box;width:20%;padding-right:1px;float:left}\n"], components: [{ type: SliderSwatchComponent, selector: "color-slider-swatch", inputs: ["hsl", "active", "offset", "first", "last"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
146
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderSwatchesComponent, decorators: [{
147
- type: Component,
148
- args: [{
149
- selector: 'color-slider-swatches',
150
- template: `
151
- <div class="slider-swatches">
152
- <div class="slider-swatch-wrap">
153
- <color-slider-swatch
154
- [hsl]="hsl"
155
- [offset]=".80"
156
- [active]="active(0.80, 0.50)"
157
- (onClick)="handleClick($event)"
158
- [first]="true"
159
- ></color-slider-swatch>
160
- </div>
161
- <div class="slider-swatch-wrap">
162
- <color-slider-swatch
163
- [hsl]="hsl"
164
- [offset]=".65"
165
- [active]="active(0.65, 0.50)"
166
- (onClick)="handleClick($event)"
167
- ></color-slider-swatch>
168
- </div>
169
- <div class="slider-swatch-wrap">
170
- <color-slider-swatch
171
- [hsl]="hsl"
172
- [offset]=".50"
173
- [active]="active(0.50, 0.50)"
174
- (onClick)="handleClick($event)"
175
- ></color-slider-swatch>
176
- </div>
177
- <div class="slider-swatch-wrap">
178
- <color-slider-swatch
179
- [hsl]="hsl"
180
- [offset]=".35"
181
- [active]="active(0.35, 0.50)"
182
- (onClick)="handleClick($event)"
183
- ></color-slider-swatch>
184
- </div>
185
- <div class="slider-swatch-wrap">
186
- <color-slider-swatch
187
- [hsl]="hsl"
188
- [offset]=".20"
189
- [active]="active(0.20, 0.50)"
190
- (onClick)="handleClick($event)"
191
- [last]="true"
192
- ></color-slider-swatch>
193
- </div>
194
- </div>
195
- `,
196
- styles: [`
197
- .slider-swatches {
198
- margin-top: 20px;
199
- }
200
- .slider-swatch-wrap {
201
- box-sizing: border-box;
202
- width: 20%;
203
- padding-right: 1px;
204
- float: left;
205
- }
206
- `],
207
- changeDetection: ChangeDetectionStrategy.OnPush,
208
- preserveWhitespaces: false,
209
- }]
210
- }], propDecorators: { hsl: [{
211
- type: Input
212
- }], onClick: [{
213
- type: Output
214
- }], onSwatchHover: [{
215
- type: Output
216
- }] } });
217
-
218
- class SliderComponent extends ColorWrap {
219
- constructor() {
220
- super();
221
- this.pointer = {
222
- width: '14px',
223
- height: '14px',
224
- borderRadius: '6px',
225
- transform: 'translate(-7px, -2px)',
226
- backgroundColor: 'rgb(248, 248, 248)',
227
- boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
228
- };
229
- this.radius = 2;
230
- }
231
- handlePickerChange({ data, $event }) {
232
- this.handleChange(data, $event);
233
- }
234
- }
235
- SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
236
- SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SliderComponent, selector: "color-slider", inputs: { pointer: "pointer", radius: "radius" }, providers: [
237
- {
238
- provide: NG_VALUE_ACCESSOR,
239
- useExisting: forwardRef(() => SliderComponent),
240
- multi: true,
241
- },
242
- {
243
- provide: ColorWrap,
244
- useExisting: forwardRef(() => SliderComponent),
245
- },
246
- ], usesInheritance: true, ngImport: i0, template: `
247
- <div class="slider-picker {{ className }}">
248
- <div class="slider-hue">
249
- <color-hue
250
- [hsl]="hsl" [radius]="radius" [pointer]="pointer"
251
- (onChange)="handlePickerChange($event)"
252
- ></color-hue>
253
- </div>
254
- <div class="slider-swatches">
255
- <color-slider-swatches [hsl]="hsl"
256
- (onClick)="handlePickerChange($event)"
257
- ></color-slider-swatches>
258
- </div>
259
- </div>
260
- `, isInline: true, styles: [".slider-hue{height:12px;position:relative}\n"], components: [{ type: i0.forwardRef(function () { return i1.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return SliderSwatchesComponent; }), selector: "color-slider-swatches", inputs: ["hsl"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
261
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderComponent, decorators: [{
262
- type: Component,
263
- args: [{
264
- selector: 'color-slider',
265
- template: `
266
- <div class="slider-picker {{ className }}">
267
- <div class="slider-hue">
268
- <color-hue
269
- [hsl]="hsl" [radius]="radius" [pointer]="pointer"
270
- (onChange)="handlePickerChange($event)"
271
- ></color-hue>
272
- </div>
273
- <div class="slider-swatches">
274
- <color-slider-swatches [hsl]="hsl"
275
- (onClick)="handlePickerChange($event)"
276
- ></color-slider-swatches>
277
- </div>
278
- </div>
279
- `,
280
- styles: [
281
- `
282
- .slider-hue {
283
- height: 12px;
284
- position: relative;
285
- }
286
- `,
287
- ],
288
- changeDetection: ChangeDetectionStrategy.OnPush,
289
- preserveWhitespaces: false,
290
- providers: [
291
- {
292
- provide: NG_VALUE_ACCESSOR,
293
- useExisting: forwardRef(() => SliderComponent),
294
- multi: true,
295
- },
296
- {
297
- provide: ColorWrap,
298
- useExisting: forwardRef(() => SliderComponent),
299
- },
300
- ]
301
- }]
302
- }], ctorParameters: function () { return []; }, propDecorators: { pointer: [{
303
- type: Input
304
- }], radius: [{
305
- type: Input
306
- }] } });
307
- class ColorSliderModule {
308
- }
309
- ColorSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
310
- ColorSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSliderModule, declarations: [SliderComponent, SliderSwatchComponent,
311
- SliderSwatchesComponent], imports: [CommonModule, HueModule, SwatchModule], exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent] });
312
- ColorSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSliderModule, imports: [[CommonModule, HueModule, SwatchModule]] });
313
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSliderModule, decorators: [{
314
- type: NgModule,
315
- args: [{
316
- declarations: [
317
- SliderComponent,
318
- SliderSwatchComponent,
319
- SliderSwatchesComponent,
320
- ],
321
- exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent],
322
- imports: [CommonModule, HueModule, SwatchModule],
323
- }]
324
- }] });
325
-
326
- /**
327
- * Generated bundle index. Do not edit.
328
- */
329
-
330
- export { ColorSliderModule, SliderComponent, SliderSwatchComponent, SliderSwatchesComponent };
331
- //# sourceMappingURL=ngx-color-slider.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ngx-color-slider.mjs","sources":["../../src/lib/slider/slider-swatch.component.ts","../../src/lib/slider/slider-swatches.component.ts","../../src/lib/slider/slider.component.ts","../../src/lib/slider/ngx-color-slider.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n} from '@angular/core';\n\nimport { HSL } from 'ngx-color';\n\n@Component({\n selector: 'color-slider-swatch',\n template: `\n <div class=\"slider-swatch\" [style.background]=\"background\"\n [class.first]=\"first\" [class.last]=\"last\" [class.active]=\"active\"\n (click)=\"handleClick($event)\"\n ></div>\n `,\n styles: [\n `\n .slider-swatch {\n height: 12px;\n background: rgb(121, 211, 166);\n cursor: pointer;\n }\n .slider-swatch.active {\n transform: scaleY(1.8);\n border-top-right-radius: 3.6px 2px;\n border-top-left-radius: 3.6px 2px;\n border-bottom-right-radius: 3.6px 2px;\n border-bottom-left-radius: 3.6px 2px;\n }\n .slider-swatch.first {\n border-radius: 2px 0px 0px 2px;\n }\n .slider-swatch.last {\n border-radius: 0px 2px 2px 0px;\n }\n\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class SliderSwatchComponent implements OnChanges {\n @Input() hsl!: HSL;\n @Input() active!: boolean;\n @Input() offset!: number;\n @Input() first = false;\n @Input() last = false;\n @Output() onClick = new EventEmitter<any>();\n background!: string;\n\n ngOnChanges() {\n this.background = `hsl(${this.hsl.h}, 50%, ${this.offset * 100}%)`;\n }\n handleClick($event) {\n this.onClick.emit({\n data: {\n h: this.hsl.h,\n s: 0.5,\n l: this.offset,\n source: 'hsl',\n },\n $event,\n });\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\nimport { HSL } from 'ngx-color';\n\n@Component({\n selector: 'color-slider-swatches',\n template: `\n <div class=\"slider-swatches\">\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".80\"\n [active]=\"active(0.80, 0.50)\"\n (onClick)=\"handleClick($event)\"\n [first]=\"true\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".65\"\n [active]=\"active(0.65, 0.50)\"\n (onClick)=\"handleClick($event)\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".50\"\n [active]=\"active(0.50, 0.50)\"\n (onClick)=\"handleClick($event)\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".35\"\n [active]=\"active(0.35, 0.50)\"\n (onClick)=\"handleClick($event)\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".20\"\n [active]=\"active(0.20, 0.50)\"\n (onClick)=\"handleClick($event)\"\n [last]=\"true\"\n ></color-slider-swatch>\n </div>\n </div>\n `,\n styles: [`\n .slider-swatches {\n margin-top: 20px;\n }\n .slider-swatch-wrap {\n box-sizing: border-box;\n width: 20%;\n padding-right: 1px;\n float: left;\n }\n `],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class SliderSwatchesComponent {\n @Input() hsl!: HSL;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n\n active(l: number, s: number) {\n return (\n Math.round(this.hsl.l * 100) / 100 === l &&\n Math.round(this.hsl.s * 100) / 100 === s\n );\n }\n handleClick({ data, $event }) {\n this.onClick.emit({ data, $event });\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, HueModule, SwatchModule } from 'ngx-color';\nimport { SliderSwatchComponent } from './slider-swatch.component';\nimport { SliderSwatchesComponent } from './slider-swatches.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-slider',\n template: `\n <div class=\"slider-picker {{ className }}\">\n <div class=\"slider-hue\">\n <color-hue\n [hsl]=\"hsl\" [radius]=\"radius\" [pointer]=\"pointer\"\n (onChange)=\"handlePickerChange($event)\"\n ></color-hue>\n </div>\n <div class=\"slider-swatches\">\n <color-slider-swatches [hsl]=\"hsl\"\n (onClick)=\"handlePickerChange($event)\"\n ></color-slider-swatches>\n </div>\n </div>\n `,\n styles: [\n `\n .slider-hue {\n height: 12px;\n position: relative;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SliderComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => SliderComponent),\n },\n ]\n})\nexport class SliderComponent extends ColorWrap {\n @Input()\n pointer: Record<string, string> = {\n width: '14px',\n height: '14px',\n borderRadius: '6px',\n transform: 'translate(-7px, -2px)',\n backgroundColor: 'rgb(248, 248, 248)',\n boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n };\n @Input() radius = 2;\n\n constructor() {\n super();\n }\n\n handlePickerChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [\n SliderComponent,\n SliderSwatchComponent,\n SliderSwatchesComponent,\n ],\n exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent],\n imports: [CommonModule, HueModule, SwatchModule],\n})\nexport class ColorSliderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}