ngx-color 7.3.0 → 7.3.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/alpha/package.json +6 -22
- package/block/block-swatches.component.d.ts +10 -8
- package/block/package.json +6 -22
- package/chrome/package.json +6 -22
- package/circle/package.json +9 -22
- package/compact/package.json +6 -22
- package/esm2020/alpha/alpha-picker.component.mjs +116 -0
- package/esm2020/alpha/ngx-color-alpha.mjs +5 -0
- package/esm2020/alpha/public_api.mjs +2 -0
- package/esm2020/alpha.component.mjs +1 -1
- package/{block/esm2020 → esm2020/block}/block-swatches.component.mjs +2 -4
- package/{block/esm2020 → esm2020/block}/block.component.mjs +1 -1
- package/esm2020/block/ngx-color-block.mjs +5 -0
- package/esm2020/block/public_api.mjs +3 -0
- package/esm2020/checkboard.component.mjs +1 -1
- package/esm2020/chrome/chrome-fields.component.mjs +356 -0
- package/{chrome/esm2020 → esm2020/chrome}/chrome.component.mjs +1 -1
- package/esm2020/chrome/ngx-color-chrome.mjs +5 -0
- package/esm2020/chrome/public_api.mjs +3 -0
- package/esm2020/circle/circle-swatch.component.mjs +85 -0
- package/esm2020/circle/circle.component.mjs +148 -0
- package/esm2020/circle/ngx-color-circle.mjs +5 -0
- package/esm2020/circle/public_api.mjs +3 -0
- package/esm2020/color-wrap.component.mjs +1 -1
- package/esm2020/compact/compact-color.component.mjs +91 -0
- package/esm2020/compact/compact-fields.component.mjs +186 -0
- package/{compact/esm2020 → esm2020/compact}/compact.component.mjs +1 -1
- package/esm2020/compact/ngx-color-compact.mjs +5 -0
- package/esm2020/compact/public_api.mjs +4 -0
- package/esm2020/coordinates.directive.mjs +1 -1
- package/esm2020/editable-input.component.mjs +1 -1
- package/{github/esm2020 → esm2020/github}/github-swatch.component.mjs +1 -1
- package/{github/esm2020 → esm2020/github}/github.component.mjs +1 -1
- package/esm2020/github/ngx-color-github.mjs +5 -0
- package/esm2020/github/public_api.mjs +3 -0
- package/esm2020/helpers/checkboard.mjs +1 -1
- package/esm2020/helpers/color.interfaces.mjs +1 -1
- package/esm2020/helpers/color.mjs +1 -1
- package/esm2020/hue/hue-picker.component.mjs +113 -0
- package/esm2020/hue/ngx-color-hue.mjs +5 -0
- package/esm2020/hue/public_api.mjs +2 -0
- package/esm2020/hue.component.mjs +1 -1
- package/esm2020/material/material.component.mjs +211 -0
- package/esm2020/material/ngx-color-material.mjs +5 -0
- package/esm2020/material/public_api.mjs +2 -0
- package/esm2020/ngx-color.mjs +1 -1
- package/esm2020/photoshop/ngx-color-photoshop.mjs +5 -0
- package/{photoshop/esm2020 → esm2020/photoshop}/photoshop-button.component.mjs +1 -1
- package/esm2020/photoshop/photoshop-fields.component.mjs +241 -0
- package/{photoshop/esm2020 → esm2020/photoshop}/photoshop-previews.component.mjs +1 -1
- package/{photoshop/esm2020 → esm2020/photoshop}/photoshop.component.mjs +1 -1
- package/esm2020/photoshop/public_api.mjs +5 -0
- package/esm2020/public_api.mjs +1 -1
- package/esm2020/raised.component.mjs +1 -1
- package/esm2020/saturation.component.mjs +1 -1
- package/esm2020/shade/ngx-color-shade.mjs +5 -0
- package/esm2020/shade/public_api.mjs +2 -0
- package/esm2020/shade/shade-picker.component.mjs +105 -0
- package/esm2020/shade.component.mjs +1 -1
- package/esm2020/sketch/ngx-color-sketch.mjs +5 -0
- package/esm2020/sketch/public_api.mjs +4 -0
- package/esm2020/sketch/sketch-fields.component.mjs +243 -0
- package/{sketch/esm2020 → esm2020/sketch}/sketch-preset-colors.component.mjs +1 -1
- package/{sketch/esm2020 → esm2020/sketch}/sketch.component.mjs +1 -1
- package/esm2020/slider/ngx-color-slider.mjs +5 -0
- package/esm2020/slider/public_api.mjs +4 -0
- package/esm2020/slider/slider-swatch.component.mjs +80 -0
- package/{slider/esm2020 → esm2020/slider}/slider-swatches.component.mjs +1 -1
- package/{slider/esm2020 → esm2020/slider}/slider.component.mjs +1 -1
- package/esm2020/swatch.component.mjs +1 -1
- package/esm2020/swatches/ngx-color-swatches.mjs +5 -0
- package/esm2020/swatches/public_api.mjs +4 -0
- package/esm2020/swatches/swatches-color.component.mjs +123 -0
- package/{swatches/esm2020 → esm2020/swatches}/swatches-group.component.mjs +1 -1
- package/esm2020/swatches/swatches.component.mjs +258 -0
- package/esm2020/twitter/ngx-color-twitter.mjs +5 -0
- package/esm2020/twitter/public_api.mjs +2 -0
- package/{twitter/esm2020 → esm2020/twitter}/twitter.component.mjs +1 -1
- package/{alpha/fesm2015 → fesm2015}/ngx-color-alpha.mjs +0 -0
- package/fesm2015/ngx-color-alpha.mjs.map +1 -0
- package/{block/fesm2015 → fesm2015}/ngx-color-block.mjs +1 -3
- package/fesm2015/ngx-color-block.mjs.map +1 -0
- package/{chrome/fesm2015 → fesm2015}/ngx-color-chrome.mjs +0 -0
- package/fesm2015/ngx-color-chrome.mjs.map +1 -0
- package/{circle/fesm2015 → fesm2015}/ngx-color-circle.mjs +0 -0
- package/fesm2015/ngx-color-circle.mjs.map +1 -0
- package/{compact/fesm2015 → fesm2015}/ngx-color-compact.mjs +0 -0
- package/fesm2015/ngx-color-compact.mjs.map +1 -0
- package/{github/fesm2015 → fesm2015}/ngx-color-github.mjs +0 -0
- package/fesm2015/ngx-color-github.mjs.map +1 -0
- package/{hue/fesm2015 → fesm2015}/ngx-color-hue.mjs +0 -0
- package/fesm2015/ngx-color-hue.mjs.map +1 -0
- package/{material/fesm2015 → fesm2015}/ngx-color-material.mjs +0 -0
- package/fesm2015/ngx-color-material.mjs.map +1 -0
- package/{photoshop/fesm2015 → fesm2015}/ngx-color-photoshop.mjs +0 -0
- package/fesm2015/ngx-color-photoshop.mjs.map +1 -0
- package/{shade/fesm2015 → fesm2015}/ngx-color-shade.mjs +0 -0
- package/fesm2015/ngx-color-shade.mjs.map +1 -0
- package/{sketch/fesm2015 → fesm2015}/ngx-color-sketch.mjs +0 -0
- package/fesm2015/ngx-color-sketch.mjs.map +1 -0
- package/{slider/fesm2015 → fesm2015}/ngx-color-slider.mjs +0 -0
- package/fesm2015/ngx-color-slider.mjs.map +1 -0
- package/{swatches/fesm2015 → fesm2015}/ngx-color-swatches.mjs +0 -0
- package/fesm2015/ngx-color-swatches.mjs.map +1 -0
- package/{twitter/fesm2015 → fesm2015}/ngx-color-twitter.mjs +0 -0
- package/fesm2015/ngx-color-twitter.mjs.map +1 -0
- package/fesm2015/ngx-color.mjs.map +1 -1
- package/{alpha/fesm2020 → fesm2020}/ngx-color-alpha.mjs +0 -0
- package/fesm2020/ngx-color-alpha.mjs.map +1 -0
- package/{block/fesm2020 → fesm2020}/ngx-color-block.mjs +1 -3
- package/fesm2020/ngx-color-block.mjs.map +1 -0
- package/{chrome/fesm2020 → fesm2020}/ngx-color-chrome.mjs +0 -0
- package/fesm2020/ngx-color-chrome.mjs.map +1 -0
- package/{circle/fesm2020 → fesm2020}/ngx-color-circle.mjs +0 -0
- package/fesm2020/ngx-color-circle.mjs.map +1 -0
- package/{compact/fesm2020 → fesm2020}/ngx-color-compact.mjs +0 -0
- package/fesm2020/ngx-color-compact.mjs.map +1 -0
- package/{github/fesm2020 → fesm2020}/ngx-color-github.mjs +0 -0
- package/fesm2020/ngx-color-github.mjs.map +1 -0
- package/{hue/fesm2020 → fesm2020}/ngx-color-hue.mjs +0 -0
- package/fesm2020/ngx-color-hue.mjs.map +1 -0
- package/{material/fesm2020 → fesm2020}/ngx-color-material.mjs +0 -0
- package/fesm2020/ngx-color-material.mjs.map +1 -0
- package/{photoshop/fesm2020 → fesm2020}/ngx-color-photoshop.mjs +0 -0
- package/fesm2020/ngx-color-photoshop.mjs.map +1 -0
- package/{shade/fesm2020 → fesm2020}/ngx-color-shade.mjs +0 -0
- package/fesm2020/ngx-color-shade.mjs.map +1 -0
- package/{sketch/fesm2020 → fesm2020}/ngx-color-sketch.mjs +0 -0
- package/fesm2020/ngx-color-sketch.mjs.map +1 -0
- package/{slider/fesm2020 → fesm2020}/ngx-color-slider.mjs +0 -0
- package/fesm2020/ngx-color-slider.mjs.map +1 -0
- package/{swatches/fesm2020 → fesm2020}/ngx-color-swatches.mjs +0 -0
- package/fesm2020/ngx-color-swatches.mjs.map +1 -0
- package/{twitter/fesm2020 → fesm2020}/ngx-color-twitter.mjs +0 -0
- package/fesm2020/ngx-color-twitter.mjs.map +1 -0
- package/fesm2020/ngx-color.mjs.map +1 -1
- package/github/package.json +6 -22
- package/helpers/checkboard.d.ts +2 -2
- package/hue/package.json +6 -22
- package/material/package.json +6 -22
- package/package.json +119 -8
- package/photoshop/package.json +6 -22
- package/shade/package.json +6 -22
- package/sketch/package.json +6 -22
- package/slider/package.json +6 -22
- package/swatches/package.json +9 -22
- package/twitter/package.json +6 -22
- package/LICENSE +0 -21
- package/README.md +0 -280
- package/alpha/esm2020/alpha-picker.component.mjs +0 -116
- package/alpha/esm2020/ngx-color-alpha.mjs +0 -5
- package/alpha/esm2020/public_api.mjs +0 -2
- package/alpha/fesm2015/ngx-color-alpha.mjs.map +0 -1
- package/alpha/fesm2020/ngx-color-alpha.mjs.map +0 -1
- package/block/esm2020/ngx-color-block.mjs +0 -5
- package/block/esm2020/public_api.mjs +0 -3
- package/block/fesm2015/ngx-color-block.mjs.map +0 -1
- package/block/fesm2020/ngx-color-block.mjs.map +0 -1
- package/chrome/esm2020/chrome-fields.component.mjs +0 -356
- package/chrome/esm2020/ngx-color-chrome.mjs +0 -5
- package/chrome/esm2020/public_api.mjs +0 -3
- package/chrome/fesm2015/ngx-color-chrome.mjs.map +0 -1
- package/chrome/fesm2020/ngx-color-chrome.mjs.map +0 -1
- package/circle/esm2020/circle-swatch.component.mjs +0 -85
- package/circle/esm2020/circle.component.mjs +0 -148
- package/circle/esm2020/ngx-color-circle.mjs +0 -5
- package/circle/esm2020/public_api.mjs +0 -3
- package/circle/fesm2015/ngx-color-circle.mjs.map +0 -1
- package/circle/fesm2020/ngx-color-circle.mjs.map +0 -1
- package/compact/esm2020/compact-color.component.mjs +0 -91
- package/compact/esm2020/compact-fields.component.mjs +0 -186
- package/compact/esm2020/ngx-color-compact.mjs +0 -5
- package/compact/esm2020/public_api.mjs +0 -4
- package/compact/fesm2015/ngx-color-compact.mjs.map +0 -1
- package/compact/fesm2020/ngx-color-compact.mjs.map +0 -1
- package/github/esm2020/ngx-color-github.mjs +0 -5
- package/github/esm2020/public_api.mjs +0 -3
- package/github/fesm2015/ngx-color-github.mjs.map +0 -1
- package/github/fesm2020/ngx-color-github.mjs.map +0 -1
- package/hue/esm2020/hue-picker.component.mjs +0 -113
- package/hue/esm2020/ngx-color-hue.mjs +0 -5
- package/hue/esm2020/public_api.mjs +0 -2
- package/hue/fesm2015/ngx-color-hue.mjs.map +0 -1
- package/hue/fesm2020/ngx-color-hue.mjs.map +0 -1
- package/material/esm2020/material.component.mjs +0 -211
- package/material/esm2020/ngx-color-material.mjs +0 -5
- package/material/esm2020/public_api.mjs +0 -2
- package/material/fesm2015/ngx-color-material.mjs.map +0 -1
- package/material/fesm2020/ngx-color-material.mjs.map +0 -1
- package/photoshop/esm2020/ngx-color-photoshop.mjs +0 -5
- package/photoshop/esm2020/photoshop-fields.component.mjs +0 -241
- package/photoshop/esm2020/public_api.mjs +0 -5
- package/photoshop/fesm2015/ngx-color-photoshop.mjs.map +0 -1
- package/photoshop/fesm2020/ngx-color-photoshop.mjs.map +0 -1
- package/shade/esm2020/ngx-color-shade.mjs +0 -5
- package/shade/esm2020/public_api.mjs +0 -2
- package/shade/esm2020/shade-picker.component.mjs +0 -105
- package/shade/fesm2015/ngx-color-shade.mjs.map +0 -1
- package/shade/fesm2020/ngx-color-shade.mjs.map +0 -1
- package/sketch/esm2020/ngx-color-sketch.mjs +0 -5
- package/sketch/esm2020/public_api.mjs +0 -4
- package/sketch/esm2020/sketch-fields.component.mjs +0 -243
- package/sketch/fesm2015/ngx-color-sketch.mjs.map +0 -1
- package/sketch/fesm2020/ngx-color-sketch.mjs.map +0 -1
- package/slider/esm2020/ngx-color-slider.mjs +0 -5
- package/slider/esm2020/public_api.mjs +0 -4
- package/slider/esm2020/slider-swatch.component.mjs +0 -80
- package/slider/fesm2015/ngx-color-slider.mjs.map +0 -1
- package/slider/fesm2020/ngx-color-slider.mjs.map +0 -1
- package/swatches/esm2020/ngx-color-swatches.mjs +0 -5
- package/swatches/esm2020/public_api.mjs +0 -4
- package/swatches/esm2020/swatches-color.component.mjs +0 -123
- package/swatches/esm2020/swatches.component.mjs +0 -258
- package/swatches/fesm2015/ngx-color-swatches.mjs.map +0 -1
- package/swatches/fesm2020/ngx-color-swatches.mjs.map +0 -1
- package/twitter/esm2020/ngx-color-twitter.mjs +0 -5
- package/twitter/esm2020/public_api.mjs +0 -2
- package/twitter/fesm2015/ngx-color-twitter.mjs.map +0 -1
- package/twitter/fesm2020/ngx-color-twitter.mjs.map +0 -1
@@ -1,241 +0,0 @@
|
|
1
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
|
2
|
-
import { isValidHex } from 'ngx-color';
|
3
|
-
import * as i0 from "@angular/core";
|
4
|
-
import * as i1 from "ngx-color";
|
5
|
-
export class PhotoshopFieldsComponent {
|
6
|
-
constructor() {
|
7
|
-
this.onChange = new EventEmitter();
|
8
|
-
this.RGBinput = {
|
9
|
-
marginLeft: '35%',
|
10
|
-
width: '40%',
|
11
|
-
height: '22px',
|
12
|
-
border: '1px solid rgb(136, 136, 136)',
|
13
|
-
boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 1px inset, rgb(236, 236, 236) 0px 1px 0px 0px',
|
14
|
-
marginBottom: '2px',
|
15
|
-
fontSize: '13px',
|
16
|
-
paddingLeft: '3px',
|
17
|
-
marginRight: '10px',
|
18
|
-
};
|
19
|
-
this.RGBwrap = {
|
20
|
-
position: 'relative',
|
21
|
-
};
|
22
|
-
this.RGBlabel = {
|
23
|
-
left: '0px',
|
24
|
-
width: '34px',
|
25
|
-
textTransform: 'uppercase',
|
26
|
-
fontSize: '13px',
|
27
|
-
height: '24px',
|
28
|
-
lineHeight: '24px',
|
29
|
-
position: 'absolute',
|
30
|
-
};
|
31
|
-
this.HEXinput = {
|
32
|
-
marginLeft: '20%',
|
33
|
-
width: '80%',
|
34
|
-
height: '22px',
|
35
|
-
border: '1px solid #888888',
|
36
|
-
boxShadow: 'inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC',
|
37
|
-
marginBottom: '3px',
|
38
|
-
fontSize: '13px',
|
39
|
-
paddingLeft: '3px',
|
40
|
-
};
|
41
|
-
this.HEXwrap = {
|
42
|
-
position: 'relative',
|
43
|
-
};
|
44
|
-
this.HEXlabel = {
|
45
|
-
position: 'absolute',
|
46
|
-
top: '0px',
|
47
|
-
left: '0px',
|
48
|
-
width: '14px',
|
49
|
-
textTransform: 'uppercase',
|
50
|
-
fontSize: '13px',
|
51
|
-
height: '24px',
|
52
|
-
lineHeight: '24px',
|
53
|
-
};
|
54
|
-
}
|
55
|
-
round(v) {
|
56
|
-
return Math.round(v);
|
57
|
-
}
|
58
|
-
handleValueChange({ data, $event }) {
|
59
|
-
if (data['#']) {
|
60
|
-
if (isValidHex(data['#'])) {
|
61
|
-
this.onChange.emit({
|
62
|
-
data: {
|
63
|
-
hex: data['#'],
|
64
|
-
source: 'hex',
|
65
|
-
},
|
66
|
-
$event,
|
67
|
-
});
|
68
|
-
}
|
69
|
-
}
|
70
|
-
else if (data.r || data.g || data.b) {
|
71
|
-
this.onChange.emit({
|
72
|
-
data: {
|
73
|
-
r: data.r || this.rgb.r,
|
74
|
-
g: data.g || this.rgb.g,
|
75
|
-
b: data.b || this.rgb.b,
|
76
|
-
source: 'rgb',
|
77
|
-
},
|
78
|
-
$event,
|
79
|
-
});
|
80
|
-
}
|
81
|
-
else if (data.h || data.s || data.v) {
|
82
|
-
this.onChange.emit({
|
83
|
-
data: {
|
84
|
-
h: data.h || this.hsv.h,
|
85
|
-
s: data.s || this.hsv.s,
|
86
|
-
v: data.v || this.hsv.v,
|
87
|
-
source: 'hsv',
|
88
|
-
},
|
89
|
-
$event,
|
90
|
-
});
|
91
|
-
}
|
92
|
-
}
|
93
|
-
}
|
94
|
-
PhotoshopFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PhotoshopFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
95
|
-
PhotoshopFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: PhotoshopFieldsComponent, selector: "color-photoshop-fields", inputs: { rgb: "rgb", hsv: "hsv", hex: "hex" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
|
96
|
-
<div class="photoshop-fields">
|
97
|
-
<color-editable-input
|
98
|
-
[value]="round(hsv.h)"
|
99
|
-
label="h"
|
100
|
-
(onChange)="handleValueChange($event)"
|
101
|
-
[style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
|
102
|
-
></color-editable-input>
|
103
|
-
<color-editable-input
|
104
|
-
[value]="round(hsv.s * 100)"
|
105
|
-
label="s"
|
106
|
-
(onChange)="handleValueChange($event)"
|
107
|
-
[style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
|
108
|
-
></color-editable-input>
|
109
|
-
<color-editable-input
|
110
|
-
[value]="round(hsv.v * 100)"
|
111
|
-
label="v"
|
112
|
-
(onChange)="handleValueChange($event)"
|
113
|
-
[style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
|
114
|
-
></color-editable-input>
|
115
|
-
<div class="photoshop-divider"></div>
|
116
|
-
<color-editable-input
|
117
|
-
[value]="rgb.r"
|
118
|
-
label="r"
|
119
|
-
(onChange)="handleValueChange($event)"
|
120
|
-
[style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
|
121
|
-
></color-editable-input>
|
122
|
-
<color-editable-input
|
123
|
-
[value]="rgb.g"
|
124
|
-
label="g"
|
125
|
-
(onChange)="handleValueChange($event)"
|
126
|
-
[style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
|
127
|
-
></color-editable-input>
|
128
|
-
<color-editable-input
|
129
|
-
[value]="rgb.b"
|
130
|
-
label="b"
|
131
|
-
(onChange)="handleValueChange($event)"
|
132
|
-
[style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
|
133
|
-
></color-editable-input>
|
134
|
-
<div class="photoshop-divider"></div>
|
135
|
-
<color-editable-input
|
136
|
-
[value]="hex.replace('#', '')"
|
137
|
-
label="#"
|
138
|
-
(onChange)="handleValueChange($event)"
|
139
|
-
[style]="{input: HEXinput, wrap: HEXwrap, label: HEXlabel}"
|
140
|
-
></color-editable-input>
|
141
|
-
<div class="photoshop-field-symbols">
|
142
|
-
<div class="photoshop-symbol">°</div>
|
143
|
-
<div class="photoshop-symbol">%</div>
|
144
|
-
<div class="photoshop-symbol">%</div>
|
145
|
-
</div>
|
146
|
-
</div>
|
147
|
-
`, 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"], components: [{ type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PhotoshopFieldsComponent, decorators: [{
|
149
|
-
type: Component,
|
150
|
-
args: [{
|
151
|
-
selector: 'color-photoshop-fields',
|
152
|
-
template: `
|
153
|
-
<div class="photoshop-fields">
|
154
|
-
<color-editable-input
|
155
|
-
[value]="round(hsv.h)"
|
156
|
-
label="h"
|
157
|
-
(onChange)="handleValueChange($event)"
|
158
|
-
[style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
|
159
|
-
></color-editable-input>
|
160
|
-
<color-editable-input
|
161
|
-
[value]="round(hsv.s * 100)"
|
162
|
-
label="s"
|
163
|
-
(onChange)="handleValueChange($event)"
|
164
|
-
[style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
|
165
|
-
></color-editable-input>
|
166
|
-
<color-editable-input
|
167
|
-
[value]="round(hsv.v * 100)"
|
168
|
-
label="v"
|
169
|
-
(onChange)="handleValueChange($event)"
|
170
|
-
[style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
|
171
|
-
></color-editable-input>
|
172
|
-
<div class="photoshop-divider"></div>
|
173
|
-
<color-editable-input
|
174
|
-
[value]="rgb.r"
|
175
|
-
label="r"
|
176
|
-
(onChange)="handleValueChange($event)"
|
177
|
-
[style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
|
178
|
-
></color-editable-input>
|
179
|
-
<color-editable-input
|
180
|
-
[value]="rgb.g"
|
181
|
-
label="g"
|
182
|
-
(onChange)="handleValueChange($event)"
|
183
|
-
[style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
|
184
|
-
></color-editable-input>
|
185
|
-
<color-editable-input
|
186
|
-
[value]="rgb.b"
|
187
|
-
label="b"
|
188
|
-
(onChange)="handleValueChange($event)"
|
189
|
-
[style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
|
190
|
-
></color-editable-input>
|
191
|
-
<div class="photoshop-divider"></div>
|
192
|
-
<color-editable-input
|
193
|
-
[value]="hex.replace('#', '')"
|
194
|
-
label="#"
|
195
|
-
(onChange)="handleValueChange($event)"
|
196
|
-
[style]="{input: HEXinput, wrap: HEXwrap, label: HEXlabel}"
|
197
|
-
></color-editable-input>
|
198
|
-
<div class="photoshop-field-symbols">
|
199
|
-
<div class="photoshop-symbol">°</div>
|
200
|
-
<div class="photoshop-symbol">%</div>
|
201
|
-
<div class="photoshop-symbol">%</div>
|
202
|
-
</div>
|
203
|
-
</div>
|
204
|
-
`,
|
205
|
-
styles: [
|
206
|
-
`
|
207
|
-
.photoshop-fields {
|
208
|
-
padding-top: 5px;
|
209
|
-
padding-bottom: 9px;
|
210
|
-
width: 85px;
|
211
|
-
position: relative;
|
212
|
-
}
|
213
|
-
.photoshop-field-symbols {
|
214
|
-
position: absolute;
|
215
|
-
top: 5px;
|
216
|
-
right: -7px;
|
217
|
-
font-size: 13px;
|
218
|
-
}
|
219
|
-
.photoshop-symbol {
|
220
|
-
height: 24px;
|
221
|
-
line-height: 24px;
|
222
|
-
padding-bottom: 7px;
|
223
|
-
}
|
224
|
-
.photoshop-divider {
|
225
|
-
height: 5px;
|
226
|
-
}
|
227
|
-
`,
|
228
|
-
],
|
229
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
230
|
-
preserveWhitespaces: false,
|
231
|
-
}]
|
232
|
-
}], propDecorators: { rgb: [{
|
233
|
-
type: Input
|
234
|
-
}], hsv: [{
|
235
|
-
type: Input
|
236
|
-
}], hex: [{
|
237
|
-
type: Input
|
238
|
-
}], onChange: [{
|
239
|
-
type: Output
|
240
|
-
}] } });
|
241
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvdG9zaG9wLWZpZWxkcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvcGhvdG9zaG9wL3Bob3Rvc2hvcC1maWVsZHMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxVQUFVLEVBQVksTUFBTSxXQUFXLENBQUM7OztBQW9GakQsTUFBTSxPQUFPLHdCQUF3QjtJQWxGckM7UUFzRlksYUFBUSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDN0MsYUFBUSxHQUEyQjtZQUNqQyxVQUFVLEVBQUUsS0FBSztZQUNqQixLQUFLLEVBQUUsS0FBSztZQUNaLE1BQU0sRUFBRSxNQUFNO1lBQ2QsTUFBTSxFQUFFLDhCQUE4QjtZQUN0QyxTQUFTLEVBQ1AsMEVBQTBFO1lBQzVFLFlBQVksRUFBRSxLQUFLO1lBQ25CLFFBQVEsRUFBRSxNQUFNO1lBQ2hCLFdBQVcsRUFBRSxLQUFLO1lBQ2xCLFdBQVcsRUFBRSxNQUFNO1NBQ3BCLENBQUM7UUFDRixZQUFPLEdBQTJCO1lBQ2hDLFFBQVEsRUFBRSxVQUFVO1NBQ3JCLENBQUM7UUFDRixhQUFRLEdBQTJCO1lBQ2pDLElBQUksRUFBRSxLQUFLO1lBQ1gsS0FBSyxFQUFFLE1BQU07WUFDYixhQUFhLEVBQUUsV0FBVztZQUMxQixRQUFRLEVBQUUsTUFBTTtZQUNoQixNQUFNLEVBQUUsTUFBTTtZQUNkLFVBQVUsRUFBRSxNQUFNO1lBQ2xCLFFBQVEsRUFBRSxVQUFVO1NBQ3JCLENBQUM7UUFDRixhQUFRLEdBQTJCO1lBQ2pDLFVBQVUsRUFBRSxLQUFLO1lBQ2pCLEtBQUssRUFBRSxLQUFLO1lBQ1osTUFBTSxFQUFFLE1BQU07WUFDZCxNQUFNLEVBQUUs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R0FBRztzQkFBWCxLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0ksUUFBUTtzQkFBakIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IGlzVmFsaWRIZXgsIEhTViwgUkdCIH0gZnJvbSAnbmd4LWNvbG9yJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3ItcGhvdG9zaG9wLWZpZWxkcycsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtZmllbGRzXCI+XG4gICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0XG4gICAgICBbdmFsdWVdPVwicm91bmQoaHN2LmgpXCJcbiAgICAgIGxhYmVsPVwiaFwiXG4gICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICBbc3R5bGVdPVwie2lucHV0OiBSR0JpbnB1dCwgd3JhcDogUkdCd3JhcCwgbGFiZWw6IFJHQmxhYmVsfVwiXG4gICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0XG4gICAgICBbdmFsdWVdPVwicm91bmQoaHN2LnMgKiAxMDApXCJcbiAgICAgIGxhYmVsPVwic1wiXG4gICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICBbc3R5bGVdPVwie2lucHV0OiBSR0JpbnB1dCwgd3JhcDogUkdCd3JhcCwgbGFiZWw6IFJHQmxhYmVsfVwiXG4gICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0XG4gICAgICBbdmFsdWVdPVwicm91bmQoaHN2LnYgKiAxMDApXCJcbiAgICAgIGxhYmVsPVwidlwiXG4gICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICBbc3R5bGVdPVwie2lucHV0OiBSR0JpbnB1dCwgd3JhcDogUkdCd3JhcCwgbGFiZWw6IFJHQmxhYmVsfVwiXG4gICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1kaXZpZGVyXCI+PC9kaXY+XG4gICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0XG4gICAgICBbdmFsdWVdPVwicmdiLnJcIlxuICAgICAgbGFiZWw9XCJyXCJcbiAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IFJHQmlucHV0LCB3cmFwOiBSR0J3cmFwLCBsYWJlbDogUkdCbGFiZWx9XCJcbiAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgIFt2YWx1ZV09XCJyZ2IuZ1wiXG4gICAgICBsYWJlbD1cImdcIlxuICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgW3N0eWxlXT1cIntpbnB1dDogUkdCaW5wdXQsIHdyYXA6IFJHQndyYXAsIGxhYmVsOiBSR0JsYWJlbH1cIlxuICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgW3ZhbHVlXT1cInJnYi5iXCJcbiAgICAgIGxhYmVsPVwiYlwiXG4gICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICBbc3R5bGVdPVwie2lucHV0OiBSR0JpbnB1dCwgd3JhcDogUkdCd3JhcCwgbGFiZWw6IFJHQmxhYmVsfVwiXG4gICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1kaXZpZGVyXCI+PC9kaXY+XG4gICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0XG4gICAgICBbdmFsdWVdPVwiaGV4LnJlcGxhY2UoJyMnLCAnJylcIlxuICAgICAgbGFiZWw9XCIjXCJcbiAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IEhFWGlucHV0LCB3cmFwOiBIRVh3cmFwLCBsYWJlbDogSEVYbGFiZWx9XCJcbiAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLWZpZWxkLXN5bWJvbHNcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3Atc3ltYm9sXCI+wrA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3Atc3ltYm9sXCI+JTwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1zeW1ib2xcIj4lPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgLnBob3Rvc2hvcC1maWVsZHMge1xuICAgICAgcGFkZGluZy10b3A6IDVweDtcbiAgICAgIHBhZGRpbmctYm90dG9tOiA5cHg7XG4gICAgICB3aWR0aDogODVweDtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB9XG4gICAgLnBob3Rvc2hvcC1maWVsZC1zeW1ib2xzIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogNXB4O1xuICAgICAgcmlnaHQ6IC03cHg7XG4gICAgICBmb250LXNpemU6IDEzcHg7XG4gICAgfVxuICAgIC5waG90b3Nob3Atc3ltYm9sIHtcbiAgICAgIGhlaWdodDogMjRweDtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNHB4O1xuICAgICAgcGFkZGluZy1ib3R0b206IDdweDtcbiAgICB9XG4gICAgLnBob3Rvc2hvcC1kaXZpZGVyIHtcbiAgICAgIGhlaWdodDogNXB4O1xuICAgIH1cbiAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxufSlcbmV4cG9ydCBjbGFzcyBQaG90b3Nob3BGaWVsZHNDb21wb25lbnQge1xuICBASW5wdXQoKSByZ2IhOiBSR0I7XG4gIEBJbnB1dCgpIGhzdiE6IEhTVjtcbiAgQElucHV0KCkgaGV4ITogc3RyaW5nO1xuICBAT3V0cHV0KCkgb25DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgUkdCaW5wdXQ6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgbWFyZ2luTGVmdDogJzM1JScsXG4gICAgd2lkdGg6ICc0MCUnLFxuICAgIGhlaWdodDogJzIycHgnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCByZ2IoMTM2LCAxMzYsIDEzNiknLFxuICAgIGJveFNoYWRvdzpcbiAgICAgICdyZ2JhKDAsIDAsIDAsIDAuMSkgMHB4IDFweCAxcHggaW5zZXQsIHJnYigyMzYsIDIzNiwgMjM2KSAwcHggMXB4IDBweCAwcHgnLFxuICAgIG1hcmdpbkJvdHRvbTogJzJweCcsXG4gICAgZm9udFNpemU6ICcxM3B4JyxcbiAgICBwYWRkaW5nTGVmdDogJzNweCcsXG4gICAgbWFyZ2luUmlnaHQ6ICcxMHB4JyxcbiAgfTtcbiAgUkdCd3JhcDogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgfTtcbiAgUkdCbGFiZWw6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgbGVmdDogJzBweCcsXG4gICAgd2lkdGg6ICczNHB4JyxcbiAgICB0ZXh0VHJhbnNmb3JtOiAndXBwZXJjYXNlJyxcbiAgICBmb250U2l6ZTogJzEzcHgnLFxuICAgIGhlaWdodDogJzI0cHgnLFxuICAgIGxpbmVIZWlnaHQ6ICcyNHB4JyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgfTtcbiAgSEVYaW5wdXQ6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgbWFyZ2luTGVmdDogJzIwJScsXG4gICAgd2lkdGg6ICc4MCUnLFxuICAgIGhlaWdodDogJzIycHgnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAjODg4ODg4JyxcbiAgICBib3hTaGFkb3c6ICdpbnNldCAwIDFweCAxcHggcmdiYSgwLDAsMCwuMSksIDAgMXB4IDAgMCAjRUNFQ0VDJyxcbiAgICBtYXJnaW5Cb3R0b206ICczcHgnLFxuICAgIGZvbnRTaXplOiAnMTNweCcsXG4gICAgcGFkZGluZ0xlZnQ6ICczcHgnLFxuICB9O1xuICBIRVh3cmFwOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge1xuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICB9O1xuICBIRVhsYWJlbDogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6ICcwcHgnLFxuICAgIGxlZnQ6ICcwcHgnLFxuICAgIHdpZHRoOiAnMTRweCcsXG4gICAgdGV4dFRyYW5zZm9ybTogJ3VwcGVyY2FzZScsXG4gICAgZm9udFNpemU6ICcxM3B4JyxcbiAgICBoZWlnaHQ6ICcyNHB4JyxcbiAgICBsaW5lSGVpZ2h0OiAnMjRweCcsXG4gIH07XG5cbiAgcm91bmQodikge1xuICAgIHJldHVybiBNYXRoLnJvdW5kKHYpO1xuICB9XG4gIGhhbmRsZVZhbHVlQ2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICBpZiAoZGF0YVsnIyddKSB7XG4gICAgICBpZiAoaXNWYWxpZEhleChkYXRhWycjJ10pKSB7XG4gICAgICAgIHRoaXMub25DaGFuZ2UuZW1pdCh7XG4gICAgICAgICAgZGF0YToge1xuICAgICAgICAgICAgaGV4OiBkYXRhWycjJ10sXG4gICAgICAgICAgICBzb3VyY2U6ICdoZXgnLFxuICAgICAgICAgIH0sXG4gICAgICAgICAgJGV2ZW50LFxuICAgICAgICB9KTtcbiAgICAgIH1cbiAgICB9IGVsc2UgaWYgKGRhdGEuciB8fCBkYXRhLmcgfHwgZGF0YS5iKSB7XG4gICAgICB0aGlzLm9uQ2hhbmdlLmVtaXQoe1xuICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgcjogZGF0YS5yIHx8IHRoaXMucmdiLnIsXG4gICAgICAgICAgZzogZGF0YS5nIHx8IHRoaXMucmdiLmcsXG4gICAgICAgICAgYjogZGF0YS5iIHx8IHRoaXMucmdiLmIsXG4gICAgICAgICAgc291cmNlOiAncmdiJyxcbiAgICAgICAgfSxcbiAgICAgICAgJGV2ZW50LFxuICAgICAgfSk7XG4gICAgfSBlbHNlIGlmIChkYXRhLmggfHwgZGF0YS5zIHx8IGRhdGEudikge1xuICAgICAgdGhpcy5vbkNoYW5nZS5lbWl0KHtcbiAgICAgICAgZGF0YToge1xuICAgICAgICAgIGg6IGRhdGEuaCB8fCB0aGlzLmhzdi5oLFxuICAgICAgICAgIHM6IGRhdGEucyB8fCB0aGlzLmhzdi5zLFxuICAgICAgICAgIHY6IGRhdGEudiB8fCB0aGlzLmhzdi52LFxuICAgICAgICAgIHNvdXJjZTogJ2hzdicsXG4gICAgICAgIH0sXG4gICAgICAgICRldmVudCxcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxufVxuIl19
|
@@ -1,5 +0,0 @@
|
|
1
|
-
export { PhotoshopButtonComponent } from './photoshop-button.component';
|
2
|
-
export { PhotoshopFieldsComponent } from './photoshop-fields.component';
|
3
|
-
export { PhotoshopPreviewsComponent } from './photoshop-previews.component';
|
4
|
-
export { ColorPhotoshopModule, PhotoshopComponent } from './photoshop.component';
|
5
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9waG90b3Nob3AvcHVibGljX2FwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUN4RSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUN4RSxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUM1RSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB7IFBob3Rvc2hvcEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4vcGhvdG9zaG9wLWJ1dHRvbi5jb21wb25lbnQnO1xuZXhwb3J0IHsgUGhvdG9zaG9wRmllbGRzQ29tcG9uZW50IH0gZnJvbSAnLi9waG90b3Nob3AtZmllbGRzLmNvbXBvbmVudCc7XG5leHBvcnQgeyBQaG90b3Nob3BQcmV2aWV3c0NvbXBvbmVudCB9IGZyb20gJy4vcGhvdG9zaG9wLXByZXZpZXdzLmNvbXBvbmVudCc7XG5leHBvcnQgeyBDb2xvclBob3Rvc2hvcE1vZHVsZSwgUGhvdG9zaG9wQ29tcG9uZW50IH0gZnJvbSAnLi9waG90b3Nob3AuY29tcG9uZW50JztcbiJdfQ==
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-photoshop.mjs","sources":["../../../../src/lib/components/photoshop/photoshop-button.component.ts","../../../../src/lib/components/photoshop/photoshop-fields.component.ts","../../../../src/lib/components/photoshop/photoshop-previews.component.ts","../../../../src/lib/components/photoshop/photoshop.component.ts","../../../../src/lib/components/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 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-photoshop.mjs","sources":["../../../../src/lib/components/photoshop/photoshop-button.component.ts","../../../../src/lib/components/photoshop/photoshop-fields.component.ts","../../../../src/lib/components/photoshop/photoshop-previews.component.ts","../../../../src/lib/components/photoshop/photoshop.component.ts","../../../../src/lib/components/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,5 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Generated bundle index. Do not edit.
|
3
|
-
*/
|
4
|
-
export * from './public_api';
|
5
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLXNoYWRlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL3NoYWRlL25neC1jb2xvci1zaGFkZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpY19hcGknO1xuIl19
|
@@ -1,2 +0,0 @@
|
|
1
|
-
export { ColorShadeModule, ShadeSliderComponent } from './shade-picker.component';
|
2
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9zaGFkZS9wdWJsaWNfYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxvQkFBb0IsRUFBRSxNQUFNLDBCQUEwQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgQ29sb3JTaGFkZU1vZHVsZSwgU2hhZGVTbGlkZXJDb21wb25lbnQgfSBmcm9tICcuL3NoYWRlLXBpY2tlci5jb21wb25lbnQnO1xuIl19
|
@@ -1,105 +0,0 @@
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
2
|
-
import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
|
3
|
-
import { ColorWrap, ShadeModule, toState } from 'ngx-color';
|
4
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
5
|
-
import * as i0 from "@angular/core";
|
6
|
-
import * as i1 from "ngx-color";
|
7
|
-
export class ShadeSliderComponent extends ColorWrap {
|
8
|
-
constructor() {
|
9
|
-
super();
|
10
|
-
/** Pixel value for picker width */
|
11
|
-
this.width = 316;
|
12
|
-
/** Pixel value for picker height */
|
13
|
-
this.height = 16;
|
14
|
-
this.pointer = {
|
15
|
-
width: '18px',
|
16
|
-
height: '18px',
|
17
|
-
borderRadius: '50%',
|
18
|
-
transform: 'translate(-9px, -2px)',
|
19
|
-
boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
|
20
|
-
};
|
21
|
-
}
|
22
|
-
ngOnChanges() {
|
23
|
-
this.setState(toState(this.color, this.oldHue));
|
24
|
-
}
|
25
|
-
handlePickerChange({ data, $event }) {
|
26
|
-
this.handleChange(data, $event);
|
27
|
-
}
|
28
|
-
}
|
29
|
-
ShadeSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ShadeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
30
|
-
ShadeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: ShadeSliderComponent, selector: "color-shade-picker", inputs: { width: "width", height: "height" }, providers: [
|
31
|
-
{
|
32
|
-
provide: NG_VALUE_ACCESSOR,
|
33
|
-
useExisting: forwardRef(() => ShadeSliderComponent),
|
34
|
-
multi: true,
|
35
|
-
},
|
36
|
-
{
|
37
|
-
provide: ColorWrap,
|
38
|
-
useExisting: forwardRef(() => ShadeSliderComponent),
|
39
|
-
},
|
40
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
41
|
-
<div class="shade-slider {{ className || '' }}"
|
42
|
-
[style.width.px]="width" [style.height.px]="height">
|
43
|
-
<color-shade
|
44
|
-
[hsl]="hsl"
|
45
|
-
[rgb]="rgb"
|
46
|
-
[pointer]="pointer"
|
47
|
-
(onChange)="handlePickerChange($event)"
|
48
|
-
></color-shade>
|
49
|
-
</div>
|
50
|
-
`, isInline: true, styles: [".shade-slider{position:relative}\n"], components: [{ type: i1.ShadeComponent, selector: "color-shade", inputs: ["hsl", "rgb", "pointer", "shadow", "radius"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
51
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ShadeSliderComponent, decorators: [{
|
52
|
-
type: Component,
|
53
|
-
args: [{
|
54
|
-
selector: 'color-shade-picker',
|
55
|
-
template: `
|
56
|
-
<div class="shade-slider {{ className || '' }}"
|
57
|
-
[style.width.px]="width" [style.height.px]="height">
|
58
|
-
<color-shade
|
59
|
-
[hsl]="hsl"
|
60
|
-
[rgb]="rgb"
|
61
|
-
[pointer]="pointer"
|
62
|
-
(onChange)="handlePickerChange($event)"
|
63
|
-
></color-shade>
|
64
|
-
</div>
|
65
|
-
`,
|
66
|
-
styles: [
|
67
|
-
`
|
68
|
-
.shade-slider {
|
69
|
-
position: relative;
|
70
|
-
}
|
71
|
-
`,
|
72
|
-
],
|
73
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
74
|
-
preserveWhitespaces: false,
|
75
|
-
providers: [
|
76
|
-
{
|
77
|
-
provide: NG_VALUE_ACCESSOR,
|
78
|
-
useExisting: forwardRef(() => ShadeSliderComponent),
|
79
|
-
multi: true,
|
80
|
-
},
|
81
|
-
{
|
82
|
-
provide: ColorWrap,
|
83
|
-
useExisting: forwardRef(() => ShadeSliderComponent),
|
84
|
-
},
|
85
|
-
]
|
86
|
-
}]
|
87
|
-
}], ctorParameters: function () { return []; }, propDecorators: { width: [{
|
88
|
-
type: Input
|
89
|
-
}], height: [{
|
90
|
-
type: Input
|
91
|
-
}] } });
|
92
|
-
export class ColorShadeModule {
|
93
|
-
}
|
94
|
-
ColorShadeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorShadeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
95
|
-
ColorShadeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorShadeModule, declarations: [ShadeSliderComponent], imports: [CommonModule, ShadeModule], exports: [ShadeSliderComponent] });
|
96
|
-
ColorShadeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorShadeModule, imports: [[CommonModule, ShadeModule]] });
|
97
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorShadeModule, decorators: [{
|
98
|
-
type: NgModule,
|
99
|
-
args: [{
|
100
|
-
declarations: [ShadeSliderComponent],
|
101
|
-
exports: [ShadeSliderComponent],
|
102
|
-
imports: [CommonModule, ShadeModule],
|
103
|
-
}]
|
104
|
-
}] });
|
105
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhZGUtcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9zaGFkZS9zaGFkZS1waWNrZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQzNHLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLE9BQU8sRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUM1RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBb0NuRCxNQUFNLE9BQU8sb0JBQXFCLFNBQVEsU0FBUztJQWFqRDtRQUNFLEtBQUssRUFBRSxDQUFDO1FBYlYsbUNBQW1DO1FBQzFCLFVBQUssR0FBb0IsR0FBRyxDQUFDO1FBQ3RDLG9DQUFvQztRQUMzQixXQUFNLEdBQW9CLEVBQUUsQ0FBQztRQUN0QyxZQUFPLEdBQTRCO1lBQ2pDLEtBQUssRUFBRSxNQUFNO1lBQ2IsTUFBTSxFQUFFLE1BQU07WUFDZCxZQUFZLEVBQUUsS0FBSztZQUNuQixTQUFTLEVBQUUsdUJBQXVCO1lBQ2xDLFNBQVMsRUFBRSxpQ0FBaUM7U0FDN0MsQ0FBQztJQUlGLENBQUM7SUFDRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBQ0Qsa0JBQWtCLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFO1FBQ2pDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxFQUFFLE1BQU0sQ0FBQyxDQUFDO0lBQ2xDLENBQUM7O2lIQXJCVSxvQkFBb0I7cUdBQXBCLG9CQUFvQiwyRkFacEI7UUFDVDtZQUNFLE9BQU8sRUFBRSxpQkFBaUI7WUFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztZQUNuRCxLQUFLLEVBQUUsSUFBSTtTQUNaO1FBQ0Q7WUFDRSxPQUFPLEVBQUUsU0FBUztZQUNsQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG9CQUFvQixDQUFDO1NBQ3BEO0tBQ0Ysc0VBOUJTOzs7Ozs7Ozs7O0dBVVQ7MkZBc0JVLG9CQUFvQjtrQkFsQ2hDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtvQkFDOUIsUUFBUSxFQUFFOzs7Ozs7Ozs7O0dBVVQ7b0JBQ0QsTUFBTSxFQUFFO3dCQUNOOzs7O0dBSUQ7cUJBQ0E7b0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLG1CQUFtQixFQUFFLEtBQUs7b0JBQzFCLFNBQVMsRUFBRTt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxxQkFBcUIsQ0FBQzs0QkFDbkQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7d0JBQ0Q7NEJBQ0UsT0FBTyxFQUFFLFNBQVM7NEJBQ2xCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHFCQUFxQixDQUFDO3lCQUNwRDtxQkFDRjtpQkFDRjswRUFHVSxLQUFLO3NCQUFiLEtBQUs7Z0JBRUcsTUFBTTtzQkFBZCxLQUFLOztBQXlCUixNQUFNLE9BQU8sZ0JBQWdCOzs2R0FBaEIsZ0JBQWdCOzhHQUFoQixnQkFBZ0IsaUJBN0JoQixvQkFBb0IsYUEyQnJCLFlBQVksRUFBRSxXQUFXLGFBM0J4QixvQkFBb0I7OEdBNkJwQixnQkFBZ0IsWUFGbEIsQ0FBQyxZQUFZLEVBQUUsV0FBVyxDQUFDOzJGQUV6QixnQkFBZ0I7a0JBTDVCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsb0JBQW9CLENBQUM7b0JBQ3BDLE9BQU8sRUFBRSxDQUFDLG9CQUFvQixDQUFDO29CQUMvQixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsV0FBVyxDQUFDO2lCQUNyQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgTmdNb2R1bGUsIE9uQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29sb3JXcmFwLCBTaGFkZU1vZHVsZSwgdG9TdGF0ZSB9IGZyb20gJ25neC1jb2xvcic7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3Itc2hhZGUtcGlja2VyJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwic2hhZGUtc2xpZGVyIHt7IGNsYXNzTmFtZSB8fCAnJyB9fVwiXG4gICAgICBbc3R5bGUud2lkdGgucHhdPVwid2lkdGhcIiBbc3R5bGUuaGVpZ2h0LnB4XT1cImhlaWdodFwiPlxuICAgICAgPGNvbG9yLXNoYWRlXG4gICAgICAgIFtoc2xdPVwiaHNsXCJcbiAgICAgICAgW3JnYl09XCJyZ2JcIlxuICAgICAgICBbcG9pbnRlcl09XCJwb2ludGVyXCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVBpY2tlckNoYW5nZSgkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLXNoYWRlPlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgLnNoYWRlLXNsaWRlciB7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2hhZGVTbGlkZXJDb21wb25lbnQpLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBDb2xvcldyYXAsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBTaGFkZVNsaWRlckNvbXBvbmVudCksXG4gICAgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBTaGFkZVNsaWRlckNvbXBvbmVudCBleHRlbmRzIENvbG9yV3JhcCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIC8qKiBQaXhlbCB2YWx1ZSBmb3IgcGlja2VyIHdpZHRoICovXG4gIEBJbnB1dCgpIHdpZHRoOiBzdHJpbmcgfCBudW1iZXIgPSAzMTY7XG4gIC8qKiBQaXhlbCB2YWx1ZSBmb3IgcGlja2VyIGhlaWdodCAqL1xuICBASW5wdXQoKSBoZWlnaHQ6IHN0cmluZyB8IG51bWJlciA9IDE2O1xuICBwb2ludGVyOiB7W2tleTogc3RyaW5nXTogc3RyaW5nfSA9IHtcbiAgICB3aWR0aDogJzE4cHgnLFxuICAgIGhlaWdodDogJzE4cHgnLFxuICAgIGJvcmRlclJhZGl1czogJzUwJScsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlKC05cHgsIC0ycHgpJyxcbiAgICBib3hTaGFkb3c6ICcwIDFweCA0cHggMCByZ2JhKDAsIDAsIDAsIDAuMzcpJyxcbiAgfTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG4gIG5nT25DaGFuZ2VzKCkge1xuICAgIHRoaXMuc2V0U3RhdGUodG9TdGF0ZSh0aGlzLmNvbG9yLCB0aGlzLm9sZEh1ZSkpO1xuICB9XG4gIGhhbmRsZVBpY2tlckNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgdGhpcy5oYW5kbGVDaGFuZ2UoZGF0YSwgJGV2ZW50KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtTaGFkZVNsaWRlckNvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtTaGFkZVNsaWRlckNvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFNoYWRlTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JTaGFkZU1vZHVsZSB7fVxuIl19
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-shade.mjs","sources":["../../../../src/lib/components/shade/shade-picker.component.ts","../../../../src/lib/components/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":";;;;;;;MAuCa,6BAA6B,SAAS;IAajD;QACE,KAAK,EAAE,CAAC;;QAZD,UAAK,GAAoB,GAAG,CAAC;;QAE7B,WAAM,GAAoB,EAAE,CAAC;QACtC,YAAO,GAA4B;YACjC,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,uBAAuB;YAClC,SAAS,EAAE,iCAAiC;SAC7C,CAAC;KAID;IACD,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;KACjD;IACD,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;KACjC;;iHArBU,oBAAoB;qGAApB,oBAAoB,2FAZpB;QACT;YACE,OAAO,EAAE,iBAAiB;YAC1B,WAAW,EAAE,UAAU,CAAC,MAAM,oBAAoB,CAAC;YACnD,KAAK,EAAE,IAAI;SACZ;QACD;YACE,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,UAAU,CAAC,MAAM,oBAAoB,CAAC;SACpD;KACF,sEA9BS;;;;;;;;;;GAUT;2FAsBU,oBAAoB;kBAlChC,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE;;;;;;;;;;GAUT;oBACD,MAAM,EAAE;wBACN;;;;GAID;qBACA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,mBAAmB,EAAE,KAAK;oBAC1B,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,0BAA0B,CAAC;4BACnD,KAAK,EAAE,IAAI;yBACZ;wBACD;4BACE,OAAO,EAAE,SAAS;4BAClB,WAAW,EAAE,UAAU,CAAC,0BAA0B,CAAC;yBACpD;qBACF;iBACF;0EAGU,KAAK;sBAAb,KAAK;gBAEG,MAAM;sBAAd,KAAK;;MAyBK,gBAAgB;;6GAAhB,gBAAgB;8GAAhB,gBAAgB,iBA7BhB,oBAAoB,aA2BrB,YAAY,EAAE,WAAW,aA3BxB,oBAAoB;8GA6BpB,gBAAgB,YAFlB,CAAC,YAAY,EAAE,WAAW,CAAC;2FAEzB,gBAAgB;kBAL5B,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,oBAAoB,CAAC;oBACpC,OAAO,EAAE,CAAC,oBAAoB,CAAC;oBAC/B,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;iBACrC;;;ACnED;;;;;;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-shade.mjs","sources":["../../../../src/lib/components/shade/shade-picker.component.ts","../../../../src/lib/components/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":";;;;;;;MAuCa,oBAAqB,SAAQ,SAAS;IAajD;QACE,KAAK,EAAE,CAAC;;QAZD,UAAK,GAAoB,GAAG,CAAC;;QAE7B,WAAM,GAAoB,EAAE,CAAC;QACtC,YAAO,GAA4B;YACjC,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,uBAAuB;YAClC,SAAS,EAAE,iCAAiC;SAC7C,CAAC;KAID;IACD,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;KACjD;IACD,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;KACjC;;iHArBU,oBAAoB;qGAApB,oBAAoB,2FAZpB;QACT;YACE,OAAO,EAAE,iBAAiB;YAC1B,WAAW,EAAE,UAAU,CAAC,MAAM,oBAAoB,CAAC;YACnD,KAAK,EAAE,IAAI;SACZ;QACD;YACE,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,UAAU,CAAC,MAAM,oBAAoB,CAAC;SACpD;KACF,sEA9BS;;;;;;;;;;GAUT;2FAsBU,oBAAoB;kBAlChC,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE;;;;;;;;;;GAUT;oBACD,MAAM,EAAE;wBACN;;;;GAID;qBACA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,mBAAmB,EAAE,KAAK;oBAC1B,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,0BAA0B,CAAC;4BACnD,KAAK,EAAE,IAAI;yBACZ;wBACD;4BACE,OAAO,EAAE,SAAS;4BAClB,WAAW,EAAE,UAAU,CAAC,0BAA0B,CAAC;yBACpD;qBACF;iBACF;0EAGU,KAAK;sBAAb,KAAK;gBAEG,MAAM;sBAAd,KAAK;;MAyBK,gBAAgB;;6GAAhB,gBAAgB;8GAAhB,gBAAgB,iBA7BhB,oBAAoB,aA2BrB,YAAY,EAAE,WAAW,aA3BxB,oBAAoB;8GA6BpB,gBAAgB,YAFlB,CAAC,YAAY,EAAE,WAAW,CAAC;2FAEzB,gBAAgB;kBAL5B,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,oBAAoB,CAAC;oBACpC,OAAO,EAAE,CAAC,oBAAoB,CAAC;oBAC/B,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;iBACrC;;;ACnED;;;;;;"}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Generated bundle index. Do not edit.
|
3
|
-
*/
|
4
|
-
export * from './public_api';
|
5
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLXNrZXRjaC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9za2V0Y2gvbmd4LWNvbG9yLXNrZXRjaC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpY19hcGknO1xuIl19
|
@@ -1,4 +0,0 @@
|
|
1
|
-
export { SketchFieldsComponent } from './sketch-fields.component';
|
2
|
-
export { SketchPresetColorsComponent } from './sketch-preset-colors.component';
|
3
|
-
export { ColorSketchModule, SketchComponent } from './sketch.component';
|
4
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9za2V0Y2gvcHVibGljX2FwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsMkJBQTJCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUMvRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsZUFBZSxFQUFFLE1BQU0sb0JBQW9CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgeyBTa2V0Y2hGaWVsZHNDb21wb25lbnQgfSBmcm9tICcuL3NrZXRjaC1maWVsZHMuY29tcG9uZW50JztcbmV4cG9ydCB7IFNrZXRjaFByZXNldENvbG9yc0NvbXBvbmVudCB9IGZyb20gJy4vc2tldGNoLXByZXNldC1jb2xvcnMuY29tcG9uZW50JztcbmV4cG9ydCB7IENvbG9yU2tldGNoTW9kdWxlLCBTa2V0Y2hDb21wb25lbnQgfSBmcm9tICcuL3NrZXRjaC5jb21wb25lbnQnO1xuIl19
|