1917 lines
54 KiB
JavaScript
1917 lines
54 KiB
JavaScript
|
import {
|
||
|
|
SlVisuallyHidden
|
||
|
|
} from "./chunk.RSRPO7J4.js";
|
||
|
|
import {
|
||
|
|
SlInput
|
||
|
|
} from "./chunk.NUAR3OE6.js";
|
||
|
|
import {
|
||
|
|
drag
|
||
|
|
} from "./chunk.ESELY2US.js";
|
||
|
|
import {
|
||
|
|
o as o2
|
||
|
|
} from "./chunk.FQQ5K3WY.js";
|
||
|
|
import {
|
||
|
|
SlDropdown
|
||
|
|
} from "./chunk.7VJ6N7Y5.js";
|
||
|
|
import {
|
||
|
|
defaultValue
|
||
|
|
} from "./chunk.RQ7JZ4R7.js";
|
||
|
|
import {
|
||
|
|
color_picker_styles_default
|
||
|
|
} from "./chunk.ZBX2SWSO.js";
|
||
|
|
import {
|
||
|
|
clamp
|
||
|
|
} from "./chunk.HF7GESMZ.js";
|
||
|
|
import {
|
||
|
|
SlButton
|
||
|
|
} from "./chunk.FNXODNAY.js";
|
||
|
|
import {
|
||
|
|
FormControlController
|
||
|
|
} from "./chunk.NMS6LWK4.js";
|
||
|
|
import {
|
||
|
|
SlButtonGroup
|
||
|
|
} from "./chunk.6Y6ISEOI.js";
|
||
|
|
import {
|
||
|
|
LocalizeController
|
||
|
|
} from "./chunk.NH3SRVOC.js";
|
||
|
|
import {
|
||
|
|
o
|
||
|
|
} from "./chunk.2URMUHDY.js";
|
||
|
|
import {
|
||
|
|
e
|
||
|
|
} from "./chunk.UZVKBFXH.js";
|
||
|
|
import {
|
||
|
|
SlIcon
|
||
|
|
} from "./chunk.UZYAV5H6.js";
|
||
|
|
import {
|
||
|
|
watch
|
||
|
|
} from "./chunk.FA5RT4K4.js";
|
||
|
|
import {
|
||
|
|
ShoelaceElement,
|
||
|
|
e as e2,
|
||
|
|
n,
|
||
|
|
r
|
||
|
|
} from "./chunk.SEXBCYCU.js";
|
||
|
|
import {
|
||
|
|
x
|
||
|
|
} from "./chunk.CXZZ2LVK.js";
|
||
|
|
import {
|
||
|
|
__decorateClass
|
||
|
|
} from "./chunk.KIILAQWQ.js";
|
||
|
|
|
||
|
|
// node_modules/@ctrl/tinycolor/dist/module/util.js
|
||
|
|
function bound01(n2, max) {
|
||
|
|
if (isOnePointZero(n2)) {
|
||
|
|
n2 = "100%";
|
||
|
|
}
|
||
|
|
const isPercent = isPercentage(n2);
|
||
|
|
n2 = max === 360 ? n2 : Math.min(max, Math.max(0, parseFloat(n2)));
|
||
|
|
if (isPercent) {
|
||
|
|
n2 = parseInt(String(n2 * max), 10) / 100;
|
||
|
|
}
|
||
|
|
if (Math.abs(n2 - max) < 1e-6) {
|
||
|
|
return 1;
|
||
|
|
}
|
||
|
|
if (max === 360) {
|
||
|
|
n2 = (n2 < 0 ? n2 % max + max : n2 % max) / parseFloat(String(max));
|
||
|
|
} else {
|
||
|
|
n2 = n2 % max / parseFloat(String(max));
|
||
|
|
}
|
||
|
|
return n2;
|
||
|
|
}
|
||
|
|
function clamp01(val) {
|
||
|
|
return Math.min(1, Math.max(0, val));
|
||
|
|
}
|
||
|
|
function isOnePointZero(n2) {
|
||
|
|
return typeof n2 === "string" && n2.indexOf(".") !== -1 && parseFloat(n2) === 1;
|
||
|
|
}
|
||
|
|
function isPercentage(n2) {
|
||
|
|
return typeof n2 === "string" && n2.indexOf("%") !== -1;
|
||
|
|
}
|
||
|
|
function boundAlpha(a) {
|
||
|
|
a = parseFloat(a);
|
||
|
|
if (isNaN(a) || a < 0 || a > 1) {
|
||
|
|
a = 1;
|
||
|
|
}
|
||
|
|
return a;
|
||
|
|
}
|
||
|
|
function convertToPercentage(n2) {
|
||
|
|
if (Number(n2) <= 1) {
|
||
|
|
return `${Number(n2) * 100}%`;
|
||
|
|
}
|
||
|
|
return n2;
|
||
|
|
}
|
||
|
|
function pad2(c) {
|
||
|
|
return c.length === 1 ? "0" + c : String(c);
|
||
|
|
}
|
||
|
|
|
||
|
|
// node_modules/@ctrl/tinycolor/dist/module/conversion.js
|
||
|
|
function rgbToRgb(r2, g, b) {
|
||
|
|
return {
|
||
|
|
r: bound01(r2, 255) * 255,
|
||
|
|
g: bound01(g, 255) * 255,
|
||
|
|
b: bound01(b, 255) * 255
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function rgbToHsl(r2, g, b) {
|
||
|
|
r2 = bound01(r2, 255);
|
||
|
|
g = bound01(g, 255);
|
||
|
|
b = bound01(b, 255);
|
||
|
|
const max = Math.max(r2, g, b);
|
||
|
|
const min = Math.min(r2, g, b);
|
||
|
|
let h = 0;
|
||
|
|
let s = 0;
|
||
|
|
const l = (max + min) / 2;
|
||
|
|
if (max === min) {
|
||
|
|
s = 0;
|
||
|
|
h = 0;
|
||
|
|
} else {
|
||
|
|
const d = max - min;
|
||
|
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||
|
|
switch (max) {
|
||
|
|
case r2:
|
||
|
|
h = (g - b) / d + (g < b ? 6 : 0);
|
||
|
|
break;
|
||
|
|
case g:
|
||
|
|
h = (b - r2) / d + 2;
|
||
|
|
break;
|
||
|
|
case b:
|
||
|
|
h = (r2 - g) / d + 4;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
h /= 6;
|
||
|
|
}
|
||
|
|
return { h, s, l };
|
||
|
|
}
|
||
|
|
function hue2rgb(p, q, t) {
|
||
|
|
if (t < 0) {
|
||
|
|
t += 1;
|
||
|
|
}
|
||
|
|
if (t > 1) {
|
||
|
|
t -= 1;
|
||
|
|
}
|
||
|
|
if (t < 1 / 6) {
|
||
|
|
return p + (q - p) * (6 * t);
|
||
|
|
}
|
||
|
|
if (t < 1 / 2) {
|
||
|
|
return q;
|
||
|
|
}
|
||
|
|
if (t < 2 / 3) {
|
||
|
|
return p + (q - p) * (2 / 3 - t) * 6;
|
||
|
|
}
|
||
|
|
return p;
|
||
|
|
}
|
||
|
|
function hslToRgb(h, s, l) {
|
||
|
|
let r2;
|
||
|
|
let g;
|
||
|
|
let b;
|
||
|
|
h = bound01(h, 360);
|
||
|
|
s = bound01(s, 100);
|
||
|
|
l = bound01(l, 100);
|
||
|
|
if (s === 0) {
|
||
|
|
g = l;
|
||
|
|
b = l;
|
||
|
|
r2 = l;
|
||
|
|
} else {
|
||
|
|
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||
|
|
const p = 2 * l - q;
|
||
|
|
r2 = hue2rgb(p, q, h + 1 / 3);
|
||
|
|
g = hue2rgb(p, q, h);
|
||
|
|
b = hue2rgb(p, q, h - 1 / 3);
|
||
|
|
}
|
||
|
|
return { r: r2 * 255, g: g * 255, b: b * 255 };
|
||
|
|
}
|
||
|
|
function rgbToHsv(r2, g, b) {
|
||
|
|
r2 = bound01(r2, 255);
|
||
|
|
g = bound01(g, 255);
|
||
|
|
b = bound01(b, 255);
|
||
|
|
const max = Math.max(r2, g, b);
|
||
|
|
const min = Math.min(r2, g, b);
|
||
|
|
let h = 0;
|
||
|
|
const v = max;
|
||
|
|
const d = max - min;
|
||
|
|
const s = max === 0 ? 0 : d / max;
|
||
|
|
if (max === min) {
|
||
|
|
h = 0;
|
||
|
|
} else {
|
||
|
|
switch (max) {
|
||
|
|
case r2:
|
||
|
|
h = (g - b) / d + (g < b ? 6 : 0);
|
||
|
|
break;
|
||
|
|
case g:
|
||
|
|
h = (b - r2) / d + 2;
|
||
|
|
break;
|
||
|
|
case b:
|
||
|
|
h = (r2 - g) / d + 4;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
h /= 6;
|
||
|
|
}
|
||
|
|
return { h, s, v };
|
||
|
|
}
|
||
|
|
function hsvToRgb(h, s, v) {
|
||
|
|
h = bound01(h, 360) * 6;
|
||
|
|
s = bound01(s, 100);
|
||
|
|
v = bound01(v, 100);
|
||
|
|
const i = Math.floor(h);
|
||
|
|
const f = h - i;
|
||
|
|
const p = v * (1 - s);
|
||
|
|
const q = v * (1 - f * s);
|
||
|
|
const t = v * (1 - (1 - f) * s);
|
||
|
|
const mod = i % 6;
|
||
|
|
const r2 = [v, q, p, p, t, v][mod];
|
||
|
|
const g = [t, v, v, q, p, p][mod];
|
||
|
|
const b = [p, p, t, v, v, q][mod];
|
||
|
|
return { r: r2 * 255, g: g * 255, b: b * 255 };
|
||
|
|
}
|
||
|
|
function rgbToHex(r2, g, b, allow3Char) {
|
||
|
|
const hex = [
|
||
|
|
pad2(Math.round(r2).toString(16)),
|
||
|
|
pad2(Math.round(g).toString(16)),
|
||
|
|
pad2(Math.round(b).toString(16))
|
||
|
|
];
|
||
|
|
if (allow3Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1))) {
|
||
|
|
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
|
||
|
|
}
|
||
|
|
return hex.join("");
|
||
|
|
}
|
||
|
|
function rgbaToHex(r2, g, b, a, allow4Char) {
|
||
|
|
const hex = [
|
||
|
|
pad2(Math.round(r2).toString(16)),
|
||
|
|
pad2(Math.round(g).toString(16)),
|
||
|
|
pad2(Math.round(b).toString(16)),
|
||
|
|
pad2(convertDecimalToHex(a))
|
||
|
|
];
|
||
|
|
if (allow4Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1)) && hex[3].startsWith(hex[3].charAt(1))) {
|
||
|
|
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
|
||
|
|
}
|
||
|
|
return hex.join("");
|
||
|
|
}
|
||
|
|
function convertDecimalToHex(d) {
|
||
|
|
return Math.round(parseFloat(d) * 255).toString(16);
|
||
|
|
}
|
||
|
|
function convertHexToDecimal(h) {
|
||
|
|
return parseIntFromHex(h) / 255;
|
||
|
|
}
|
||
|
|
function parseIntFromHex(val) {
|
||
|
|
return parseInt(val, 16);
|
||
|
|
}
|
||
|
|
function numberInputToObject(color) {
|
||
|
|
return {
|
||
|
|
r: color >> 16,
|
||
|
|
g: (color & 65280) >> 8,
|
||
|
|
b: color & 255
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// node_modules/@ctrl/tinycolor/dist/module/css-color-names.js
|
||
|
|
var names = {
|
||
|
|
aliceblue: "#f0f8ff",
|
||
|
|
antiquewhite: "#faebd7",
|
||
|
|
aqua: "#00ffff",
|
||
|
|
aquamarine: "#7fffd4",
|
||
|
|
azure: "#f0ffff",
|
||
|
|
beige: "#f5f5dc",
|
||
|
|
bisque: "#ffe4c4",
|
||
|
|
black: "#000000",
|
||
|
|
blanchedalmond: "#ffebcd",
|
||
|
|
blue: "#0000ff",
|
||
|
|
blueviolet: "#8a2be2",
|
||
|
|
brown: "#a52a2a",
|
||
|
|
burlywood: "#deb887",
|
||
|
|
cadetblue: "#5f9ea0",
|
||
|
|
chartreuse: "#7fff00",
|
||
|
|
chocolate: "#d2691e",
|
||
|
|
coral: "#ff7f50",
|
||
|
|
cornflowerblue: "#6495ed",
|
||
|
|
cornsilk: "#fff8dc",
|
||
|
|
crimson: "#dc143c",
|
||
|
|
cyan: "#00ffff",
|
||
|
|
darkblue: "#00008b",
|
||
|
|
darkcyan: "#008b8b",
|
||
|
|
darkgoldenrod: "#b8860b",
|
||
|
|
darkgray: "#a9a9a9",
|
||
|
|
darkgreen: "#006400",
|
||
|
|
darkgrey: "#a9a9a9",
|
||
|
|
darkkhaki: "#bdb76b",
|
||
|
|
darkmagenta: "#8b008b",
|
||
|
|
darkolivegreen: "#556b2f",
|
||
|
|
darkorange: "#ff8c00",
|
||
|
|
darkorchid: "#9932cc",
|
||
|
|
darkred: "#8b0000",
|
||
|
|
darksalmon: "#e9967a",
|
||
|
|
darkseagreen: "#8fbc8f",
|
||
|
|
darkslateblue: "#483d8b",
|
||
|
|
darkslategray: "#2f4f4f",
|
||
|
|
darkslategrey: "#2f4f4f",
|
||
|
|
darkturquoise: "#00ced1",
|
||
|
|
darkviolet: "#9400d3",
|
||
|
|
deeppink: "#ff1493",
|
||
|
|
deepskyblue: "#00bfff",
|
||
|
|
dimgray: "#696969",
|
||
|
|
dimgrey: "#696969",
|
||
|
|
dodgerblue: "#1e90ff",
|
||
|
|
firebrick: "#b22222",
|
||
|
|
floralwhite: "#fffaf0",
|
||
|
|
forestgreen: "#228b22",
|
||
|
|
fuchsia: "#ff00ff",
|
||
|
|
gainsboro: "#dcdcdc",
|
||
|
|
ghostwhite: "#f8f8ff",
|
||
|
|
goldenrod: "#daa520",
|
||
|
|
gold: "#ffd700",
|
||
|
|
gray: "#808080",
|
||
|
|
green: "#008000",
|
||
|
|
greenyellow: "#adff2f",
|
||
|
|
grey: "#808080",
|
||
|
|
honeydew: "#f0fff0",
|
||
|
|
hotpink: "#ff69b4",
|
||
|
|
indianred: "#cd5c5c",
|
||
|
|
indigo: "#4b0082",
|
||
|
|
ivory: "#fffff0",
|
||
|
|
khaki: "#f0e68c",
|
||
|
|
lavenderblush: "#fff0f5",
|
||
|
|
lavender: "#e6e6fa",
|
||
|
|
lawngreen: "#7cfc00",
|
||
|
|
lemonchiffon: "#fffacd",
|
||
|
|
lightblue: "#add8e6",
|
||
|
|
lightcoral: "#f08080",
|
||
|
|
lightcyan: "#e0ffff",
|
||
|
|
lightgoldenrodyellow: "#fafad2",
|
||
|
|
lightgray: "#d3d3d3",
|
||
|
|
lightgreen: "#90ee90",
|
||
|
|
lightgrey: "#d3d3d3",
|
||
|
|
lightpink: "#ffb6c1",
|
||
|
|
lightsalmon: "#ffa07a",
|
||
|
|
lightseagreen: "#20b2aa",
|
||
|
|
lightskyblue: "#87cefa",
|
||
|
|
lightslategray: "#778899",
|
||
|
|
lightslategrey: "#778899",
|
||
|
|
lightsteelblue: "#b0c4de",
|
||
|
|
lightyellow: "#ffffe0",
|
||
|
|
lime: "#00ff00",
|
||
|
|
limegreen: "#32cd32",
|
||
|
|
linen: "#faf0e6",
|
||
|
|
magenta: "#ff00ff",
|
||
|
|
maroon: "#800000",
|
||
|
|
mediumaquamarine: "#66cdaa",
|
||
|
|
mediumblue: "#0000cd",
|
||
|
|
mediumorchid: "#ba55d3",
|
||
|
|
mediumpurple: "#9370db",
|
||
|
|
mediumseagreen: "#3cb371",
|
||
|
|
mediumslateblue: "#7b68ee",
|
||
|
|
mediumspringgreen: "#00fa9a",
|
||
|
|
mediumturquoise: "#48d1cc",
|
||
|
|
mediumvioletred: "#c71585",
|
||
|
|
midnightblue: "#191970",
|
||
|
|
mintcream: "#f5fffa",
|
||
|
|
mistyrose: "#ffe4e1",
|
||
|
|
moccasin: "#ffe4b5",
|
||
|
|
navajowhite: "#ffdead",
|
||
|
|
navy: "#000080",
|
||
|
|
oldlace: "#fdf5e6",
|
||
|
|
olive: "#808000",
|
||
|
|
olivedrab: "#6b8e23",
|
||
|
|
orange: "#ffa500",
|
||
|
|
orangered: "#ff4500",
|
||
|
|
orchid: "#da70d6",
|
||
|
|
palegoldenrod: "#eee8aa",
|
||
|
|
palegreen: "#98fb98",
|
||
|
|
paleturquoise: "#afeeee",
|
||
|
|
palevioletred: "#db7093",
|
||
|
|
papayawhip: "#ffefd5",
|
||
|
|
peachpuff: "#ffdab9",
|
||
|
|
peru: "#cd853f",
|
||
|
|
pink: "#ffc0cb",
|
||
|
|
plum: "#dda0dd",
|
||
|
|
powderblue: "#b0e0e6",
|
||
|
|
purple: "#800080",
|
||
|
|
rebeccapurple: "#663399",
|
||
|
|
red: "#ff0000",
|
||
|
|
rosybrown: "#bc8f8f",
|
||
|
|
royalblue: "#4169e1",
|
||
|
|
saddlebrown: "#8b4513",
|
||
|
|
salmon: "#fa8072",
|
||
|
|
sandybrown: "#f4a460",
|
||
|
|
seagreen: "#2e8b57",
|
||
|
|
seashell: "#fff5ee",
|
||
|
|
sienna: "#a0522d",
|
||
|
|
silver: "#c0c0c0",
|
||
|
|
skyblue: "#87ceeb",
|
||
|
|
slateblue: "#6a5acd",
|
||
|
|
slategray: "#708090",
|
||
|
|
slategrey: "#708090",
|
||
|
|
snow: "#fffafa",
|
||
|
|
springgreen: "#00ff7f",
|
||
|
|
steelblue: "#4682b4",
|
||
|
|
tan: "#d2b48c",
|
||
|
|
teal: "#008080",
|
||
|
|
thistle: "#d8bfd8",
|
||
|
|
tomato: "#ff6347",
|
||
|
|
turquoise: "#40e0d0",
|
||
|
|
violet: "#ee82ee",
|
||
|
|
wheat: "#f5deb3",
|
||
|
|
white: "#ffffff",
|
||
|
|
whitesmoke: "#f5f5f5",
|
||
|
|
yellow: "#ffff00",
|
||
|
|
yellowgreen: "#9acd32"
|
||
|
|
};
|
||
|
|
|
||
|
|
// node_modules/@ctrl/tinycolor/dist/module/format-input.js
|
||
|
|
function inputToRGB(color) {
|
||
|
|
let rgb = { r: 0, g: 0, b: 0 };
|
||
|
|
let a = 1;
|
||
|
|
let s = null;
|
||
|
|
let v = null;
|
||
|
|
let l = null;
|
||
|
|
let ok = false;
|
||
|
|
let format = false;
|
||
|
|
if (typeof color === "string") {
|
||
|
|
color = stringInputToObject(color);
|
||
|
|
}
|
||
|
|
if (typeof color === "object") {
|
||
|
|
if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
|
||
|
|
rgb = rgbToRgb(color.r, color.g, color.b);
|
||
|
|
ok = true;
|
||
|
|
format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
|
||
|
|
} else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
|
||
|
|
s = convertToPercentage(color.s);
|
||
|
|
v = convertToPercentage(color.v);
|
||
|
|
rgb = hsvToRgb(color.h, s, v);
|
||
|
|
ok = true;
|
||
|
|
format = "hsv";
|
||
|
|
} else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
|
||
|
|
s = convertToPercentage(color.s);
|
||
|
|
l = convertToPercentage(color.l);
|
||
|
|
rgb = hslToRgb(color.h, s, l);
|
||
|
|
ok = true;
|
||
|
|
format = "hsl";
|
||
|
|
}
|
||
|
|
if (Object.prototype.hasOwnProperty.call(color, "a")) {
|
||
|
|
a = color.a;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
a = boundAlpha(a);
|
||
|
|
return {
|
||
|
|
ok,
|
||
|
|
format: color.format || format,
|
||
|
|
r: Math.min(255, Math.max(rgb.r, 0)),
|
||
|
|
g: Math.min(255, Math.max(rgb.g, 0)),
|
||
|
|
b: Math.min(255, Math.max(rgb.b, 0)),
|
||
|
|
a
|
||
|
|
};
|
||
|
|
}
|
||
|
|
var CSS_INTEGER = "[-\\+]?\\d+%?";
|
||
|
|
var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
|
||
|
|
var CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;
|
||
|
|
var PERMISSIVE_MATCH3 = `[\\s|\\(]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})\\s*\\)?`;
|
||
|
|
var PERMISSIVE_MATCH4 = `[\\s|\\(]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})\\s*\\)?`;
|
||
|
|
var matchers = {
|
||
|
|
CSS_UNIT: new RegExp(CSS_UNIT),
|
||
|
|
rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
|
||
|
|
rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
|
||
|
|
hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
|
||
|
|
hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
|
||
|
|
hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
|
||
|
|
hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
|
||
|
|
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 stringInputToObject(color) {
|
||
|
|
color = color.trim().toLowerCase();
|
||
|
|
if (color.length === 0) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
let named = false;
|
||
|
|
if (names[color]) {
|
||
|
|
color = names[color];
|
||
|
|
named = true;
|
||
|
|
} else if (color === "transparent") {
|
||
|
|
return { r: 0, g: 0, b: 0, a: 0, format: "name" };
|
||
|
|
}
|
||
|
|
let match = matchers.rgb.exec(color);
|
||
|
|
if (match) {
|
||
|
|
return { r: match[1], g: match[2], b: match[3] };
|
||
|
|
}
|
||
|
|
match = matchers.rgba.exec(color);
|
||
|
|
if (match) {
|
||
|
|
return { r: match[1], g: match[2], b: match[3], a: match[4] };
|
||
|
|
}
|
||
|
|
match = matchers.hsl.exec(color);
|
||
|
|
if (match) {
|
||
|
|
return { h: match[1], s: match[2], l: match[3] };
|
||
|
|
}
|
||
|
|
match = matchers.hsla.exec(color);
|
||
|
|
if (match) {
|
||
|
|
return { h: match[1], s: match[2], l: match[3], a: match[4] };
|
||
|
|
}
|
||
|
|
match = matchers.hsv.exec(color);
|
||
|
|
if (match) {
|
||
|
|
return { h: match[1], s: match[2], v: match[3] };
|
||
|
|
}
|
||
|
|
match = matchers.hsva.exec(color);
|
||
|
|
if (match) {
|
||
|
|
return { h: match[1], s: match[2], v: match[3], a: match[4] };
|
||
|
|
}
|
||
|
|
match = matchers.hex8.exec(color);
|
||
|
|
if (match) {
|
||
|
|
return {
|
||
|
|
r: parseIntFromHex(match[1]),
|
||
|
|
g: parseIntFromHex(match[2]),
|
||
|
|
b: parseIntFromHex(match[3]),
|
||
|
|
a: convertHexToDecimal(match[4]),
|
||
|
|
format: named ? "name" : "hex8"
|
||
|
|
};
|
||
|
|
}
|
||
|
|
match = matchers.hex6.exec(color);
|
||
|
|
if (match) {
|
||
|
|
return {
|
||
|
|
r: parseIntFromHex(match[1]),
|
||
|
|
g: parseIntFromHex(match[2]),
|
||
|
|
b: parseIntFromHex(match[3]),
|
||
|
|
format: named ? "name" : "hex"
|
||
|
|
};
|
||
|
|
}
|
||
|
|
match = matchers.hex4.exec(color);
|
||
|
|
if (match) {
|
||
|
|
return {
|
||
|
|
r: parseIntFromHex(match[1] + match[1]),
|
||
|
|
g: parseIntFromHex(match[2] + match[2]),
|
||
|
|
b: parseIntFromHex(match[3] + match[3]),
|
||
|
|
a: convertHexToDecimal(match[4] + match[4]),
|
||
|
|
format: named ? "name" : "hex8"
|
||
|
|
};
|
||
|
|
}
|
||
|
|
match = matchers.hex3.exec(color);
|
||
|
|
if (match) {
|
||
|
|
return {
|
||
|
|
r: parseIntFromHex(match[1] + match[1]),
|
||
|
|
g: parseIntFromHex(match[2] + match[2]),
|
||
|
|
b: parseIntFromHex(match[3] + match[3]),
|
||
|
|
format: named ? "name" : "hex"
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
function isValidCSSUnit(color) {
|
||
|
|
return Boolean(matchers.CSS_UNIT.exec(String(color)));
|
||
|
|
}
|
||
|
|
|
||
|
|
// node_modules/@ctrl/tinycolor/dist/module/index.js
|
||
|
|
var TinyColor = class _TinyColor {
|
||
|
|
constructor(color = "", opts = {}) {
|
||
|
|
var _a;
|
||
|
|
if (color instanceof _TinyColor) {
|
||
|
|
return color;
|
||
|
|
}
|
||
|
|
if (typeof color === "number") {
|
||
|
|
color = numberInputToObject(color);
|
||
|
|
}
|
||
|
|
this.originalInput = color;
|
||
|
|
const rgb = inputToRGB(color);
|
||
|
|
this.originalInput = color;
|
||
|
|
this.r = rgb.r;
|
||
|
|
this.g = rgb.g;
|
||
|
|
this.b = rgb.b;
|
||
|
|
this.a = rgb.a;
|
||
|
|
this.roundA = Math.round(100 * this.a) / 100;
|
||
|
|
this.format = (_a = opts.format) != null ? _a : rgb.format;
|
||
|
|
this.gradientType = opts.gradientType;
|
||
|
|
if (this.r < 1) {
|
||
|
|
this.r = Math.round(this.r);
|
||
|
|
}
|
||
|
|
if (this.g < 1) {
|
||
|
|
this.g = Math.round(this.g);
|
||
|
|
}
|
||
|
|
if (this.b < 1) {
|
||
|
|
this.b = Math.round(this.b);
|
||
|
|
}
|
||
|
|
this.isValid = rgb.ok;
|
||
|
|
}
|
||
|
|
isDark() {
|
||
|
|
return this.getBrightness() < 128;
|
||
|
|
}
|
||
|
|
isLight() {
|
||
|
|
return !this.isDark();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the perceived brightness of the color, from 0-255.
|
||
|
|
*/
|
||
|
|
getBrightness() {
|
||
|
|
const rgb = this.toRgb();
|
||
|
|
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the perceived luminance of a color, from 0-1.
|
||
|
|
*/
|
||
|
|
getLuminance() {
|
||
|
|
const rgb = this.toRgb();
|
||
|
|
let R;
|
||
|
|
let G;
|
||
|
|
let B;
|
||
|
|
const RsRGB = rgb.r / 255;
|
||
|
|
const GsRGB = rgb.g / 255;
|
||
|
|
const BsRGB = rgb.b / 255;
|
||
|
|
if (RsRGB <= 0.03928) {
|
||
|
|
R = RsRGB / 12.92;
|
||
|
|
} else {
|
||
|
|
R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
|
||
|
|
}
|
||
|
|
if (GsRGB <= 0.03928) {
|
||
|
|
G = GsRGB / 12.92;
|
||
|
|
} else {
|
||
|
|
G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
|
||
|
|
}
|
||
|
|
if (BsRGB <= 0.03928) {
|
||
|
|
B = BsRGB / 12.92;
|
||
|
|
} else {
|
||
|
|
B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
|
||
|
|
}
|
||
|
|
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the alpha value of a color, from 0-1.
|
||
|
|
*/
|
||
|
|
getAlpha() {
|
||
|
|
return this.a;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the alpha value on the current color.
|
||
|
|
*
|
||
|
|
* @param alpha - The new alpha value. The accepted range is 0-1.
|
||
|
|
*/
|
||
|
|
setAlpha(alpha) {
|
||
|
|
this.a = boundAlpha(alpha);
|
||
|
|
this.roundA = Math.round(100 * this.a) / 100;
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns whether the color is monochrome.
|
||
|
|
*/
|
||
|
|
isMonochrome() {
|
||
|
|
const { s } = this.toHsl();
|
||
|
|
return s === 0;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the object as a HSVA object.
|
||
|
|
*/
|
||
|
|
toHsv() {
|
||
|
|
const hsv = rgbToHsv(this.r, this.g, this.b);
|
||
|
|
return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the hsva values interpolated into a string with the following format:
|
||
|
|
* "hsva(xxx, xxx, xxx, xx)".
|
||
|
|
*/
|
||
|
|
toHsvString() {
|
||
|
|
const hsv = rgbToHsv(this.r, this.g, this.b);
|
||
|
|
const h = Math.round(hsv.h * 360);
|
||
|
|
const s = Math.round(hsv.s * 100);
|
||
|
|
const v = Math.round(hsv.v * 100);
|
||
|
|
return this.a === 1 ? `hsv(${h}, ${s}%, ${v}%)` : `hsva(${h}, ${s}%, ${v}%, ${this.roundA})`;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the object as a HSLA object.
|
||
|
|
*/
|
||
|
|
toHsl() {
|
||
|
|
const hsl = rgbToHsl(this.r, this.g, this.b);
|
||
|
|
return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the hsla values interpolated into a string with the following format:
|
||
|
|
* "hsla(xxx, xxx, xxx, xx)".
|
||
|
|
*/
|
||
|
|
toHslString() {
|
||
|
|
const hsl = rgbToHsl(this.r, this.g, this.b);
|
||
|
|
const h = Math.round(hsl.h * 360);
|
||
|
|
const s = Math.round(hsl.s * 100);
|
||
|
|
const l = Math.round(hsl.l * 100);
|
||
|
|
return this.a === 1 ? `hsl(${h}, ${s}%, ${l}%)` : `hsla(${h}, ${s}%, ${l}%, ${this.roundA})`;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the hex value of the color.
|
||
|
|
* @param allow3Char will shorten hex value to 3 char if possible
|
||
|
|
*/
|
||
|
|
toHex(allow3Char = false) {
|
||
|
|
return rgbToHex(this.r, this.g, this.b, allow3Char);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the hex value of the color -with a # prefixed.
|
||
|
|
* @param allow3Char will shorten hex value to 3 char if possible
|
||
|
|
*/
|
||
|
|
toHexString(allow3Char = false) {
|
||
|
|
return "#" + this.toHex(allow3Char);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the hex 8 value of the color.
|
||
|
|
* @param allow4Char will shorten hex value to 4 char if possible
|
||
|
|
*/
|
||
|
|
toHex8(allow4Char = false) {
|
||
|
|
return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the hex 8 value of the color -with a # prefixed.
|
||
|
|
* @param allow4Char will shorten hex value to 4 char if possible
|
||
|
|
*/
|
||
|
|
toHex8String(allow4Char = false) {
|
||
|
|
return "#" + this.toHex8(allow4Char);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the shorter hex value of the color depends on its alpha -with a # prefixed.
|
||
|
|
* @param allowShortChar will shorten hex value to 3 or 4 char if possible
|
||
|
|
*/
|
||
|
|
toHexShortString(allowShortChar = false) {
|
||
|
|
return this.a === 1 ? this.toHexString(allowShortChar) : this.toHex8String(allowShortChar);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the object as a RGBA object.
|
||
|
|
*/
|
||
|
|
toRgb() {
|
||
|
|
return {
|
||
|
|
r: Math.round(this.r),
|
||
|
|
g: Math.round(this.g),
|
||
|
|
b: Math.round(this.b),
|
||
|
|
a: this.a
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the RGBA values interpolated into a string with the following format:
|
||
|
|
* "RGBA(xxx, xxx, xxx, xx)".
|
||
|
|
*/
|
||
|
|
toRgbString() {
|
||
|
|
const r2 = Math.round(this.r);
|
||
|
|
const g = Math.round(this.g);
|
||
|
|
const b = Math.round(this.b);
|
||
|
|
return this.a === 1 ? `rgb(${r2}, ${g}, ${b})` : `rgba(${r2}, ${g}, ${b}, ${this.roundA})`;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the object as a RGBA object.
|
||
|
|
*/
|
||
|
|
toPercentageRgb() {
|
||
|
|
const fmt = (x2) => `${Math.round(bound01(x2, 255) * 100)}%`;
|
||
|
|
return {
|
||
|
|
r: fmt(this.r),
|
||
|
|
g: fmt(this.g),
|
||
|
|
b: fmt(this.b),
|
||
|
|
a: this.a
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the RGBA relative values interpolated into a string
|
||
|
|
*/
|
||
|
|
toPercentageRgbString() {
|
||
|
|
const rnd = (x2) => Math.round(bound01(x2, 255) * 100);
|
||
|
|
return this.a === 1 ? `rgb(${rnd(this.r)}%, ${rnd(this.g)}%, ${rnd(this.b)}%)` : `rgba(${rnd(this.r)}%, ${rnd(this.g)}%, ${rnd(this.b)}%, ${this.roundA})`;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* The 'real' name of the color -if there is one.
|
||
|
|
*/
|
||
|
|
toName() {
|
||
|
|
if (this.a === 0) {
|
||
|
|
return "transparent";
|
||
|
|
}
|
||
|
|
if (this.a < 1) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
const hex = "#" + rgbToHex(this.r, this.g, this.b, false);
|
||
|
|
for (const [key, value] of Object.entries(names)) {
|
||
|
|
if (hex === value) {
|
||
|
|
return key;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
toString(format) {
|
||
|
|
const formatSet = Boolean(format);
|
||
|
|
format = format != null ? format : this.format;
|
||
|
|
let formattedString = false;
|
||
|
|
const hasAlpha = this.a < 1 && this.a >= 0;
|
||
|
|
const needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith("hex") || format === "name");
|
||
|
|
if (needsAlphaFormat) {
|
||
|
|
if (format === "name" && this.a === 0) {
|
||
|
|
return this.toName();
|
||
|
|
}
|
||
|
|
return this.toRgbString();
|
||
|
|
}
|
||
|
|
if (format === "rgb") {
|
||
|
|
formattedString = this.toRgbString();
|
||
|
|
}
|
||
|
|
if (format === "prgb") {
|
||
|
|
formattedString = this.toPercentageRgbString();
|
||
|
|
}
|
||
|
|
if (format === "hex" || format === "hex6") {
|
||
|
|
formattedString = this.toHexString();
|
||
|
|
}
|
||
|
|
if (format === "hex3") {
|
||
|
|
formattedString = this.toHexString(true);
|
||
|
|
}
|
||
|
|
if (format === "hex4") {
|
||
|
|
formattedString = this.toHex8String(true);
|
||
|
|
}
|
||
|
|
if (format === "hex8") {
|
||
|
|
formattedString = this.toHex8String();
|
||
|
|
}
|
||
|
|
if (format === "name") {
|
||
|
|
formattedString = this.toName();
|
||
|
|
}
|
||
|
|
if (format === "hsl") {
|
||
|
|
formattedString = this.toHslString();
|
||
|
|
}
|
||
|
|
if (format === "hsv") {
|
||
|
|
formattedString = this.toHsvString();
|
||
|
|
}
|
||
|
|
return formattedString || this.toHexString();
|
||
|
|
}
|
||
|
|
toNumber() {
|
||
|
|
return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
|
||
|
|
}
|
||
|
|
clone() {
|
||
|
|
return new _TinyColor(this.toString());
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Lighten the color a given amount. Providing 100 will always return white.
|
||
|
|
* @param amount - valid between 1-100
|
||
|
|
*/
|
||
|
|
lighten(amount = 10) {
|
||
|
|
const hsl = this.toHsl();
|
||
|
|
hsl.l += amount / 100;
|
||
|
|
hsl.l = clamp01(hsl.l);
|
||
|
|
return new _TinyColor(hsl);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Brighten the color a given amount, from 0 to 100.
|
||
|
|
* @param amount - valid between 1-100
|
||
|
|
*/
|
||
|
|
brighten(amount = 10) {
|
||
|
|
const rgb = this.toRgb();
|
||
|
|
rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
|
||
|
|
rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
|
||
|
|
rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
|
||
|
|
return new _TinyColor(rgb);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Darken the color a given amount, from 0 to 100.
|
||
|
|
* Providing 100 will always return black.
|
||
|
|
* @param amount - valid between 1-100
|
||
|
|
*/
|
||
|
|
darken(amount = 10) {
|
||
|
|
const hsl = this.toHsl();
|
||
|
|
hsl.l -= amount / 100;
|
||
|
|
hsl.l = clamp01(hsl.l);
|
||
|
|
return new _TinyColor(hsl);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Mix the color with pure white, from 0 to 100.
|
||
|
|
* Providing 0 will do nothing, providing 100 will always return white.
|
||
|
|
* @param amount - valid between 1-100
|
||
|
|
*/
|
||
|
|
tint(amount = 10) {
|
||
|
|
return this.mix("white", amount);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Mix the color with pure black, from 0 to 100.
|
||
|
|
* Providing 0 will do nothing, providing 100 will always return black.
|
||
|
|
* @param amount - valid between 1-100
|
||
|
|
*/
|
||
|
|
shade(amount = 10) {
|
||
|
|
return this.mix("black", amount);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Desaturate the color a given amount, from 0 to 100.
|
||
|
|
* Providing 100 will is the same as calling greyscale
|
||
|
|
* @param amount - valid between 1-100
|
||
|
|
*/
|
||
|
|
desaturate(amount = 10) {
|
||
|
|
const hsl = this.toHsl();
|
||
|
|
hsl.s -= amount / 100;
|
||
|
|
hsl.s = clamp01(hsl.s);
|
||
|
|
return new _TinyColor(hsl);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Saturate the color a given amount, from 0 to 100.
|
||
|
|
* @param amount - valid between 1-100
|
||
|
|
*/
|
||
|
|
saturate(amount = 10) {
|
||
|
|
const hsl = this.toHsl();
|
||
|
|
hsl.s += amount / 100;
|
||
|
|
hsl.s = clamp01(hsl.s);
|
||
|
|
return new _TinyColor(hsl);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Completely desaturates a color into greyscale.
|
||
|
|
* Same as calling `desaturate(100)`
|
||
|
|
*/
|
||
|
|
greyscale() {
|
||
|
|
return this.desaturate(100);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
|
||
|
|
* Values outside of this range will be wrapped into this range.
|
||
|
|
*/
|
||
|
|
spin(amount) {
|
||
|
|
const hsl = this.toHsl();
|
||
|
|
const hue = (hsl.h + amount) % 360;
|
||
|
|
hsl.h = hue < 0 ? 360 + hue : hue;
|
||
|
|
return new _TinyColor(hsl);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Mix the current color a given amount with another color, from 0 to 100.
|
||
|
|
* 0 means no mixing (return current color).
|
||
|
|
*/
|
||
|
|
mix(color, amount = 50) {
|
||
|
|
const rgb1 = this.toRgb();
|
||
|
|
const rgb2 = new _TinyColor(color).toRgb();
|
||
|
|
const p = amount / 100;
|
||
|
|
const rgba = {
|
||
|
|
r: (rgb2.r - rgb1.r) * p + rgb1.r,
|
||
|
|
g: (rgb2.g - rgb1.g) * p + rgb1.g,
|
||
|
|
b: (rgb2.b - rgb1.b) * p + rgb1.b,
|
||
|
|
a: (rgb2.a - rgb1.a) * p + rgb1.a
|
||
|
|
};
|
||
|
|
return new _TinyColor(rgba);
|
||
|
|
}
|
||
|
|
analogous(results = 6, slices = 30) {
|
||
|
|
const hsl = this.toHsl();
|
||
|
|
const part = 360 / slices;
|
||
|
|
const ret = [this];
|
||
|
|
for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; ) {
|
||
|
|
hsl.h = (hsl.h + part) % 360;
|
||
|
|
ret.push(new _TinyColor(hsl));
|
||
|
|
}
|
||
|
|
return ret;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
|
||
|
|
*/
|
||
|
|
complement() {
|
||
|
|
const hsl = this.toHsl();
|
||
|
|
hsl.h = (hsl.h + 180) % 360;
|
||
|
|
return new _TinyColor(hsl);
|
||
|
|
}
|
||
|
|
monochromatic(results = 6) {
|
||
|
|
const hsv = this.toHsv();
|
||
|
|
const { h } = hsv;
|
||
|
|
const { s } = hsv;
|
||
|
|
let { v } = hsv;
|
||
|
|
const res = [];
|
||
|
|
const modification = 1 / results;
|
||
|
|
while (results--) {
|
||
|
|
res.push(new _TinyColor({ h, s, v }));
|
||
|
|
v = (v + modification) % 1;
|
||
|
|
}
|
||
|
|
return res;
|
||
|
|
}
|
||
|
|
splitcomplement() {
|
||
|
|
const hsl = this.toHsl();
|
||
|
|
const { h } = hsl;
|
||
|
|
return [
|
||
|
|
this,
|
||
|
|
new _TinyColor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }),
|
||
|
|
new _TinyColor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l })
|
||
|
|
];
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Compute how the color would appear on a background
|
||
|
|
*/
|
||
|
|
onBackground(background) {
|
||
|
|
const fg = this.toRgb();
|
||
|
|
const bg = new _TinyColor(background).toRgb();
|
||
|
|
const alpha = fg.a + bg.a * (1 - fg.a);
|
||
|
|
return new _TinyColor({
|
||
|
|
r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / alpha,
|
||
|
|
g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / alpha,
|
||
|
|
b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / alpha,
|
||
|
|
a: alpha
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Alias for `polyad(3)`
|
||
|
|
*/
|
||
|
|
triad() {
|
||
|
|
return this.polyad(3);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Alias for `polyad(4)`
|
||
|
|
*/
|
||
|
|
tetrad() {
|
||
|
|
return this.polyad(4);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
|
||
|
|
* monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
|
||
|
|
*/
|
||
|
|
polyad(n2) {
|
||
|
|
const hsl = this.toHsl();
|
||
|
|
const { h } = hsl;
|
||
|
|
const result = [this];
|
||
|
|
const increment = 360 / n2;
|
||
|
|
for (let i = 1; i < n2; i++) {
|
||
|
|
result.push(new _TinyColor({ h: (h + i * increment) % 360, s: hsl.s, l: hsl.l }));
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* compare color vs current color
|
||
|
|
*/
|
||
|
|
equals(color) {
|
||
|
|
return this.toRgbString() === new _TinyColor(color).toRgbString();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// src/components/color-picker/color-picker.component.ts
|
||
|
|
var hasEyeDropper = "EyeDropper" in window;
|
||
|
|
var SlColorPicker = class extends ShoelaceElement {
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.formControlController = new FormControlController(this);
|
||
|
|
this.isSafeValue = false;
|
||
|
|
this.localize = new LocalizeController(this);
|
||
|
|
this.hasFocus = false;
|
||
|
|
this.isDraggingGridHandle = false;
|
||
|
|
this.isEmpty = false;
|
||
|
|
this.inputValue = "";
|
||
|
|
this.hue = 0;
|
||
|
|
this.saturation = 100;
|
||
|
|
this.brightness = 100;
|
||
|
|
this.alpha = 100;
|
||
|
|
this.value = "";
|
||
|
|
this.defaultValue = "";
|
||
|
|
this.label = "";
|
||
|
|
this.format = "hex";
|
||
|
|
this.inline = false;
|
||
|
|
this.size = "medium";
|
||
|
|
this.noFormatToggle = false;
|
||
|
|
this.name = "";
|
||
|
|
this.disabled = false;
|
||
|
|
this.hoist = false;
|
||
|
|
this.opacity = false;
|
||
|
|
this.uppercase = false;
|
||
|
|
this.swatches = "";
|
||
|
|
this.form = "";
|
||
|
|
this.required = false;
|
||
|
|
this.handleFocusIn = () => {
|
||
|
|
this.hasFocus = true;
|
||
|
|
this.emit("sl-focus");
|
||
|
|
};
|
||
|
|
this.handleFocusOut = () => {
|
||
|
|
this.hasFocus = false;
|
||
|
|
this.emit("sl-blur");
|
||
|
|
};
|
||
|
|
this.addEventListener("focusin", this.handleFocusIn);
|
||
|
|
this.addEventListener("focusout", this.handleFocusOut);
|
||
|
|
}
|
||
|
|
/** Gets the validity state object */
|
||
|
|
get validity() {
|
||
|
|
return this.input.validity;
|
||
|
|
}
|
||
|
|
/** Gets the validation message */
|
||
|
|
get validationMessage() {
|
||
|
|
return this.input.validationMessage;
|
||
|
|
}
|
||
|
|
firstUpdated() {
|
||
|
|
this.input.updateComplete.then(() => {
|
||
|
|
this.formControlController.updateValidity();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
handleCopy() {
|
||
|
|
this.input.select();
|
||
|
|
document.execCommand("copy");
|
||
|
|
this.previewButton.focus();
|
||
|
|
this.previewButton.classList.add("color-picker__preview-color--copied");
|
||
|
|
this.previewButton.addEventListener("animationend", () => {
|
||
|
|
this.previewButton.classList.remove("color-picker__preview-color--copied");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
handleFormatToggle() {
|
||
|
|
const formats = ["hex", "rgb", "hsl", "hsv"];
|
||
|
|
const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
|
||
|
|
this.format = formats[nextIndex];
|
||
|
|
this.setColor(this.value);
|
||
|
|
this.emit("sl-change");
|
||
|
|
this.emit("sl-input");
|
||
|
|
}
|
||
|
|
handleAlphaDrag(event) {
|
||
|
|
const container = this.shadowRoot.querySelector(".color-picker__slider.color-picker__alpha");
|
||
|
|
const handle = container.querySelector(".color-picker__slider-handle");
|
||
|
|
const { width } = container.getBoundingClientRect();
|
||
|
|
let initialValue = this.value;
|
||
|
|
let currentValue = this.value;
|
||
|
|
handle.focus();
|
||
|
|
event.preventDefault();
|
||
|
|
drag(container, {
|
||
|
|
onMove: (x2) => {
|
||
|
|
this.alpha = clamp(x2 / width * 100, 0, 100);
|
||
|
|
this.syncValues();
|
||
|
|
if (this.value !== currentValue) {
|
||
|
|
currentValue = this.value;
|
||
|
|
this.emit("sl-input");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onStop: () => {
|
||
|
|
if (this.value !== initialValue) {
|
||
|
|
initialValue = this.value;
|
||
|
|
this.emit("sl-change");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
initialEvent: event
|
||
|
|
});
|
||
|
|
}
|
||
|
|
handleHueDrag(event) {
|
||
|
|
const container = this.shadowRoot.querySelector(".color-picker__slider.color-picker__hue");
|
||
|
|
const handle = container.querySelector(".color-picker__slider-handle");
|
||
|
|
const { width } = container.getBoundingClientRect();
|
||
|
|
let initialValue = this.value;
|
||
|
|
let currentValue = this.value;
|
||
|
|
handle.focus();
|
||
|
|
event.preventDefault();
|
||
|
|
drag(container, {
|
||
|
|
onMove: (x2) => {
|
||
|
|
this.hue = clamp(x2 / width * 360, 0, 360);
|
||
|
|
this.syncValues();
|
||
|
|
if (this.value !== currentValue) {
|
||
|
|
currentValue = this.value;
|
||
|
|
this.emit("sl-input");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onStop: () => {
|
||
|
|
if (this.value !== initialValue) {
|
||
|
|
initialValue = this.value;
|
||
|
|
this.emit("sl-change");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
initialEvent: event
|
||
|
|
});
|
||
|
|
}
|
||
|
|
handleGridDrag(event) {
|
||
|
|
const grid = this.shadowRoot.querySelector(".color-picker__grid");
|
||
|
|
const handle = grid.querySelector(".color-picker__grid-handle");
|
||
|
|
const { width, height } = grid.getBoundingClientRect();
|
||
|
|
let initialValue = this.value;
|
||
|
|
let currentValue = this.value;
|
||
|
|
handle.focus();
|
||
|
|
event.preventDefault();
|
||
|
|
this.isDraggingGridHandle = true;
|
||
|
|
drag(grid, {
|
||
|
|
onMove: (x2, y) => {
|
||
|
|
this.saturation = clamp(x2 / width * 100, 0, 100);
|
||
|
|
this.brightness = clamp(100 - y / height * 100, 0, 100);
|
||
|
|
this.syncValues();
|
||
|
|
if (this.value !== currentValue) {
|
||
|
|
currentValue = this.value;
|
||
|
|
this.emit("sl-input");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onStop: () => {
|
||
|
|
this.isDraggingGridHandle = false;
|
||
|
|
if (this.value !== initialValue) {
|
||
|
|
initialValue = this.value;
|
||
|
|
this.emit("sl-change");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
initialEvent: event
|
||
|
|
});
|
||
|
|
}
|
||
|
|
handleAlphaKeyDown(event) {
|
||
|
|
const increment = event.shiftKey ? 10 : 1;
|
||
|
|
const oldValue = this.value;
|
||
|
|
if (event.key === "ArrowLeft") {
|
||
|
|
event.preventDefault();
|
||
|
|
this.alpha = clamp(this.alpha - increment, 0, 100);
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
if (event.key === "ArrowRight") {
|
||
|
|
event.preventDefault();
|
||
|
|
this.alpha = clamp(this.alpha + increment, 0, 100);
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
if (event.key === "Home") {
|
||
|
|
event.preventDefault();
|
||
|
|
this.alpha = 0;
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
if (event.key === "End") {
|
||
|
|
event.preventDefault();
|
||
|
|
this.alpha = 100;
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
if (this.value !== oldValue) {
|
||
|
|
this.emit("sl-change");
|
||
|
|
this.emit("sl-input");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
handleHueKeyDown(event) {
|
||
|
|
const increment = event.shiftKey ? 10 : 1;
|
||
|
|
const oldValue = this.value;
|
||
|
|
if (event.key === "ArrowLeft") {
|
||
|
|
event.preventDefault();
|
||
|
|
this.hue = clamp(this.hue - increment, 0, 360);
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
if (event.key === "ArrowRight") {
|
||
|
|
event.preventDefault();
|
||
|
|
this.hue = clamp(this.hue + increment, 0, 360);
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
if (event.key === "Home") {
|
||
|
|
event.preventDefault();
|
||
|
|
this.hue = 0;
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
if (event.key === "End") {
|
||
|
|
event.preventDefault();
|
||
|
|
this.hue = 360;
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
if (this.value !== oldValue) {
|
||
|
|
this.emit("sl-change");
|
||
|
|
this.emit("sl-input");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
handleGridKeyDown(event) {
|
||
|
|
const increment = event.shiftKey ? 10 : 1;
|
||
|
|
const oldValue = this.value;
|
||
|
|
if (event.key === "ArrowLeft") {
|
||
|
|
event.preventDefault();
|
||
|
|
this.saturation = clamp(this.saturation - increment, 0, 100);
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
if (event.key === "ArrowRight") {
|
||
|
|
event.preventDefault();
|
||
|
|
this.saturation = clamp(this.saturation + increment, 0, 100);
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
if (event.key === "ArrowUp") {
|
||
|
|
event.preventDefault();
|
||
|
|
this.brightness = clamp(this.brightness + increment, 0, 100);
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
if (event.key === "ArrowDown") {
|
||
|
|
event.preventDefault();
|
||
|
|
this.brightness = clamp(this.brightness - increment, 0, 100);
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
if (this.value !== oldValue) {
|
||
|
|
this.emit("sl-change");
|
||
|
|
this.emit("sl-input");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
handleInputChange(event) {
|
||
|
|
const target = event.target;
|
||
|
|
const oldValue = this.value;
|
||
|
|
event.stopPropagation();
|
||
|
|
if (this.input.value) {
|
||
|
|
this.setColor(target.value);
|
||
|
|
target.value = this.value;
|
||
|
|
} else {
|
||
|
|
this.value = "";
|
||
|
|
}
|
||
|
|
if (this.value !== oldValue) {
|
||
|
|
this.emit("sl-change");
|
||
|
|
this.emit("sl-input");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
handleInputInput(event) {
|
||
|
|
this.formControlController.updateValidity();
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
handleInputKeyDown(event) {
|
||
|
|
if (event.key === "Enter") {
|
||
|
|
const oldValue = this.value;
|
||
|
|
if (this.input.value) {
|
||
|
|
this.setColor(this.input.value);
|
||
|
|
this.input.value = this.value;
|
||
|
|
if (this.value !== oldValue) {
|
||
|
|
this.emit("sl-change");
|
||
|
|
this.emit("sl-input");
|
||
|
|
}
|
||
|
|
setTimeout(() => this.input.select());
|
||
|
|
} else {
|
||
|
|
this.hue = 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
handleInputInvalid(event) {
|
||
|
|
this.formControlController.setValidity(false);
|
||
|
|
this.formControlController.emitInvalidEvent(event);
|
||
|
|
}
|
||
|
|
handleTouchMove(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
parseColor(colorString) {
|
||
|
|
const color = new TinyColor(colorString);
|
||
|
|
if (!color.isValid) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const hslColor = color.toHsl();
|
||
|
|
const hsl = {
|
||
|
|
h: hslColor.h,
|
||
|
|
s: hslColor.s * 100,
|
||
|
|
l: hslColor.l * 100,
|
||
|
|
a: hslColor.a
|
||
|
|
};
|
||
|
|
const rgb = color.toRgb();
|
||
|
|
const hex = color.toHexString();
|
||
|
|
const hexa = color.toHex8String();
|
||
|
|
const hsvColor = color.toHsv();
|
||
|
|
const hsv = {
|
||
|
|
h: hsvColor.h,
|
||
|
|
s: hsvColor.s * 100,
|
||
|
|
v: hsvColor.v * 100,
|
||
|
|
a: hsvColor.a
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
hsl: {
|
||
|
|
h: hsl.h,
|
||
|
|
s: hsl.s,
|
||
|
|
l: hsl.l,
|
||
|
|
string: this.setLetterCase(`hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`)
|
||
|
|
},
|
||
|
|
hsla: {
|
||
|
|
h: hsl.h,
|
||
|
|
s: hsl.s,
|
||
|
|
l: hsl.l,
|
||
|
|
a: hsl.a,
|
||
|
|
string: this.setLetterCase(
|
||
|
|
`hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${hsl.a.toFixed(2).toString()})`
|
||
|
|
)
|
||
|
|
},
|
||
|
|
hsv: {
|
||
|
|
h: hsv.h,
|
||
|
|
s: hsv.s,
|
||
|
|
v: hsv.v,
|
||
|
|
string: this.setLetterCase(`hsv(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%)`)
|
||
|
|
},
|
||
|
|
hsva: {
|
||
|
|
h: hsv.h,
|
||
|
|
s: hsv.s,
|
||
|
|
v: hsv.v,
|
||
|
|
a: hsv.a,
|
||
|
|
string: this.setLetterCase(
|
||
|
|
`hsva(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%, ${hsv.a.toFixed(2).toString()})`
|
||
|
|
)
|
||
|
|
},
|
||
|
|
rgb: {
|
||
|
|
r: rgb.r,
|
||
|
|
g: rgb.g,
|
||
|
|
b: rgb.b,
|
||
|
|
string: this.setLetterCase(`rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`)
|
||
|
|
},
|
||
|
|
rgba: {
|
||
|
|
r: rgb.r,
|
||
|
|
g: rgb.g,
|
||
|
|
b: rgb.b,
|
||
|
|
a: rgb.a,
|
||
|
|
string: this.setLetterCase(
|
||
|
|
`rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${rgb.a.toFixed(2).toString()})`
|
||
|
|
)
|
||
|
|
},
|
||
|
|
hex: this.setLetterCase(hex),
|
||
|
|
hexa: this.setLetterCase(hexa)
|
||
|
|
};
|
||
|
|
}
|
||
|
|
setColor(colorString) {
|
||
|
|
const newColor = this.parseColor(colorString);
|
||
|
|
if (newColor === null) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
this.hue = newColor.hsva.h;
|
||
|
|
this.saturation = newColor.hsva.s;
|
||
|
|
this.brightness = newColor.hsva.v;
|
||
|
|
this.alpha = this.opacity ? newColor.hsva.a * 100 : 100;
|
||
|
|
this.syncValues();
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
setLetterCase(string) {
|
||
|
|
if (typeof string !== "string") {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
return this.uppercase ? string.toUpperCase() : string.toLowerCase();
|
||
|
|
}
|
||
|
|
async syncValues() {
|
||
|
|
const currentColor = this.parseColor(
|
||
|
|
`hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`
|
||
|
|
);
|
||
|
|
if (currentColor === null) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.format === "hsl") {
|
||
|
|
this.inputValue = this.opacity ? currentColor.hsla.string : currentColor.hsl.string;
|
||
|
|
} else if (this.format === "rgb") {
|
||
|
|
this.inputValue = this.opacity ? currentColor.rgba.string : currentColor.rgb.string;
|
||
|
|
} else if (this.format === "hsv") {
|
||
|
|
this.inputValue = this.opacity ? currentColor.hsva.string : currentColor.hsv.string;
|
||
|
|
} else {
|
||
|
|
this.inputValue = this.opacity ? currentColor.hexa : currentColor.hex;
|
||
|
|
}
|
||
|
|
this.isSafeValue = true;
|
||
|
|
this.value = this.inputValue;
|
||
|
|
await this.updateComplete;
|
||
|
|
this.isSafeValue = false;
|
||
|
|
}
|
||
|
|
handleAfterHide() {
|
||
|
|
this.previewButton.classList.remove("color-picker__preview-color--copied");
|
||
|
|
}
|
||
|
|
handleEyeDropper() {
|
||
|
|
if (!hasEyeDropper) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const eyeDropper = new EyeDropper();
|
||
|
|
eyeDropper.open().then((colorSelectionResult) => {
|
||
|
|
const oldValue = this.value;
|
||
|
|
this.setColor(colorSelectionResult.sRGBHex);
|
||
|
|
if (this.value !== oldValue) {
|
||
|
|
this.emit("sl-change");
|
||
|
|
this.emit("sl-input");
|
||
|
|
}
|
||
|
|
}).catch(() => {
|
||
|
|
});
|
||
|
|
}
|
||
|
|
selectSwatch(color) {
|
||
|
|
const oldValue = this.value;
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.setColor(color);
|
||
|
|
if (this.value !== oldValue) {
|
||
|
|
this.emit("sl-change");
|
||
|
|
this.emit("sl-input");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100. */
|
||
|
|
getHexString(hue, saturation, brightness, alpha = 100) {
|
||
|
|
const color = new TinyColor(`hsva(${hue}, ${saturation}%, ${brightness}%, ${alpha / 100})`);
|
||
|
|
if (!color.isValid) {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
return color.toHex8String();
|
||
|
|
}
|
||
|
|
// Prevents nested components from leaking events
|
||
|
|
stopNestedEventPropagation(event) {
|
||
|
|
event.stopImmediatePropagation();
|
||
|
|
}
|
||
|
|
handleFormatChange() {
|
||
|
|
this.syncValues();
|
||
|
|
}
|
||
|
|
handleOpacityChange() {
|
||
|
|
this.alpha = 100;
|
||
|
|
}
|
||
|
|
handleValueChange(oldValue, newValue) {
|
||
|
|
this.isEmpty = !newValue;
|
||
|
|
if (!newValue) {
|
||
|
|
this.hue = 0;
|
||
|
|
this.saturation = 0;
|
||
|
|
this.brightness = 100;
|
||
|
|
this.alpha = 100;
|
||
|
|
}
|
||
|
|
if (!this.isSafeValue) {
|
||
|
|
const newColor = this.parseColor(newValue);
|
||
|
|
if (newColor !== null) {
|
||
|
|
this.inputValue = this.value;
|
||
|
|
this.hue = newColor.hsva.h;
|
||
|
|
this.saturation = newColor.hsva.s;
|
||
|
|
this.brightness = newColor.hsva.v;
|
||
|
|
this.alpha = newColor.hsva.a * 100;
|
||
|
|
this.syncValues();
|
||
|
|
} else {
|
||
|
|
this.inputValue = oldValue != null ? oldValue : "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Sets focus on the color picker. */
|
||
|
|
focus(options) {
|
||
|
|
if (this.inline) {
|
||
|
|
this.base.focus(options);
|
||
|
|
} else {
|
||
|
|
this.trigger.focus(options);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Removes focus from the color picker. */
|
||
|
|
blur() {
|
||
|
|
var _a;
|
||
|
|
const elementToBlur = this.inline ? this.base : this.trigger;
|
||
|
|
if (this.hasFocus) {
|
||
|
|
elementToBlur.focus({ preventScroll: true });
|
||
|
|
elementToBlur.blur();
|
||
|
|
}
|
||
|
|
if ((_a = this.dropdown) == null ? void 0 : _a.open) {
|
||
|
|
this.dropdown.hide();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Returns the current value as a string in the specified format. */
|
||
|
|
getFormattedValue(format = "hex") {
|
||
|
|
const currentColor = this.parseColor(
|
||
|
|
`hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`
|
||
|
|
);
|
||
|
|
if (currentColor === null) {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
switch (format) {
|
||
|
|
case "hex":
|
||
|
|
return currentColor.hex;
|
||
|
|
case "hexa":
|
||
|
|
return currentColor.hexa;
|
||
|
|
case "rgb":
|
||
|
|
return currentColor.rgb.string;
|
||
|
|
case "rgba":
|
||
|
|
return currentColor.rgba.string;
|
||
|
|
case "hsl":
|
||
|
|
return currentColor.hsl.string;
|
||
|
|
case "hsla":
|
||
|
|
return currentColor.hsla.string;
|
||
|
|
case "hsv":
|
||
|
|
return currentColor.hsv.string;
|
||
|
|
case "hsva":
|
||
|
|
return currentColor.hsva.string;
|
||
|
|
default:
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
|
||
|
|
checkValidity() {
|
||
|
|
return this.input.checkValidity();
|
||
|
|
}
|
||
|
|
/** Gets the associated form, if one exists. */
|
||
|
|
getForm() {
|
||
|
|
return this.formControlController.getForm();
|
||
|
|
}
|
||
|
|
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
||
|
|
reportValidity() {
|
||
|
|
if (!this.inline && !this.validity.valid) {
|
||
|
|
this.dropdown.show();
|
||
|
|
this.addEventListener("sl-after-show", () => this.input.reportValidity(), { once: true });
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.formControlController.emitInvalidEvent();
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return this.input.reportValidity();
|
||
|
|
}
|
||
|
|
/** Sets a custom validation message. Pass an empty string to restore validity. */
|
||
|
|
setCustomValidity(message) {
|
||
|
|
this.input.setCustomValidity(message);
|
||
|
|
this.formControlController.updateValidity();
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
const gridHandleX = this.saturation;
|
||
|
|
const gridHandleY = 100 - this.brightness;
|
||
|
|
const swatches = Array.isArray(this.swatches) ? this.swatches : this.swatches.split(";").filter((color) => color.trim() !== "");
|
||
|
|
const colorPicker = x`
|
||
|
|
<div
|
||
|
|
part="base"
|
||
|
|
class=${e({
|
||
|
|
"color-picker": true,
|
||
|
|
"color-picker--inline": this.inline,
|
||
|
|
"color-picker--disabled": this.disabled,
|
||
|
|
"color-picker--focused": this.hasFocus
|
||
|
|
})}
|
||
|
|
aria-disabled=${this.disabled ? "true" : "false"}
|
||
|
|
aria-labelledby="label"
|
||
|
|
tabindex=${this.inline ? "0" : "-1"}
|
||
|
|
>
|
||
|
|
${this.inline ? x`
|
||
|
|
<sl-visually-hidden id="label">
|
||
|
|
<slot name="label">${this.label}</slot>
|
||
|
|
</sl-visually-hidden>
|
||
|
|
` : null}
|
||
|
|
|
||
|
|
<div
|
||
|
|
part="grid"
|
||
|
|
class="color-picker__grid"
|
||
|
|
style=${o2({ backgroundColor: this.getHexString(this.hue, 100, 100) })}
|
||
|
|
@pointerdown=${this.handleGridDrag}
|
||
|
|
@touchmove=${this.handleTouchMove}
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
part="grid-handle"
|
||
|
|
class=${e({
|
||
|
|
"color-picker__grid-handle": true,
|
||
|
|
"color-picker__grid-handle--dragging": this.isDraggingGridHandle
|
||
|
|
})}
|
||
|
|
style=${o2({
|
||
|
|
top: `${gridHandleY}%`,
|
||
|
|
left: `${gridHandleX}%`,
|
||
|
|
backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
|
||
|
|
})}
|
||
|
|
role="application"
|
||
|
|
aria-label="HSV"
|
||
|
|
tabindex=${o(this.disabled ? void 0 : "0")}
|
||
|
|
@keydown=${this.handleGridKeyDown}
|
||
|
|
></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-picker__controls">
|
||
|
|
<div class="color-picker__sliders">
|
||
|
|
<div
|
||
|
|
part="slider hue-slider"
|
||
|
|
class="color-picker__hue color-picker__slider"
|
||
|
|
@pointerdown=${this.handleHueDrag}
|
||
|
|
@touchmove=${this.handleTouchMove}
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
part="slider-handle hue-slider-handle"
|
||
|
|
class="color-picker__slider-handle"
|
||
|
|
style=${o2({
|
||
|
|
left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%`
|
||
|
|
})}
|
||
|
|
role="slider"
|
||
|
|
aria-label="hue"
|
||
|
|
aria-orientation="horizontal"
|
||
|
|
aria-valuemin="0"
|
||
|
|
aria-valuemax="360"
|
||
|
|
aria-valuenow=${`${Math.round(this.hue)}`}
|
||
|
|
tabindex=${o(this.disabled ? void 0 : "0")}
|
||
|
|
@keydown=${this.handleHueKeyDown}
|
||
|
|
></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
${this.opacity ? x`
|
||
|
|
<div
|
||
|
|
part="slider opacity-slider"
|
||
|
|
class="color-picker__alpha color-picker__slider color-picker__transparent-bg"
|
||
|
|
@pointerdown="${this.handleAlphaDrag}"
|
||
|
|
@touchmove=${this.handleTouchMove}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="color-picker__alpha-gradient"
|
||
|
|
style=${o2({
|
||
|
|
backgroundImage: `linear-gradient(
|
||
|
|
to right,
|
||
|
|
${this.getHexString(this.hue, this.saturation, this.brightness, 0)} 0%,
|
||
|
|
${this.getHexString(this.hue, this.saturation, this.brightness, 100)} 100%
|
||
|
|
)`
|
||
|
|
})}
|
||
|
|
></div>
|
||
|
|
<span
|
||
|
|
part="slider-handle opacity-slider-handle"
|
||
|
|
class="color-picker__slider-handle"
|
||
|
|
style=${o2({
|
||
|
|
left: `${this.alpha}%`
|
||
|
|
})}
|
||
|
|
role="slider"
|
||
|
|
aria-label="alpha"
|
||
|
|
aria-orientation="horizontal"
|
||
|
|
aria-valuemin="0"
|
||
|
|
aria-valuemax="100"
|
||
|
|
aria-valuenow=${Math.round(this.alpha)}
|
||
|
|
tabindex=${o(this.disabled ? void 0 : "0")}
|
||
|
|
@keydown=${this.handleAlphaKeyDown}
|
||
|
|
></span>
|
||
|
|
</div>
|
||
|
|
` : ""}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
part="preview"
|
||
|
|
class="color-picker__preview color-picker__transparent-bg"
|
||
|
|
aria-label=${this.localize.term("copy")}
|
||
|
|
style=${o2({
|
||
|
|
"--preview-color": this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
|
||
|
|
})}
|
||
|
|
@click=${this.handleCopy}
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-picker__user-input" aria-live="polite">
|
||
|
|
<sl-input
|
||
|
|
part="input"
|
||
|
|
type="text"
|
||
|
|
name=${this.name}
|
||
|
|
autocomplete="off"
|
||
|
|
autocorrect="off"
|
||
|
|
autocapitalize="off"
|
||
|
|
spellcheck="false"
|
||
|
|
value=${this.isEmpty ? "" : this.inputValue}
|
||
|
|
?required=${this.required}
|
||
|
|
?disabled=${this.disabled}
|
||
|
|
aria-label=${this.localize.term("currentValue")}
|
||
|
|
@keydown=${this.handleInputKeyDown}
|
||
|
|
@sl-change=${this.handleInputChange}
|
||
|
|
@sl-input=${this.handleInputInput}
|
||
|
|
@sl-invalid=${this.handleInputInvalid}
|
||
|
|
@sl-blur=${this.stopNestedEventPropagation}
|
||
|
|
@sl-focus=${this.stopNestedEventPropagation}
|
||
|
|
></sl-input>
|
||
|
|
|
||
|
|
<sl-button-group>
|
||
|
|
${!this.noFormatToggle ? x`
|
||
|
|
<sl-button
|
||
|
|
part="format-button"
|
||
|
|
aria-label=${this.localize.term("toggleColorFormat")}
|
||
|
|
exportparts="
|
||
|
|
base:format-button__base,
|
||
|
|
prefix:format-button__prefix,
|
||
|
|
label:format-button__label,
|
||
|
|
suffix:format-button__suffix,
|
||
|
|
caret:format-button__caret
|
||
|
|
"
|
||
|
|
@click=${this.handleFormatToggle}
|
||
|
|
@sl-blur=${this.stopNestedEventPropagation}
|
||
|
|
@sl-focus=${this.stopNestedEventPropagation}
|
||
|
|
>
|
||
|
|
${this.setLetterCase(this.format)}
|
||
|
|
</sl-button>
|
||
|
|
` : ""}
|
||
|
|
${hasEyeDropper ? x`
|
||
|
|
<sl-button
|
||
|
|
part="eye-dropper-button"
|
||
|
|
exportparts="
|
||
|
|
base:eye-dropper-button__base,
|
||
|
|
prefix:eye-dropper-button__prefix,
|
||
|
|
label:eye-dropper-button__label,
|
||
|
|
suffix:eye-dropper-button__suffix,
|
||
|
|
caret:eye-dropper-button__caret
|
||
|
|
"
|
||
|
|
@click=${this.handleEyeDropper}
|
||
|
|
@sl-blur=${this.stopNestedEventPropagation}
|
||
|
|
@sl-focus=${this.stopNestedEventPropagation}
|
||
|
|
>
|
||
|
|
<sl-icon
|
||
|
|
library="system"
|
||
|
|
name="eyedropper"
|
||
|
|
label=${this.localize.term("selectAColorFromTheScreen")}
|
||
|
|
></sl-icon>
|
||
|
|
</sl-button>
|
||
|
|
` : ""}
|
||
|
|
</sl-button-group>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
${swatches.length > 0 ? x`
|
||
|
|
<div part="swatches" class="color-picker__swatches">
|
||
|
|
${swatches.map((swatch) => {
|
||
|
|
const parsedColor = this.parseColor(swatch);
|
||
|
|
if (!parsedColor) {
|
||
|
|
console.error(`Unable to parse swatch color: "${swatch}"`, this);
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
return x`
|
||
|
|
<div
|
||
|
|
part="swatch"
|
||
|
|
class="color-picker__swatch color-picker__transparent-bg"
|
||
|
|
tabindex=${o(this.disabled ? void 0 : "0")}
|
||
|
|
role="button"
|
||
|
|
aria-label=${swatch}
|
||
|
|
@click=${() => this.selectSwatch(swatch)}
|
||
|
|
@keydown=${(event) => !this.disabled && event.key === "Enter" && this.setColor(parsedColor.hexa)}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="color-picker__swatch-color"
|
||
|
|
style=${o2({ backgroundColor: parsedColor.hexa })}
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
` : ""}
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
if (this.inline) {
|
||
|
|
return colorPicker;
|
||
|
|
}
|
||
|
|
return x`
|
||
|
|
<sl-dropdown
|
||
|
|
class="color-dropdown"
|
||
|
|
aria-disabled=${this.disabled ? "true" : "false"}
|
||
|
|
.containing-element=${this}
|
||
|
|
?disabled=${this.disabled}
|
||
|
|
?hoist=${this.hoist}
|
||
|
|
@sl-after-hide=${this.handleAfterHide}
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
part="trigger"
|
||
|
|
slot="trigger"
|
||
|
|
class=${e({
|
||
|
|
"color-dropdown__trigger": true,
|
||
|
|
"color-dropdown__trigger--disabled": this.disabled,
|
||
|
|
"color-dropdown__trigger--small": this.size === "small",
|
||
|
|
"color-dropdown__trigger--medium": this.size === "medium",
|
||
|
|
"color-dropdown__trigger--large": this.size === "large",
|
||
|
|
"color-dropdown__trigger--empty": this.isEmpty,
|
||
|
|
"color-dropdown__trigger--focused": this.hasFocus,
|
||
|
|
"color-picker__transparent-bg": true
|
||
|
|
})}
|
||
|
|
style=${o2({
|
||
|
|
color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
|
||
|
|
})}
|
||
|
|
type="button"
|
||
|
|
>
|
||
|
|
<sl-visually-hidden>
|
||
|
|
<slot name="label">${this.label}</slot>
|
||
|
|
</sl-visually-hidden>
|
||
|
|
</button>
|
||
|
|
${colorPicker}
|
||
|
|
</sl-dropdown>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SlColorPicker.styles = color_picker_styles_default;
|
||
|
|
SlColorPicker.dependencies = {
|
||
|
|
"sl-button-group": SlButtonGroup,
|
||
|
|
"sl-button": SlButton,
|
||
|
|
"sl-dropdown": SlDropdown,
|
||
|
|
"sl-icon": SlIcon,
|
||
|
|
"sl-input": SlInput,
|
||
|
|
"sl-visually-hidden": SlVisuallyHidden
|
||
|
|
};
|
||
|
|
__decorateClass([
|
||
|
|
e2('[part~="base"]')
|
||
|
|
], SlColorPicker.prototype, "base", 2);
|
||
|
|
__decorateClass([
|
||
|
|
e2('[part~="input"]')
|
||
|
|
], SlColorPicker.prototype, "input", 2);
|
||
|
|
__decorateClass([
|
||
|
|
e2(".color-dropdown")
|
||
|
|
], SlColorPicker.prototype, "dropdown", 2);
|
||
|
|
__decorateClass([
|
||
|
|
e2('[part~="preview"]')
|
||
|
|
], SlColorPicker.prototype, "previewButton", 2);
|
||
|
|
__decorateClass([
|
||
|
|
e2('[part~="trigger"]')
|
||
|
|
], SlColorPicker.prototype, "trigger", 2);
|
||
|
|
__decorateClass([
|
||
|
|
r()
|
||
|
|
], SlColorPicker.prototype, "hasFocus", 2);
|
||
|
|
__decorateClass([
|
||
|
|
r()
|
||
|
|
], SlColorPicker.prototype, "isDraggingGridHandle", 2);
|
||
|
|
__decorateClass([
|
||
|
|
r()
|
||
|
|
], SlColorPicker.prototype, "isEmpty", 2);
|
||
|
|
__decorateClass([
|
||
|
|
r()
|
||
|
|
], SlColorPicker.prototype, "inputValue", 2);
|
||
|
|
__decorateClass([
|
||
|
|
r()
|
||
|
|
], SlColorPicker.prototype, "hue", 2);
|
||
|
|
__decorateClass([
|
||
|
|
r()
|
||
|
|
], SlColorPicker.prototype, "saturation", 2);
|
||
|
|
__decorateClass([
|
||
|
|
r()
|
||
|
|
], SlColorPicker.prototype, "brightness", 2);
|
||
|
|
__decorateClass([
|
||
|
|
r()
|
||
|
|
], SlColorPicker.prototype, "alpha", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n()
|
||
|
|
], SlColorPicker.prototype, "value", 2);
|
||
|
|
__decorateClass([
|
||
|
|
defaultValue()
|
||
|
|
], SlColorPicker.prototype, "defaultValue", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n()
|
||
|
|
], SlColorPicker.prototype, "label", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n()
|
||
|
|
], SlColorPicker.prototype, "format", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n({ type: Boolean, reflect: true })
|
||
|
|
], SlColorPicker.prototype, "inline", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n({ reflect: true })
|
||
|
|
], SlColorPicker.prototype, "size", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n({ attribute: "no-format-toggle", type: Boolean })
|
||
|
|
], SlColorPicker.prototype, "noFormatToggle", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n()
|
||
|
|
], SlColorPicker.prototype, "name", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n({ type: Boolean, reflect: true })
|
||
|
|
], SlColorPicker.prototype, "disabled", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n({ type: Boolean })
|
||
|
|
], SlColorPicker.prototype, "hoist", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n({ type: Boolean })
|
||
|
|
], SlColorPicker.prototype, "opacity", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n({ type: Boolean })
|
||
|
|
], SlColorPicker.prototype, "uppercase", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n()
|
||
|
|
], SlColorPicker.prototype, "swatches", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n({ reflect: true })
|
||
|
|
], SlColorPicker.prototype, "form", 2);
|
||
|
|
__decorateClass([
|
||
|
|
n({ type: Boolean, reflect: true })
|
||
|
|
], SlColorPicker.prototype, "required", 2);
|
||
|
|
__decorateClass([
|
||
|
|
watch("format", { waitUntilFirstUpdate: true })
|
||
|
|
], SlColorPicker.prototype, "handleFormatChange", 1);
|
||
|
|
__decorateClass([
|
||
|
|
watch("opacity", { waitUntilFirstUpdate: true })
|
||
|
|
], SlColorPicker.prototype, "handleOpacityChange", 1);
|
||
|
|
__decorateClass([
|
||
|
|
watch("value")
|
||
|
|
], SlColorPicker.prototype, "handleValueChange", 1);
|
||
|
|
|
||
|
|
export {
|
||
|
|
SlColorPicker
|
||
|
|
};
|