ngx-input-color
Version:
Angular color input component and color picker (with HSL, HSV, RGB, CMYK, HEX, alpha, eye-dropper, etc)
50 lines • 7.35 kB
JavaScript
export function parseBoxShadowToPx(shadow, contextPx = 16) {
if (!shadow?.trim())
return null;
let inset = false;
shadow = shadow.trim();
if (shadow.startsWith('inset')) {
inset = true;
shadow = shadow.slice(5).trim();
}
const colorRegex = /(#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{4}|[a-f0-9]{8})\b|rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\)|rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*\d*(?:\.\d+)?\)|hsl\(\s*\d+,\s*\d*(?:\.\d+)?%,\s*\d*(?:\.\d+)?%\)|hsla\(\d+,\s*[\d.]+%,\s*[\d.]+%,\s*\d*(?:\.\d+)?\))/gi;
const colorMatch = shadow.match(colorRegex);
let color = 'black';
if (colorMatch) {
color = colorMatch[0];
shadow = shadow.replace(color, '').trim();
}
const toPx = (value, unit) => {
switch (unit.toLowerCase()) {
case 'px':
case '':
return value;
case 'em':
case 'rem':
return value * contextPx;
case '%':
return (value / 100) * contextPx;
case 'pt':
return value * 1.333;
default:
return value; // fallback
}
};
const matches = [...shadow.matchAll(/(-?\d*\.?\d+)([a-zA-Z%]*)/g)];
const values = matches.map(([_, num, unit]) => toPx(parseFloat(num), unit));
const [offsetX, offsetY, blur, spread] = values;
return {
inset,
offsetX: offsetX ?? 0,
offsetY: offsetY ?? 0,
blurRadius: blur ?? 0,
spreadRadius: spread ?? 0,
color,
};
}
export function stringifyBoxShadow(obj) {
const { inset, offsetX, offsetY, blurRadius, spreadRadius, color } = obj;
const parts = [inset ? 'inset' : '', `${offsetX}px`, `${offsetY}px`, `${blurRadius}px`, `${spreadRadius}px`, color];
return parts.filter(Boolean).join(' ').trim();
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm94LXNoYWRvdy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1pbnB1dC1jb2xvci9zcmMvdXRpbHMvYm94LXNoYWRvdy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxNQUFNLFVBQVUsa0JBQWtCLENBQUMsTUFBYyxFQUFFLFNBQVMsR0FBRyxFQUFFO0lBQy9ELElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxFQUFFO1FBQUUsT0FBTyxJQUFJLENBQUM7SUFDakMsSUFBSSxLQUFLLEdBQUcsS0FBSyxDQUFDO0lBQ2xCLE1BQU0sR0FBRyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7SUFFdkIsSUFBSSxNQUFNLENBQUMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUM7UUFDL0IsS0FBSyxHQUFHLElBQUksQ0FBQztRQUNiLE1BQU0sR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ2xDLENBQUM7SUFFRCxNQUFNLFVBQVUsR0FDZCw2UEFBNlAsQ0FBQztJQUNoUSxNQUFNLFVBQVUsR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQzVDLElBQUksS0FBSyxHQUFHLE9BQU8sQ0FBQztJQUNwQixJQUFJLFVBQVUsRUFBRSxDQUFDO1FBQ2YsS0FBSyxHQUFHLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN0QixNQUFNLEdBQUcsTUFBTSxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDNUMsQ0FBQztJQUVELE1BQU0sSUFBSSxHQUFHLENBQUMsS0FBYSxFQUFFLElBQVksRUFBVSxFQUFFO1FBQ25ELFFBQVEsSUFBSSxDQUFDLFdBQVcsRUFBRSxFQUFFLENBQUM7WUFDM0IsS0FBSyxJQUFJLENBQUM7WUFDVixLQUFLLEVBQUU7Z0JBQ0wsT0FBTyxLQUFLLENBQUM7WUFDZixLQUFLLElBQUksQ0FBQztZQUNWLEtBQUssS0FBSztnQkFDUixPQUFPLEtBQUssR0FBRyxTQUFTLENBQUM7WUFDM0IsS0FBSyxHQUFHO2dCQUNOLE9BQU8sQ0FBQyxLQUFLLEdBQUcsR0FBRyxDQUFDLEdBQUcsU0FBUyxDQUFDO1lBQ25DLEtBQUssSUFBSTtnQkFDUCxPQUFPLEtBQUssR0FBRyxLQUFLLENBQUM7WUFDdkI7Z0JBQ0UsT0FBTyxLQUFLLENBQUMsQ0FBQyxXQUFXO1FBQzdCLENBQUM7SUFDSCxDQUFDLENBQUM7SUFFRixNQUFNLE9BQU8sR0FBRyxDQUFDLEdBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQyw0QkFBNEIsQ0FBQyxDQUFDLENBQUM7SUFDbkUsTUFBTSxNQUFNLEdBQUcsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBRTVFLE1BQU0sQ0FBQyxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLENBQUMsR0FBRyxNQUFNLENBQUM7SUFFaEQsT0FBTztRQUNMLEtBQUs7UUFDTCxPQUFPLEVBQUUsT0FBTyxJQUFJLENBQUM7UUFDckIsT0FBTyxFQUFFLE9BQU8sSUFBSSxDQUFDO1FBQ3JCLFVBQVUsRUFBRSxJQUFJLElBQUksQ0FBQztRQUNyQixZQUFZLEVBQUUsTUFBTSxJQUFJLENBQUM7UUFDekIsS0FBSztLQUNOLENBQUM7QUFDSixDQUFDO0FBRUQsTUFBTSxVQUFVLGtCQUFrQixDQUFDLEdBQW1CO0lBQ3BELE1BQU0sRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxHQUFHLEdBQUcsQ0FBQztJQUV6RSxNQUFNLEtBQUssR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsR0FBRyxPQUFPLElBQUksRUFBRSxHQUFHLE9BQU8sSUFBSSxFQUFFLEdBQUcsVUFBVSxJQUFJLEVBQUUsR0FBRyxZQUFZLElBQUksRUFBRSxLQUFLLENBQUMsQ0FBQztJQUVwSCxPQUFPLEtBQUssQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksRUFBRSxDQUFDO0FBQ2hELENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3hTaGFkb3dWYWx1ZSB9IGZyb20gJy4uL21vZGVscy9Cb3hTaGFkb3dWYWx1ZSc7XHJcbmV4cG9ydCBmdW5jdGlvbiBwYXJzZUJveFNoYWRvd1RvUHgoc2hhZG93OiBzdHJpbmcsIGNvbnRleHRQeCA9IDE2KTogQm94U2hhZG93VmFsdWUgfCBudWxsIHtcclxuICBpZiAoIXNoYWRvdz8udHJpbSgpKSByZXR1cm4gbnVsbDtcclxuICBsZXQgaW5zZXQgPSBmYWxzZTtcclxuICBzaGFkb3cgPSBzaGFkb3cudHJpbSgpO1xyXG5cclxuICBpZiAoc2hhZG93LnN0YXJ0c1dpdGgoJ2luc2V0JykpIHtcclxuICAgIGluc2V0ID0gdHJ1ZTtcclxuICAgIHNoYWRvdyA9IHNoYWRvdy5zbGljZSg1KS50cmltKCk7XHJcbiAgfVxyXG5cclxuICBjb25zdCBjb2xvclJlZ2V4ID1cclxuICAgIC8oIyg/OlthLWYwLTldezN9fFthLWYwLTldezZ9fFthLWYwLTldezR9fFthLWYwLTldezh9KVxcYnxyZ2JcXChcXGR7MSwzfSxcXHMqXFxkezEsM30sXFxzKlxcZHsxLDN9XFwpfHJnYmFcXChcXGR7MSwzfSxcXHMqXFxkezEsM30sXFxzKlxcZHsxLDN9LFxccypcXGQqKD86XFwuXFxkKyk/XFwpfGhzbFxcKFxccypcXGQrLFxccypcXGQqKD86XFwuXFxkKyk/JSxcXHMqXFxkKig/OlxcLlxcZCspPyVcXCl8aHNsYVxcKFxcZCssXFxzKltcXGQuXSslLFxccypbXFxkLl0rJSxcXHMqXFxkKig/OlxcLlxcZCspP1xcKSkvZ2k7XHJcbiAgY29uc3QgY29sb3JNYXRjaCA9IHNoYWRvdy5tYXRjaChjb2xvclJlZ2V4KTtcclxuICBsZXQgY29sb3IgPSAnYmxhY2snO1xyXG4gIGlmIChjb2xvck1hdGNoKSB7XHJcbiAgICBjb2xvciA9IGNvbG9yTWF0Y2hbMF07XHJcbiAgICBzaGFkb3cgPSBzaGFkb3cucmVwbGFjZShjb2xvciwgJycpLnRyaW0oKTtcclxuICB9XHJcblxyXG4gIGNvbnN0IHRvUHggPSAodmFsdWU6IG51bWJlciwgdW5pdDogc3RyaW5nKTogbnVtYmVyID0+IHtcclxuICAgIHN3aXRjaCAodW5pdC50b0xvd2VyQ2FzZSgpKSB7XHJcbiAgICAgIGNhc2UgJ3B4JzpcclxuICAgICAgY2FzZSAnJzpcclxuICAgICAgICByZXR1cm4gdmFsdWU7XHJcbiAgICAgIGNhc2UgJ2VtJzpcclxuICAgICAgY2FzZSAncmVtJzpcclxuICAgICAgICByZXR1cm4gdmFsdWUgKiBjb250ZXh0UHg7XHJcbiAgICAgIGNhc2UgJyUnOlxyXG4gICAgICAgIHJldHVybiAodmFsdWUgLyAxMDApICogY29udGV4dFB4O1xyXG4gICAgICBjYXNlICdwdCc6XHJcbiAgICAgICAgcmV0dXJuIHZhbHVlICogMS4zMzM7XHJcbiAgICAgIGRlZmF1bHQ6XHJcbiAgICAgICAgcmV0dXJuIHZhbHVlOyAvLyBmYWxsYmFja1xyXG4gICAgfVxyXG4gIH07XHJcblxyXG4gIGNvbnN0IG1hdGNoZXMgPSBbLi4uc2hhZG93Lm1hdGNoQWxsKC8oLT9cXGQqXFwuP1xcZCspKFthLXpBLVolXSopL2cpXTtcclxuICBjb25zdCB2YWx1ZXMgPSBtYXRjaGVzLm1hcCgoW18sIG51bSwgdW5pdF0pID0+IHRvUHgocGFyc2VGbG9hdChudW0pLCB1bml0KSk7XHJcblxyXG4gIGNvbnN0IFtvZmZzZXRYLCBvZmZzZXRZLCBibHVyLCBzcHJlYWRdID0gdmFsdWVzO1xyXG5cclxuICByZXR1cm4ge1xyXG4gICAgaW5zZXQsXHJcbiAgICBvZmZzZXRYOiBvZmZzZXRYID8/IDAsXHJcbiAgICBvZmZzZXRZOiBvZmZzZXRZID8/IDAsXHJcbiAgICBibHVyUmFkaXVzOiBibHVyID8/IDAsXHJcbiAgICBzcHJlYWRSYWRpdXM6IHNwcmVhZCA/PyAwLFxyXG4gICAgY29sb3IsXHJcbiAgfTtcclxufVxyXG5cclxuZXhwb3J0IGZ1bmN0aW9uIHN0cmluZ2lmeUJveFNoYWRvdyhvYmo6IEJveFNoYWRvd1ZhbHVlKTogc3RyaW5nIHtcclxuICBjb25zdCB7IGluc2V0LCBvZmZzZXRYLCBvZmZzZXRZLCBibHVyUmFkaXVzLCBzcHJlYWRSYWRpdXMsIGNvbG9yIH0gPSBvYmo7XHJcblxyXG4gIGNvbnN0IHBhcnRzID0gW2luc2V0ID8gJ2luc2V0JyA6ICcnLCBgJHtvZmZzZXRYfXB4YCwgYCR7b2Zmc2V0WX1weGAsIGAke2JsdXJSYWRpdXN9cHhgLCBgJHtzcHJlYWRSYWRpdXN9cHhgLCBjb2xvcl07XHJcblxyXG4gIHJldHVybiBwYXJ0cy5maWx0ZXIoQm9vbGVhbikuam9pbignICcpLnRyaW0oKTtcclxufVxyXG4iXX0=