solid-color
Version:
<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-color&background=tiles&project=%20" alt="solid-color"> </p>
1,778 lines (1,750 loc) • 128 kB
JavaScript
import { template, insert, effect, style, createComponent, memo, use, delegateEvents, setAttribute, className, mergeProps as mergeProps$1, addEventListener } from 'solid-js/web';
import { mergeProps, onCleanup, createSignal, createEffect, Show, createContext, createMemo, useContext, For } from 'solid-js';
import { merge, each, debounce } from 'lodash-es';
import tinycolor from 'tinycolor2';
const calculateChange$2 = (e, hsl, direction, initialA, container) => {
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;
const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
const left = x - (container.getBoundingClientRect().left + window.pageXOffset);
const top = y - (container.getBoundingClientRect().top + window.pageYOffset);
if (direction === 'vertical') {
let a;
if (top < 0) {
a = 0;
} else if (top > containerHeight) {
a = 1;
} else {
a = Math.round(top * 100 / containerHeight) / 100;
}
if (hsl.a !== a) {
return {
h: hsl.h,
s: hsl.s,
l: hsl.l,
a,
source: 'rgb'
};
}
} else {
let a;
if (left < 0) {
a = 0;
} else if (left > containerWidth) {
a = 1;
} else {
a = Math.round(left * 100 / containerWidth) / 100;
}
if (initialA !== a) {
return {
h: hsl.h,
s: hsl.s,
l: hsl.l,
a,
source: 'rgb'
};
}
}
return null;
};
const checkboardCache = {};
const render = (c1, c2, size, serverCanvas) => {
if (typeof document === 'undefined' && !serverCanvas) {
return null;
}
const canvas = serverCanvas ? new serverCanvas() : document.createElement('canvas');
canvas.width = size * 2;
canvas.height = size * 2;
const ctx = canvas.getContext('2d');
if (!ctx) {
return null;
} // If no context can be found, return early.
ctx.fillStyle = c1;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = c2;
ctx.fillRect(0, 0, size, size);
ctx.translate(size, size);
ctx.fillRect(0, 0, size, size);
return canvas.toDataURL();
};
const get = (c1, c2, size, serverCanvas) => {
const key = `${c1}-${c2}-${size}${serverCanvas ? '-server' : ''}`;
if (checkboardCache[key]) {
return checkboardCache[key];
}
const checkboard = render(c1, c2, size, serverCanvas);
checkboardCache[key] = checkboard;
return checkboard;
};
var _tmpl$$K = /*#__PURE__*/template(`<div>`);
function Checkboard(_props) {
const props = mergeProps({
white: 'transparent',
grey: 'rgba(0,0,0,.08)',
size: 8,
renderers: {}
}, _props);
const styles = () => {
const {
size,
white,
grey,
borderRadius,
boxShadow,
renderers
} = props;
return {
grid: {
'border-radius': borderRadius,
'box-shadow': boxShadow,
position: 'absolute',
inset: '0px',
background: `url(${get(white, grey, size, renderers.canvas)}) center left`
}
};
};
// return isValidElement(children) ? (
// React.cloneElement(children, {
// ...children.props,
// style: { ...children.props.style, ...styles.grid },
// })
// ) : (
// <div style={styles.grid} />
// )
// 判断children是否是一个有效的元素
return props.children ? // clone
(() => {
var _el$ = _tmpl$$K();
insert(_el$, () => props.children);
effect(_$p => style(_el$, styles().grid, _$p));
return _el$;
})() : (() => {
var _el$2 = _tmpl$$K();
effect(_$p => style(_el$2, styles().grid, _$p));
return _el$2;
})();
}
var _tmpl$$J = /*#__PURE__*/template(`<div><div></div><div></div><div><div>`),
_tmpl$2$7 = /*#__PURE__*/template(`<div>`);
const Alpha$1 = _props => {
const props = mergeProps({
direction: 'horizontal',
styles: {}
}, _props);
let container;
const styles = () => {
const {
rgb
} = props;
return merge({
alpha: {
position: 'absolute',
inset: '0px',
'border-radius': props.radius
},
checkboard: {
position: 'absolute',
inset: '0px',
overflow: 'hidden',
'border-radius': props.radius
},
gradient: {
position: 'absolute',
inset: '0px',
background: props.direction === 'vertical' ? `linear-gradient(to bottom, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%,
rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)` : `linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%,
rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`,
'box-shadow': props.shadow,
'border-radius': props.radius
},
container: {
position: 'relative',
height: '100%',
margin: '0 3px'
},
pointer: {
position: 'absolute',
left: props.direction === 'vertical' ? 0 : `${rgb.a && rgb.a * 100}%`,
top: props.direction === 'vertical' ? `${rgb.a && rgb.a * 100}%` : undefined
},
slider: {
width: '4px',
'border-radius': '1px',
height: '8px',
'box-shadow': '0 0 2px rgba(0, 0, 0, .6)',
background: '#fff',
'margin-top': '1px',
transform: 'translateX(-2px)'
}
}, props.styles);
};
const handleChange = e => {
const change = calculateChange$2(e, props.hsl, props.direction, props.a, container);
change && typeof props.onChange === 'function' && props.onChange(change, e);
};
const handleMouseDown = e => {
handleChange(e);
window.addEventListener('mousemove', handleChange);
window.addEventListener('mouseup', handleMouseUp);
};
const handleMouseUp = () => {
unbindEventListeners();
};
const unbindEventListeners = () => {
window.removeEventListener('mousemove', handleChange);
window.removeEventListener('mouseup', handleMouseUp);
};
onCleanup(() => unbindEventListeners());
return (() => {
var _el$ = _tmpl$$J(),
_el$2 = _el$.firstChild,
_el$3 = _el$2.nextSibling,
_el$4 = _el$3.nextSibling,
_el$5 = _el$4.firstChild;
insert(_el$2, createComponent(Checkboard, {
get renderers() {
return props.renderers;
}
}));
_el$4.$$touchstart = handleChange;
_el$4.$$touchmove = handleChange;
_el$4.$$mouseup = handleChange;
_el$4.$$mousedown = handleMouseDown;
var _ref$ = container;
typeof _ref$ === "function" ? use(_ref$, _el$4) : container = _el$4;
insert(_el$5, (() => {
var _c$ = memo(() => !!props.pointer);
return () => _c$() ? createComponent(props.pointer, props) : (() => {
var _el$6 = _tmpl$2$7();
effect(_$p => style(_el$6, styles().slider, _$p));
return _el$6;
})();
})());
effect(_p$ => {
var _v$ = styles().alpha,
_v$2 = styles().checkboard,
_v$3 = styles().gradient,
_v$4 = styles().container,
_v$5 = styles().pointer;
_p$.e = style(_el$, _v$, _p$.e);
_p$.t = style(_el$2, _v$2, _p$.t);
_p$.a = style(_el$3, _v$3, _p$.a);
_p$.o = style(_el$4, _v$4, _p$.o);
_p$.i = style(_el$5, _v$5, _p$.i);
return _p$;
}, {
e: undefined,
t: undefined,
a: undefined,
o: undefined,
i: undefined
});
return _el$;
})();
};
delegateEvents(["mousedown", "mouseup", "touchmove", "touchstart"]);
var _tmpl$$I = /*#__PURE__*/template(`<label>`),
_tmpl$2$6 = /*#__PURE__*/template(`<div><input>`);
function EditableInput(_props) {
const props = mergeProps({
arrowOffset: 1,
hideLabel: false
}, _props);
let inputRef;
const inputId = `sc-editable-input-${Math.random().toString().slice(2, 5)}`;
const [state, setState] = createSignal({
value: String(props.value).toUpperCase(),
blurValue: String(props.value).toUpperCase()
});
const DEFAULT_ARROW_OFFSET = 1;
const UP_KEY_CODE = 38;
const DOWN_KEY_CODE = 40;
const VALID_KEY_CODES = [UP_KEY_CODE, DOWN_KEY_CODE];
const isValidKeyCode = keyCode => VALID_KEY_CODES.indexOf(keyCode) > -1;
const getNumberValue = value => Number(String(value).replace(/%/g, ''));
const getValueObjectWithLabel = value => {
return {
[props.label]: value
};
};
const setUpdatedValue = (value, e) => {
const onChangeValue = props.label ? getValueObjectWithLabel(value) : value;
props.onChange && props.onChange(onChangeValue, e);
setState({
value,
blurValue: value
});
};
const handleBlur = () => {
if (state().blurValue) {
setState({
value: state().blurValue,
blurValue: ''
});
}
};
const handleChange = e => {
setUpdatedValue(e.target.value, e);
};
const handleDrag = e => {
if (props.dragLabel) {
const newValue = Math.round(+props.value + e.movementX);
if (newValue >= 0 && newValue <= props.dragMax) {
props.onChange && props.onChange(getValueObjectWithLabel(String(newValue)), e);
}
}
};
const unbindEventListeners = () => {
window.removeEventListener('mousemove', handleDrag);
window.removeEventListener('mouseup', handleMouseUp);
};
const handleMouseUp = () => {
unbindEventListeners();
};
const handleMouseDown = e => {
if (props.dragLabel) {
e.preventDefault();
handleDrag(e);
window.addEventListener('mousemove', handleDrag);
window.addEventListener('mouseup', handleMouseUp);
}
};
const handleKeyDown = e => {
const value = getNumberValue(e.target.value);
if (!isNaN(value) && isValidKeyCode(e.keyCode)) {
const offset = props.arrowOffset || DEFAULT_ARROW_OFFSET;
const updatedValue = e.keyCode === UP_KEY_CODE ? value + offset : value - offset;
setUpdatedValue(updatedValue, e);
}
};
createEffect(() => {
setState({
value: String(props.value).toUpperCase(),
blurValue: ''
});
});
const styles = () => {
return merge({
wrap: {
position: 'relative'
}
}, props.styles);
};
onCleanup(() => unbindEventListeners());
return (() => {
var _el$ = _tmpl$2$6(),
_el$2 = _el$.firstChild;
_el$2.$$input = handleChange;
_el$2.$$keydown = handleKeyDown;
_el$2.addEventListener("change", handleChange);
_el$2.addEventListener("blur", handleBlur);
var _ref$ = inputRef;
typeof _ref$ === "function" ? use(_ref$, _el$2) : inputRef = _el$2;
setAttribute(_el$2, "id", inputId);
setAttribute(_el$2, "spellcheck", false);
insert(_el$, createComponent(Show, {
get when() {
return props.label && !props.hideLabel;
},
get children() {
var _el$3 = _tmpl$$I();
_el$3.$$mousedown = handleMouseDown;
insert(_el$3, () => props.label);
effect(_$p => style(_el$3, styles().label, _$p));
return _el$3;
}
}), null);
effect(_p$ => {
var _v$ = styles().wrap,
_v$2 = styles().input,
_v$3 = props.placeholder;
_p$.e = style(_el$, _v$, _p$.e);
_p$.t = style(_el$2, _v$2, _p$.t);
_v$3 !== _p$.a && setAttribute(_el$2, "placeholder", _p$.a = _v$3);
return _p$;
}, {
e: undefined,
t: undefined,
a: undefined
});
effect(() => _el$2.value = state().value);
return _el$;
})();
}
delegateEvents(["keydown", "input", "mousedown"]);
var _tmpl$$H = /*#__PURE__*/template(`<div><div></div><div>`);
function Raised(_props) {
const props = mergeProps({
zDepth: 1,
radius: 2,
background: '#fff',
styles: {}
}, _props);
const styles = merge({
wrap: {
position: 'relative',
display: 'inline-block'
},
content: {
position: 'relative'
},
bg: {
position: 'absolute',
inset: '0px',
'box-shadow': props.zDepth === 1 ? '0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)' : `0 ${props.zDepth}px ${props.zDepth * 4}px rgba(0,0,0,.24)`,
'border-radius': props.radius,
background: props.background
}
}, props.styles);
return (() => {
var _el$ = _tmpl$$H(),
_el$2 = _el$.firstChild,
_el$3 = _el$2.nextSibling;
insert(_el$3, () => props.children);
effect(_p$ => {
var _v$ = styles.wrap,
_v$2 = styles.bg,
_v$3 = styles.content;
_p$.e = style(_el$, _v$, _p$.e);
_p$.t = style(_el$2, _v$2, _p$.t);
_p$.a = style(_el$3, _v$3, _p$.a);
return _p$;
}, {
e: undefined,
t: undefined,
a: undefined
});
return _el$;
})();
}
const calculateChange$1 = (e, direction, hsl, container) => {
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;
const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
const left = x - (container.getBoundingClientRect().left + window.pageXOffset);
const top = y - (container.getBoundingClientRect().top + window.pageYOffset);
if (direction === 'vertical') {
let h;
if (top < 0) {
h = 359;
} else if (top > containerHeight) {
h = 0;
} else {
const percent = -(top * 100 / containerHeight) + 100;
h = 360 * percent / 100;
}
if (hsl.h !== h) {
return {
h,
s: hsl.s,
l: hsl.l,
a: hsl.a,
source: 'hsl'
};
}
} else {
let h;
if (left < 0) {
h = 0;
} else if (left > containerWidth) {
h = 359;
} else {
const percent = left * 100 / containerWidth;
h = 360 * percent / 100;
}
if (hsl.h !== h) {
return {
h,
s: hsl.s,
l: hsl.l,
a: hsl.a,
source: 'hsl'
};
}
}
return null;
};
var _tmpl$$G = /*#__PURE__*/template(`<div><div><style>\n .hue-horizontal \{\n background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0\n 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n background: -webkit-linear-gradient(to right, #f00 0%, #ff0\n 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n }\n .hue-vertical \{\n background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,\n #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,\n #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n }\n </style><div>`),
_tmpl$2$5 = /*#__PURE__*/template(`<div>`);
function Hue$1(_props) {
const props = mergeProps({
direction: 'horizontal'
}, _props);
let container;
const styles = () => {
return {
hue: {
position: 'absolute',
inset: '0px',
'border-radius': typeof props.radius === 'string' ? props.radius : `${props.radius}px`,
'box-shadow': props.shadow
},
container: {
padding: '0 2px',
position: 'relative',
height: '100%',
'border-radius': typeof props.radius === 'string' ? props.radius : `${props.radius}px`
},
pointer: {
position: 'absolute',
left: props.direction === 'vertical' ? '0px' : `${props.hsl.h * 100 / 360}%`,
top: props.direction === 'vertical' ? `${-(props.hsl.h * 100 / 360) + 100}%` : undefined
},
slider: {
'margin-top': '1px',
width: '4px',
'border-radius': '1px',
height: '8px',
'box-shadow': '0 0 2px rgba(0, 0, 0, .6)',
background: '#fff',
transform: 'translateX(-2px)'
}
};
};
const handleChange = e => {
const change = calculateChange$1(e, props.direction, props.hsl, container);
change && typeof props.onChange === 'function' && props.onChange(change, e);
};
const unbindEventListeners = () => {
window.removeEventListener('mousemove', handleChange);
window.removeEventListener('mouseup', handleMouseUp);
};
const handleMouseUp = () => {
unbindEventListeners();
};
const handleMouseDown = e => {
handleChange(e);
window.addEventListener('mousemove', handleChange);
window.addEventListener('mouseup', handleMouseUp);
};
onCleanup(() => unbindEventListeners());
return (() => {
var _el$ = _tmpl$$G(),
_el$2 = _el$.firstChild,
_el$3 = _el$2.firstChild,
_el$4 = _el$3.nextSibling;
_el$2.$$mousedown = handleMouseDown;
var _ref$ = container;
typeof _ref$ === "function" ? use(_ref$, _el$2) : container = _el$2;
insert(_el$4, (() => {
var _c$ = memo(() => !!props.pointer);
return () => _c$() ? createComponent(props.pointer, props) : (() => {
var _el$5 = _tmpl$2$5();
effect(_$p => style(_el$5, styles().slider, _$p));
return _el$5;
})();
})());
effect(_p$ => {
var _v$ = styles().hue,
_v$2 = `hue-${props.direction}`,
_v$3 = styles().container,
_v$4 = styles().pointer;
_p$.e = style(_el$, _v$, _p$.e);
_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
_p$.a = style(_el$2, _v$3, _p$.a);
_p$.o = style(_el$4, _v$4, _p$.o);
return _p$;
}, {
e: undefined,
t: undefined,
a: undefined,
o: undefined
});
return _el$;
})();
}
delegateEvents(["mousedown"]);
const simpleCheckForValidColor = data => {
const keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];
let checked = 0;
let passed = 0;
each(keysToCheck, letter => {
if (data[letter]) {
checked += 1;
if (!isNaN(data[letter])) {
passed += 1;
}
if (letter === 's' || letter === 'l') {
const percentPatt = /^\d+%$/;
if (percentPatt.test(data[letter])) {
passed += 1;
}
}
}
});
return checked === passed ? data : false;
};
const toState = (data, oldHue) => {
const color = data.hex ? tinycolor(data.hex) : tinycolor(data);
const hsl = color.toHsl();
const hsv = color.toHsv();
const rgb = color.toRgb();
const hex = color.toHex();
if (hsl.s === 0) {
hsl.h = oldHue || 0;
hsv.h = oldHue || 0;
}
const transparent = hex === '000000' && rgb.a === 0;
return {
hsl,
hex: transparent ? 'transparent' : `#${hex}`,
rgb,
hsv,
oldHue: data.h || oldHue || hsl.h,
source: data.source
};
};
const isValidHex = hex => {
if (hex === 'transparent') {
return true;
}
// disable hex4 and hex8
const lh = String(hex).charAt(0) === '#' ? 1 : 0;
return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid();
};
const getContrastingColor = data => {
if (!data) {
return '#fff';
}
const col = toState(data);
if (col.hex === 'transparent') {
return 'rgba(0,0,0,0.4)';
}
const yiq = (col.rgb.r * 299 + col.rgb.g * 587 + col.rgb.b * 114) / 1000;
return yiq >= 128 ? '#000' : '#fff';
};
const isvalidColorString = (str, type) => {
const stringWithoutDegree = str.replace('°', '');
return tinycolor(`${type} (${stringWithoutDegree})`).isValid();
};
const ColorPickerContext = createContext(undefined);
function ColorPickerProvider(_props) {
const props = mergeProps({
defaultColor: {
h: 250,
s: 0.5,
l: 0.2,
a: 1
}
}, _props);
const [colors, setColors] = createSignal({
...toState(props.color ?? props.defaultColor, 0)
});
createEffect(() => {
if (props.color) {
setColors({
...toState(props.color, 0)
});
}
});
const handler = (fn, data, event) => fn(data, event);
const debouncedChangeHandler = createMemo(() => debounce(handler, 100), []);
const changeColor = (newColor, event) => {
const isValidColor = simpleCheckForValidColor(newColor);
if (isValidColor) {
const newColors = toState(newColor, (typeof newColor !== 'string' && 'h' in newColor ? newColor.h : undefined) || colors().oldHue);
setColors(newColors);
props.onChangeComplete && debouncedChangeHandler()(props.onChangeComplete, newColors, event);
props.onChange && props.onChange(newColors, event);
}
};
const handleSwatchHover = (data, event) => {
const isValidColor = simpleCheckForValidColor(data);
if (isValidColor) {
const newColors = toState(data, (typeof data !== 'string' && 'h' in data ? data.h : undefined) || colors().oldHue);
props.onSwatchHover && props.onSwatchHover(newColors, event);
}
};
const store = {
colors,
changeColor,
onSwatchHover: props.onSwatchHover ? handleSwatchHover : undefined
};
return createComponent(ColorPickerContext.Provider, {
value: store,
get children() {
return props.children;
}
});
}
function useColorPicker() {
return useContext(ColorPickerContext);
}
function withColorPicker(Component) {
return props => createComponent(ColorPickerProvider, mergeProps$1(props, {
get children() {
return createComponent(Component, props);
}
}));
}
var _tmpl$$F = /*#__PURE__*/template(`<div tabindex=0>`);
const ENTER = 13;
function Swatch(_props) {
const props = mergeProps({
onClick: () => {},
title: _props.color,
focusStyle: {}
}, _props);
const {
onSwatchHover
} = useColorPicker();
const transparent = props.color === 'transparent';
const [focused, setFocused] = createSignal(false);
const handleFocus = () => setFocused(true);
const handleBlur = () => setFocused(false);
const handleClick = e => {
props.onClick(props.color, e);
handleFocus();
};
const handleKeyDown = e => e.keyCode === ENTER && props.onClick(props.color, e);
const styles = () => {
return {
swatch: {
background: props.color,
height: '100%',
width: '100%',
cursor: 'pointer',
position: 'relative',
outline: 'none',
...props.styles,
...(focused() ? props.focusStyle : {})
}
};
};
return (() => {
var _el$ = _tmpl$$F();
_el$.$$mouseover = event => {
onSwatchHover && onSwatchHover(props.color, event);
};
_el$.addEventListener("blur", handleBlur);
_el$.$$keydown = handleKeyDown;
_el$.$$click = handleClick;
insert(_el$, () => props.children, null);
insert(_el$, transparent && createComponent(Checkboard, {
get borderRadius() {
return styles().swatch.borderRadius;
},
boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)"
}), null);
effect(_p$ => {
var _v$ = styles().swatch,
_v$2 = props.title;
_p$.e = style(_el$, _v$, _p$.e);
_v$2 !== _p$.t && setAttribute(_el$, "title", _p$.t = _v$2);
return _p$;
}, {
e: undefined,
t: undefined
});
return _el$;
})();
}
delegateEvents(["click", "keydown", "mouseover"]);
function calculateChange(e, hsl, container) {
const {
width: containerWidth,
height: containerHeight
} = container.getBoundingClientRect();
const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
let left = x - (container.getBoundingClientRect().left + window.pageXOffset);
let top = y - (container.getBoundingClientRect().top + window.pageYOffset);
if (left < 0) {
left = 0;
} else if (left > containerWidth) {
left = containerWidth;
}
if (top < 0) {
top = 0;
} else if (top > containerHeight) {
top = containerHeight;
}
const saturation = left / containerWidth;
const bright = 1 - top / containerHeight;
return {
h: hsl.h,
s: saturation,
v: bright,
a: hsl.a,
source: 'hsv'
};
}
var _tmpl$$E = /*#__PURE__*/template(`<div><style>\n .saturation-white \{\n background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));\n background: linear-gradient(to right, #fff, rgba(255,255,255,0));\n }\n .saturation-black \{\n background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));\n background: linear-gradient(to top, #000, rgba(0,0,0,0));\n }\n </style><div class=saturation-white><div class=saturation-black></div><div>`),
_tmpl$2$4 = /*#__PURE__*/template(`<div>`);
function Saturation(_props) {
const props = mergeProps({
styles: {}
}, _props);
let container;
createEffect(() => {
return () => {
unbindEventListeners();
};
}, []);
function handleChange(event) {
if (props.onChange) {
props.onChange(calculateChange(event, props.hsl, container), event);
}
}
function handleMouseDown(event) {
handleChange(event);
if (container) {
container.addEventListener('mousemove', handleChange);
container.addEventListener('mouseup', handleMouseUp);
}
}
function handleMouseUp() {
unbindEventListeners();
}
function unbindEventListeners() {
if (container) {
container.removeEventListener('mousemove', handleChange);
container.removeEventListener('mouseup', handleMouseUp);
}
}
const styles = () => {
const {
hsv,
hsl,
shadow,
radius,
styles
} = props;
return merge({
color: {
position: 'absolute',
inset: '0px',
background: `hsl(${hsl.h},100%, 50%)`,
'border-radius': radius
},
white: {
position: 'absolute',
inset: '0px',
'border-radius': radius
},
black: {
position: 'absolute',
inset: '0px',
boxShadow: shadow,
'border-radius': radius
},
pointer: {
position: 'absolute',
top: `${-(hsv.v * 100) + 100}%`,
left: `${hsv.s * 100}%`,
cursor: 'default'
},
circle: {
width: '4px',
height: '4px',
'box-shadow': `0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
0 0 1px 2px rgba(0,0,0,.4)`,
'border-radius': '50%',
cursor: 'hand',
transform: 'translate(-2px, -2px)'
}
}, styles);
};
return (() => {
var _el$ = _tmpl$$E(),
_el$2 = _el$.firstChild,
_el$3 = _el$2.nextSibling,
_el$4 = _el$3.firstChild,
_el$5 = _el$4.nextSibling;
_el$.$$touchstart = handleChange;
_el$.$$touchmove = handleChange;
_el$.$$mousedown = handleMouseDown;
var _ref$ = container;
typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
insert(_el$5, (() => {
var _c$ = memo(() => !!props.pointer);
return () => _c$() ? props.pointer : (() => {
var _el$6 = _tmpl$2$4();
effect(_$p => style(_el$6, styles().circle, _$p));
return _el$6;
})();
})());
effect(_p$ => {
var _v$ = styles().color,
_v$2 = styles().white,
_v$3 = styles().black,
_v$4 = styles().pointer;
_p$.e = style(_el$, _v$, _p$.e);
_p$.t = style(_el$3, _v$2, _p$.t);
_p$.a = style(_el$4, _v$3, _p$.a);
_p$.o = style(_el$5, _v$4, _p$.o);
return _p$;
}, {
e: undefined,
t: undefined,
a: undefined,
o: undefined
});
return _el$;
})();
}
delegateEvents(["mousedown", "touchmove", "touchstart"]);
var _tmpl$$D = /*#__PURE__*/template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-width=0.5><path d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z>`),
_tmpl$2$3 = /*#__PURE__*/template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-width=0.5><path d=M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z>`);
function CheckIcon(_props) {
const props = mergeProps({
width: 24,
height: 24,
fill: 'white',
stroke: 'white'
}, _props);
return (() => {
var _el$ = _tmpl$$D();
effect(_p$ => {
var _v$ = `${props.width}px`,
_v$2 = `${props.height}px`,
_v$3 = props.fill,
_v$4 = props.stroke;
_v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
_v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
_v$3 !== _p$.a && setAttribute(_el$, "fill", _p$.a = _v$3);
_v$4 !== _p$.o && setAttribute(_el$, "stroke", _p$.o = _v$4);
return _p$;
}, {
e: undefined,
t: undefined,
a: undefined,
o: undefined
});
return _el$;
})();
}
function UnfoldMoreHorizontalIcon(_props) {
const props = mergeProps({
width: 24,
height: 24
}, _props);
return (() => {
var _el$2 = _tmpl$2$3();
addEventListener(_el$2, "mouseout", props.onMouseOut, true);
addEventListener(_el$2, "mouseenter", props.onMouseEnter);
addEventListener(_el$2, "mouseover", props.onMouseOver, true);
_el$2.style.setProperty("border-radius", "5px");
effect(_p$ => {
var _v$5 = `${props.width}px`,
_v$6 = `${props.height}px`;
_v$5 !== _p$.e && setAttribute(_el$2, "width", _p$.e = _v$5);
_v$6 !== _p$.t && setAttribute(_el$2, "height", _p$.t = _v$6);
return _p$;
}, {
e: undefined,
t: undefined
});
return _el$2;
})();
}
delegateEvents(["mouseover", "mouseout"]);
var _tmpl$$C = /*#__PURE__*/template(`<div>`);
function AlphaPointer(_props) {
const props = mergeProps({}, _props);
const styles = {
picker: {
width: '18px',
height: '18px',
'border-radius': '50%',
transform: props.direction === 'vertical' ? 'translate(-3px, -9px)' : 'translate(-9px, -1px)',
'background-color': 'rgb(248, 248, 248)',
'box-shadow': '0 1px 4px 0 rgba(0, 0, 0, 0.37)'
}
};
return (() => {
var _el$ = _tmpl$$C();
effect(_$p => style(_el$, styles.picker, _$p));
return _el$;
})();
}
var _tmpl$$B = /*#__PURE__*/template(`<div>`);
function AlphaPicker(_props) {
const props = mergeProps({
width: '316px',
height: '16px',
direction: 'horizontal',
pointer: AlphaPointer,
className: ''
}, _props);
const {
colors: currentColors,
changeColor
} = useColorPicker();
const styles = {
picker: {
position: 'relative',
width: props.width,
height: props.height
},
alpha: {
borderRadius: '2px',
...props.style
}
};
return (() => {
var _el$ = _tmpl$$B();
insert(_el$, createComponent(Alpha$1, mergeProps$1(() => styles.alpha, {
get rgb() {
return currentColors().rgb;
},
get hsl() {
return currentColors().hsl;
},
get pointer() {
return props.pointer;
},
get renderers() {
return props.renderers;
},
onChange: changeColor,
get direction() {
return props.direction;
}
})));
effect(_p$ => {
var _v$ = styles.picker,
_v$2 = `alpha-picker ${props.className}`;
_p$.e = style(_el$, _v$, _p$.e);
_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
return _p$;
}, {
e: undefined,
t: undefined
});
return _el$;
})();
}
var Alpha = withColorPicker(AlphaPicker);
var _tmpl$$A = /*#__PURE__*/template(`<div><div class=flexbox-fix><div></div><div></div><div>`);
function Material(_props) {
const props = mergeProps({
styles: {},
className: ''
}, _props);
const {
colors,
changeColor
} = useColorPicker();
const styles = () => {
return merge({
material: {
width: '98px',
height: '98px',
padding: '16px',
'font-family': 'Roboto'
},
hexWrap: {
position: 'relative'
},
hexInput: {
width: '100%',
'margin-top': '12px',
'font-size': '15px',
color: '#333',
padding: '0px',
border: '0px',
'border-bottom': `2px solid ${colors().hex}`,
outline: 'none',
height: '30px'
},
hexLabel: {
position: 'absolute',
top: '0px',
left: '0px',
'font-size': '11px',
color: '#999999',
'text-transform': 'capitalize'
},
hex: {},
rgbWrap: {
position: 'relative'
},
rgbInput: {
width: '100%',
'margin-top': '12px',
'font-size': '15px',
color: '#333',
padding: '0px',
border: '0px',
'border-bottom': '1px solid #eee',
outline: 'none',
height: '30px'
},
rgbLabel: {
position: 'absolute',
top: '0px',
left: '0px',
'font-size': '11px',
color: '#999999',
'text-transform': 'capitalize'
},
split: {
display: 'flex',
'margin-right': '-10px',
'padding-top': '11px'
},
third: {
flex: '1',
'padding-right': '10px'
}
}, props.styles);
};
const handleChange = (data, e) => {
if (typeof data !== 'string' && 'hex' in data) {
isValidHex(data.hex) && changeColor({
hex: data.hex,
source: 'hex'
}, e);
} else if (typeof data !== 'string' && ('r' in data || 'g' in data || 'b' in data)) {
data = data;
changeColor({
r: data.r || colors().rgb.r,
g: data.g || colors().rgb.g,
b: data.b || colors().rgb.b,
source: 'rgb'
}, e);
}
};
return createComponent(Raised, {
get styles() {
return props.styles;
},
get children() {
var _el$ = _tmpl$$A(),
_el$2 = _el$.firstChild,
_el$3 = _el$2.firstChild,
_el$4 = _el$3.nextSibling,
_el$5 = _el$4.nextSibling;
insert(_el$, createComponent(EditableInput, {
get styles() {
return {
wrap: styles().hexWrap,
input: styles().hexInput,
label: styles().hexLabel
};
},
label: "hex",
get value() {
return colors().hex;
},
onChange: handleChange
}), _el$2);
insert(_el$3, createComponent(EditableInput, {
get styles() {
return {
wrap: styles().rgbWrap,
input: styles().rgbInput,
label: styles().rgbLabel
};
},
label: "r",
get value() {
return colors().rgb.r;
},
onChange: handleChange
}));
insert(_el$4, createComponent(EditableInput, {
get styles() {
return {
wrap: styles().rgbWrap,
input: styles().rgbInput,
label: styles().rgbLabel
};
},
label: "g",
get value() {
return colors().rgb.g;
}
}));
insert(_el$5, createComponent(EditableInput, {
get styles() {
return {
wrap: styles().rgbWrap,
input: styles().rgbInput,
label: styles().rgbLabel
};
},
label: "b",
get value() {
return colors().rgb.b;
},
onChange: handleChange
}));
effect(_p$ => {
var _v$ = styles().material,
_v$2 = `material-picker ${props.className}`,
_v$3 = styles().split,
_v$4 = styles().third,
_v$5 = styles().third,
_v$6 = styles().third;
_p$.e = style(_el$, _v$, _p$.e);
_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
_p$.a = style(_el$2, _v$3, _p$.a);
_p$.o = style(_el$3, _v$4, _p$.o);
_p$.i = style(_el$4, _v$5, _p$.i);
_p$.n = style(_el$5, _v$6, _p$.n);
return _p$;
}, {
e: undefined,
t: undefined,
a: undefined,
o: undefined,
i: undefined,
n: undefined
});
return _el$;
}
});
}
var Material$1 = withColorPicker(Material);
var _tmpl$$z = /*#__PURE__*/template(`<div>`);
function SliderPointer$1({
direction
}) {
const styles = {
picker: {
width: '18px',
height: '18px',
'border-radius': '50%',
transform: direction === 'vertical' ? 'translate(-3px, -9px)' : 'translate(-9px, -1px)',
'background-color': 'rgb(248, 248, 248)',
'box-shadow': '0 1px 4px 0 rgba(0, 0, 0, 0.37)'
}
};
return (() => {
var _el$ = _tmpl$$z();
effect(_$p => style(_el$, styles.picker, _$p));
return _el$;
})();
}
var _tmpl$$y = /*#__PURE__*/template(`<div>`);
function HuePicker(_props) {
const props = mergeProps({
width: '316px',
height: '16px',
direction: 'horizontal',
pointer: SliderPointer$1,
styles: {},
className: ''
}, _props);
const {
colors,
changeColor
} = useColorPicker();
const styles = merge({
picker: {
position: 'relative',
width: props.width,
height: props.height
},
hue: {
'border-radius': '2px'
}
}, props.styles);
// Overwrite to provide pure hue color
const handleChange = data => changeColor({
a: 1,
h: typeof data !== 'string' && 'h' in data ? data.h : 0,
l: 0.5,
s: 1
});
return (() => {
var _el$ = _tmpl$$y();
insert(_el$, createComponent(Hue$1, mergeProps$1(() => styles.hue, {
get hsl() {
return colors().hsl;
},
get pointer() {
return props.pointer;
},
get direction() {
return props.direction;
},
onChange: handleChange
})));
effect(_p$ => {
var _v$ = styles.picker,
_v$2 = `hue-picker ${props.className}`;
_p$.e = style(_el$, _v$, _p$.e);
_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
return _p$;
}, {
e: undefined,
t: undefined
});
return _el$;
})();
}
var Hue = withColorPicker(HuePicker);
var _tmpl$$x = /*#__PURE__*/template(`<div><div></div><div></div><div><div>#</div><div>`);
const Twitter = _props => {
const props = mergeProps({
colors: ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF'],
width: 276,
triangle: 'top-left',
styles: {},
className: ''
}, _props);
const {
colors: currentColors,
changeColor
} = useColorPicker();
const styles = () => {
const width = typeof props.width === 'number' ? `${props.width}px` : props.width;
const {
triangle
} = props;
return merge({
card: {
width,
background: '#fff',
border: '0 solid rgba(0,0,0,0.25)',
'box-shadow': '0 1px 4px rgba(0,0,0,0.25)',
'border-radius': '4px',
position: 'relative'
},
body: {
padding: '15px 9px 9px 15px'
},
label: {
'font-size': '18px',
color: '#fff'
},
triangle: {
width: '0px',
height: '0px',
'border-style': 'solid',
'border-width': '0 9px 10px 9px',
'border-color': 'transparent transparent #fff transparent',
position: 'absolute',
display: triangle === 'hide' ? 'none' : undefined,
top: triangle === 'top-left' || triangle === 'top-right' ? '-10px' : undefined,
left: triangle === 'top-left' || triangle === 'top-right' ? '12px' : undefined
},
triangleShadow: {
width: '0px',
height: '0px',
'border-style': 'solid',
'border-width': '0 9px 10px 9px',
'border-color': 'transparent transparent rgba(0,0,0,.1) transparent',
position: 'absolute',
display: triangle === 'hide' ? 'none' : undefined,
top: triangle === 'top-left' || triangle === 'top-right' ? '-11px' : undefined,
left: triangle === 'top-left' || triangle === 'top-right' ? '12px' : undefined
},
hash: {
background: '#F0F0F0',
height: '30px',
width: '30px',
'border-radius': '4px 0 0 4px',
float: 'left',
color: '#98A1A4',
display: 'flex',
'align-items': 'center',
'justify-content': 'center'
},
input: {
width: '100px',
'font-size': '14px',
color: '#666',
border: '0px',
outline: 'none',
height: '28px',
'box-shadow': 'inset 0 0 0 1px #F0F0F0',
'box-sizing': 'content-box',
'border-radius': '0 4px 4px 0',
float: 'left',
'padding-left': '8px'
},
swatch: {
width: '30px',
height: '30px',
float: 'left',
'border-radius': '4px',
margin: '0 6px 6px 0'
},
clear: {
clear: 'both'
}
}, props.styles);
};
const handleChange = (hexcode, e) => {
isValidHex(hexcode) && changeColor({
hex: hexcode,
source: 'hex'
}, e);
};
return (() => {
var _el$ = _tmpl$$x(),
_el$2 = _el$.firstChild,
_el$3 = _el$2.nextSibling,
_el$4 = _el$3.nextSibling,
_el$5 = _el$4.firstChild,
_el$6 = _el$5.nextSibling;
insert(_el$4, createComponent(For, {
get each() {
return props.colors;
},
children: c => createComponent(Swatch, {
color: c,
get styles() {
return styles().swatch;
},
onClick: handleChange,
focusStyle: {
'box-shadow': `0 0 4px ${c}`
}
})
}), _el$5);
insert(_el$4, createComponent(EditableInput, {
label: '',
get styles() {
return {
input: styles().input
};
},
get value() {
return currentColors().hex.replace('#', '');
},
onChange: handleChange
}), _el$6);
effect(_p$ => {
var _v$ = styles().card,
_v$2 = `twitter-picker ${props.className}`,
_v$3 = styles().triangleShadow,
_v$4 = styles().triangle,
_v$5 = styles().body,
_v$6 = styles().hash,
_v$7 = styles().clear;
_p$.e = style(_el$, _v$, _p$.e);
_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
_p$.a = style(_el$2, _v$3, _p$.a);
_p$.o = style(_el$3, _v$4, _p$.o);
_p$.i = style(_el$4, _v$5, _p$.i);
_p$.n = style(_el$5, _v$6, _p$.n);
_p$.s = style(_el$6, _v$7, _p$.s);
return _p$;
}, {
e: undefined,
t: undefined,
a: undefined,
o: undefined,
i: undefined,
n: undefined,
s: undefined
});
return _el$;
})();
};
var Twitter$1 = withColorPicker(Twitter);
var _tmpl$$w = /*#__PURE__*/template(`<div><div>`);
const BlockSwatches = ({
colors,
onClick
}) => {
const styles = {
swatches: {
'margin-right': '-10px'
},
swatch: {
width: '22px',
height: '22px',
float: 'left',
'margin-right': '10px',
'margin-bottom': '10px',
'border-radius': '4px'
},
clear: {
clear: 'both'
}
};
return (() => {
var _el$ = _tmpl$$w(),
_el$2 = _el$.firstChild;
insert(_el$, createComponent(For, {
each: colors,
children: c => createComponent(Swatch, {
color: c,
get styles() {
return styles.swatch;
},
onClick: onClick,
focusStyle: {
'box-shadow': `0 0 4px ${c}`
}
})
}), _el$2);
effect(_p$ => {
var _v$ = styles.swatches,
_v$2 = styles.clear;
_p$.e = style(_el$, _v$, _p$.e);
_p$.t = style(_el$2, _v$2, _p$.t);
return _p$;
}, {
e: undefined,
t: undefined
});
return _el$;
})();
};
var _tmpl$$v = /*#__PURE__*/template(`<div><div></div><div><div></div></div><div>`);
const Block = _props => {
const props = mergeProps({
colors: ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8'],
width: 170,
triangle: 'top',
styles: {},
className: ''
}, _props);
const {
colors: currentColors,
changeColor
} = useColorPicker();
const transparent = currentColors().hex === 'transparent';
const handleChange = (hexCode, e) => {
isValidHex(hexCode) && changeColor({
hex: hexCode,
source: 'hex'
}, e);
};
const styles = () => {
const width = typeof props.width === 'number' ? `${props.width}px` : props.width;
const {
triangle,
styles
} = props;
return merge({
card: {
width,
background: '#fff',
'box-shadow': '0 1px rgba(0,0,0,.1)',
'border-radius': '6px',
position: 'relative'
},
head: {
height: '110px',
background: currentColors().hex,
'border-radius': '6px 6px 0 0',
display: 'flex',
'align-items': 'center',
'justify-content': 'center',
position: 'relative'
},
body: {
padding: '10px'
},
label: {
'font-size': '18px',
color: getContrastingColor(currentColors().hex),
position: 'relative'
},
triangle: {
width: '0px',
height: '0px',
'border-style': 'solid',
'border-width': '0 10px 10px 10px',
'border-color': `transparent transparent ${currentColors().hex} transparent`,
position: 'absolute',
top: '-10px',
left: '50%',
'margin-left': '-10px',
display: triangle === 'hide' ? 'none' : undefined
},
input: {
width: '100%',
'font-size': '12px',
color: '#666',
border: '0px',
outline: 'none',
height: '22px',
'box-shadow': 'inset 0 0 0 1px #ddd',
'border-radius': '4px',
padding: '0 7px',
'box-sizing': 'border-box'
}
}, styles);
};
return (() => {
var _el$ = _tmpl$$v(),
_el$2 = _el$.firstChild,
_el$3 = _el$2.nextSibling,
_el$4 = _el$3.firstChild,
_el$5 = _el$3.nextSibling;
insert(_el$3, transparent && createComponent(Checkboard, {
borderRadius: "6px 6px 0 0"
}), _el$4);
insert(_el$4, () => currentColors().hex);
insert(_el$5, createComponent(BlockSwatches, {
get colors() {
return props.colors;
},
onClick: handleChange
}), null);
insert(_el$5, createComponent(EditableInput, {
get styles() {
return {
input: styles().input
};
},
get value() {
return currentColors().hex;
},
onChange: handleChange
}), null);
effect(_p$ => {
var _v$ = styles().card,
_v$2 = `block-picker ${props.className}`,
_v$3 = styles().triangle,
_v$4 = styles().head,
_v$5 = styles().label,
_v$6 = styles().body;
_p$.e = style(_el$, _v$, _p$.e);
_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
_p$.a = style(_el$2, _v$3, _p$.a);
_p$.o = style(_el$3, _v$4, _p$.o);
_p$.i = style(_el$4, _v$5, _p$.i);
_p$.n = style(_el$5, _v$6, _p$.n);
return _p$;
}, {
e: undefined,
t: undefined,
a: undefined,
o: undefined,
i: undefined,
n: undefined
});
return _el$;
})();
};
var Block$1 = withColorPicker(Block);
var _tmpl$$u = /*#__PURE__*/template(`<div>`);
function SliderPointer() {
const styles = {
picker: {
width: '14px',
height: '14px',
'border-radius': '6px',
transform: 'translate(-7px, -1px)',
'background-color': 'rgb(248, 248, 248)',
'box-shadow': '0 1px 4px 0 rgba(0, 0, 0, 0.37)'
}
};
return (() => {
var _el$ = _tmpl$$u();
effect(_$p => style(_el$, styles.picker, _$p));
return _el$;
})();
}
var _tmpl$$t = /*#__PURE__*/template(`<div>`);
function SliderSwatch(_props) {
const props = mergeProps({
onClick: () => {}
}, _props);
const styles = () => {
const {
hsl,
offset,
active,
first,
last
} = props;
return {
swatch: {
height: '12px',
background: `hsl(${hsl.h}, 50%, ${offset * 100}%)`,
cursor: 'pointer',
'border-radius': active ? '3.6px/2px' : first ? '2px 0 0 2px' : last ? '0 2px 2px 0' : undefined,
transform: active ? 'scaleY(1.8)' : undefined
}
};
};
const handleClick = e => {
props.onClick({
h: props.hsl.h,
s: 0.5,
l: props.offset,
source: 'hsl'
}, e);
};
return (() => {
var _el$ = _tmpl$$t();
_el$.$$click = handleClick;
effect(_$p => style(_el$, styles().swatch, _$p));
return _el$;
})();
}
delegateEvents(["click"]);
var _tmpl$$s = /*#__PURE__*/template(`<div><div></div><div></div><div></div><div></div><div></div><div>`);
function SliderSwatches(_props) {
const props = mergeProps({}, _props);
const styles = {
swatches: {
'margin-top': '20px'
},
swatch: {
'box-sizing': 'border-box',
width: '20%',
'padding-right': '1px',
float: 'left'
},
clear: {
clear: 'both'
}
};
// Acceptible difference in floating point equality
const epsilon = 0.1;
return (() => {
var _el$ = _tmpl$$s(),
_el$2 = _el$.firstChild,
_el$3 = _el$2.nextSibling,
_el$4 = _el$3.nextSibling,
_el$5 = _el$4.nextSibling,
_el$6 = _el$5.nextSibling,
_el$7 = _el$6.nextSibling;
insert(_el$2, createComponent(SliderSwatch, {
get hsl() {
return props.hsl;
},
offset: 0.8,
get active() {
return memo(() => Math.abs(props.hsl.l - 0.8) < epsilon)() && Math.abs(props.hsl.s - 0.5) < epsilon;
},
get onClick() {
return props.onClick;
},
first: true
}));
insert(_el$3, createComponent(SliderSwatch, {
get hsl() {
return props.hsl;
},
offset: 0.65,
get active() {
return memo(() => Math.abs(props.hsl.l - 0.65) < epsilon)() && Math.abs(props.hsl.s - 0.5) < epsilon;
},
get onClick() {
return props.onClick;
}
}));
insert(_el$4, createComponent(SliderSwatch, {
get hsl() {
return props.hsl;
},
offset: 0.5,
get active() {
return memo(() => Math.abs(props.hsl.l - 0.5) < epsilon)() && Math.abs(props.hsl.s - 0.5) < epsilon;
},
get onClick() {
return props.onClick;
}
}));
insert(_el$5, createComponent(SliderSwatch, {
get hsl() {
return props.hsl;
},
offset: 0.35,
get active() {
r