@thednp/color-picker 0.0.2-alpha1 → 0.0.2-alpha2
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/dist/js/color-esm.js +94 -105
- package/dist/js/color-esm.min.js +2 -2
- package/dist/js/color-palette-esm.js +105 -119
- package/dist/js/color-palette-esm.min.js +2 -2
- package/dist/js/color-palette.js +105 -119
- package/dist/js/color-palette.min.js +2 -2
- package/dist/js/color-picker-element-esm.js +279 -375
- package/dist/js/color-picker-element-esm.min.js +2 -2
- package/dist/js/color-picker-element.js +279 -375
- package/dist/js/color-picker-element.min.js +2 -2
- package/dist/js/color-picker-esm.js +235 -323
- package/dist/js/color-picker-esm.min.js +2 -2
- package/dist/js/color-picker.js +235 -323
- package/dist/js/color-picker.min.js +2 -2
- package/dist/js/color.js +94 -105
- package/dist/js/color.min.js +2 -2
- package/package.json +7 -4
- package/src/js/color-palette.js +10 -13
- package/src/js/color-picker-element.js +46 -54
- package/src/js/color-picker.js +131 -206
- package/src/js/color.js +93 -106
- package/types/cp.d.ts +31 -29
- package/types/source/types.d.ts +1 -1
package/README.md
CHANGED
@@ -1,8 +1,9 @@
|
|
1
|
-
# ColorPicker Web Component
|
1
|
+
# ColorPicker Web Component    
|
2
2
|
The feature rich **ColorPicker** component for the modern web built with TypeScript definitions, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of [TinyColor](https://github.com/bgrins/TinyColor) called simply `Color`.
|
3
3
|
|
4
4
|
[](http://thednp.github.io/color-picker)
|
5
5
|
|
6
|
+
|
6
7
|
[](https://www.npmjs.com/package/@thednp/color-picker)
|
7
8
|
[](http://npm-stat.com/charts.html?package=@thednp/color-picker)
|
8
9
|
[](https://bundlephobia.com/package/@thednp/color-picker)
|
package/dist/js/color-esm.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
|
-
* Color v0.0.
|
2
|
+
* Color v0.0.2alpha2 (http://thednp.github.io/color-picker)
|
3
3
|
* Copyright 2022 © thednp
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
|
5
5
|
*/
|
@@ -141,6 +141,8 @@ function isColorName(color) {
|
|
141
141
|
if (nonColors.includes(color)
|
142
142
|
|| ['#', ...COLOR_FORMAT].some((f) => color.includes(f))) return false;
|
143
143
|
|
144
|
+
if (['black', 'white'].includes(color)) return true;
|
145
|
+
|
144
146
|
return ['rgb(255, 255, 255)', 'rgb(0, 0, 0)'].every((c) => {
|
145
147
|
setElementStyle(documentHead, { color });
|
146
148
|
const computedColor = getElementStyle(documentHead, 'color');
|
@@ -167,6 +169,11 @@ function isValidCSSUnit(color) {
|
|
167
169
|
*/
|
168
170
|
function bound01(N, max) {
|
169
171
|
let n = N;
|
172
|
+
|
173
|
+
if (typeof N === 'number'
|
174
|
+
&& Math.min(N, 0) === 0 // round values to 6 decimals Math.round(N * (10 ** 6)) / 10 ** 6
|
175
|
+
&& Math.max(N, 1) === 1) return N;
|
176
|
+
|
170
177
|
if (isOnePointZero(N)) n = '100%';
|
171
178
|
|
172
179
|
const processPercent = isPercentage(n);
|
@@ -270,15 +277,12 @@ function pad2(c) {
|
|
270
277
|
/**
|
271
278
|
* Converts an RGB colour value to HSL.
|
272
279
|
*
|
273
|
-
* @param {number}
|
274
|
-
* @param {number}
|
275
|
-
* @param {number}
|
280
|
+
* @param {number} r Red component [0, 1]
|
281
|
+
* @param {number} g Green component [0, 1]
|
282
|
+
* @param {number} b Blue component [0, 1]
|
276
283
|
* @returns {CP.HSL} {h,s,l} object with [0, 1] ranged values
|
277
284
|
*/
|
278
|
-
function rgbToHsl(
|
279
|
-
const r = R / 255;
|
280
|
-
const g = G / 255;
|
281
|
-
const b = B / 255;
|
285
|
+
function rgbToHsl(r, g, b) {
|
282
286
|
const max = Math.max(r, g, b);
|
283
287
|
const min = Math.min(r, g, b);
|
284
288
|
let h = 0;
|
@@ -290,17 +294,10 @@ function rgbToHsl(R, G, B) {
|
|
290
294
|
} else {
|
291
295
|
const d = max - min;
|
292
296
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
case g:
|
298
|
-
h = (b - r) / d + 2;
|
299
|
-
break;
|
300
|
-
case b:
|
301
|
-
h = (r - g) / d + 4;
|
302
|
-
break;
|
303
|
-
}
|
297
|
+
if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
|
298
|
+
if (max === g) h = (b - r) / d + 2;
|
299
|
+
if (max === b) h = (r - g) / d + 4;
|
300
|
+
|
304
301
|
h /= 6;
|
305
302
|
}
|
306
303
|
return { h, s, l };
|
@@ -329,7 +326,7 @@ function hueToRgb(p, q, t) {
|
|
329
326
|
* @param {number} h Hue Angle [0, 1]
|
330
327
|
* @param {number} s Saturation [0, 1]
|
331
328
|
* @param {number} l Lightness Angle [0, 1]
|
332
|
-
* @returns {CP.RGB} {r,g,b} object with [0,
|
329
|
+
* @returns {CP.RGB} {r,g,b} object with [0, 1] ranged values
|
333
330
|
*/
|
334
331
|
function hslToRgb(h, s, l) {
|
335
332
|
let r = 0;
|
@@ -348,7 +345,6 @@ function hslToRgb(h, s, l) {
|
|
348
345
|
g = hueToRgb(p, q, h);
|
349
346
|
b = hueToRgb(p, q, h - 1 / 3);
|
350
347
|
}
|
351
|
-
[r, g, b] = [r, g, b].map((x) => x * 255);
|
352
348
|
|
353
349
|
return { r, g, b };
|
354
350
|
}
|
@@ -358,16 +354,12 @@ function hslToRgb(h, s, l) {
|
|
358
354
|
* @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
|
359
355
|
* @link http://alvyray.com/Papers/CG/hwb2rgb.htm
|
360
356
|
*
|
361
|
-
* @param {number}
|
362
|
-
* @param {number}
|
363
|
-
* @param {number}
|
357
|
+
* @param {number} r Red component [0, 1]
|
358
|
+
* @param {number} g Green [0, 1]
|
359
|
+
* @param {number} b Blue [0, 1]
|
364
360
|
* @return {CP.HWB} {h,w,b} object with [0, 1] ranged values
|
365
361
|
*/
|
366
|
-
function rgbToHwb(
|
367
|
-
const r = R / 255;
|
368
|
-
const g = G / 255;
|
369
|
-
const b = B / 255;
|
370
|
-
|
362
|
+
function rgbToHwb(r, g, b) {
|
371
363
|
let f = 0;
|
372
364
|
let i = 0;
|
373
365
|
const whiteness = Math.min(r, g, b);
|
@@ -397,20 +389,18 @@ function rgbToHwb(R, G, B) {
|
|
397
389
|
* @param {number} H Hue Angle [0, 1]
|
398
390
|
* @param {number} W Whiteness [0, 1]
|
399
391
|
* @param {number} B Blackness [0, 1]
|
400
|
-
* @return {CP.RGB} {r,g,b} object with [0,
|
392
|
+
* @return {CP.RGB} {r,g,b} object with [0, 1] ranged values
|
401
393
|
*
|
402
394
|
* @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
|
403
395
|
* @link http://alvyray.com/Papers/CG/hwb2rgb.htm
|
404
396
|
*/
|
405
397
|
function hwbToRgb(H, W, B) {
|
406
398
|
if (W + B >= 1) {
|
407
|
-
const gray =
|
399
|
+
const gray = W / (W + B);
|
408
400
|
return { r: gray, g: gray, b: gray };
|
409
401
|
}
|
410
402
|
let { r, g, b } = hslToRgb(H, 1, 0.5);
|
411
|
-
[r, g, b] = [r, g, b]
|
412
|
-
.map((v) => (v / 255) * (1 - W - B) + W)
|
413
|
-
.map((v) => v * 255);
|
403
|
+
[r, g, b] = [r, g, b].map((v) => v * (1 - W - B) + W);
|
414
404
|
|
415
405
|
return { r, g, b };
|
416
406
|
}
|
@@ -418,15 +408,12 @@ function hwbToRgb(H, W, B) {
|
|
418
408
|
/**
|
419
409
|
* Converts an RGB colour value to HSV.
|
420
410
|
*
|
421
|
-
* @param {number}
|
422
|
-
* @param {number}
|
423
|
-
* @param {number}
|
411
|
+
* @param {number} r Red component [0, 1]
|
412
|
+
* @param {number} g Green [0, 1]
|
413
|
+
* @param {number} b Blue [0, 1]
|
424
414
|
* @returns {CP.HSV} {h,s,v} object with [0, 1] ranged values
|
425
415
|
*/
|
426
|
-
function rgbToHsv(
|
427
|
-
const r = R / 255;
|
428
|
-
const g = G / 255;
|
429
|
-
const b = B / 255;
|
416
|
+
function rgbToHsv(r, g, b) {
|
430
417
|
const max = Math.max(r, g, b);
|
431
418
|
const min = Math.min(r, g, b);
|
432
419
|
let h = 0;
|
@@ -436,17 +423,10 @@ function rgbToHsv(R, G, B) {
|
|
436
423
|
if (max === min) {
|
437
424
|
h = 0; // achromatic
|
438
425
|
} else {
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
case g:
|
444
|
-
h = (b - r) / d + 2;
|
445
|
-
break;
|
446
|
-
case b:
|
447
|
-
h = (r - g) / d + 4;
|
448
|
-
break;
|
449
|
-
}
|
426
|
+
if (r === max) h = (g - b) / d + (g < b ? 6 : 0);
|
427
|
+
if (g === max) h = (b - r) / d + 2;
|
428
|
+
if (b === max) h = (r - g) / d + 4;
|
429
|
+
|
450
430
|
h /= 6;
|
451
431
|
}
|
452
432
|
return { h, s, v };
|
@@ -470,10 +450,9 @@ function hsvToRgb(H, S, V) {
|
|
470
450
|
const q = v * (1 - f * s);
|
471
451
|
const t = v * (1 - (1 - f) * s);
|
472
452
|
const mod = i % 6;
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
[r, g, b] = [r, g, b].map((n) => n * 255);
|
453
|
+
const r = [v, q, p, p, t, v][mod];
|
454
|
+
const g = [t, v, v, q, p, p][mod];
|
455
|
+
const b = [p, p, t, v, v, q][mod];
|
477
456
|
return { r, g, b };
|
478
457
|
}
|
479
458
|
|
@@ -541,15 +520,15 @@ function rgbaToHex(r, g, b, a, allow4Char) {
|
|
541
520
|
*/
|
542
521
|
function stringInputToObject(input) {
|
543
522
|
let color = toLowerCase(input.trim());
|
523
|
+
|
544
524
|
if (color.length === 0) {
|
545
525
|
return {
|
546
526
|
r: 0, g: 0, b: 0, a: 1,
|
547
527
|
};
|
548
528
|
}
|
549
|
-
|
529
|
+
|
550
530
|
if (isColorName(color)) {
|
551
531
|
color = getRGBFromName(color);
|
552
|
-
named = true;
|
553
532
|
} else if (nonColors.includes(color)) {
|
554
533
|
const a = color === 'transparent' ? 0 : 1;
|
555
534
|
return {
|
@@ -568,24 +547,28 @@ function stringInputToObject(input) {
|
|
568
547
|
r: m1, g: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'rgb',
|
569
548
|
};
|
570
549
|
}
|
550
|
+
|
571
551
|
[, m1, m2, m3, m4] = matchers.hsl.exec(color) || [];
|
572
552
|
if (m1 && m2 && m3/* && m4 */) {
|
573
553
|
return {
|
574
554
|
h: m1, s: m2, l: m3, a: m4 !== undefined ? m4 : 1, format: 'hsl',
|
575
555
|
};
|
576
556
|
}
|
557
|
+
|
577
558
|
[, m1, m2, m3, m4] = matchers.hsv.exec(color) || [];
|
578
559
|
if (m1 && m2 && m3/* && m4 */) {
|
579
560
|
return {
|
580
561
|
h: m1, s: m2, v: m3, a: m4 !== undefined ? m4 : 1, format: 'hsv',
|
581
562
|
};
|
582
563
|
}
|
564
|
+
|
583
565
|
[, m1, m2, m3, m4] = matchers.hwb.exec(color) || [];
|
584
566
|
if (m1 && m2 && m3) {
|
585
567
|
return {
|
586
568
|
h: m1, w: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'hwb',
|
587
569
|
};
|
588
570
|
}
|
571
|
+
|
589
572
|
[, m1, m2, m3, m4] = matchers.hex8.exec(color) || [];
|
590
573
|
if (m1 && m2 && m3 && m4) {
|
591
574
|
return {
|
@@ -593,18 +576,20 @@ function stringInputToObject(input) {
|
|
593
576
|
g: parseIntFromHex(m2),
|
594
577
|
b: parseIntFromHex(m3),
|
595
578
|
a: convertHexToDecimal(m4),
|
596
|
-
format:
|
579
|
+
format: 'hex',
|
597
580
|
};
|
598
581
|
}
|
582
|
+
|
599
583
|
[, m1, m2, m3] = matchers.hex6.exec(color) || [];
|
600
584
|
if (m1 && m2 && m3) {
|
601
585
|
return {
|
602
586
|
r: parseIntFromHex(m1),
|
603
587
|
g: parseIntFromHex(m2),
|
604
588
|
b: parseIntFromHex(m3),
|
605
|
-
format:
|
589
|
+
format: 'hex',
|
606
590
|
};
|
607
591
|
}
|
592
|
+
|
608
593
|
[, m1, m2, m3, m4] = matchers.hex4.exec(color) || [];
|
609
594
|
if (m1 && m2 && m3 && m4) {
|
610
595
|
return {
|
@@ -612,19 +597,20 @@ function stringInputToObject(input) {
|
|
612
597
|
g: parseIntFromHex(m2 + m2),
|
613
598
|
b: parseIntFromHex(m3 + m3),
|
614
599
|
a: convertHexToDecimal(m4 + m4),
|
615
|
-
|
616
|
-
format: named ? 'rgb' : 'hex',
|
600
|
+
format: 'hex',
|
617
601
|
};
|
618
602
|
}
|
603
|
+
|
619
604
|
[, m1, m2, m3] = matchers.hex3.exec(color) || [];
|
620
605
|
if (m1 && m2 && m3) {
|
621
606
|
return {
|
622
607
|
r: parseIntFromHex(m1 + m1),
|
623
608
|
g: parseIntFromHex(m2 + m2),
|
624
609
|
b: parseIntFromHex(m3 + m3),
|
625
|
-
format:
|
610
|
+
format: 'hex',
|
626
611
|
};
|
627
612
|
}
|
613
|
+
|
628
614
|
return false;
|
629
615
|
}
|
630
616
|
|
@@ -655,6 +641,7 @@ function stringInputToObject(input) {
|
|
655
641
|
*/
|
656
642
|
function inputToRGB(input) {
|
657
643
|
let rgb = { r: 0, g: 0, b: 0 };
|
644
|
+
/** @type {*} */
|
658
645
|
let color = input;
|
659
646
|
/** @type {string | number} */
|
660
647
|
let a = 1;
|
@@ -671,39 +658,41 @@ function inputToRGB(input) {
|
|
671
658
|
let format = inputFormat && COLOR_FORMAT.includes(inputFormat) ? inputFormat : 'rgb';
|
672
659
|
|
673
660
|
if (typeof input === 'string') {
|
674
|
-
// @ts-ignore -- this now is converted to object
|
675
661
|
color = stringInputToObject(input);
|
676
662
|
if (color) ok = true;
|
677
663
|
}
|
678
664
|
if (typeof color === 'object') {
|
679
665
|
if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
|
680
666
|
({ r, g, b } = color);
|
681
|
-
// RGB values now are all in [0,
|
682
|
-
[r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255)
|
667
|
+
// RGB values now are all in [0, 1] range
|
668
|
+
[r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255));
|
683
669
|
rgb = { r, g, b };
|
684
670
|
ok = true;
|
685
|
-
format = 'rgb';
|
686
|
-
}
|
671
|
+
format = color.format || 'rgb';
|
672
|
+
}
|
673
|
+
if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
|
687
674
|
({ h, s, v } = color);
|
688
|
-
h =
|
689
|
-
s =
|
690
|
-
v =
|
675
|
+
h = bound01(h, 360); // hue can be `5deg` or a [0, 1] value
|
676
|
+
s = bound01(s, 100); // saturation can be `5%` or a [0, 1] value
|
677
|
+
v = bound01(v, 100); // brightness can be `5%` or a [0, 1] value
|
691
678
|
rgb = hsvToRgb(h, s, v);
|
692
679
|
ok = true;
|
693
680
|
format = 'hsv';
|
694
|
-
}
|
681
|
+
}
|
682
|
+
if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
|
695
683
|
({ h, s, l } = color);
|
696
|
-
h =
|
697
|
-
s =
|
698
|
-
l =
|
684
|
+
h = bound01(h, 360); // hue can be `5deg` or a [0, 1] value
|
685
|
+
s = bound01(s, 100); // saturation can be `5%` or a [0, 1] value
|
686
|
+
l = bound01(l, 100); // lightness can be `5%` or a [0, 1] value
|
699
687
|
rgb = hslToRgb(h, s, l);
|
700
688
|
ok = true;
|
701
689
|
format = 'hsl';
|
702
|
-
}
|
690
|
+
}
|
691
|
+
if (isValidCSSUnit(color.h) && isValidCSSUnit(color.w) && isValidCSSUnit(color.b)) {
|
703
692
|
({ h, w, b } = color);
|
704
|
-
h =
|
705
|
-
w =
|
706
|
-
b =
|
693
|
+
h = bound01(h, 360); // hue can be `5deg` or a [0, 1] value
|
694
|
+
w = bound01(w, 100); // whiteness can be `5%` or a [0, 1] value
|
695
|
+
b = bound01(b, 100); // blackness can be `5%` or a [0, 1] value
|
707
696
|
rgb = hwbToRgb(h, w, b);
|
708
697
|
ok = true;
|
709
698
|
format = 'hwb';
|
@@ -720,9 +709,12 @@ function inputToRGB(input) {
|
|
720
709
|
return {
|
721
710
|
ok,
|
722
711
|
format,
|
723
|
-
r: Math.min(255, Math.max(rgb.r, 0)),
|
724
|
-
g: Math.min(255, Math.max(rgb.g, 0)),
|
725
|
-
b: Math.min(255, Math.max(rgb.b, 0)),
|
712
|
+
// r: Math.min(255, Math.max(rgb.r, 0)),
|
713
|
+
// g: Math.min(255, Math.max(rgb.g, 0)),
|
714
|
+
// b: Math.min(255, Math.max(rgb.b, 0)),
|
715
|
+
r: rgb.r,
|
716
|
+
g: rgb.g,
|
717
|
+
b: rgb.b,
|
726
718
|
a: boundAlpha(a),
|
727
719
|
};
|
728
720
|
}
|
@@ -741,16 +733,13 @@ class Color {
|
|
741
733
|
constructor(input, config) {
|
742
734
|
let color = input;
|
743
735
|
const configFormat = config && COLOR_FORMAT.includes(config)
|
744
|
-
? config : '
|
736
|
+
? config : '';
|
745
737
|
|
746
|
-
// If input is already a `Color`,
|
738
|
+
// If input is already a `Color`, clone its values
|
747
739
|
if (color instanceof Color) {
|
748
740
|
color = inputToRGB(color);
|
749
741
|
}
|
750
|
-
|
751
|
-
const len = `${color}`.length;
|
752
|
-
color = `#${(len === 2 ? '0' : '00')}${color}`;
|
753
|
-
}
|
742
|
+
|
754
743
|
const {
|
755
744
|
r, g, b, a, ok, format,
|
756
745
|
} = inputToRGB(color);
|
@@ -800,24 +789,21 @@ class Color {
|
|
800
789
|
let R = 0;
|
801
790
|
let G = 0;
|
802
791
|
let B = 0;
|
803
|
-
const rp = r / 255;
|
804
|
-
const rg = g / 255;
|
805
|
-
const rb = b / 255;
|
806
792
|
|
807
|
-
if (
|
808
|
-
R =
|
793
|
+
if (r <= 0.03928) {
|
794
|
+
R = r / 12.92;
|
809
795
|
} else {
|
810
|
-
R = ((
|
796
|
+
R = ((r + 0.055) / 1.055) ** 2.4;
|
811
797
|
}
|
812
|
-
if (
|
813
|
-
G =
|
798
|
+
if (g <= 0.03928) {
|
799
|
+
G = g / 12.92;
|
814
800
|
} else {
|
815
|
-
G = ((
|
801
|
+
G = ((g + 0.055) / 1.055) ** 2.4;
|
816
802
|
}
|
817
|
-
if (
|
818
|
-
B =
|
803
|
+
if (b <= 0.03928) {
|
804
|
+
B = b / 12.92;
|
819
805
|
} else {
|
820
|
-
B = ((
|
806
|
+
B = ((b + 0.055) / 1.055) ** 2.4;
|
821
807
|
}
|
822
808
|
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
823
809
|
}
|
@@ -827,7 +813,7 @@ class Color {
|
|
827
813
|
* @returns {number} a number in the [0, 255] range
|
828
814
|
*/
|
829
815
|
get brightness() {
|
830
|
-
const { r, g, b } = this;
|
816
|
+
const { r, g, b } = this.toRgb();
|
831
817
|
return (r * 299 + g * 587 + b * 114) / 1000;
|
832
818
|
}
|
833
819
|
|
@@ -836,12 +822,14 @@ class Color {
|
|
836
822
|
* @returns {CP.RGBA} an {r,g,b,a} object with [0, 255] ranged values
|
837
823
|
*/
|
838
824
|
toRgb() {
|
839
|
-
|
825
|
+
let {
|
840
826
|
r, g, b, a,
|
841
827
|
} = this;
|
842
828
|
|
829
|
+
[r, g, b] = [r, g, b].map((n) => roundPart(n * 255 * 100) / 100);
|
830
|
+
a = roundPart(a * 100) / 100;
|
843
831
|
return {
|
844
|
-
r, g, b, a
|
832
|
+
r, g, b, a,
|
845
833
|
};
|
846
834
|
}
|
847
835
|
|
@@ -935,7 +923,7 @@ class Color {
|
|
935
923
|
toHsv() {
|
936
924
|
const {
|
937
925
|
r, g, b, a,
|
938
|
-
} = this
|
926
|
+
} = this;
|
939
927
|
const { h, s, v } = rgbToHsv(r, g, b);
|
940
928
|
|
941
929
|
return {
|
@@ -950,7 +938,7 @@ class Color {
|
|
950
938
|
toHsl() {
|
951
939
|
const {
|
952
940
|
r, g, b, a,
|
953
|
-
} = this
|
941
|
+
} = this;
|
954
942
|
const { h, s, l } = rgbToHsl(r, g, b);
|
955
943
|
|
956
944
|
return {
|
@@ -1035,6 +1023,7 @@ class Color {
|
|
1035
1023
|
*/
|
1036
1024
|
setAlpha(alpha) {
|
1037
1025
|
const self = this;
|
1026
|
+
if (typeof alpha !== 'number') return self;
|
1038
1027
|
self.a = boundAlpha(alpha);
|
1039
1028
|
return self;
|
1040
1029
|
}
|
package/dist/js/color-esm.min.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
// Color v0.0.
|
2
|
-
const{head:t}=document;function r(t,r){const
|
1
|
+
// Color v0.0.2alpha2 | thednp © 2022 | MIT-License
|
2
|
+
const{head:t}=document;function r(t,r){const n=getComputedStyle(t);return r in n?n[r]:""}const n=(t,r)=>Object.assign(t,r),e=(t,r)=>{n(t.style,r)},o=["transparent","currentColor","inherit","revert","initial"];function s(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const a=["rgb","hex","hsl","hsv","hwb"],h="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",i="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${i})|(?:${h})`,c="(?:[,|\\s]+)",g=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${c}(${i})${c}(${i})(?:[,|\\/\\s]*)?(${i})?(?:[\\s|\\)\\s]+)?`,l={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+g),rgb:new RegExp("rgb(?:a)?"+g),hsl:new RegExp("hsl(?:a)?"+g),hsv:new RegExp("hsv(?:a)?"+g),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function b(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(n){return!o.includes(n)&&!["#",...a].some(t=>n.includes(t))&&(!!["black","white"].includes(n)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(o=>{e(t,{color:n});const s=r(t,"color");return e(t,{color:""}),s!==o}))}function x(t){return Boolean(l.CSS_UNIT.exec(String(t)))}function S(t,r){let n=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;b(t)&&(n="100%");const e=f(n);return n=360===r?parseFloat(n):Math.min(r,Math.max(0,parseFloat(n))),e&&(n=n*r/100),Math.abs(n-r)<1e-6?1:(n=360===r?(n<0?n%r+r:n%r)/r:n%r/r,n)}function d(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function A(t){return Math.min(1,Math.max(0,t))}function $(n){e(t,{color:n});const o=r(t,"color");return e(t,{color:""}),o}function p(t){return s(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function v(t){return 1===t.length?"0"+t:String(t)}function R(t,r,n){const e=Math.max(t,r,n),o=Math.min(t,r,n);let s=0,a=0;const h=(e+o)/2;if(e===o)a=0,s=0;else{const i=e-o;a=h>.5?i/(2-e-o):i/(e+o),e===t&&(s=(r-n)/i+(r<n?6:0)),e===r&&(s=(n-t)/i+2),e===n&&(s=(t-r)/i+4),s/=6}return{h:s,s:a,l:h}}function F(t,r,n){let e=n;return e<0&&(e+=1),e>1&&(e-=1),e<1/6?t+6*e*(r-t):e<.5?r:e<2/3?t+(r-t)*(2/3-e)*6:t}function M(t,r,n){let e=0,o=0,s=0;if(0===r)o=n,s=n,e=n;else{const a=n<.5?n*(1+r):n+r-n*r,h=2*n-a;e=F(h,a,t+1/3),o=F(h,a,t),s=F(h,a,t-1/3)}return{r:e,g:o,b:s}}function T(t,r,n){let e=0,o=0;const s=Math.min(t,r,n),a=Math.max(t,r,n),h=1-a;if(a===s)return{h:0,w:s,b:h};t===s?(e=r-n,o=3):(e=r===s?n-t:t-r,o=r===s?5:1);const i=(o-e/(a-s))/6;return{h:1===i?0:i,w:s,b:h}}function y(t,r,n){if(r+n>=1){const t=r/(r+n);return{r:t,g:t,b:t}}let{r:e,g:o,b:s}=M(t,1,.5);return[e,o,s]=[e,o,s].map(t=>t*(1-r-n)+r),{r:e,g:o,b:s}}function C(t,r,n){const e=Math.max(t,r,n),o=Math.min(t,r,n);let s=0;const a=e-o;return e===o?s=0:(t===e&&(s=(r-n)/a+(r<n?6:0)),r===e&&(s=(n-t)/a+2),n===e&&(s=(t-r)/a+4),s/=6),{h:s,s:0===e?0:a/e,v:e}}function E(t,r,n){const e=6*t,o=r,s=n,a=Math.floor(e),h=e-a,i=s*(1-o),u=s*(1-h*o),c=s*(1-(1-h)*o),g=a%6;return{r:[s,u,i,i,c,s][g],g:[c,s,s,u,i,i][g],b:[i,i,c,s,s,u][g]}}function N(t,r,n,e){const o=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(n).toString(16))];return e&&o[0].charAt(0)===o[0].charAt(1)&&o[1].charAt(0)===o[1].charAt(1)&&o[2].charAt(0)===o[2].charAt(1)?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function I(t,r,n,e,o){const a=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(n).toString(16)),v(p(e))];return o&&a[0].charAt(0)===a[0].charAt(1)&&a[1].charAt(0)===a[1].charAt(1)&&a[2].charAt(0)===a[2].charAt(1)&&a[3].charAt(0)===a[3].charAt(1)?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join("")}function k(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};if(m(r))r=$(r);else if(o.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,n,e,s,a]=l.rgb.exec(r)||[];return n&&e&&s?{r:n,g:e,b:s,a:void 0!==a?a:1,format:"rgb"}:([,n,e,s,a]=l.hsl.exec(r)||[],n&&e&&s?{h:n,s:e,l:s,a:void 0!==a?a:1,format:"hsl"}:([,n,e,s,a]=l.hsv.exec(r)||[],n&&e&&s?{h:n,s:e,v:s,a:void 0!==a?a:1,format:"hsv"}:([,n,e,s,a]=l.hwb.exec(r)||[],n&&e&&s?{h:n,w:e,b:s,a:void 0!==a?a:1,format:"hwb"}:([,n,e,s,a]=l.hex8.exec(r)||[],n&&e&&s&&a?{r:H(n),g:H(e),b:H(s),a:w(a),format:"hex"}:([,n,e,s]=l.hex6.exec(r)||[],n&&e&&s?{r:H(n),g:H(e),b:H(s),format:"hex"}:([,n,e,s,a]=l.hex4.exec(r)||[],n&&e&&s&&a?{r:H(n+n),g:H(e+e),b:H(s+s),a:w(a+a),format:"hex"}:([,n,e,s]=l.hex3.exec(r)||[],!!(n&&e&&s)&&{r:H(n+n),g:H(e+e),b:H(s+s),format:"hex"})))))))}function _(t){let r={r:0,g:0,b:0},n=t,e=1,o=null,s=null,h=null,i=null,u=null,c=null,g=null,l=null,b=!1;const m="object"==typeof n&&n.format;let A=m&&a.includes(m)?m:"rgb";return"string"==typeof t&&(n=k(t),n&&(b=!0)),"object"==typeof n&&(x(n.r)&&x(n.g)&&x(n.b)&&(({r:g,g:l,b:u}=n),[g,l,u]=[g,l,u].map(t=>S(t,f(t)?100:255)),r={r:g,g:l,b:u},b=!0,A=n.format||"rgb"),x(n.h)&&x(n.s)&&x(n.v)&&(({h:c,s:o,v:s}=n),c=S(c,360),o=S(o,100),s=S(s,100),r=E(c,o,s),b=!0,A="hsv"),x(n.h)&&x(n.s)&&x(n.l)&&(({h:c,s:o,l:h}=n),c=S(c,360),o=S(o,100),h=S(h,100),r=M(c,o,h),b=!0,A="hsl"),x(n.h)&&x(n.w)&&x(n.b)&&(({h:c,w:i,b:u}=n),c=S(c,360),i=S(i,100),u=S(u,100),r=y(c,i,u),b=!0,A="hwb"),x(n.a)&&(e=n.a,e=f(""+e)||parseFloat(e)>1?S(e,100):e)),void 0===n&&(b=!0),{ok:b,format:A,r:r.r,g:r.g,b:r.b,a:d(e)}}class j{constructor(t,r){let n=t;const e=r&&a.includes(r)?r:"";n instanceof j&&(n=_(n));const{r:o,g:s,b:h,a:i,ok:u,format:c}=_(n);this.originalInput=t,this.r=o,this.g=s,this.b=h,this.a=i,this.ok=u,this.format=e||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:r,b:n}=this;let e=0,o=0,s=0;return e=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,s=n<=.03928?n/12.92:((n+.055)/1.055)**2.4,.2126*e+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:n}=this.toRgb();return(299*t+587*r+114*n)/1e3}toRgb(){let{r:t,g:r,b:n,a:e}=this;return[t,r,n]=[t,r,n].map(t=>s(255*t*100)/100),e=s(100*e)/100,{r:t,g:r,b:n,a:e}}toRgbString(){const{r:t,g:r,b:n,a:e}=this.toRgb(),[o,a,h]=[t,r,n].map(s);return 1===e?`rgb(${o}, ${a}, ${h})`:`rgba(${o}, ${a}, ${h}, ${e})`}toRgbCSS4String(){const{r:t,g:r,b:n,a:e}=this.toRgb(),[o,a,h]=[t,r,n].map(s);return`rgb(${o} ${a} ${h}${1===e?"":` / ${s(100*e)}%`})`}toHex(t){const{r:r,g:n,b:e,a:o}=this.toRgb();return 1===o?N(r,n,e,t):I(r,n,e,o,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:r,g:n,b:e,a:o}=this.toRgb();return I(r,n,e,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:n,a:e}=this,{h:o,s:s,v:a}=C(t,r,n);return{h:o,s:s,v:a,a:e}}toHsl(){const{r:t,g:r,b:n,a:e}=this,{h:o,s:s,l:a}=R(t,r,n);return{h:o,s:s,l:a,a:e}}toHslString(){let{h:t,s:r,l:n,a:e}=this.toHsl();return t=s(360*t),r=s(100*r),n=s(100*n),e=s(100*e)/100,1===e?`hsl(${t}, ${r}%, ${n}%)`:`hsla(${t}, ${r}%, ${n}%, ${e})`}toHslCSS4String(){let{h:t,s:r,l:n,a:e}=this.toHsl();t=s(360*t),r=s(100*r),n=s(100*n),e=s(100*e);return`hsl(${t}deg ${r}% ${n}%${e<100?` / ${s(e)}%`:""})`}toHwb(){const{r:t,g:r,b:n,a:e}=this,{h:o,w:s,b:a}=T(t,r,n);return{h:o,w:s,b:a,a:e}}toHwbString(){let{h:t,w:r,b:n,a:e}=this.toHwb();t=s(360*t),r=s(100*r),n=s(100*n),e=s(100*e);return`hwb(${t}deg ${r}% ${n}%${e<100?` / ${s(e)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=d(t)),this}saturate(t){if("number"!=typeof t)return this;const{h:r,s:e,l:o}=this.toHsl(),{r:s,g:a,b:h}=M(r,A(e+t/100),o);return n(this,{r:s,g:a,b:h}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if("number"!=typeof t)return this;const{h:r,s:e,l:o}=this.toHsl(),{r:s,g:a,b:h}=M(r,e,A(o+t/100));return n(this,{r:s,g:a,b:h}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:r,s:e,l:o}=this.toHsl(),{r:s,g:a,b:h}=M(A((360*r+t)%360/360),e,o);return n(this,{r:s,g:a,b:h}),this}clone(){return new j(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}n(j,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:h,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:i,CSS_UNIT2:u,PERMISSIVE_MATCH:g,matchers:l,isOnePointZero:b,isPercentage:f,isValidCSSUnit:x,isColorName:m,pad2:v,clamp01:A,bound01:S,boundAlpha:d,getRGBFromName:$,convertHexToDecimal:w,convertDecimalToHex:p,rgbToHsl:R,rgbToHex:N,rgbToHsv:C,rgbToHwb:T,rgbaToHex:I,hslToRgb:M,hsvToRgb:E,hueToRgb:F,hwbToRgb:y,parseIntFromHex:H,stringInputToObject:k,inputToRGB:_,roundPart:s,getElementStyle:r,setElementStyle:e,ObjectAssign:n});export{j as default};
|