ngx-color 7.3.3 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/alpha.component.d.ts +1 -1
- package/checkboard.component.d.ts +1 -1
- package/color-wrap.component.d.ts +1 -1
- package/coordinates.directive.d.ts +1 -1
- package/editable-input.component.d.ts +1 -1
- package/esm2020/alpha.component.mjs +13 -61
- package/esm2020/checkboard.component.mjs +9 -25
- package/esm2020/color-wrap.component.mjs +8 -8
- package/esm2020/coordinates.directive.mjs +7 -7
- package/esm2020/editable-input.component.mjs +11 -25
- package/esm2020/hue.component.mjs +13 -54
- package/esm2020/raised.component.mjs +10 -49
- package/esm2020/saturation.component.mjs +13 -57
- package/esm2020/shade.component.mjs +11 -51
- package/esm2020/swatch.component.mjs +13 -28
- package/fesm2015/ngx-color.mjs +92 -349
- package/fesm2015/ngx-color.mjs.map +1 -1
- package/fesm2020/ngx-color.mjs +92 -349
- package/fesm2020/ngx-color.mjs.map +1 -1
- package/hue.component.d.ts +1 -1
- package/{ngx-color.d.ts → index.d.ts} +0 -0
- package/package.json +6 -119
- package/raised.component.d.ts +1 -1
- package/saturation.component.d.ts +1 -1
- package/shade.component.d.ts +1 -1
- package/swatch.component.d.ts +1 -1
- package/alpha/alpha-picker.component.d.ts +0 -28
- package/alpha/ngx-color-alpha.d.ts +0 -5
- package/alpha/package.json +0 -17
- package/alpha/public_api.d.ts +0 -1
- package/block/block-swatches.component.d.ts +0 -24
- package/block/block.component.d.ts +0 -36
- package/block/ngx-color-block.d.ts +0 -5
- package/block/package.json +0 -16
- package/block/public_api.d.ts +0 -2
- package/chrome/chrome-fields.component.d.ts +0 -22
- package/chrome/chrome.component.d.ts +0 -25
- package/chrome/ngx-color-chrome.d.ts +0 -5
- package/chrome/package.json +0 -16
- package/chrome/public_api.d.ts +0 -2
- package/circle/circle-swatch.component.d.ts +0 -19
- package/circle/circle.component.d.ts +0 -32
- package/circle/ngx-color-circle.d.ts +0 -5
- package/circle/package.json +0 -19
- package/circle/public_api.d.ts +0 -2
- package/compact/compact-color.component.d.ts +0 -19
- package/compact/compact-fields.component.d.ts +0 -32
- package/compact/compact.component.d.ts +0 -30
- package/compact/ngx-color-compact.d.ts +0 -5
- package/compact/package.json +0 -16
- package/compact/public_api.d.ts +0 -3
- package/esm2020/alpha/alpha-picker.component.mjs +0 -116
- package/esm2020/alpha/ngx-color-alpha.mjs +0 -5
- package/esm2020/alpha/public_api.mjs +0 -2
- package/esm2020/block/block-swatches.component.mjs +0 -74
- package/esm2020/block/block.component.mjs +0 -199
- package/esm2020/block/ngx-color-block.mjs +0 -5
- package/esm2020/block/public_api.mjs +0 -3
- package/esm2020/chrome/chrome-fields.component.mjs +0 -356
- package/esm2020/chrome/chrome.component.mjs +0 -249
- package/esm2020/chrome/ngx-color-chrome.mjs +0 -5
- package/esm2020/chrome/public_api.mjs +0 -3
- package/esm2020/circle/circle-swatch.component.mjs +0 -85
- package/esm2020/circle/circle.component.mjs +0 -148
- package/esm2020/circle/ngx-color-circle.mjs +0 -5
- package/esm2020/circle/public_api.mjs +0 -3
- package/esm2020/compact/compact-color.component.mjs +0 -91
- package/esm2020/compact/compact-fields.component.mjs +0 -186
- package/esm2020/compact/compact.component.mjs +0 -177
- package/esm2020/compact/ngx-color-compact.mjs +0 -5
- package/esm2020/compact/public_api.mjs +0 -4
- package/esm2020/github/github-swatch.component.mjs +0 -67
- package/esm2020/github/github.component.mjs +0 -179
- package/esm2020/github/ngx-color-github.mjs +0 -5
- package/esm2020/github/public_api.mjs +0 -3
- package/esm2020/hue/hue-picker.component.mjs +0 -113
- package/esm2020/hue/ngx-color-hue.mjs +0 -5
- package/esm2020/hue/public_api.mjs +0 -2
- package/esm2020/material/material.component.mjs +0 -211
- package/esm2020/material/ngx-color-material.mjs +0 -5
- package/esm2020/material/public_api.mjs +0 -2
- package/esm2020/photoshop/ngx-color-photoshop.mjs +0 -5
- package/esm2020/photoshop/photoshop-button.component.mjs +0 -63
- package/esm2020/photoshop/photoshop-fields.component.mjs +0 -241
- package/esm2020/photoshop/photoshop-previews.component.mjs +0 -68
- package/esm2020/photoshop/photoshop.component.mjs +0 -258
- package/esm2020/photoshop/public_api.mjs +0 -5
- package/esm2020/shade/ngx-color-shade.mjs +0 -5
- package/esm2020/shade/public_api.mjs +0 -2
- package/esm2020/shade/shade-picker.component.mjs +0 -105
- package/esm2020/sketch/ngx-color-sketch.mjs +0 -5
- package/esm2020/sketch/public_api.mjs +0 -4
- package/esm2020/sketch/sketch-fields.component.mjs +0 -243
- package/esm2020/sketch/sketch-preset-colors.component.mjs +0 -98
- package/esm2020/sketch/sketch.component.mjs +0 -283
- package/esm2020/slider/ngx-color-slider.mjs +0 -5
- package/esm2020/slider/public_api.mjs +0 -4
- package/esm2020/slider/slider-swatch.component.mjs +0 -80
- package/esm2020/slider/slider-swatches.component.mjs +0 -135
- package/esm2020/slider/slider.component.mjs +0 -116
- package/esm2020/swatches/ngx-color-swatches.mjs +0 -5
- package/esm2020/swatches/public_api.mjs +0 -4
- package/esm2020/swatches/swatches-color.component.mjs +0 -123
- package/esm2020/swatches/swatches-group.component.mjs +0 -64
- package/esm2020/swatches/swatches.component.mjs +0 -258
- package/esm2020/twitter/ngx-color-twitter.mjs +0 -5
- package/esm2020/twitter/public_api.mjs +0 -2
- package/esm2020/twitter/twitter.component.mjs +0 -255
- package/fesm2015/ngx-color-alpha.mjs +0 -123
- package/fesm2015/ngx-color-alpha.mjs.map +0 -1
- package/fesm2015/ngx-color-block.mjs +0 -275
- package/fesm2015/ngx-color-block.mjs.map +0 -1
- package/fesm2015/ngx-color-chrome.mjs +0 -606
- package/fesm2015/ngx-color-chrome.mjs.map +0 -1
- package/fesm2015/ngx-color-circle.mjs +0 -237
- package/fesm2015/ngx-color-circle.mjs.map +0 -1
- package/fesm2015/ngx-color-compact.mjs +0 -451
- package/fesm2015/ngx-color-compact.mjs.map +0 -1
- package/fesm2015/ngx-color-github.mjs +0 -250
- package/fesm2015/ngx-color-github.mjs.map +0 -1
- package/fesm2015/ngx-color-hue.mjs +0 -120
- package/fesm2015/ngx-color-hue.mjs.map +0 -1
- package/fesm2015/ngx-color-material.mjs +0 -218
- package/fesm2015/ngx-color-material.mjs.map +0 -1
- package/fesm2015/ngx-color-photoshop.mjs +0 -626
- package/fesm2015/ngx-color-photoshop.mjs.map +0 -1
- package/fesm2015/ngx-color-shade.mjs +0 -112
- package/fesm2015/ngx-color-shade.mjs.map +0 -1
- package/fesm2015/ngx-color-sketch.mjs +0 -620
- package/fesm2015/ngx-color-sketch.mjs.map +0 -1
- package/fesm2015/ngx-color-slider.mjs +0 -331
- package/fesm2015/ngx-color-slider.mjs.map +0 -1
- package/fesm2015/ngx-color-swatches.mjs +0 -441
- package/fesm2015/ngx-color-swatches.mjs.map +0 -1
- package/fesm2015/ngx-color-twitter.mjs +0 -262
- package/fesm2015/ngx-color-twitter.mjs.map +0 -1
- package/fesm2020/ngx-color-alpha.mjs +0 -123
- package/fesm2020/ngx-color-alpha.mjs.map +0 -1
- package/fesm2020/ngx-color-block.mjs +0 -275
- package/fesm2020/ngx-color-block.mjs.map +0 -1
- package/fesm2020/ngx-color-chrome.mjs +0 -606
- package/fesm2020/ngx-color-chrome.mjs.map +0 -1
- package/fesm2020/ngx-color-circle.mjs +0 -237
- package/fesm2020/ngx-color-circle.mjs.map +0 -1
- package/fesm2020/ngx-color-compact.mjs +0 -451
- package/fesm2020/ngx-color-compact.mjs.map +0 -1
- package/fesm2020/ngx-color-github.mjs +0 -250
- package/fesm2020/ngx-color-github.mjs.map +0 -1
- package/fesm2020/ngx-color-hue.mjs +0 -120
- package/fesm2020/ngx-color-hue.mjs.map +0 -1
- package/fesm2020/ngx-color-material.mjs +0 -218
- package/fesm2020/ngx-color-material.mjs.map +0 -1
- package/fesm2020/ngx-color-photoshop.mjs +0 -626
- package/fesm2020/ngx-color-photoshop.mjs.map +0 -1
- package/fesm2020/ngx-color-shade.mjs +0 -112
- package/fesm2020/ngx-color-shade.mjs.map +0 -1
- package/fesm2020/ngx-color-sketch.mjs +0 -620
- package/fesm2020/ngx-color-sketch.mjs.map +0 -1
- package/fesm2020/ngx-color-slider.mjs +0 -331
- package/fesm2020/ngx-color-slider.mjs.map +0 -1
- package/fesm2020/ngx-color-swatches.mjs +0 -441
- package/fesm2020/ngx-color-swatches.mjs.map +0 -1
- package/fesm2020/ngx-color-twitter.mjs +0 -262
- package/fesm2020/ngx-color-twitter.mjs.map +0 -1
- package/github/github-swatch.component.d.ts +0 -19
- package/github/github.component.d.ts +0 -28
- package/github/ngx-color-github.d.ts +0 -5
- package/github/package.json +0 -16
- package/github/public_api.d.ts +0 -2
- package/hue/hue-picker.component.d.ts +0 -29
- package/hue/ngx-color-hue.d.ts +0 -5
- package/hue/package.json +0 -15
- package/hue/public_api.d.ts +0 -1
- package/material/material.component.d.ts +0 -39
- package/material/ngx-color-material.d.ts +0 -5
- package/material/package.json +0 -15
- package/material/public_api.d.ts +0 -1
- package/photoshop/ngx-color-photoshop.d.ts +0 -5
- package/photoshop/package.json +0 -15
- package/photoshop/photoshop-button.component.d.ts +0 -9
- package/photoshop/photoshop-fields.component.d.ts +0 -22
- package/photoshop/photoshop-previews.component.d.ts +0 -11
- package/photoshop/photoshop.component.d.ts +0 -33
- package/photoshop/public_api.d.ts +0 -4
- package/shade/ngx-color-shade.d.ts +0 -5
- package/shade/package.json +0 -17
- package/shade/public_api.d.ts +0 -1
- package/shade/shade-picker.component.d.ts +0 -27
- package/sketch/ngx-color-sketch.d.ts +0 -5
- package/sketch/package.json +0 -15
- package/sketch/public_api.d.ts +0 -3
- package/sketch/sketch-fields.component.d.ts +0 -23
- package/sketch/sketch-preset-colors.component.d.ts +0 -24
- package/sketch/sketch.component.d.ts +0 -32
- package/slider/ngx-color-slider.d.ts +0 -5
- package/slider/package.json +0 -15
- package/slider/public_api.d.ts +0 -3
- package/slider/slider-swatch.component.d.ts +0 -16
- package/slider/slider-swatches.component.d.ts +0 -15
- package/slider/slider.component.d.ts +0 -22
- package/swatches/ngx-color-swatches.d.ts +0 -5
- package/swatches/package.json +0 -18
- package/swatches/public_api.d.ts +0 -3
- package/swatches/swatches-color.component.d.ts +0 -18
- package/swatches/swatches-group.component.d.ts +0 -10
- package/swatches/swatches.component.d.ts +0 -29
- package/twitter/ngx-color-twitter.d.ts +0 -5
- package/twitter/package.json +0 -15
- package/twitter/public_api.d.ts +0 -1
- package/twitter/twitter.component.d.ts +0 -31
@@ -1,331 +0,0 @@
|
|
1
|
-
import * as i0 from '@angular/core';
|
2
|
-
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
|
3
|
-
import { CommonModule } from '@angular/common';
|
4
|
-
import * as i1 from 'ngx-color';
|
5
|
-
import { ColorWrap, HueModule, SwatchModule } from 'ngx-color';
|
6
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
7
|
-
|
8
|
-
class SliderSwatchComponent {
|
9
|
-
constructor() {
|
10
|
-
this.first = false;
|
11
|
-
this.last = false;
|
12
|
-
this.onClick = new EventEmitter();
|
13
|
-
}
|
14
|
-
ngOnChanges() {
|
15
|
-
this.background = `hsl(${this.hsl.h}, 50%, ${this.offset * 100}%)`;
|
16
|
-
}
|
17
|
-
handleClick($event) {
|
18
|
-
this.onClick.emit({
|
19
|
-
data: {
|
20
|
-
h: this.hsl.h,
|
21
|
-
s: 0.5,
|
22
|
-
l: this.offset,
|
23
|
-
source: 'hsl',
|
24
|
-
},
|
25
|
-
$event,
|
26
|
-
});
|
27
|
-
}
|
28
|
-
}
|
29
|
-
SliderSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
30
|
-
SliderSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SliderSwatchComponent, selector: "color-slider-swatch", inputs: { hsl: "hsl", active: "active", offset: "offset", first: "first", last: "last" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
|
31
|
-
<div class="slider-swatch" [style.background]="background"
|
32
|
-
[class.first]="first" [class.last]="last" [class.active]="active"
|
33
|
-
(click)="handleClick($event)"
|
34
|
-
></div>
|
35
|
-
`, isInline: true, styles: [".slider-swatch{height:12px;background:rgb(121,211,166);cursor:pointer}.slider-swatch.active{transform:scaleY(1.8);border-radius:3.6px/2px}.slider-swatch.first{border-radius:2px 0 0 2px}.slider-swatch.last{border-radius:0 2px 2px 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderSwatchComponent, decorators: [{
|
37
|
-
type: Component,
|
38
|
-
args: [{
|
39
|
-
selector: 'color-slider-swatch',
|
40
|
-
template: `
|
41
|
-
<div class="slider-swatch" [style.background]="background"
|
42
|
-
[class.first]="first" [class.last]="last" [class.active]="active"
|
43
|
-
(click)="handleClick($event)"
|
44
|
-
></div>
|
45
|
-
`,
|
46
|
-
styles: [
|
47
|
-
`
|
48
|
-
.slider-swatch {
|
49
|
-
height: 12px;
|
50
|
-
background: rgb(121, 211, 166);
|
51
|
-
cursor: pointer;
|
52
|
-
}
|
53
|
-
.slider-swatch.active {
|
54
|
-
transform: scaleY(1.8);
|
55
|
-
border-top-right-radius: 3.6px 2px;
|
56
|
-
border-top-left-radius: 3.6px 2px;
|
57
|
-
border-bottom-right-radius: 3.6px 2px;
|
58
|
-
border-bottom-left-radius: 3.6px 2px;
|
59
|
-
}
|
60
|
-
.slider-swatch.first {
|
61
|
-
border-radius: 2px 0px 0px 2px;
|
62
|
-
}
|
63
|
-
.slider-swatch.last {
|
64
|
-
border-radius: 0px 2px 2px 0px;
|
65
|
-
}
|
66
|
-
|
67
|
-
`,
|
68
|
-
],
|
69
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
70
|
-
preserveWhitespaces: false,
|
71
|
-
}]
|
72
|
-
}], propDecorators: { hsl: [{
|
73
|
-
type: Input
|
74
|
-
}], active: [{
|
75
|
-
type: Input
|
76
|
-
}], offset: [{
|
77
|
-
type: Input
|
78
|
-
}], first: [{
|
79
|
-
type: Input
|
80
|
-
}], last: [{
|
81
|
-
type: Input
|
82
|
-
}], onClick: [{
|
83
|
-
type: Output
|
84
|
-
}] } });
|
85
|
-
|
86
|
-
class SliderSwatchesComponent {
|
87
|
-
constructor() {
|
88
|
-
this.onClick = new EventEmitter();
|
89
|
-
this.onSwatchHover = new EventEmitter();
|
90
|
-
}
|
91
|
-
active(l, s) {
|
92
|
-
return (Math.round(this.hsl.l * 100) / 100 === l &&
|
93
|
-
Math.round(this.hsl.s * 100) / 100 === s);
|
94
|
-
}
|
95
|
-
handleClick({ data, $event }) {
|
96
|
-
this.onClick.emit({ data, $event });
|
97
|
-
}
|
98
|
-
}
|
99
|
-
SliderSwatchesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderSwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
100
|
-
SliderSwatchesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SliderSwatchesComponent, selector: "color-slider-swatches", inputs: { hsl: "hsl" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
|
101
|
-
<div class="slider-swatches">
|
102
|
-
<div class="slider-swatch-wrap">
|
103
|
-
<color-slider-swatch
|
104
|
-
[hsl]="hsl"
|
105
|
-
[offset]=".80"
|
106
|
-
[active]="active(0.80, 0.50)"
|
107
|
-
(onClick)="handleClick($event)"
|
108
|
-
[first]="true"
|
109
|
-
></color-slider-swatch>
|
110
|
-
</div>
|
111
|
-
<div class="slider-swatch-wrap">
|
112
|
-
<color-slider-swatch
|
113
|
-
[hsl]="hsl"
|
114
|
-
[offset]=".65"
|
115
|
-
[active]="active(0.65, 0.50)"
|
116
|
-
(onClick)="handleClick($event)"
|
117
|
-
></color-slider-swatch>
|
118
|
-
</div>
|
119
|
-
<div class="slider-swatch-wrap">
|
120
|
-
<color-slider-swatch
|
121
|
-
[hsl]="hsl"
|
122
|
-
[offset]=".50"
|
123
|
-
[active]="active(0.50, 0.50)"
|
124
|
-
(onClick)="handleClick($event)"
|
125
|
-
></color-slider-swatch>
|
126
|
-
</div>
|
127
|
-
<div class="slider-swatch-wrap">
|
128
|
-
<color-slider-swatch
|
129
|
-
[hsl]="hsl"
|
130
|
-
[offset]=".35"
|
131
|
-
[active]="active(0.35, 0.50)"
|
132
|
-
(onClick)="handleClick($event)"
|
133
|
-
></color-slider-swatch>
|
134
|
-
</div>
|
135
|
-
<div class="slider-swatch-wrap">
|
136
|
-
<color-slider-swatch
|
137
|
-
[hsl]="hsl"
|
138
|
-
[offset]=".20"
|
139
|
-
[active]="active(0.20, 0.50)"
|
140
|
-
(onClick)="handleClick($event)"
|
141
|
-
[last]="true"
|
142
|
-
></color-slider-swatch>
|
143
|
-
</div>
|
144
|
-
</div>
|
145
|
-
`, isInline: true, styles: [".slider-swatches{margin-top:20px}.slider-swatch-wrap{box-sizing:border-box;width:20%;padding-right:1px;float:left}\n"], components: [{ type: SliderSwatchComponent, selector: "color-slider-swatch", inputs: ["hsl", "active", "offset", "first", "last"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
146
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderSwatchesComponent, decorators: [{
|
147
|
-
type: Component,
|
148
|
-
args: [{
|
149
|
-
selector: 'color-slider-swatches',
|
150
|
-
template: `
|
151
|
-
<div class="slider-swatches">
|
152
|
-
<div class="slider-swatch-wrap">
|
153
|
-
<color-slider-swatch
|
154
|
-
[hsl]="hsl"
|
155
|
-
[offset]=".80"
|
156
|
-
[active]="active(0.80, 0.50)"
|
157
|
-
(onClick)="handleClick($event)"
|
158
|
-
[first]="true"
|
159
|
-
></color-slider-swatch>
|
160
|
-
</div>
|
161
|
-
<div class="slider-swatch-wrap">
|
162
|
-
<color-slider-swatch
|
163
|
-
[hsl]="hsl"
|
164
|
-
[offset]=".65"
|
165
|
-
[active]="active(0.65, 0.50)"
|
166
|
-
(onClick)="handleClick($event)"
|
167
|
-
></color-slider-swatch>
|
168
|
-
</div>
|
169
|
-
<div class="slider-swatch-wrap">
|
170
|
-
<color-slider-swatch
|
171
|
-
[hsl]="hsl"
|
172
|
-
[offset]=".50"
|
173
|
-
[active]="active(0.50, 0.50)"
|
174
|
-
(onClick)="handleClick($event)"
|
175
|
-
></color-slider-swatch>
|
176
|
-
</div>
|
177
|
-
<div class="slider-swatch-wrap">
|
178
|
-
<color-slider-swatch
|
179
|
-
[hsl]="hsl"
|
180
|
-
[offset]=".35"
|
181
|
-
[active]="active(0.35, 0.50)"
|
182
|
-
(onClick)="handleClick($event)"
|
183
|
-
></color-slider-swatch>
|
184
|
-
</div>
|
185
|
-
<div class="slider-swatch-wrap">
|
186
|
-
<color-slider-swatch
|
187
|
-
[hsl]="hsl"
|
188
|
-
[offset]=".20"
|
189
|
-
[active]="active(0.20, 0.50)"
|
190
|
-
(onClick)="handleClick($event)"
|
191
|
-
[last]="true"
|
192
|
-
></color-slider-swatch>
|
193
|
-
</div>
|
194
|
-
</div>
|
195
|
-
`,
|
196
|
-
styles: [`
|
197
|
-
.slider-swatches {
|
198
|
-
margin-top: 20px;
|
199
|
-
}
|
200
|
-
.slider-swatch-wrap {
|
201
|
-
box-sizing: border-box;
|
202
|
-
width: 20%;
|
203
|
-
padding-right: 1px;
|
204
|
-
float: left;
|
205
|
-
}
|
206
|
-
`],
|
207
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
208
|
-
preserveWhitespaces: false,
|
209
|
-
}]
|
210
|
-
}], propDecorators: { hsl: [{
|
211
|
-
type: Input
|
212
|
-
}], onClick: [{
|
213
|
-
type: Output
|
214
|
-
}], onSwatchHover: [{
|
215
|
-
type: Output
|
216
|
-
}] } });
|
217
|
-
|
218
|
-
class SliderComponent extends ColorWrap {
|
219
|
-
constructor() {
|
220
|
-
super();
|
221
|
-
this.pointer = {
|
222
|
-
width: '14px',
|
223
|
-
height: '14px',
|
224
|
-
borderRadius: '6px',
|
225
|
-
transform: 'translate(-7px, -2px)',
|
226
|
-
backgroundColor: 'rgb(248, 248, 248)',
|
227
|
-
boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
|
228
|
-
};
|
229
|
-
this.radius = 2;
|
230
|
-
}
|
231
|
-
handlePickerChange({ data, $event }) {
|
232
|
-
this.handleChange(data, $event);
|
233
|
-
}
|
234
|
-
}
|
235
|
-
SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
236
|
-
SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SliderComponent, selector: "color-slider", inputs: { pointer: "pointer", radius: "radius" }, providers: [
|
237
|
-
{
|
238
|
-
provide: NG_VALUE_ACCESSOR,
|
239
|
-
useExisting: forwardRef(() => SliderComponent),
|
240
|
-
multi: true,
|
241
|
-
},
|
242
|
-
{
|
243
|
-
provide: ColorWrap,
|
244
|
-
useExisting: forwardRef(() => SliderComponent),
|
245
|
-
},
|
246
|
-
], usesInheritance: true, ngImport: i0, template: `
|
247
|
-
<div class="slider-picker {{ className }}">
|
248
|
-
<div class="slider-hue">
|
249
|
-
<color-hue
|
250
|
-
[hsl]="hsl" [radius]="radius" [pointer]="pointer"
|
251
|
-
(onChange)="handlePickerChange($event)"
|
252
|
-
></color-hue>
|
253
|
-
</div>
|
254
|
-
<div class="slider-swatches">
|
255
|
-
<color-slider-swatches [hsl]="hsl"
|
256
|
-
(onClick)="handlePickerChange($event)"
|
257
|
-
></color-slider-swatches>
|
258
|
-
</div>
|
259
|
-
</div>
|
260
|
-
`, isInline: true, styles: [".slider-hue{height:12px;position:relative}\n"], components: [{ type: i0.forwardRef(function () { return i1.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return SliderSwatchesComponent; }), selector: "color-slider-swatches", inputs: ["hsl"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderComponent, decorators: [{
|
262
|
-
type: Component,
|
263
|
-
args: [{
|
264
|
-
selector: 'color-slider',
|
265
|
-
template: `
|
266
|
-
<div class="slider-picker {{ className }}">
|
267
|
-
<div class="slider-hue">
|
268
|
-
<color-hue
|
269
|
-
[hsl]="hsl" [radius]="radius" [pointer]="pointer"
|
270
|
-
(onChange)="handlePickerChange($event)"
|
271
|
-
></color-hue>
|
272
|
-
</div>
|
273
|
-
<div class="slider-swatches">
|
274
|
-
<color-slider-swatches [hsl]="hsl"
|
275
|
-
(onClick)="handlePickerChange($event)"
|
276
|
-
></color-slider-swatches>
|
277
|
-
</div>
|
278
|
-
</div>
|
279
|
-
`,
|
280
|
-
styles: [
|
281
|
-
`
|
282
|
-
.slider-hue {
|
283
|
-
height: 12px;
|
284
|
-
position: relative;
|
285
|
-
}
|
286
|
-
`,
|
287
|
-
],
|
288
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
289
|
-
preserveWhitespaces: false,
|
290
|
-
providers: [
|
291
|
-
{
|
292
|
-
provide: NG_VALUE_ACCESSOR,
|
293
|
-
useExisting: forwardRef(() => SliderComponent),
|
294
|
-
multi: true,
|
295
|
-
},
|
296
|
-
{
|
297
|
-
provide: ColorWrap,
|
298
|
-
useExisting: forwardRef(() => SliderComponent),
|
299
|
-
},
|
300
|
-
]
|
301
|
-
}]
|
302
|
-
}], ctorParameters: function () { return []; }, propDecorators: { pointer: [{
|
303
|
-
type: Input
|
304
|
-
}], radius: [{
|
305
|
-
type: Input
|
306
|
-
}] } });
|
307
|
-
class ColorSliderModule {
|
308
|
-
}
|
309
|
-
ColorSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
310
|
-
ColorSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSliderModule, declarations: [SliderComponent, SliderSwatchComponent,
|
311
|
-
SliderSwatchesComponent], imports: [CommonModule, HueModule, SwatchModule], exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent] });
|
312
|
-
ColorSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSliderModule, imports: [[CommonModule, HueModule, SwatchModule]] });
|
313
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSliderModule, decorators: [{
|
314
|
-
type: NgModule,
|
315
|
-
args: [{
|
316
|
-
declarations: [
|
317
|
-
SliderComponent,
|
318
|
-
SliderSwatchComponent,
|
319
|
-
SliderSwatchesComponent,
|
320
|
-
],
|
321
|
-
exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent],
|
322
|
-
imports: [CommonModule, HueModule, SwatchModule],
|
323
|
-
}]
|
324
|
-
}] });
|
325
|
-
|
326
|
-
/**
|
327
|
-
* Generated bundle index. Do not edit.
|
328
|
-
*/
|
329
|
-
|
330
|
-
export { ColorSliderModule, SliderComponent, SliderSwatchComponent, SliderSwatchesComponent };
|
331
|
-
//# sourceMappingURL=ngx-color-slider.mjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-slider.mjs","sources":["../../src/lib/slider/slider-swatch.component.ts","../../src/lib/slider/slider-swatches.component.ts","../../src/lib/slider/slider.component.ts","../../src/lib/slider/ngx-color-slider.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n} from '@angular/core';\n\nimport { HSL } from 'ngx-color';\n\n@Component({\n selector: 'color-slider-swatch',\n template: `\n <div class=\"slider-swatch\" [style.background]=\"background\"\n [class.first]=\"first\" [class.last]=\"last\" [class.active]=\"active\"\n (click)=\"handleClick($event)\"\n ></div>\n `,\n styles: [\n `\n .slider-swatch {\n height: 12px;\n background: rgb(121, 211, 166);\n cursor: pointer;\n }\n .slider-swatch.active {\n transform: scaleY(1.8);\n border-top-right-radius: 3.6px 2px;\n border-top-left-radius: 3.6px 2px;\n border-bottom-right-radius: 3.6px 2px;\n border-bottom-left-radius: 3.6px 2px;\n }\n .slider-swatch.first {\n border-radius: 2px 0px 0px 2px;\n }\n .slider-swatch.last {\n border-radius: 0px 2px 2px 0px;\n }\n\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class SliderSwatchComponent implements OnChanges {\n @Input() hsl!: HSL;\n @Input() active!: boolean;\n @Input() offset!: number;\n @Input() first = false;\n @Input() last = false;\n @Output() onClick = new EventEmitter<any>();\n background!: string;\n\n ngOnChanges() {\n this.background = `hsl(${this.hsl.h}, 50%, ${this.offset * 100}%)`;\n }\n handleClick($event) {\n this.onClick.emit({\n data: {\n h: this.hsl.h,\n s: 0.5,\n l: this.offset,\n source: 'hsl',\n },\n $event,\n });\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\nimport { HSL } from 'ngx-color';\n\n@Component({\n selector: 'color-slider-swatches',\n template: `\n <div class=\"slider-swatches\">\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".80\"\n [active]=\"active(0.80, 0.50)\"\n (onClick)=\"handleClick($event)\"\n [first]=\"true\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".65\"\n [active]=\"active(0.65, 0.50)\"\n (onClick)=\"handleClick($event)\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".50\"\n [active]=\"active(0.50, 0.50)\"\n (onClick)=\"handleClick($event)\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".35\"\n [active]=\"active(0.35, 0.50)\"\n (onClick)=\"handleClick($event)\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".20\"\n [active]=\"active(0.20, 0.50)\"\n (onClick)=\"handleClick($event)\"\n [last]=\"true\"\n ></color-slider-swatch>\n </div>\n </div>\n `,\n styles: [`\n .slider-swatches {\n margin-top: 20px;\n }\n .slider-swatch-wrap {\n box-sizing: border-box;\n width: 20%;\n padding-right: 1px;\n float: left;\n }\n `],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class SliderSwatchesComponent {\n @Input() hsl!: HSL;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n\n active(l: number, s: number) {\n return (\n Math.round(this.hsl.l * 100) / 100 === l &&\n Math.round(this.hsl.s * 100) / 100 === s\n );\n }\n handleClick({ data, $event }) {\n this.onClick.emit({ data, $event });\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, HueModule, SwatchModule } from 'ngx-color';\nimport { SliderSwatchComponent } from './slider-swatch.component';\nimport { SliderSwatchesComponent } from './slider-swatches.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-slider',\n template: `\n <div class=\"slider-picker {{ className }}\">\n <div class=\"slider-hue\">\n <color-hue\n [hsl]=\"hsl\" [radius]=\"radius\" [pointer]=\"pointer\"\n (onChange)=\"handlePickerChange($event)\"\n ></color-hue>\n </div>\n <div class=\"slider-swatches\">\n <color-slider-swatches [hsl]=\"hsl\"\n (onClick)=\"handlePickerChange($event)\"\n ></color-slider-swatches>\n </div>\n </div>\n `,\n styles: [\n `\n .slider-hue {\n height: 12px;\n position: relative;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SliderComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => SliderComponent),\n },\n ]\n})\nexport class SliderComponent extends ColorWrap {\n @Input()\n pointer: Record<string, string> = {\n width: '14px',\n height: '14px',\n borderRadius: '6px',\n transform: 'translate(-7px, -2px)',\n backgroundColor: 'rgb(248, 248, 248)',\n boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n };\n @Input() radius = 2;\n\n constructor() {\n super();\n }\n\n handlePickerChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [\n SliderComponent,\n SliderSwatchComponent,\n SliderSwatchesComponent,\n ],\n exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent],\n imports: [CommonModule, HueModule, SwatchModule],\n})\nexport class ColorSliderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;MA6Ca,qBAAqB;IAlClC;QAsCW,UAAK,GAAG,KAAK,CAAC;QACd,SAAI,GAAG,KAAK,CAAC;QACZ,YAAO,GAAG,IAAI,YAAY,EAAO,CAAC;KAiB7C;IAdC,WAAW;QACT,IAAI,CAAC,UAAU,GAAG,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,UAAU,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC;KACpE;IACD,WAAW,CAAC,MAAM;QAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YAChB,IAAI,EAAE;gBACJ,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;gBACb,CAAC,EAAE,GAAG;gBACN,CAAC,EAAE,IAAI,CAAC,MAAM;gBACd,MAAM,EAAE,KAAK;aACd;YACD,MAAM;SACP,CAAC,CAAC;KACJ;;kHAtBU,qBAAqB;sGAArB,qBAAqB,2MAhCtB;;;;;GAKT;2FA2BU,qBAAqB;kBAlCjC,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,QAAQ,EAAE;;;;;GAKT;oBACD,MAAM,EAAE;wBACN;;;;;;;;;;;;;;;;;;;;GAoBD;qBACA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,mBAAmB,EAAE,KAAK;iBAC3B;8BAEU,GAAG;sBAAX,KAAK;gBACG,MAAM;sBAAd,KAAK;gBACG,MAAM;sBAAd,KAAK;gBACG,KAAK;sBAAb,KAAK;gBACG,IAAI;sBAAZ,KAAK;gBACI,OAAO;sBAAhB,MAAM;;;MCqBI,uBAAuB;IA9DpC;QAgEY,YAAO,GAAG,IAAI,YAAY,EAAO,CAAC;QAClC,kBAAa,GAAG,IAAI,YAAY,EAAO,CAAC;KAWnD;IATC,MAAM,CAAC,CAAS,EAAE,CAAS;QACzB,QACE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC;YACxC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC,EACxC;KACH;IACD,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;QAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;KACrC;;oHAbU,uBAAuB;wGAAvB,uBAAuB,sJA5DxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CT;2FAeU,uBAAuB;kBA9DnC,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;oBACjC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CT;oBACD,MAAM,EAAE,CAAC;;;;;;;;;;GAUR,CAAC;oBACF,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,mBAAmB,EAAE,KAAK;iBAC3B;8BAEU,GAAG;sBAAX,KAAK;gBACI,OAAO;sBAAhB,MAAM;gBACG,aAAa;sBAAtB,MAAM;;;MC5BI,wBAAwB,SAAS;IAY5C;QACE,KAAK,EAAE,CAAC;QAXV,YAAO,GAA2B;YAChC,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,uBAAuB;YAClC,eAAe,EAAE,oBAAoB;YACrC,SAAS,EAAE,iCAAiC;SAC7C,CAAC;QACO,WAAM,GAAG,CAAC,CAAC;KAInB;IAED,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;KACjC;;4GAlBU,eAAe;gGAAf,eAAe,yFAZf;QACT;YACE,OAAO,EAAE,iBAAiB;YAC1B,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;YAC9C,KAAK,EAAE,IAAI;SACZ;QACD;YACE,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;SAC/C;KACF,iDAnCS;;;;;;;;;;;;;;GAcT,gUAgDC,uBAAuB;2FAzBd,eAAe;kBAvC3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,cAAc;oBACxB,QAAQ,EAAE;;;;;;;;;;;;;;GAcT;oBACD,MAAM,EAAE;wBACN;;;;;GAKD;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,qBAAqB,CAAC;4BAC9C,KAAK,EAAE,IAAI;yBACZ;wBACD;4BACE,OAAO,EAAE,SAAS;4BAClB,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;yBAC/C;qBACF;iBACF;0EAGC,OAAO;sBADN,KAAK;gBASG,MAAM;sBAAd,KAAK;;MAoBK,iBAAiB;;8GAAjB,iBAAiB;+GAAjB,iBAAiB,iBA9BjB,eAAe,EAwBxB,qBAAqB;QACrB,uBAAuB,aAGf,YAAY,EAAE,SAAS,EAAE,YAAY,aA5BpC,eAAe,EA2BC,qBAAqB,EAAE,uBAAuB;+GAG9D,iBAAiB,YAFnB,CAAC,YAAY,EAAE,SAAS,EAAE,YAAY,CAAC;2FAErC,iBAAiB;kBAT7B,QAAQ;mBAAC;oBACR,YAAY,EAAE;wBACZ,eAAe;wBACf,qBAAqB;wBACrB,uBAAuB;qBACxB;oBACD,OAAO,EAAE,CAAC,eAAe,EAAE,qBAAqB,EAAE,uBAAuB,CAAC;oBAC1E,OAAO,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,YAAY,CAAC;iBACjD;;;AC5ED;;;;;;"}
|