@mintplayer/ng-bootstrap 21.26.0 → 21.28.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.
|
@@ -1,30 +1,174 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
2
|
+
import { viewChild, input, model, signal, computed, ChangeDetectionStrategy, Component, Directive, inject, forwardRef, output, effect } from '@angular/core';
|
|
3
|
+
import { Subject } from 'rxjs';
|
|
4
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* Single source of truth for color-space conversions used by the picker.
|
|
9
|
+
*
|
|
10
|
+
* Conventions across this module:
|
|
11
|
+
* - hue is in degrees [0, 360)
|
|
12
|
+
* - saturation, lightness, value, alpha are in [0, 1]
|
|
13
|
+
* - r, g, b are in [0, 255] (integer on the way out, real-valued internally)
|
|
14
|
+
* - hex is "#RRGGBB" — three-digit "#RGB" is accepted on parse only
|
|
15
|
+
*/
|
|
16
|
+
const TWO_PI = Math.PI * 2;
|
|
17
|
+
const clamp01 = (n) => Math.max(0, Math.min(1, n));
|
|
18
|
+
const clamp255 = (n) => Math.max(0, Math.min(255, Math.round(n)));
|
|
19
|
+
const HEX6_RE = /^[0-9a-fA-F]{6}$/;
|
|
20
|
+
const BLACK = { r: 0, g: 0, b: 0 };
|
|
21
|
+
function hex2rgb(hex) {
|
|
22
|
+
const stripped = hex.startsWith('#') ? hex.slice(1) : hex;
|
|
23
|
+
const expanded = stripped.length === 3
|
|
24
|
+
? stripped.split('').map(c => c + c).join('')
|
|
25
|
+
: stripped;
|
|
26
|
+
if (!HEX6_RE.test(expanded))
|
|
27
|
+
return { ...BLACK };
|
|
28
|
+
return {
|
|
29
|
+
r: parseInt(expanded.slice(0, 2), 16),
|
|
30
|
+
g: parseInt(expanded.slice(2, 4), 16),
|
|
31
|
+
b: parseInt(expanded.slice(4, 6), 16),
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
function rgb2hex(rgb) {
|
|
35
|
+
const r = clamp255(rgb.r);
|
|
36
|
+
const g = clamp255(rgb.g);
|
|
37
|
+
const b = clamp255(rgb.b);
|
|
38
|
+
return '#' + ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
|
|
39
|
+
}
|
|
40
|
+
function rgb2hsv(rgb) {
|
|
41
|
+
const r = rgb.r / 255;
|
|
42
|
+
const g = rgb.g / 255;
|
|
43
|
+
const b = rgb.b / 255;
|
|
44
|
+
const max = Math.max(r, g, b);
|
|
45
|
+
const min = Math.min(r, g, b);
|
|
46
|
+
const d = max - min;
|
|
47
|
+
const value = max;
|
|
48
|
+
const saturation = max === 0 ? 0 : d / max;
|
|
49
|
+
const hue = d === 0 ? 0 : hueFromRgb(r, g, b, max, d);
|
|
50
|
+
return { hue, saturation, value };
|
|
51
|
+
}
|
|
52
|
+
function hsv2rgb(hsv) {
|
|
53
|
+
const s = clamp01(hsv.saturation);
|
|
54
|
+
const v = clamp01(hsv.value);
|
|
55
|
+
const h = ((hsv.hue % 360) + 360) % 360;
|
|
56
|
+
const c = v * s;
|
|
57
|
+
const hp = h / 60;
|
|
58
|
+
const x = c * (1 - Math.abs((hp % 2) - 1));
|
|
59
|
+
const m = v - c;
|
|
60
|
+
let r1 = 0, g1 = 0, b1 = 0;
|
|
61
|
+
if (hp < 1) {
|
|
62
|
+
r1 = c;
|
|
63
|
+
g1 = x;
|
|
64
|
+
}
|
|
65
|
+
else if (hp < 2) {
|
|
66
|
+
r1 = x;
|
|
67
|
+
g1 = c;
|
|
68
|
+
}
|
|
69
|
+
else if (hp < 3) {
|
|
70
|
+
g1 = c;
|
|
71
|
+
b1 = x;
|
|
72
|
+
}
|
|
73
|
+
else if (hp < 4) {
|
|
74
|
+
g1 = x;
|
|
75
|
+
b1 = c;
|
|
76
|
+
}
|
|
77
|
+
else if (hp < 5) {
|
|
78
|
+
r1 = x;
|
|
79
|
+
b1 = c;
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
r1 = c;
|
|
83
|
+
b1 = x;
|
|
84
|
+
}
|
|
85
|
+
return {
|
|
86
|
+
r: (r1 + m) * 255,
|
|
87
|
+
g: (g1 + m) * 255,
|
|
88
|
+
b: (b1 + m) * 255,
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
function rgb2hsl(rgb) {
|
|
92
|
+
const r = rgb.r / 255;
|
|
93
|
+
const g = rgb.g / 255;
|
|
94
|
+
const b = rgb.b / 255;
|
|
95
|
+
const max = Math.max(r, g, b);
|
|
96
|
+
const min = Math.min(r, g, b);
|
|
97
|
+
const d = max - min;
|
|
98
|
+
const luminosity = (max + min) / 2;
|
|
99
|
+
const saturation = d === 0
|
|
100
|
+
? 0
|
|
101
|
+
: d / (1 - Math.abs(2 * luminosity - 1));
|
|
102
|
+
const hue = d === 0 ? 0 : hueFromRgb(r, g, b, max, d);
|
|
103
|
+
return { hue, saturation, luminosity };
|
|
104
|
+
}
|
|
105
|
+
function hsl2rgb(hsl) {
|
|
106
|
+
return hsv2rgb(hsl2hsv(hsl));
|
|
107
|
+
}
|
|
108
|
+
function hsv2hsl(hsv) {
|
|
109
|
+
const v = clamp01(hsv.value);
|
|
110
|
+
const s = clamp01(hsv.saturation);
|
|
111
|
+
const luminosity = v * (1 - s / 2);
|
|
112
|
+
const denom = Math.min(luminosity, 1 - luminosity);
|
|
113
|
+
const saturation = denom === 0 ? 0 : (v - luminosity) / denom;
|
|
114
|
+
return { hue: hsv.hue, saturation, luminosity };
|
|
115
|
+
}
|
|
116
|
+
function hsl2hsv(hsl) {
|
|
117
|
+
const l = clamp01(hsl.luminosity);
|
|
118
|
+
const s = clamp01(hsl.saturation);
|
|
119
|
+
const value = l + s * Math.min(l, 1 - l);
|
|
120
|
+
const saturation = value === 0 ? 0 : 2 * (1 - l / value);
|
|
121
|
+
return { hue: hsl.hue, saturation, value };
|
|
122
|
+
}
|
|
123
|
+
function hex2hsv(hex) {
|
|
124
|
+
return rgb2hsv(hex2rgb(hex));
|
|
125
|
+
}
|
|
126
|
+
function hsv2hex(hsv) {
|
|
127
|
+
return rgb2hex(hsv2rgb(hsv));
|
|
128
|
+
}
|
|
129
|
+
/** Polar position (cx, cy) on a disc of radius R → HSV (hue, saturation). */
|
|
130
|
+
function polar2hs(dx, dy, radius) {
|
|
131
|
+
const r = Math.sqrt(dx * dx + dy * dy);
|
|
132
|
+
const saturation = clamp01(r / radius);
|
|
133
|
+
let hue = (Math.atan2(dy, dx) * 360) / TWO_PI;
|
|
134
|
+
if (hue < 0)
|
|
135
|
+
hue += 360;
|
|
136
|
+
return { hue, saturation };
|
|
137
|
+
}
|
|
138
|
+
/** Inverse of polar2hs. Hue in degrees, saturation in [0, 1] → (dx, dy) on a disc of given radius. */
|
|
139
|
+
function hs2polar(hue, saturation, radius) {
|
|
140
|
+
const theta = (hue * TWO_PI) / 360;
|
|
141
|
+
const r = clamp01(saturation) * radius;
|
|
142
|
+
return { dx: r * Math.cos(theta), dy: r * Math.sin(theta) };
|
|
143
|
+
}
|
|
144
|
+
function hueFromRgb(r, g, b, max, d) {
|
|
145
|
+
let h;
|
|
146
|
+
switch (max) {
|
|
147
|
+
case r:
|
|
148
|
+
h = ((g - b) / d) % 6;
|
|
149
|
+
break;
|
|
150
|
+
case g:
|
|
151
|
+
h = (b - r) / d + 2;
|
|
152
|
+
break;
|
|
153
|
+
default:
|
|
154
|
+
h = (r - g) / d + 4;
|
|
155
|
+
break;
|
|
156
|
+
}
|
|
157
|
+
h *= 60;
|
|
158
|
+
if (h < 0)
|
|
159
|
+
h += 360;
|
|
160
|
+
return h;
|
|
161
|
+
}
|
|
162
|
+
|
|
7
163
|
class BsSliderComponent {
|
|
8
164
|
constructor() {
|
|
9
|
-
this.observeSize = inject(BsObserveSizeDirective);
|
|
10
165
|
this.track = viewChild.required('track');
|
|
11
166
|
this.thumb = viewChild.required('thumb');
|
|
12
167
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
13
168
|
this.value = model(0.5, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
14
|
-
this.valueChange = output();
|
|
15
169
|
this.isPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDown" }] : /* istanbul ignore next */ []));
|
|
16
|
-
this.
|
|
17
|
-
|
|
18
|
-
const width = this.observeSize.width() ?? 0;
|
|
19
|
-
return value * width - 12;
|
|
20
|
-
}, ...(ngDevMode ? [{ debugName: "thumbMarginLeft" }] : /* istanbul ignore next */ []));
|
|
21
|
-
this.cursorClass = computed(() => {
|
|
22
|
-
return this.isPointerDown() ? 'cursor-grabbing' : 'cursor-grab';
|
|
23
|
-
}, ...(ngDevMode ? [{ debugName: "cursorClass" }] : /* istanbul ignore next */ []));
|
|
24
|
-
effect(() => {
|
|
25
|
-
const value = this.value();
|
|
26
|
-
this.valueChange.emit(value);
|
|
27
|
-
});
|
|
170
|
+
this.thumbLeft = computed(() => `${this.value() * 100}%`, ...(ngDevMode ? [{ debugName: "thumbLeft" }] : /* istanbul ignore next */ []));
|
|
171
|
+
this.cursorClass = computed(() => 'position-absolute top-0 ' + (this.isPointerDown() ? 'cursor-grabbing' : 'cursor-grab'), ...(ngDevMode ? [{ debugName: "cursorClass" }] : /* istanbul ignore next */ []));
|
|
28
172
|
}
|
|
29
173
|
onPointerDown(ev) {
|
|
30
174
|
if (this.disabled())
|
|
@@ -41,37 +185,26 @@ class BsSliderComponent {
|
|
|
41
185
|
this.updateColor(ev);
|
|
42
186
|
}
|
|
43
187
|
}
|
|
44
|
-
onPointerUp(
|
|
188
|
+
onPointerUp(_ev) {
|
|
45
189
|
this.isPointerDown.set(false);
|
|
46
190
|
}
|
|
47
191
|
updateColor(ev) {
|
|
48
|
-
let co;
|
|
49
192
|
const rect = this.track().nativeElement.getBoundingClientRect();
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
else {
|
|
56
|
-
co = {
|
|
57
|
-
x: ev.clientX - rect.left,
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
const percent = co.x / this.track().nativeElement.clientWidth;
|
|
61
|
-
const limited = Math.max(0, Math.min(1, percent));
|
|
62
|
-
this.value.set(limited);
|
|
193
|
+
const clientX = 'touches' in ev ? ev.touches[0].clientX : ev.clientX;
|
|
194
|
+
const percent = (clientX - rect.left) / this.track().nativeElement.clientWidth;
|
|
195
|
+
this.value.set(Math.max(0, Math.min(1, percent)));
|
|
63
196
|
}
|
|
64
197
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
65
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: BsSliderComponent, isStandalone: true, selector: "bs-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange"
|
|
198
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: BsSliderComponent, isStandalone: true, selector: "bs-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:mouseup": "onPointerUp($event)" }, classAttribute: "d-block position-relative" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper d-block position-relative\">\n <div #track class=\"track2\"\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\">\n <ng-content select=\"[bsTrack]\"></ng-content>\n </div>\n <div #thumb\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\"\n [class]=\"cursorClass()\"\n [style.left]=\"thumbLeft()\">\n <ng-content select=\"[bsThumb]\"></ng-content>\n </div>\n</div>\n", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
66
199
|
}
|
|
67
200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsSliderComponent, decorators: [{
|
|
68
201
|
type: Component,
|
|
69
|
-
args: [{ selector: 'bs-slider', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
202
|
+
args: [{ selector: 'bs-slider', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
70
203
|
'class': 'd-block position-relative',
|
|
71
204
|
'(document:mousemove)': 'onPointerMove($event)',
|
|
72
205
|
'(document:mouseup)': 'onPointerUp($event)',
|
|
73
|
-
}, template: "<div class=\"wrapper d-block position-relative\">\n <div #track class=\"track2\"\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\">\n <ng-content select=\"[bsTrack]\"></ng-content>\n </div>\n <div #thumb\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\"\n [class]=\"cursorClass()\"\n [style.
|
|
74
|
-
}],
|
|
206
|
+
}, template: "<div class=\"wrapper d-block position-relative\">\n <div #track class=\"track2\"\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\">\n <ng-content select=\"[bsTrack]\"></ng-content>\n </div>\n <div #thumb\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\"\n [class]=\"cursorClass()\"\n [style.left]=\"thumbLeft()\">\n <ng-content select=\"[bsThumb]\"></ng-content>\n </div>\n</div>\n", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}\n"] }]
|
|
207
|
+
}], propDecorators: { track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], thumb: [{ type: i0.ViewChild, args: ['thumb', { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
75
208
|
class BsThumbDirective {
|
|
76
209
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
77
210
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: BsThumbDirective, isStandalone: true, selector: "[bsThumb]", host: { classAttribute: "thumb position-absolute" }, ngImport: i0 }); }
|
|
@@ -101,76 +234,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
101
234
|
|
|
102
235
|
class BsAlphaStripComponent {
|
|
103
236
|
constructor() {
|
|
104
|
-
this.canvas = viewChild.required('track');
|
|
105
237
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
106
238
|
this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : /* istanbul ignore next */ []));
|
|
107
|
-
this.
|
|
239
|
+
this.brightness = model(1, ...(ngDevMode ? [{ debugName: "brightness" }] : /* istanbul ignore next */ []));
|
|
108
240
|
this.alpha = model(1, ...(ngDevMode ? [{ debugName: "alpha" }] : /* istanbul ignore next */ []));
|
|
109
|
-
this.
|
|
110
|
-
|
|
241
|
+
this.trackGradient = computed(() => {
|
|
242
|
+
const hs = this.hs();
|
|
243
|
+
const brightness = this.brightness();
|
|
244
|
+
const rgb = hsv2rgb({ hue: hs.hue, saturation: hs.saturation, value: brightness });
|
|
245
|
+
const r = Math.round(rgb.r), g = Math.round(rgb.g), b = Math.round(rgb.b);
|
|
246
|
+
return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 1))`;
|
|
247
|
+
}, ...(ngDevMode ? [{ debugName: "trackGradient" }] : /* istanbul ignore next */ []));
|
|
111
248
|
this.resultBackground = computed(() => {
|
|
112
249
|
const hs = this.hs();
|
|
113
|
-
const
|
|
250
|
+
const brightness = this.brightness();
|
|
114
251
|
const alpha = this.alpha();
|
|
115
|
-
|
|
252
|
+
const rgb = hsv2rgb({ hue: hs.hue, saturation: hs.saturation, value: brightness });
|
|
253
|
+
return `rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${alpha})`;
|
|
116
254
|
}, ...(ngDevMode ? [{ debugName: "resultBackground" }] : /* istanbul ignore next */ []));
|
|
117
|
-
// Draw gradient when HS or luminosity changes
|
|
118
|
-
effect(() => {
|
|
119
|
-
const hs = this.hs();
|
|
120
|
-
const luminosity = this.luminosity();
|
|
121
|
-
setTimeout(() => {
|
|
122
|
-
if (this.canvasContext) {
|
|
123
|
-
const width = this.canvas().nativeElement.width;
|
|
124
|
-
const height = this.canvas().nativeElement.height;
|
|
125
|
-
this.canvasContext.clearRect(0, 0, width, height);
|
|
126
|
-
this.canvasContext.save();
|
|
127
|
-
const gradient = this.canvasContext.createLinearGradient(0, 0, width, 0);
|
|
128
|
-
gradient.addColorStop(0, `hsla(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%, 0)`);
|
|
129
|
-
gradient.addColorStop(1, `hsla(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%, 1)`);
|
|
130
|
-
this.canvasContext.fillStyle = gradient;
|
|
131
|
-
this.canvasContext.fillRect(0, 0, width, height);
|
|
132
|
-
}
|
|
133
|
-
});
|
|
134
|
-
});
|
|
135
|
-
// Emit alpha changes
|
|
136
|
-
effect(() => {
|
|
137
|
-
const alpha = this.alpha();
|
|
138
|
-
this.alphaChange.emit(alpha);
|
|
139
|
-
});
|
|
140
|
-
}
|
|
141
|
-
ngAfterViewInit() {
|
|
142
|
-
if (typeof window !== 'undefined') {
|
|
143
|
-
this.canvasContext = this.canvas().nativeElement.getContext('2d', { willReadFrequently: true });
|
|
144
|
-
}
|
|
145
255
|
}
|
|
146
256
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsAlphaStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
147
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
257
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: BsAlphaStripComponent, isStandalone: true, selector: "bs-alpha-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange", brightness: "brightnessChange", alpha: "alphaChange" }, ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"alpha()\" (valueChange)=\"alpha.set($event)\">\n <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{height:8px;border-radius:8px;background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}.thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
148
258
|
}
|
|
149
259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsAlphaStripComponent, decorators: [{
|
|
150
260
|
type: Component,
|
|
151
|
-
args: [{ selector: 'bs-alpha-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"alpha()\" (valueChange)=\"
|
|
152
|
-
}],
|
|
261
|
+
args: [{ selector: 'bs-alpha-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"alpha()\" (valueChange)=\"alpha.set($event)\">\n <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{height:8px;border-radius:8px;background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}.thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"] }]
|
|
262
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], brightness: [{ type: i0.Input, args: [{ isSignal: true, alias: "brightness", required: false }] }, { type: i0.Output, args: ["brightnessChange"] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }, { type: i0.Output, args: ["alphaChange"] }] } });
|
|
263
|
+
|
|
264
|
+
class BsBrightnessStripComponent {
|
|
265
|
+
constructor() {
|
|
266
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
267
|
+
this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : /* istanbul ignore next */ []));
|
|
268
|
+
this.brightness = model(1, ...(ngDevMode ? [{ debugName: "brightness" }] : /* istanbul ignore next */ []));
|
|
269
|
+
this.trackGradient = computed(() => {
|
|
270
|
+
const hs = this.hs();
|
|
271
|
+
const peak = hsv2rgb({ hue: hs.hue, saturation: hs.saturation, value: 1 });
|
|
272
|
+
return `linear-gradient(to right, #000, rgb(${Math.round(peak.r)}, ${Math.round(peak.g)}, ${Math.round(peak.b)}))`;
|
|
273
|
+
}, ...(ngDevMode ? [{ debugName: "trackGradient" }] : /* istanbul ignore next */ []));
|
|
274
|
+
this.resultBackground = computed(() => {
|
|
275
|
+
const hs = this.hs();
|
|
276
|
+
const brightness = this.brightness();
|
|
277
|
+
const rgb = hsv2rgb({ hue: hs.hue, saturation: hs.saturation, value: brightness });
|
|
278
|
+
return `rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`;
|
|
279
|
+
}, ...(ngDevMode ? [{ debugName: "resultBackground" }] : /* istanbul ignore next */ []));
|
|
280
|
+
}
|
|
281
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsBrightnessStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
282
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: BsBrightnessStripComponent, isStandalone: true, selector: "bs-brightness-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange", brightness: "brightnessChange" }, ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"brightness()\" (valueChange)=\"brightness.set($event)\">\n <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{height:8px;border-radius:8px}.thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
283
|
+
}
|
|
284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsBrightnessStripComponent, decorators: [{
|
|
285
|
+
type: Component,
|
|
286
|
+
args: [{ selector: 'bs-brightness-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"brightness()\" (valueChange)=\"brightness.set($event)\">\n <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{height:8px;border-radius:8px}.thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"] }]
|
|
287
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], brightness: [{ type: i0.Input, args: [{ isSignal: true, alias: "brightness", required: false }] }, { type: i0.Output, args: ["brightnessChange"] }] } });
|
|
153
288
|
|
|
154
289
|
class BsColorPickerValueAccessor {
|
|
155
290
|
constructor() {
|
|
156
291
|
this.host = inject(BsColorPickerComponent);
|
|
157
|
-
|
|
158
|
-
effect(() => {
|
|
159
|
-
const hs = this.host.hs();
|
|
160
|
-
const luminosity = this.host.luminosity();
|
|
161
|
-
const rgb = this.hsl2rgb(hs.hue, hs.saturation, luminosity);
|
|
162
|
-
const hex = this.rgb2hex(rgb);
|
|
163
|
-
setTimeout(() => this.onValueChange && this.onValueChange(hex), 10);
|
|
164
|
-
});
|
|
292
|
+
this.host.userChanged.pipe(takeUntilDestroyed()).subscribe(() => this.emit());
|
|
165
293
|
}
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
const
|
|
171
|
-
|
|
294
|
+
emit() {
|
|
295
|
+
this.onTouched?.();
|
|
296
|
+
if (!this.onValueChange)
|
|
297
|
+
return;
|
|
298
|
+
const hs = this.host.hs();
|
|
299
|
+
const brightness = this.host.brightness();
|
|
300
|
+
const rgb = hsv2rgb({ hue: hs.hue, saturation: hs.saturation, value: brightness });
|
|
301
|
+
this.onValueChange(rgb2hex(rgb));
|
|
172
302
|
}
|
|
173
|
-
//#region ControlValueAccessor implementation
|
|
174
303
|
registerOnChange(fn) {
|
|
175
304
|
this.onValueChange = fn;
|
|
176
305
|
}
|
|
@@ -178,73 +307,15 @@ class BsColorPickerValueAccessor {
|
|
|
178
307
|
this.onTouched = fn;
|
|
179
308
|
}
|
|
180
309
|
writeValue(value) {
|
|
181
|
-
if (
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
this.host.luminosity.set(hsl.l);
|
|
187
|
-
}
|
|
188
|
-
}
|
|
310
|
+
if (!value)
|
|
311
|
+
return;
|
|
312
|
+
const hsv = hex2hsv(value);
|
|
313
|
+
this.host.hs.set({ hue: hsv.hue, saturation: hsv.saturation });
|
|
314
|
+
this.host.brightness.set(hsv.value);
|
|
189
315
|
}
|
|
190
316
|
setDisabledState(isDisabled) {
|
|
191
317
|
this.host.disabled.set(isDisabled);
|
|
192
318
|
}
|
|
193
|
-
//#endregion
|
|
194
|
-
//#region Color Conversion
|
|
195
|
-
rgb2hex(rgb) {
|
|
196
|
-
return '#' + (Math.round((rgb.r << 16) + (rgb.g << 8) + rgb.b)).toString(16).padStart(6, '0');
|
|
197
|
-
}
|
|
198
|
-
hex2rgb(hex) {
|
|
199
|
-
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
200
|
-
return { r, g, b };
|
|
201
|
-
}
|
|
202
|
-
/**
|
|
203
|
-
* Divide 1 to n, handling floating point errors.
|
|
204
|
-
* Ensures that the value is in between 0 and 1.
|
|
205
|
-
**/
|
|
206
|
-
bound01(n, max) {
|
|
207
|
-
n = Math.min(max, Math.max(0, n));
|
|
208
|
-
if (Math.abs(n - max) < 0.000001) {
|
|
209
|
-
return 1;
|
|
210
|
-
}
|
|
211
|
-
else {
|
|
212
|
-
return (n % max) / max;
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
rgb2Hsl(color) {
|
|
216
|
-
const r01 = this.bound01(color.r, 255);
|
|
217
|
-
const g01 = this.bound01(color.g, 255);
|
|
218
|
-
const b01 = this.bound01(color.b, 255);
|
|
219
|
-
const max = Math.max(r01, g01, b01);
|
|
220
|
-
const min = Math.min(r01, g01, b01);
|
|
221
|
-
let h, s;
|
|
222
|
-
const l = (max + min) / 2;
|
|
223
|
-
if (max === min) {
|
|
224
|
-
h = s = 0;
|
|
225
|
-
}
|
|
226
|
-
else {
|
|
227
|
-
const d = max - min;
|
|
228
|
-
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
229
|
-
switch (max) {
|
|
230
|
-
case r01:
|
|
231
|
-
h = (g01 - b01) / d + (g01 < b01 ? 6 : 0);
|
|
232
|
-
break;
|
|
233
|
-
case g01:
|
|
234
|
-
h = (b01 - r01) / d + 2;
|
|
235
|
-
break;
|
|
236
|
-
case b01:
|
|
237
|
-
h = (r01 - g01) / d + 4;
|
|
238
|
-
break;
|
|
239
|
-
default: {
|
|
240
|
-
throw 'Invalid operation';
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
h /= 6;
|
|
244
|
-
}
|
|
245
|
-
h *= 360;
|
|
246
|
-
return { h, s, l };
|
|
247
|
-
}
|
|
248
319
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorPickerValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
249
320
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: BsColorPickerValueAccessor, isStandalone: true, selector: "bs-color-picker", providers: [{
|
|
250
321
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -267,325 +338,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
267
338
|
|
|
268
339
|
class BsColorWheelComponent {
|
|
269
340
|
constructor() {
|
|
270
|
-
this.
|
|
271
|
-
this.canvas = viewChild.required('canvas');
|
|
272
|
-
// Inputs
|
|
341
|
+
this.surface = viewChild.required('surface');
|
|
273
342
|
this.width = model(150, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
274
343
|
this.height = model(150, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
275
|
-
this.
|
|
276
|
-
this.luminosity = model(0, ...(ngDevMode ? [{ debugName: "luminosity" }] : /* istanbul ignore next */ []));
|
|
277
|
-
// HS model with output
|
|
344
|
+
this.brightness = model(1, ...(ngDevMode ? [{ debugName: "brightness" }] : /* istanbul ignore next */ []));
|
|
278
345
|
this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : /* istanbul ignore next */ []));
|
|
279
346
|
this.hsChange = output();
|
|
280
|
-
// Internal state
|
|
281
347
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
282
|
-
this.viewInited = signal(false, ...(ngDevMode ? [{ debugName: "viewInited" }] : /* istanbul ignore next */ []));
|
|
283
348
|
this.isPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDown" }] : /* istanbul ignore next */ []));
|
|
284
|
-
this.
|
|
285
|
-
|
|
286
|
-
this.
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
if (width === null || height === null) {
|
|
290
|
-
return null;
|
|
291
|
-
}
|
|
292
|
-
return Math.min(width, height);
|
|
293
|
-
}, ...(ngDevMode ? [{ debugName: "squareSize" }] : /* istanbul ignore next */ []));
|
|
294
|
-
this.shiftX = computed(() => {
|
|
295
|
-
const width = this.width();
|
|
296
|
-
const height = this.height();
|
|
297
|
-
if (width === null || height === null) {
|
|
298
|
-
return null;
|
|
299
|
-
}
|
|
300
|
-
else if (width < height) {
|
|
301
|
-
return 0;
|
|
302
|
-
}
|
|
303
|
-
else {
|
|
304
|
-
return (width - height) / 2;
|
|
305
|
-
}
|
|
306
|
-
}, ...(ngDevMode ? [{ debugName: "shiftX" }] : /* istanbul ignore next */ []));
|
|
307
|
-
this.shiftY = computed(() => {
|
|
308
|
-
const width = this.width();
|
|
309
|
-
const height = this.height();
|
|
310
|
-
if (width === null || height === null) {
|
|
311
|
-
return null;
|
|
312
|
-
}
|
|
313
|
-
else if (width < height) {
|
|
314
|
-
return (height - width) / 2;
|
|
315
|
-
}
|
|
316
|
-
else {
|
|
317
|
-
return 0;
|
|
318
|
-
}
|
|
319
|
-
}, ...(ngDevMode ? [{ debugName: "shiftY" }] : /* istanbul ignore next */ []));
|
|
320
|
-
this.innerRadius = computed(() => {
|
|
321
|
-
const squareSize = this.squareSize();
|
|
322
|
-
const diameterRatio = this.diameterRatio();
|
|
323
|
-
if (squareSize) {
|
|
324
|
-
return squareSize / 2 * diameterRatio;
|
|
325
|
-
}
|
|
326
|
-
else {
|
|
327
|
-
return 0;
|
|
328
|
-
}
|
|
329
|
-
}, ...(ngDevMode ? [{ debugName: "innerRadius" }] : /* istanbul ignore next */ []));
|
|
330
|
-
this.outerRadius = computed(() => {
|
|
331
|
-
const squareSize = this.squareSize();
|
|
332
|
-
if (squareSize) {
|
|
333
|
-
return squareSize / 2;
|
|
334
|
-
}
|
|
335
|
-
else {
|
|
336
|
-
return 150;
|
|
337
|
-
}
|
|
338
|
-
}, ...(ngDevMode ? [{ debugName: "outerRadius" }] : /* istanbul ignore next */ []));
|
|
349
|
+
this.squareSize = computed(() => Math.min(this.width(), this.height()), ...(ngDevMode ? [{ debugName: "squareSize" }] : /* istanbul ignore next */ []));
|
|
350
|
+
this.shiftX = computed(() => Math.max(0, (this.width() - this.height()) / 2), ...(ngDevMode ? [{ debugName: "shiftX" }] : /* istanbul ignore next */ []));
|
|
351
|
+
this.shiftY = computed(() => Math.max(0, (this.height() - this.width()) / 2), ...(ngDevMode ? [{ debugName: "shiftY" }] : /* istanbul ignore next */ []));
|
|
352
|
+
this.outerRadius = computed(() => this.squareSize() / 2, ...(ngDevMode ? [{ debugName: "outerRadius" }] : /* istanbul ignore next */ []));
|
|
353
|
+
this.overlayOpacity = computed(() => 1 - this.brightness(), ...(ngDevMode ? [{ debugName: "overlayOpacity" }] : /* istanbul ignore next */ []));
|
|
339
354
|
this.markerPosition = computed(() => {
|
|
340
355
|
const hs = this.hs();
|
|
341
|
-
const
|
|
342
|
-
const
|
|
343
|
-
const
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
y: position.y + shiftY,
|
|
347
|
-
};
|
|
356
|
+
const radius = this.outerRadius();
|
|
357
|
+
const cx = this.shiftX() + radius;
|
|
358
|
+
const cy = this.shiftY() + radius;
|
|
359
|
+
const { dx, dy } = hs2polar(hs.hue, hs.saturation, radius);
|
|
360
|
+
return { x: cx + dx, y: cy + dy };
|
|
348
361
|
}, ...(ngDevMode ? [{ debugName: "markerPosition" }] : /* istanbul ignore next */ []));
|
|
349
|
-
// Draw color wheel when dimensions change
|
|
350
|
-
effect(() => {
|
|
351
|
-
const innerRadius = this.innerRadius();
|
|
352
|
-
const outerRadius = this.outerRadius();
|
|
353
|
-
const shiftX = this.shiftX();
|
|
354
|
-
const shiftY = this.shiftY();
|
|
355
|
-
// Use setTimeout to debounce slightly
|
|
356
|
-
setTimeout(() => {
|
|
357
|
-
if (this.canvasContext && innerRadius !== null && outerRadius !== null && shiftX !== null && shiftY !== null) {
|
|
358
|
-
this.canvasContext.clearRect(0, 0, this.canvas().nativeElement.width, this.canvas().nativeElement.height);
|
|
359
|
-
this.canvasContext.save();
|
|
360
|
-
this.canvasContext.translate(shiftX + outerRadius, shiftY + outerRadius);
|
|
361
|
-
for (let x = 0; x < 360; x++) {
|
|
362
|
-
this.canvasContext.rotate(1 * Math.PI / 180);
|
|
363
|
-
const gradient = this.canvasContext.createLinearGradient(innerRadius, 0, outerRadius, 0);
|
|
364
|
-
gradient.addColorStop(0, `hsl(${x}, 0%, 50%)`);
|
|
365
|
-
gradient.addColorStop(1, `hsl(${x}, 100%, 50%)`);
|
|
366
|
-
this.canvasContext.fillStyle = gradient;
|
|
367
|
-
this.canvasContext.fillRect(innerRadius, 0, outerRadius - innerRadius, outerRadius / 50);
|
|
368
|
-
}
|
|
369
|
-
this.canvasContext.restore();
|
|
370
|
-
}
|
|
371
|
-
}, 20);
|
|
372
|
-
});
|
|
373
|
-
// Emit HS changes
|
|
374
362
|
effect(() => {
|
|
375
363
|
const hs = this.hs();
|
|
376
364
|
this.hsChange.emit(hs);
|
|
377
365
|
});
|
|
378
366
|
}
|
|
379
|
-
ngAfterViewInit() {
|
|
380
|
-
this.viewInited.set(true);
|
|
381
|
-
if (typeof window !== 'undefined') {
|
|
382
|
-
this.canvasContext = this.canvas().nativeElement.getContext('2d', { willReadFrequently: true });
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
367
|
onPointerDown(ev) {
|
|
386
|
-
if (
|
|
368
|
+
if (this.disabled())
|
|
369
|
+
return;
|
|
370
|
+
if (!('touches' in ev))
|
|
387
371
|
ev.preventDefault();
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
}
|
|
372
|
+
ev.stopPropagation();
|
|
373
|
+
this.isPointerDown.set(true);
|
|
374
|
+
this.updateColor(ev);
|
|
392
375
|
}
|
|
393
376
|
onPointerMove(ev) {
|
|
394
|
-
if (this.isPointerDown())
|
|
377
|
+
if (!this.isPointerDown())
|
|
378
|
+
return;
|
|
379
|
+
if (!('touches' in ev))
|
|
395
380
|
ev.preventDefault();
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
}
|
|
399
|
-
}
|
|
400
|
-
onMouseMove(ev) {
|
|
401
|
-
this.onPointerMove(ev);
|
|
381
|
+
ev.stopPropagation();
|
|
382
|
+
this.updateColor(ev);
|
|
402
383
|
}
|
|
403
|
-
onPointerUp(
|
|
384
|
+
onPointerUp(_ev) {
|
|
404
385
|
this.isPointerDown.set(false);
|
|
405
386
|
}
|
|
406
|
-
updateColor(ev
|
|
407
|
-
|
|
408
|
-
const
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
else {
|
|
416
|
-
co = {
|
|
417
|
-
x: ev.clientX - (subtract ? rect.left : 0),
|
|
418
|
-
y: ev.clientY - (subtract ? rect.top : 0),
|
|
419
|
-
};
|
|
420
|
-
}
|
|
421
|
-
const color = this.position2color(co.x, co.y);
|
|
422
|
-
if (color) {
|
|
423
|
-
this.hs.set({ hue: color.hue, saturation: color.saturation });
|
|
424
|
-
}
|
|
425
|
-
else {
|
|
426
|
-
console.warn('Color is null');
|
|
427
|
-
}
|
|
428
|
-
}
|
|
429
|
-
isInsideCircle(x, y) {
|
|
430
|
-
const squareSize = this.squareSize();
|
|
431
|
-
const shiftX = this.shiftX();
|
|
432
|
-
const shiftY = this.shiftY();
|
|
433
|
-
// Position to the square
|
|
434
|
-
const sx = x - (shiftX ?? 0);
|
|
435
|
-
const sy = y - (shiftY ?? 0);
|
|
436
|
-
// Square radius
|
|
437
|
-
const sr = (squareSize ?? 0) / 2;
|
|
438
|
-
const radius = Math.sqrt(Math.pow(sx - sr, 2) + Math.pow(sy - sr, 2));
|
|
439
|
-
const angle = (Math.atan2(sr - sy, sr - sx) + Math.PI) % 360;
|
|
440
|
-
return {
|
|
441
|
-
inside: radius <= sr,
|
|
442
|
-
angle
|
|
443
|
-
};
|
|
444
|
-
}
|
|
445
|
-
position2color(x, y) {
|
|
446
|
-
if (!this.canvasContext) {
|
|
447
|
-
return null;
|
|
448
|
-
}
|
|
449
|
-
const result = this.isInsideCircle(x, y);
|
|
450
|
-
if (result.inside) {
|
|
451
|
-
const imageData = this.canvasContext.getImageData(x, y, 1, 1).data;
|
|
452
|
-
const hsl = this.rgb2Hsl({ r: imageData[0], g: imageData[1], b: imageData[2] });
|
|
453
|
-
return hsl;
|
|
454
|
-
}
|
|
455
|
-
return { hue: result.angle * 180 / Math.PI, saturation: 1, luminosity: 0.5 };
|
|
456
|
-
}
|
|
457
|
-
color2position(hs) {
|
|
458
|
-
let innerRadius = this.innerRadius();
|
|
459
|
-
let outerRadius = this.outerRadius();
|
|
460
|
-
if (innerRadius === null) {
|
|
461
|
-
innerRadius = 0;
|
|
462
|
-
}
|
|
463
|
-
if (!outerRadius) {
|
|
464
|
-
outerRadius = 100;
|
|
465
|
-
}
|
|
466
|
-
const theta = hs.hue * Math.PI / 180;
|
|
467
|
-
const c = {
|
|
468
|
-
x: -outerRadius * Math.cos(theta),
|
|
469
|
-
y: -outerRadius * Math.sin(theta)
|
|
470
|
-
};
|
|
471
|
-
const d = hs.saturation * (outerRadius - innerRadius) + innerRadius;
|
|
472
|
-
const o = { x: outerRadius, y: outerRadius };
|
|
473
|
-
return {
|
|
474
|
-
x: o.x - d * (c.x / outerRadius),
|
|
475
|
-
y: o.y - d * (c.y / outerRadius),
|
|
476
|
-
};
|
|
477
|
-
}
|
|
478
|
-
rgb2Hsl(color) {
|
|
479
|
-
const r01 = this.bound01(color.r, 255);
|
|
480
|
-
const g01 = this.bound01(color.g, 255);
|
|
481
|
-
const b01 = this.bound01(color.b, 255);
|
|
482
|
-
const max = Math.max(r01, g01, b01);
|
|
483
|
-
const min = Math.min(r01, g01, b01);
|
|
484
|
-
let h, s;
|
|
485
|
-
const l = (max + min) / 2;
|
|
486
|
-
if (max === min) {
|
|
487
|
-
h = s = 0;
|
|
488
|
-
}
|
|
489
|
-
else {
|
|
490
|
-
const d = max - min;
|
|
491
|
-
s = (l > 0.5) ? (d / (2 - max - min)) : (d / (max + min));
|
|
492
|
-
switch (max) {
|
|
493
|
-
case r01:
|
|
494
|
-
{
|
|
495
|
-
h = (g01 - b01) / d + ((g01 < b01) ? 6 : 0);
|
|
496
|
-
}
|
|
497
|
-
break;
|
|
498
|
-
case g01:
|
|
499
|
-
{
|
|
500
|
-
h = (b01 - r01) / d + 2;
|
|
501
|
-
}
|
|
502
|
-
break;
|
|
503
|
-
case b01:
|
|
504
|
-
{
|
|
505
|
-
h = (r01 - g01) / d + 4;
|
|
506
|
-
}
|
|
507
|
-
break;
|
|
508
|
-
default: {
|
|
509
|
-
throw 'Invalid operation';
|
|
510
|
-
}
|
|
511
|
-
}
|
|
512
|
-
h /= 6;
|
|
513
|
-
}
|
|
514
|
-
h *= 360;
|
|
515
|
-
return { hue: h, saturation: s, luminosity: l };
|
|
516
|
-
}
|
|
517
|
-
/**
|
|
518
|
-
* Divide 1 to n, handling floating point errors.
|
|
519
|
-
* Ensures that the value is in between 0 and 1.
|
|
520
|
-
**/
|
|
521
|
-
bound01(n, max) {
|
|
522
|
-
n = Math.min(max, Math.max(0, n));
|
|
523
|
-
if ((Math.abs(n - max) < 0.000001)) {
|
|
524
|
-
return 1;
|
|
525
|
-
}
|
|
526
|
-
else {
|
|
527
|
-
return (n % max) / max;
|
|
528
|
-
}
|
|
387
|
+
updateColor(ev) {
|
|
388
|
+
const rect = this.surface().nativeElement.getBoundingClientRect();
|
|
389
|
+
const clientX = 'touches' in ev ? ev.touches[0].clientX : ev.clientX;
|
|
390
|
+
const clientY = 'touches' in ev ? ev.touches[0].clientY : ev.clientY;
|
|
391
|
+
const radius = this.outerRadius();
|
|
392
|
+
const dx = clientX - rect.left - radius;
|
|
393
|
+
const dy = clientY - rect.top - radius;
|
|
394
|
+
const hs = polar2hs(dx, dy, radius);
|
|
395
|
+
this.hs.set(hs);
|
|
529
396
|
}
|
|
530
397
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorWheelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
531
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsColorWheelComponent, isStandalone: true, selector: "bs-color-wheel", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null },
|
|
398
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsColorWheelComponent, isStandalone: true, selector: "bs-color-wheel", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange", brightness: "brightnessChange", hs: "hsChange", hsChange: "hsChange" }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:mouseup": "onPointerUp($event)" }, classAttribute: "position-relative" }, viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.width.px]=\"width()\" [style.height.px]=\"height()\" class=\"position-relative\">\n <div class=\"wheel-surface position-absolute\"\n [style.left.px]=\"shiftX()\"\n [style.top.px]=\"shiftY()\"\n [style.width.px]=\"squareSize()\"\n [style.height.px]=\"squareSize()\"\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\"\n #surface></div>\n\n <div class=\"brightness-overlay position-absolute pe-none\"\n [style.opacity]=\"overlayOpacity()\"\n [style.left.px]=\"shiftX()\"\n [style.top.px]=\"shiftY()\"\n [style.width.px]=\"squareSize()\"\n [style.height.px]=\"squareSize()\"></div>\n\n @if (markerPosition(); as markerPosition) {\n <div class=\"marker position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n }\n</div>\n", styles: [".wheel-surface{border-radius:50%;background:radial-gradient(circle closest-side,#fff,transparent),conic-gradient(from 90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);touch-action:none;cursor:crosshair}.brightness-overlay{background:#000;border-radius:50%;transition:opacity 60ms linear}.marker{width:30px;height:30px;border-radius:15px;margin-top:-15px;margin-left:-15px;box-sizing:border-box;border:2px solid white;box-shadow:#0000001a 0 0 10px 5px;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
532
399
|
}
|
|
533
400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorWheelComponent, decorators: [{
|
|
534
401
|
type: Component,
|
|
535
402
|
args: [{ selector: 'bs-color-wheel', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
536
403
|
'class': 'position-relative',
|
|
537
|
-
'(document:mousemove)': '
|
|
404
|
+
'(document:mousemove)': 'onPointerMove($event)',
|
|
538
405
|
'(document:mouseup)': 'onPointerUp($event)',
|
|
539
|
-
}, template: "<
|
|
540
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
541
|
-
|
|
542
|
-
class BsLuminosityStripComponent {
|
|
543
|
-
constructor() {
|
|
544
|
-
this.canvas = viewChild.required('canvas');
|
|
545
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
546
|
-
this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : /* istanbul ignore next */ []));
|
|
547
|
-
this.luminosity = model(0.5, ...(ngDevMode ? [{ debugName: "luminosity" }] : /* istanbul ignore next */ []));
|
|
548
|
-
this.luminosityChange = output();
|
|
549
|
-
this.canvasContext = null;
|
|
550
|
-
this.resultBackground = computed(() => {
|
|
551
|
-
const hs = this.hs();
|
|
552
|
-
const luminosity = this.luminosity();
|
|
553
|
-
return `hsl(${hs.hue}, ${hs.saturation * 100}%, ${luminosity * 100}%)`;
|
|
554
|
-
}, ...(ngDevMode ? [{ debugName: "resultBackground" }] : /* istanbul ignore next */ []));
|
|
555
|
-
// Draw gradient when HS changes
|
|
556
|
-
effect(() => {
|
|
557
|
-
const hs = this.hs();
|
|
558
|
-
if (this.canvasContext) {
|
|
559
|
-
const width = this.canvas().nativeElement.width;
|
|
560
|
-
const height = this.canvas().nativeElement.height;
|
|
561
|
-
this.canvasContext.clearRect(0, 0, width, height);
|
|
562
|
-
this.canvasContext.save();
|
|
563
|
-
const gradient = this.canvasContext.createLinearGradient(0, 0, width, 0);
|
|
564
|
-
gradient.addColorStop(0, `hsl(${hs.hue}, ${hs.saturation * 100}%, 0%)`);
|
|
565
|
-
gradient.addColorStop(0.5, `hsl(${hs.hue}, ${hs.saturation * 100}%, 50%)`);
|
|
566
|
-
gradient.addColorStop(1, `hsl(${hs.hue}, ${hs.saturation * 100}%, 100%)`);
|
|
567
|
-
this.canvasContext.fillStyle = gradient;
|
|
568
|
-
this.canvasContext.fillRect(0, 0, width, height);
|
|
569
|
-
}
|
|
570
|
-
});
|
|
571
|
-
// Emit luminosity changes
|
|
572
|
-
effect(() => {
|
|
573
|
-
const luminosity = this.luminosity();
|
|
574
|
-
this.luminosityChange.emit(luminosity);
|
|
575
|
-
});
|
|
576
|
-
}
|
|
577
|
-
ngAfterViewInit() {
|
|
578
|
-
if (typeof window !== 'undefined') {
|
|
579
|
-
this.canvasContext = this.canvas().nativeElement.getContext('2d', { willReadFrequently: true });
|
|
580
|
-
}
|
|
581
|
-
}
|
|
582
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsLuminosityStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
583
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: BsLuminosityStripComponent, isStandalone: true, selector: "bs-luminosity-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, luminosity: { classPropertyName: "luminosity", publicName: "luminosity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange", luminosity: "luminosityChange", luminosityChange: "luminosityChange" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"luminosity()\" (valueChange)=\"luminosityChange.emit($event)\">\n <canvas bsTrack class=\"position-absolute w-100\" #canvas></canvas>\n <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [""], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
584
|
-
}
|
|
585
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsLuminosityStripComponent, decorators: [{
|
|
586
|
-
type: Component,
|
|
587
|
-
args: [{ selector: 'bs-luminosity-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"luminosity()\" (valueChange)=\"luminosityChange.emit($event)\">\n <canvas bsTrack class=\"position-absolute w-100\" #canvas></canvas>\n <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n" }]
|
|
588
|
-
}], ctorParameters: () => [], propDecorators: { canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], luminosity: [{ type: i0.Input, args: [{ isSignal: true, alias: "luminosity", required: false }] }, { type: i0.Output, args: ["luminosityChange"] }], luminosityChange: [{ type: i0.Output, args: ["luminosityChange"] }] } });
|
|
406
|
+
}, template: "<div [style.width.px]=\"width()\" [style.height.px]=\"height()\" class=\"position-relative\">\n <div class=\"wheel-surface position-absolute\"\n [style.left.px]=\"shiftX()\"\n [style.top.px]=\"shiftY()\"\n [style.width.px]=\"squareSize()\"\n [style.height.px]=\"squareSize()\"\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\"\n #surface></div>\n\n <div class=\"brightness-overlay position-absolute pe-none\"\n [style.opacity]=\"overlayOpacity()\"\n [style.left.px]=\"shiftX()\"\n [style.top.px]=\"shiftY()\"\n [style.width.px]=\"squareSize()\"\n [style.height.px]=\"squareSize()\"></div>\n\n @if (markerPosition(); as markerPosition) {\n <div class=\"marker position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n }\n</div>\n", styles: [".wheel-surface{border-radius:50%;background:radial-gradient(circle closest-side,#fff,transparent),conic-gradient(from 90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);touch-action:none;cursor:crosshair}.brightness-overlay{background:#000;border-radius:50%;transition:opacity 60ms linear}.marker{width:30px;height:30px;border-radius:15px;margin-top:-15px;margin-left:-15px;box-sizing:border-box;border:2px solid white;box-shadow:#0000001a 0 0 10px 5px;pointer-events:none}\n"] }]
|
|
407
|
+
}], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], brightness: [{ type: i0.Input, args: [{ isSignal: true, alias: "brightness", required: false }] }, { type: i0.Output, args: ["brightnessChange"] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], hsChange: [{ type: i0.Output, args: ["hsChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
589
408
|
|
|
590
409
|
class BsColorPickerComponent {
|
|
591
410
|
constructor() {
|
|
@@ -594,25 +413,38 @@ class BsColorPickerComponent {
|
|
|
594
413
|
this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
595
414
|
this.allowAlpha = input(true, ...(ngDevMode ? [{ debugName: "allowAlpha" }] : /* istanbul ignore next */ []));
|
|
596
415
|
this.hs = signal({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : /* istanbul ignore next */ []));
|
|
597
|
-
this.
|
|
416
|
+
this.brightness = signal(1, ...(ngDevMode ? [{ debugName: "brightness" }] : /* istanbul ignore next */ []));
|
|
598
417
|
this.alpha = model(1, ...(ngDevMode ? [{ debugName: "alpha" }] : /* istanbul ignore next */ []));
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
418
|
+
/**
|
|
419
|
+
* Fires when the user drives a change (drags the wheel or the brightness strip).
|
|
420
|
+
* The value accessor subscribes to this so it only emits to the form on real
|
|
421
|
+
* user actions — not on writeValue echoes or initial signal-default state.
|
|
422
|
+
*/
|
|
423
|
+
this.userChanged = new Subject();
|
|
424
|
+
}
|
|
425
|
+
onUserHsChange(hs) {
|
|
426
|
+
this.hs.set(hs);
|
|
427
|
+
this.userChanged.next();
|
|
428
|
+
}
|
|
429
|
+
onUserBrightnessChange(brightness) {
|
|
430
|
+
this.brightness.set(brightness);
|
|
431
|
+
this.userChanged.next();
|
|
432
|
+
}
|
|
433
|
+
onUserAlphaChange(alpha) {
|
|
434
|
+
this.alpha.set(alpha);
|
|
435
|
+
this.userChanged.next();
|
|
604
436
|
}
|
|
605
437
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
606
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsColorPickerComponent, isStandalone: true, selector: "bs-color-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowAlpha: { classPropertyName: "allowAlpha", publicName: "allowAlpha", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { alpha: "alphaChange"
|
|
438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsColorPickerComponent, isStandalone: true, selector: "bs-color-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowAlpha: { classPropertyName: "allowAlpha", publicName: "allowAlpha", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { alpha: "alphaChange" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["wheel"], descendants: true, isSignal: true }], hostDirectives: [{ directive: BsColorPickerValueAccessor }], ngImport: i0, template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letBrightness = brightness();\n@let letAlpha = alpha();\n\n<bs-color-wheel [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"onUserHsChange($event)\" [brightness]=\"letBrightness\" [width]=\"size()\" [height]=\"size()\" #wheel></bs-color-wheel>\n<bs-brightness-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" (brightnessChange)=\"onUserBrightnessChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #strip></bs-brightness-strip>\n@if (allowAlpha()) {\n <bs-alpha-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" [alpha]=\"letAlpha\" (alphaChange)=\"onUserAlphaChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #alphaStrip></bs-alpha-strip>\n}\n", styles: [""], dependencies: [{ kind: "component", type: BsColorWheelComponent, selector: "bs-color-wheel", inputs: ["width", "height", "brightness", "hs", "disabled"], outputs: ["widthChange", "heightChange", "brightnessChange", "hsChange"] }, { kind: "component", type: BsBrightnessStripComponent, selector: "bs-brightness-strip", inputs: ["disabled", "hs", "brightness"], outputs: ["hsChange", "brightnessChange"] }, { kind: "component", type: BsAlphaStripComponent, selector: "bs-alpha-strip", inputs: ["disabled", "hs", "brightness", "alpha"], outputs: ["hsChange", "brightnessChange", "alphaChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
607
439
|
}
|
|
608
440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorPickerComponent, decorators: [{
|
|
609
441
|
type: Component,
|
|
610
|
-
args: [{ selector: 'bs-color-picker', imports: [BsColorWheelComponent,
|
|
611
|
-
}],
|
|
442
|
+
args: [{ selector: 'bs-color-picker', imports: [BsColorWheelComponent, BsBrightnessStripComponent, BsAlphaStripComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [BsColorPickerValueAccessor], template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letBrightness = brightness();\n@let letAlpha = alpha();\n\n<bs-color-wheel [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"onUserHsChange($event)\" [brightness]=\"letBrightness\" [width]=\"size()\" [height]=\"size()\" #wheel></bs-color-wheel>\n<bs-brightness-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" (brightnessChange)=\"onUserBrightnessChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #strip></bs-brightness-strip>\n@if (allowAlpha()) {\n <bs-alpha-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" [alpha]=\"letAlpha\" (alphaChange)=\"onUserAlphaChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #alphaStrip></bs-alpha-strip>\n}\n" }]
|
|
443
|
+
}], propDecorators: { colorWheel: [{ type: i0.ViewChild, args: ['wheel', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], allowAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAlpha", required: false }] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }, { type: i0.Output, args: ["alphaChange"] }] } });
|
|
612
444
|
|
|
613
445
|
/**
|
|
614
446
|
* Generated bundle index. Do not edit.
|
|
615
447
|
*/
|
|
616
448
|
|
|
617
|
-
export { BsAlphaStripComponent, BsColorPickerComponent, BsColorPickerValueAccessor, BsColorWheelComponent,
|
|
449
|
+
export { BsAlphaStripComponent, BsBrightnessStripComponent, BsColorPickerComponent, BsColorPickerValueAccessor, BsColorWheelComponent, BsSliderComponent, BsThumbDirective, BsTrackDirective, hex2hsv, hex2rgb, hs2polar, hsl2hsv, hsl2rgb, hsv2hex, hsv2hsl, hsv2rgb, polar2hs, rgb2hex, rgb2hsl, rgb2hsv };
|
|
618
450
|
//# sourceMappingURL=mintplayer-ng-bootstrap-color-picker.mjs.map
|