ngx-color 7.3.2 → 8.0.1
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.
- package/README.md +2 -2
- package/alpha/alpha-picker.component.d.ts +1 -1
- package/alpha/{ngx-color-alpha.d.ts → index.d.ts} +0 -0
- package/alpha.component.d.ts +1 -1
- package/block/block-swatches.component.d.ts +1 -1
- package/block/block.component.d.ts +1 -1
- package/block/{ngx-color-block.d.ts → index.d.ts} +0 -0
- package/checkboard.component.d.ts +1 -1
- package/chrome/chrome-fields.component.d.ts +1 -1
- package/chrome/chrome.component.d.ts +1 -1
- package/chrome/{ngx-color-chrome.d.ts → index.d.ts} +0 -0
- package/circle/circle-swatch.component.d.ts +1 -1
- package/circle/circle.component.d.ts +1 -1
- package/circle/{ngx-color-circle.d.ts → index.d.ts} +0 -0
- package/color-wrap.component.d.ts +1 -1
- package/compact/compact-color.component.d.ts +1 -1
- package/compact/compact-fields.component.d.ts +1 -1
- package/compact/compact.component.d.ts +1 -1
- package/compact/{ngx-color-compact.d.ts → index.d.ts} +0 -0
- package/coordinates.directive.d.ts +1 -1
- package/editable-input.component.d.ts +1 -1
- package/esm2020/alpha/alpha-picker.component.mjs +12 -28
- package/esm2020/alpha.component.mjs +13 -61
- package/esm2020/block/block-swatches.component.mjs +9 -20
- package/esm2020/block/block.component.mjs +14 -55
- package/esm2020/checkboard.component.mjs +9 -25
- package/esm2020/chrome/chrome-fields.component.mjs +9 -51
- package/esm2020/chrome/chrome.component.mjs +19 -84
- package/esm2020/circle/circle-swatch.component.mjs +7 -23
- package/esm2020/circle/circle.component.mjs +12 -26
- package/esm2020/color-wrap.component.mjs +8 -8
- package/esm2020/compact/compact-color.component.mjs +7 -28
- package/esm2020/compact/compact-fields.component.mjs +7 -29
- package/esm2020/compact/compact.component.mjs +14 -37
- package/esm2020/coordinates.directive.mjs +7 -7
- package/esm2020/editable-input.component.mjs +11 -25
- package/esm2020/github/github-swatch.component.mjs +7 -21
- package/esm2020/github/github.component.mjs +12 -79
- package/esm2020/hue/hue-picker.component.mjs +12 -25
- package/esm2020/hue.component.mjs +13 -54
- package/esm2020/material/material.component.mjs +12 -37
- package/esm2020/photoshop/photoshop-button.component.mjs +6 -35
- package/esm2020/photoshop/photoshop-fields.component.mjs +7 -36
- package/esm2020/photoshop/photoshop-previews.component.mjs +6 -34
- package/esm2020/photoshop/photoshop.component.mjs +17 -90
- package/esm2020/raised.component.mjs +10 -49
- package/esm2020/saturation.component.mjs +13 -57
- package/esm2020/shade/shade-picker.component.mjs +12 -25
- package/esm2020/shade.component.mjs +11 -51
- package/esm2020/sketch/sketch-fields.component.mjs +9 -43
- package/esm2020/sketch/sketch-preset-colors.component.mjs +9 -39
- package/esm2020/sketch/sketch.component.mjs +20 -91
- package/esm2020/slider/slider-swatch.component.mjs +6 -34
- package/esm2020/slider/slider-swatches.component.mjs +7 -23
- package/esm2020/slider/slider.component.mjs +12 -26
- package/esm2020/swatch.component.mjs +13 -28
- package/esm2020/swatches/swatches-color.component.mjs +9 -28
- package/esm2020/swatches/swatches-group.component.mjs +9 -24
- package/esm2020/swatches/swatches.component.mjs +14 -30
- package/esm2020/twitter/twitter.component.mjs +14 -110
- package/fesm2015/ngx-color-alpha.mjs +11 -27
- package/fesm2015/ngx-color-alpha.mjs.map +1 -1
- package/fesm2015/ngx-color-block.mjs +20 -72
- package/fesm2015/ngx-color-block.mjs.map +1 -1
- package/fesm2015/ngx-color-chrome.mjs +24 -131
- package/fesm2015/ngx-color-chrome.mjs.map +1 -1
- package/fesm2015/ngx-color-circle.mjs +17 -47
- package/fesm2015/ngx-color-circle.mjs.map +1 -1
- package/fesm2015/ngx-color-compact.mjs +24 -90
- package/fesm2015/ngx-color-compact.mjs.map +1 -1
- package/fesm2015/ngx-color-github.mjs +17 -98
- package/fesm2015/ngx-color-github.mjs.map +1 -1
- package/fesm2015/ngx-color-hue.mjs +11 -24
- package/fesm2015/ngx-color-hue.mjs.map +1 -1
- package/fesm2015/ngx-color-material.mjs +11 -36
- package/fesm2015/ngx-color-material.mjs.map +1 -1
- package/fesm2015/ngx-color-photoshop.mjs +32 -191
- package/fesm2015/ngx-color-photoshop.mjs.map +1 -1
- package/fesm2015/ngx-color-shade.mjs +11 -24
- package/fesm2015/ngx-color-shade.mjs.map +1 -1
- package/fesm2015/ngx-color-sketch.mjs +31 -166
- package/fesm2015/ngx-color-sketch.mjs.map +1 -1
- package/fesm2015/ngx-color-slider.mjs +22 -80
- package/fesm2015/ngx-color-slider.mjs.map +1 -1
- package/fesm2015/ngx-color-swatches.mjs +25 -75
- package/fesm2015/ngx-color-swatches.mjs.map +1 -1
- package/fesm2015/ngx-color-twitter.mjs +13 -109
- package/fesm2015/ngx-color-twitter.mjs.map +1 -1
- package/fesm2015/ngx-color.mjs +92 -349
- package/fesm2015/ngx-color.mjs.map +1 -1
- package/fesm2020/ngx-color-alpha.mjs +11 -27
- package/fesm2020/ngx-color-alpha.mjs.map +1 -1
- package/fesm2020/ngx-color-block.mjs +20 -72
- package/fesm2020/ngx-color-block.mjs.map +1 -1
- package/fesm2020/ngx-color-chrome.mjs +24 -131
- package/fesm2020/ngx-color-chrome.mjs.map +1 -1
- package/fesm2020/ngx-color-circle.mjs +17 -47
- package/fesm2020/ngx-color-circle.mjs.map +1 -1
- package/fesm2020/ngx-color-compact.mjs +24 -90
- package/fesm2020/ngx-color-compact.mjs.map +1 -1
- package/fesm2020/ngx-color-github.mjs +17 -98
- package/fesm2020/ngx-color-github.mjs.map +1 -1
- package/fesm2020/ngx-color-hue.mjs +11 -24
- package/fesm2020/ngx-color-hue.mjs.map +1 -1
- package/fesm2020/ngx-color-material.mjs +11 -36
- package/fesm2020/ngx-color-material.mjs.map +1 -1
- package/fesm2020/ngx-color-photoshop.mjs +32 -191
- package/fesm2020/ngx-color-photoshop.mjs.map +1 -1
- package/fesm2020/ngx-color-shade.mjs +11 -24
- package/fesm2020/ngx-color-shade.mjs.map +1 -1
- package/fesm2020/ngx-color-sketch.mjs +31 -166
- package/fesm2020/ngx-color-sketch.mjs.map +1 -1
- package/fesm2020/ngx-color-slider.mjs +22 -80
- package/fesm2020/ngx-color-slider.mjs.map +1 -1
- package/fesm2020/ngx-color-swatches.mjs +25 -75
- package/fesm2020/ngx-color-swatches.mjs.map +1 -1
- package/fesm2020/ngx-color-twitter.mjs +13 -109
- package/fesm2020/ngx-color-twitter.mjs.map +1 -1
- package/fesm2020/ngx-color.mjs +92 -349
- package/fesm2020/ngx-color.mjs.map +1 -1
- package/github/github-swatch.component.d.ts +1 -1
- package/github/github.component.d.ts +1 -1
- package/github/{ngx-color-github.d.ts → index.d.ts} +0 -0
- package/hue/hue-picker.component.d.ts +1 -1
- package/hue/{ngx-color-hue.d.ts → index.d.ts} +0 -0
- package/hue.component.d.ts +1 -1
- package/{ngx-color.d.ts → index.d.ts} +0 -0
- package/material/{ngx-color-material.d.ts → index.d.ts} +0 -0
- package/material/material.component.d.ts +1 -1
- package/package.json +21 -21
- package/photoshop/{ngx-color-photoshop.d.ts → index.d.ts} +0 -0
- package/photoshop/photoshop-button.component.d.ts +1 -1
- package/photoshop/photoshop-fields.component.d.ts +1 -1
- package/photoshop/photoshop-previews.component.d.ts +1 -1
- package/photoshop/photoshop.component.d.ts +1 -1
- package/raised.component.d.ts +1 -1
- package/saturation.component.d.ts +1 -1
- package/shade/{ngx-color-shade.d.ts → index.d.ts} +0 -0
- package/shade/shade-picker.component.d.ts +1 -1
- package/shade.component.d.ts +1 -1
- package/sketch/{ngx-color-sketch.d.ts → index.d.ts} +0 -0
- package/sketch/sketch-fields.component.d.ts +1 -1
- package/sketch/sketch-preset-colors.component.d.ts +1 -1
- package/sketch/sketch.component.d.ts +1 -1
- package/slider/{ngx-color-slider.d.ts → index.d.ts} +0 -0
- package/slider/slider-swatch.component.d.ts +1 -1
- package/slider/slider-swatches.component.d.ts +1 -1
- package/slider/slider.component.d.ts +1 -1
- package/swatch.component.d.ts +1 -1
- package/swatches/{ngx-color-swatches.d.ts → index.d.ts} +0 -0
- package/swatches/swatches-color.component.d.ts +1 -1
- package/swatches/swatches-group.component.d.ts +1 -1
- package/swatches/swatches.component.d.ts +1 -1
- package/twitter/{ngx-color-twitter.d.ts → index.d.ts} +0 -0
- package/twitter/twitter.component.d.ts +1 -1
- package/alpha/package.json +0 -17
- package/block/package.json +0 -16
- package/chrome/package.json +0 -16
- package/circle/package.json +0 -19
- package/compact/package.json +0 -16
- package/github/package.json +0 -16
- package/hue/package.json +0 -15
- package/material/package.json +0 -15
- package/photoshop/package.json +0 -15
- package/shade/package.json +0 -17
- package/sketch/package.json +0 -15
- package/slider/package.json +0 -15
- package/swatches/package.json +0 -18
- package/twitter/package.json +0 -15
@@ -12,52 +12,23 @@ class PhotoshopButtonComponent {
|
|
12
12
|
this.onClick = new EventEmitter();
|
13
13
|
}
|
14
14
|
}
|
15
|
-
PhotoshopButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
16
|
-
PhotoshopButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
15
|
+
PhotoshopButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PhotoshopButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
16
|
+
PhotoshopButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PhotoshopButtonComponent, selector: "color-photoshop-button", inputs: { label: "label", active: "active" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
|
17
17
|
<div class="photoshop-button" [class.active]="active"
|
18
18
|
(click)="onClick.emit($event)"
|
19
19
|
>
|
20
20
|
{{ label }}
|
21
21
|
</div>
|
22
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: "
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PhotoshopButtonComponent, decorators: [{
|
24
24
|
type: Component,
|
25
|
-
args: [{
|
26
|
-
selector: 'color-photoshop-button',
|
27
|
-
template: `
|
25
|
+
args: [{ selector: 'color-photoshop-button', template: `
|
28
26
|
<div class="photoshop-button" [class.active]="active"
|
29
27
|
(click)="onClick.emit($event)"
|
30
28
|
>
|
31
29
|
{{ label }}
|
32
30
|
</div>
|
33
|
-
`,
|
34
|
-
styles: [
|
35
|
-
`
|
36
|
-
.photoshop-button {
|
37
|
-
background-image: linear-gradient(
|
38
|
-
-180deg,
|
39
|
-
rgb(255, 255, 255) 0%,
|
40
|
-
rgb(230, 230, 230) 100%
|
41
|
-
);
|
42
|
-
border: 1px solid rgb(135, 135, 135);
|
43
|
-
border-radius: 2px;
|
44
|
-
height: 22px;
|
45
|
-
box-shadow: rgb(234, 234, 234) 0px 1px 0px 0px;
|
46
|
-
font-size: 14px;
|
47
|
-
color: rgb(0, 0, 0);
|
48
|
-
line-height: 20px;
|
49
|
-
text-align: center;
|
50
|
-
margin-bottom: 10px;
|
51
|
-
cursor: pointer;
|
52
|
-
}
|
53
|
-
.photoshop-button.active {
|
54
|
-
box-shadow: 0 0 0 1px #878787;
|
55
|
-
}
|
56
|
-
`,
|
57
|
-
],
|
58
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
59
|
-
preserveWhitespaces: false,
|
60
|
-
}]
|
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"] }]
|
61
32
|
}], propDecorators: { label: [{
|
62
33
|
type: Input
|
63
34
|
}], active: [{
|
@@ -155,8 +126,8 @@ class PhotoshopFieldsComponent {
|
|
155
126
|
}
|
156
127
|
}
|
157
128
|
}
|
158
|
-
PhotoshopFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
159
|
-
PhotoshopFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
129
|
+
PhotoshopFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PhotoshopFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
130
|
+
PhotoshopFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PhotoshopFieldsComponent, selector: "color-photoshop-fields", inputs: { rgb: "rgb", hsv: "hsv", hex: "hex" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
|
160
131
|
<div class="photoshop-fields">
|
161
132
|
<color-editable-input
|
162
133
|
[value]="round(hsv.h)"
|
@@ -208,12 +179,10 @@ PhotoshopFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
|
|
208
179
|
<div class="photoshop-symbol">%</div>
|
209
180
|
</div>
|
210
181
|
</div>
|
211
|
-
`, 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"],
|
212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
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.0.2", ngImport: i0, type: PhotoshopFieldsComponent, decorators: [{
|
213
184
|
type: Component,
|
214
|
-
args: [{
|
215
|
-
selector: 'color-photoshop-fields',
|
216
|
-
template: `
|
185
|
+
args: [{ selector: 'color-photoshop-fields', template: `
|
217
186
|
<div class="photoshop-fields">
|
218
187
|
<color-editable-input
|
219
188
|
[value]="round(hsv.h)"
|
@@ -265,34 +234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
265
234
|
<div class="photoshop-symbol">%</div>
|
266
235
|
</div>
|
267
236
|
</div>
|
268
|
-
`,
|
269
|
-
styles: [
|
270
|
-
`
|
271
|
-
.photoshop-fields {
|
272
|
-
padding-top: 5px;
|
273
|
-
padding-bottom: 9px;
|
274
|
-
width: 85px;
|
275
|
-
position: relative;
|
276
|
-
}
|
277
|
-
.photoshop-field-symbols {
|
278
|
-
position: absolute;
|
279
|
-
top: 5px;
|
280
|
-
right: -7px;
|
281
|
-
font-size: 13px;
|
282
|
-
}
|
283
|
-
.photoshop-symbol {
|
284
|
-
height: 24px;
|
285
|
-
line-height: 24px;
|
286
|
-
padding-bottom: 7px;
|
287
|
-
}
|
288
|
-
.photoshop-divider {
|
289
|
-
height: 5px;
|
290
|
-
}
|
291
|
-
`,
|
292
|
-
],
|
293
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
294
|
-
preserveWhitespaces: false,
|
295
|
-
}]
|
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"] }]
|
296
238
|
}], propDecorators: { rgb: [{
|
297
239
|
type: Input
|
298
240
|
}], hsv: [{
|
@@ -312,8 +254,8 @@ class PhotoshopPreviewsComponent {
|
|
312
254
|
this.backgroundNew = `rgb(${this.rgb.r},${this.rgb.g}, ${this.rgb.b})`;
|
313
255
|
}
|
314
256
|
}
|
315
|
-
PhotoshopPreviewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
316
|
-
PhotoshopPreviewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
257
|
+
PhotoshopPreviewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PhotoshopPreviewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
258
|
+
PhotoshopPreviewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PhotoshopPreviewsComponent, selector: "color-photoshop-previews", inputs: { rgb: "rgb", currentColor: "currentColor" }, usesOnChanges: true, ngImport: i0, template: `
|
317
259
|
<div>
|
318
260
|
<div class="photoshop-label">new</div>
|
319
261
|
<div class="photoshop-swatches">
|
@@ -323,11 +265,9 @@ PhotoshopPreviewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
|
|
323
265
|
<div class="photoshop-label">current</div>
|
324
266
|
</div>
|
325
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 });
|
326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PhotoshopPreviewsComponent, decorators: [{
|
327
269
|
type: Component,
|
328
|
-
args: [{
|
329
|
-
selector: 'color-photoshop-previews',
|
330
|
-
template: `
|
270
|
+
args: [{ selector: 'color-photoshop-previews', template: `
|
331
271
|
<div>
|
332
272
|
<div class="photoshop-label">new</div>
|
333
273
|
<div class="photoshop-swatches">
|
@@ -336,33 +276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
336
276
|
</div>
|
337
277
|
<div class="photoshop-label">current</div>
|
338
278
|
</div>
|
339
|
-
`,
|
340
|
-
styles: [
|
341
|
-
`
|
342
|
-
.photoshop-swatches {
|
343
|
-
border: 1px solid #B3B3B3;
|
344
|
-
border-bottom: 1px solid #F0F0F0;
|
345
|
-
margin-bottom: 2px;
|
346
|
-
margin-top: 1px;
|
347
|
-
}
|
348
|
-
.photoshop-new {
|
349
|
-
height: 34px;
|
350
|
-
box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;
|
351
|
-
}
|
352
|
-
.photoshop-current {
|
353
|
-
height: 34px;
|
354
|
-
box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;
|
355
|
-
}
|
356
|
-
.photoshop-label {
|
357
|
-
font-size: 14px;
|
358
|
-
color: #000;
|
359
|
-
text-align: center;
|
360
|
-
}
|
361
|
-
`,
|
362
|
-
],
|
363
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
364
|
-
preserveWhitespaces: false,
|
365
|
-
}]
|
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"] }]
|
366
280
|
}], propDecorators: { rgb: [{
|
367
281
|
type: Input
|
368
282
|
}], currentColor: [{
|
@@ -388,8 +302,8 @@ class PhotoshopComponent extends ColorWrap {
|
|
388
302
|
this.handleChange(data, $event);
|
389
303
|
}
|
390
304
|
}
|
391
|
-
PhotoshopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
392
|
-
PhotoshopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
305
|
+
PhotoshopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PhotoshopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
306
|
+
PhotoshopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PhotoshopComponent, selector: "color-photoshop", inputs: { header: "header" }, outputs: { onAccept: "onAccept", onCancel: "onCancel" }, providers: [
|
393
307
|
{
|
394
308
|
provide: NG_VALUE_ACCESSOR,
|
395
309
|
useExisting: forwardRef(() => PhotoshopComponent),
|
@@ -439,12 +353,10 @@ PhotoshopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
|
|
439
353
|
</div>
|
440
354
|
</div>
|
441
355
|
</div>
|
442
|
-
`, 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"],
|
443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
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.0.2", ngImport: i0, type: PhotoshopComponent, decorators: [{
|
444
358
|
type: Component,
|
445
|
-
args: [{
|
446
|
-
selector: 'color-photoshop',
|
447
|
-
template: `
|
359
|
+
args: [{ selector: 'color-photoshop', template: `
|
448
360
|
<div class="photoshop-picker {{ className }}">
|
449
361
|
<div class="photoshop-head">{{ header }}</div>
|
450
362
|
<div class="photoshop-body">
|
@@ -484,75 +396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
484
396
|
</div>
|
485
397
|
</div>
|
486
398
|
</div>
|
487
|
-
`,
|
488
|
-
styles: [
|
489
|
-
`
|
490
|
-
.photoshop-picker {
|
491
|
-
background: rgb(220, 220, 220);
|
492
|
-
border-radius: 4px;
|
493
|
-
box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 8px 16px;
|
494
|
-
box-sizing: initial; width: 513px;
|
495
|
-
}
|
496
|
-
.photoshop-head {
|
497
|
-
background-image: linear-gradient(
|
498
|
-
-180deg,
|
499
|
-
rgb(240, 240, 240) 0%,
|
500
|
-
rgb(212, 212, 212) 100%
|
501
|
-
);
|
502
|
-
border-bottom: 1px solid rgb(177, 177, 177);
|
503
|
-
box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,
|
504
|
-
rgba(0, 0, 0, 0.02) 0px -1px 0px 0px inset;
|
505
|
-
height: 23px;
|
506
|
-
line-height: 24px;
|
507
|
-
border-radius: 4px 4px 0px 0px;
|
508
|
-
font-size: 13px;
|
509
|
-
color: rgb(77, 77, 77);
|
510
|
-
text-align: center;
|
511
|
-
}
|
512
|
-
.photoshop-body {
|
513
|
-
padding: 15px 15px 0px;
|
514
|
-
display: flex;
|
515
|
-
}
|
516
|
-
.photoshop-saturation {
|
517
|
-
width: 256px;
|
518
|
-
height: 256px;
|
519
|
-
position: relative;
|
520
|
-
border-width: 2px;
|
521
|
-
border-style: solid;
|
522
|
-
border-color: rgb(179, 179, 179) rgb(179, 179, 179) rgb(240, 240, 240);
|
523
|
-
border-image: initial;
|
524
|
-
overflow: hidden;
|
525
|
-
}
|
526
|
-
.photoshop-hue {
|
527
|
-
position: relative;
|
528
|
-
height: 256px;
|
529
|
-
width: 23px;
|
530
|
-
margin-left: 10px;
|
531
|
-
border-width: 2px;
|
532
|
-
border-style: solid;
|
533
|
-
border-color: rgb(179, 179, 179) rgb(179, 179, 179) rgb(240, 240, 240);
|
534
|
-
border-image: initial;
|
535
|
-
}
|
536
|
-
.photoshop-controls {
|
537
|
-
width: 180px;
|
538
|
-
margin-left: 10px;
|
539
|
-
}
|
540
|
-
.photoshop-top {
|
541
|
-
display: flex;
|
542
|
-
}
|
543
|
-
.photoshop-previews {
|
544
|
-
width: 60px;
|
545
|
-
}
|
546
|
-
.photoshop-actions {
|
547
|
-
-webkit-box-flex: 1;
|
548
|
-
flex: 1 1 0%;
|
549
|
-
margin-left: 20px;
|
550
|
-
}
|
551
|
-
`,
|
552
|
-
],
|
553
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
554
|
-
preserveWhitespaces: false,
|
555
|
-
providers: [
|
399
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
|
556
400
|
{
|
557
401
|
provide: NG_VALUE_ACCESSOR,
|
558
402
|
useExisting: forwardRef(() => PhotoshopComponent),
|
@@ -562,8 +406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
562
406
|
provide: ColorWrap,
|
563
407
|
useExisting: forwardRef(() => PhotoshopComponent),
|
564
408
|
},
|
565
|
-
]
|
566
|
-
}]
|
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"] }]
|
567
410
|
}], ctorParameters: function () { return []; }, propDecorators: { header: [{
|
568
411
|
type: Input
|
569
412
|
}], onAccept: [{
|
@@ -573,8 +416,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
573
416
|
}] } });
|
574
417
|
class ColorPhotoshopModule {
|
575
418
|
}
|
576
|
-
ColorPhotoshopModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
577
|
-
ColorPhotoshopModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
419
|
+
ColorPhotoshopModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ColorPhotoshopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
420
|
+
ColorPhotoshopModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: ColorPhotoshopModule, declarations: [PhotoshopComponent, PhotoshopPreviewsComponent,
|
578
421
|
PhotoshopButtonComponent,
|
579
422
|
PhotoshopFieldsComponent], imports: [CommonModule,
|
580
423
|
EditableInputModule,
|
@@ -584,15 +427,13 @@ ColorPhotoshopModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
|
|
584
427
|
SaturationModule], exports: [PhotoshopComponent, PhotoshopPreviewsComponent,
|
585
428
|
PhotoshopButtonComponent,
|
586
429
|
PhotoshopFieldsComponent] });
|
587
|
-
ColorPhotoshopModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
588
|
-
|
589
|
-
|
590
|
-
|
591
|
-
|
592
|
-
|
593
|
-
|
594
|
-
]] });
|
595
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPhotoshopModule, decorators: [{
|
430
|
+
ColorPhotoshopModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.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.0.2", ngImport: i0, type: ColorPhotoshopModule, decorators: [{
|
596
437
|
type: NgModule,
|
597
438
|
args: [{
|
598
439
|
declarations: [
|
@@ -1 +1 @@
|
|
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
|
+
{"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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"}
|
@@ -27,8 +27,8 @@ class ShadeSliderComponent extends ColorWrap {
|
|
27
27
|
this.handleChange(data, $event);
|
28
28
|
}
|
29
29
|
}
|
30
|
-
ShadeSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
31
|
-
ShadeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
30
|
+
ShadeSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShadeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
31
|
+
ShadeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ShadeSliderComponent, selector: "color-shade-picker", inputs: { width: "width", height: "height" }, providers: [
|
32
32
|
{
|
33
33
|
provide: NG_VALUE_ACCESSOR,
|
34
34
|
useExisting: forwardRef(() => ShadeSliderComponent),
|
@@ -48,12 +48,10 @@ ShadeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
|
|
48
48
|
(onChange)="handlePickerChange($event)"
|
49
49
|
></color-shade>
|
50
50
|
</div>
|
51
|
-
`, isInline: true, styles: [".shade-slider{position:relative}\n"],
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
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.0.2", ngImport: i0, type: ShadeSliderComponent, decorators: [{
|
53
53
|
type: Component,
|
54
|
-
args: [{
|
55
|
-
selector: 'color-shade-picker',
|
56
|
-
template: `
|
54
|
+
args: [{ selector: 'color-shade-picker', template: `
|
57
55
|
<div class="shade-slider {{ className || '' }}"
|
58
56
|
[style.width.px]="width" [style.height.px]="height">
|
59
57
|
<color-shade
|
@@ -63,17 +61,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
63
61
|
(onChange)="handlePickerChange($event)"
|
64
62
|
></color-shade>
|
65
63
|
</div>
|
66
|
-
`,
|
67
|
-
styles: [
|
68
|
-
`
|
69
|
-
.shade-slider {
|
70
|
-
position: relative;
|
71
|
-
}
|
72
|
-
`,
|
73
|
-
],
|
74
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
75
|
-
preserveWhitespaces: false,
|
76
|
-
providers: [
|
64
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
|
77
65
|
{
|
78
66
|
provide: NG_VALUE_ACCESSOR,
|
79
67
|
useExisting: forwardRef(() => ShadeSliderComponent),
|
@@ -83,8 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
83
71
|
provide: ColorWrap,
|
84
72
|
useExisting: forwardRef(() => ShadeSliderComponent),
|
85
73
|
},
|
86
|
-
]
|
87
|
-
}]
|
74
|
+
], styles: [".shade-slider{position:relative}\n"] }]
|
88
75
|
}], ctorParameters: function () { return []; }, propDecorators: { width: [{
|
89
76
|
type: Input
|
90
77
|
}], height: [{
|
@@ -92,10 +79,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
92
79
|
}] } });
|
93
80
|
class ColorShadeModule {
|
94
81
|
}
|
95
|
-
ColorShadeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
96
|
-
ColorShadeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
97
|
-
ColorShadeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
82
|
+
ColorShadeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ColorShadeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
83
|
+
ColorShadeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: ColorShadeModule, declarations: [ShadeSliderComponent], imports: [CommonModule, ShadeModule], exports: [ShadeSliderComponent] });
|
84
|
+
ColorShadeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ColorShadeModule, imports: [CommonModule, ShadeModule] });
|
85
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ColorShadeModule, decorators: [{
|
99
86
|
type: NgModule,
|
100
87
|
args: [{
|
101
88
|
declarations: [ShadeSliderComponent],
|
@@ -1 +1 @@
|
|
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":";;;;;;;
|
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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"}
|