@melloware/coloris
Advanced tools
Comparing version 0.18.0 to 0.19.0
@@ -6,4 +6,9 @@ /** | ||
declare global { | ||
interface GlobalEventHandlersEventMap { | ||
"coloris:pick": CustomEvent<Coloris.PickEventData>; | ||
} | ||
} | ||
declare namespace Coloris { | ||
/** | ||
@@ -44,2 +49,10 @@ * All color themes supported by the color picker. More themes might be added | ||
/** | ||
* A function that is called whenever a new color is picked. | ||
* | ||
* @param color The newly selected color, as a CSS color string. | ||
* @since 0.18.0 | ||
*/ | ||
type OnChangeCallback = (color: string) => void; | ||
interface Accessibility { | ||
@@ -57,2 +70,7 @@ /** | ||
/** | ||
* @default "Clear the selected color" | ||
*/ | ||
clear: string; | ||
/** | ||
* @default "Saturation: {s}. Brightness: {v}." | ||
@@ -95,2 +113,3 @@ */ | ||
* Configuration for the optional clear button on the color picker. | ||
* @deprecated Use the `clearLabel` setting to specify the label. | ||
*/ | ||
@@ -111,2 +130,3 @@ interface ClearButtonOptions { | ||
* Configuration for the optional close button on the color picker. | ||
* @deprecated Use the `closeLabel` setting to specify the label. | ||
*/ | ||
@@ -125,9 +145,14 @@ interface CloseButtonOptions { | ||
interface ColorisOptions { | ||
interface PickEventData { | ||
/** | ||
* A custom CSS selector to bind the color picker to. This must point to | ||
* one or more {@link HTMLInputElement}s. | ||
* The newly selected color which was picked. | ||
*/ | ||
el: string; | ||
color: string; | ||
} | ||
/** | ||
* Settings that can be configured for each color picker instance separately. | ||
* @since 0.15.0 | ||
*/ | ||
interface ColorisVirtualInstanceOptions { | ||
/** | ||
@@ -145,25 +170,4 @@ * CSS selector for the parent. | ||
parent?: null | string; | ||
/** | ||
* The bound input fields are wrapped in a div that adds a thumbnail | ||
* showing the current color and a button to open the color picker (for | ||
* accessibility only). | ||
* | ||
* If you wish to keep your fields unaltered, set this to `false`, in which | ||
* case you will lose the color thumbnail and the accessible button (not | ||
* recommended). | ||
* | ||
* @default true | ||
*/ | ||
wrap?: boolean; | ||
// Set to true to activate basic right-to-left support. | ||
/** | ||
* Set to true to activate basic right-to-left support. | ||
* | ||
* @default false | ||
*/ | ||
rtl?: boolean; | ||
/** | ||
* The color theme to use for the color picker. More themes might be added | ||
@@ -175,3 +179,3 @@ * in the future. Available themes: default, large, polaroid. | ||
theme?: Theme; | ||
/** | ||
@@ -186,3 +190,3 @@ * Set the theme to light or dark mode: | ||
themeMode?: ThemeMode, | ||
/** | ||
@@ -195,3 +199,3 @@ * The margin in pixels between the input fields and the color picker's | ||
margin?: number; | ||
/** | ||
@@ -204,3 +208,3 @@ * Sets the preferred color string format. The format affects which value is | ||
format?: ColorFormat; | ||
/** | ||
@@ -214,3 +218,3 @@ * Set to true to enable format toggle buttons in the color picker dialog. | ||
formatToggle?: boolean; | ||
/** | ||
@@ -222,3 +226,3 @@ * Focus the color value input when the color picker dialog is opened. | ||
focusInput?: boolean; | ||
/** | ||
@@ -230,3 +234,3 @@ * Select and focus the color value input when the color picker dialog is opened. | ||
selectInput?: boolean; | ||
/** | ||
@@ -238,3 +242,3 @@ * Set to true to hide all the color picker widgets (spectrum, hue, ...) except the swatches. | ||
swatchesOnly?: boolean; | ||
/** | ||
@@ -249,3 +253,3 @@ * Enable or disable alpha support. | ||
alpha?: boolean; | ||
/** | ||
@@ -257,20 +261,39 @@ * Set to true to always include the alpha value in the color value even if the opacity is 100%. | ||
forceAlpha?: boolean, | ||
/** | ||
* Shows a clear button and set its label. By default, no clear button is | ||
* shown. | ||
* Whether to show an optional clear button. Use `clearLabel` to set the label. | ||
* | ||
* Note that this should be a boolean, a `ClearButtonOptions` object is still | ||
* supported for backwards compatibility, but it is deprecated. | ||
* | ||
* @default undefined | ||
* @default false | ||
*/ | ||
clearButton?: ClearButtonOptions; | ||
clearButton?: boolean | ClearButtonOptions; | ||
/** | ||
* Shows a close button and set its label. By default, no close button is | ||
* shown. | ||
* Set the label of the clear button. | ||
* @default Clear | ||
* @since 0.17.0 | ||
*/ | ||
clearLabel?: string, | ||
/** | ||
* Whether to show an optional close button. Use `closeLabel` to set the label. | ||
* | ||
* Note that this should be a boolean, a `CloseButtonOptions` object is still | ||
* supported for backwards compatibility, but it is deprecated. | ||
* | ||
* @default undefined | ||
* @default false | ||
*/ | ||
closeButton?: CloseButtonOptions; | ||
closeButton?: boolean | CloseButtonOptions; | ||
/** | ||
* Set the label of the close button. | ||
* | ||
* @default Close | ||
* @since 0.17.0 | ||
*/ | ||
closeLabel?: string; | ||
/** | ||
* An array of the desired color swatches to display. If omitted or the | ||
@@ -282,3 +305,11 @@ * array is empty, the color swatches will be disabled. | ||
swatches?: string[]; | ||
/** | ||
* A function that is called whenever a new color is picked. | ||
* @since 0.18.0 | ||
*/ | ||
onChange?: OnChangeCallback; | ||
} | ||
interface ColorisOptions extends ColorisVirtualInstanceOptions { | ||
/** | ||
@@ -288,10 +319,29 @@ * Accessibility messages for various aria attribute etc. | ||
a11y?: Accessibility; | ||
/** | ||
* In inline mode, this is the default color that is set when the picker is initialized. | ||
*/ | ||
defaultColor?: string; | ||
/** | ||
* Set to true to use the color picker as an inline widget. In this mode the color picker is | ||
* A custom CSS selector to bind the color picker to. This must point to | ||
* one or more {@link HTMLInputElement}s. | ||
*/ | ||
el: string; | ||
/** | ||
* Set to `true` to use the color picker as an inline widget. In this mode the color picker is | ||
* always visible and positioned statically within its container, which is by default the body | ||
* of the document. Use the "parent" option to set a custom container. | ||
* Note: In this mode, the best way to get the picked color, is listening to the "coloris:pick" | ||
* event and reading the value from the event detail (See example in the Events section). The | ||
* other way is to read the value of the input field with the id "clr-color-value". | ||
* | ||
* Note: In this mode, the best way to get the picked color is by listening to the `coloris:pick` | ||
* event and reading the value from the event detail (see the example below). The other way is | ||
* to read the value of the input field with the ID `clr-color-value`. | ||
* | ||
* @example | ||
* ```js | ||
* document.addEventListener("coloris:pick", event => { | ||
* console.log("New color", event.detail.color); | ||
* }); | ||
* ``` | ||
*/ | ||
@@ -301,5 +351,20 @@ inline?: boolean; | ||
/** | ||
* In inline mode, this is the default color that is set when the picker is initialized. | ||
* Set to true to activate basic right-to-left support. | ||
* | ||
* @default false | ||
*/ | ||
defaultColor?: string; | ||
rtl?: boolean; | ||
/** | ||
* The bound input fields are wrapped in a div that adds a thumbnail | ||
* showing the current color and a button to open the color picker (for | ||
* accessibility only). | ||
* | ||
* If you wish to keep your fields unaltered, set this to `false`, in which | ||
* case you will lose the color thumbnail and the accessible button (not | ||
* recommended). | ||
* | ||
* @default true | ||
*/ | ||
wrap?: boolean; | ||
} | ||
@@ -321,2 +386,7 @@ | ||
/** | ||
* Update the color picker's position and the color gradient's offset. | ||
*/ | ||
function updatePosition(): void; | ||
/** | ||
* Converts an input field to a color picker input. | ||
@@ -327,2 +397,80 @@ */ | ||
/** | ||
* Adds a virtual instance with separate options. | ||
* | ||
* Although there is only one physical instance of the color picker in the document, it is possible | ||
* to simulate multiple instances, each with its own appearance and behavior, by updating the | ||
* configuration at runtime, when the color picker is opened. | ||
* | ||
* Here is an example of how to do it by manually setting configuration options in response to click events: | ||
* | ||
* ```js | ||
* // Regular color fields use the default light theme | ||
* document.querySelectorAll('.color-fields').forEach(input => { | ||
* input.addEventListener('click', e => { | ||
* Coloris({ | ||
* theme: 'default', | ||
* themeMode: 'light', | ||
* }); | ||
* }); | ||
* }); | ||
* | ||
* // But the special color fields use the polaroid dark theme | ||
* document.querySelectorAll('.special-color-fields').forEach(input => { | ||
* input.addEventListener('click', e => { | ||
* Coloris({ | ||
* theme: 'polaroid', | ||
* themeMode: 'dark', | ||
* }); | ||
* }); | ||
* }); | ||
* ``` | ||
* | ||
* This works well and is quite versatile, but it can get a little hard to keep track of each | ||
* change every "instance" makes and revert them to the default values. | ||
* | ||
* So as of version 0.15.0, there is a new way to automatically manage virtual instances. This works | ||
* by assigning configuration overrides to a CSS selector representing one or more color fields. | ||
* | ||
* @example | ||
* ```js | ||
* // Color fields that have the class "instance1" have a format toggle, | ||
* // no alpha slider, a dark theme and custom swatches | ||
* Coloris.setInstance('.instance1', { | ||
* theme: 'polaroid', | ||
* themeMode: 'dark', | ||
* alpha: false, | ||
* formatToggle: true, | ||
* swatches: [ | ||
* '#264653', | ||
* '#2a9d8f', | ||
* '#e9c46a' | ||
* ] | ||
* }); | ||
* | ||
* // Fields matching the class "instance2" show color swatches only | ||
* Coloris.setInstance('.instance2', { | ||
* swatchesOnly: true, | ||
* swatches: [ | ||
* '#264653', | ||
* '#2a9d8f', | ||
* '#e9c46a' | ||
* ] | ||
* }); | ||
* ``` | ||
* @param selector CSS selector for the input fields to which the options should apply. | ||
* @param opts Options to apply to all color picker input fields matching the given selector. | ||
* @since 0.15.0 | ||
*/ | ||
function setInstance(selector: string, opts: Partial<ColorisVirtualInstanceOptions>): void; | ||
/** | ||
* Removes a virtual instance that was added by {@link setInstance}. Note that | ||
* to remove an instance, the selector must be exactly equal to what was passed | ||
* to `setInstance`, it cannot merely be a different selector that happens to | ||
* match the same elements. | ||
* @param selector CSS selector to remove from the set of virtual instances. | ||
*/ | ||
function removeInstance(selector: string): void; | ||
/** | ||
* Initializes the Coloris color picker and binds the color picker to all | ||
@@ -329,0 +477,0 @@ * input fields with the `data-coloris` attribute. |
@@ -13,4 +13,4 @@ var Coloris = function () { | ||
var currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 }; | ||
var container, picker, colorArea, colorAreaDims, colorMarker, colorPreview, colorValue, clearButton, | ||
closeButton, hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor; | ||
var container, picker, colorArea, colorAreaDims, colorMarker, colorPreview, colorValue, clearButton, closeButton, | ||
hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor, keyboardNav; | ||
@@ -51,6 +51,6 @@ // Default settings | ||
swatch: 'Color swatch', | ||
instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.' | ||
} | ||
}; | ||
instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.' } }; | ||
// Virtual instances cache | ||
@@ -69,5 +69,5 @@ var instances = {}; | ||
return; | ||
}var _loop = function _loop() | ||
} | ||
{ | ||
for (var key in options) { | ||
switch (key) { | ||
@@ -132,11 +132,11 @@ case 'el': | ||
case 'swatches': | ||
if (Array.isArray(options.swatches)) { | ||
var swatches = []; | ||
if (Array.isArray(options.swatches)) {(function () { | ||
var swatches = []; | ||
options.swatches.forEach(function (swatch, i) { | ||
swatches.push("<button type=\"button\" id=\"clr-swatch-" + i + "\" aria-labelledby=\"clr-swatch-label clr-swatch-" + i + "\" style=\"color: " + swatch + ";\">" + swatch + "</button>"); | ||
}); | ||
options.swatches.forEach(function (swatch, i) { | ||
swatches.push("<button type=\"button\" id=\"clr-swatch-" + i + "\" aria-labelledby=\"clr-swatch-label clr-swatch-" + i + "\" style=\"color: " + swatch + ";\">" + swatch + "</button>"); | ||
}); | ||
getEl('clr-swatches').innerHTML = swatches.length ? "<div>" + swatches.join('') + "</div>" : ''; | ||
settings.swatches = options.swatches.slice(); | ||
getEl('clr-swatches').innerHTML = swatches.length ? "<div>" + swatches.join('') + "</div>" : ''; | ||
settings.swatches = options.swatches.slice();})(); | ||
} | ||
@@ -226,3 +226,3 @@ break; | ||
};for (var key in options) {_loop();} | ||
} | ||
} | ||
@@ -265,5 +265,5 @@ | ||
// These options can only be set globally, not per instance | ||
var unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];var _loop2 = function _loop2() | ||
var unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];var _loop = function _loop( | ||
{ | ||
selector) { | ||
var options = instances[selector]; | ||
@@ -285,6 +285,6 @@ | ||
// Set the instance's options | ||
configure(options);return "break"; | ||
} | ||
};for (var selector in instances) {var _ret = _loop2();if (_ret === "break") break;} | ||
configure(options); | ||
return "break"; | ||
}};for (var selector in instances) {var _ret = _loop(selector);if (_ret === "break") break; | ||
} | ||
} | ||
@@ -335,2 +335,7 @@ } | ||
// Always focus the first element when using keyboard navigation | ||
if (keyboardNav || settings.swatchesOnly) { | ||
getFocusableElements().shift().focus(); | ||
} | ||
// Trigger an "open" event | ||
@@ -424,4 +429,4 @@ currentEl.dispatchEvent(new Event('open', { bubbles: true })); | ||
x: colorArea.offsetLeft + offset.x, | ||
y: colorArea.offsetTop + offset.y | ||
}; | ||
y: colorArea.offsetTop + offset.y }; | ||
} | ||
@@ -569,4 +574,4 @@ | ||
v: 100 - y / colorAreaDims.height * 100, | ||
a: alphaSlider.value / 100 | ||
}; | ||
a: alphaSlider.value / 100 }; | ||
var rgba = HSVAtoRGBA(hsva); | ||
@@ -603,4 +608,4 @@ | ||
pageX: event.changedTouches ? event.changedTouches[0].pageX : event.pageX, | ||
pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY | ||
}; | ||
pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY }; | ||
} | ||
@@ -765,4 +770,4 @@ | ||
b: Math.round(blue * 255), | ||
a: hsva.a | ||
}; | ||
a: hsva.a }; | ||
} | ||
@@ -788,4 +793,4 @@ | ||
l: Math.round(lightness * 100), | ||
a: hsva.a | ||
}; | ||
a: hsva.a }; | ||
} | ||
@@ -822,4 +827,4 @@ | ||
v: Math.round(value * 100), | ||
a: rgba.a | ||
}; | ||
a: rgba.a }; | ||
} | ||
@@ -848,5 +853,5 @@ | ||
b: match[5] * 1, | ||
a: match[6] * 1 | ||
}; | ||
a: match[6] * 1 }; | ||
// Workaround to mitigate a Chromium bug where the alpha value is rounded incorrectly | ||
@@ -861,4 +866,4 @@ rgba.a = +rgba.a.toFixed(2); | ||
b: match[2], | ||
a: 1 | ||
}; | ||
a: 1 }; | ||
} | ||
@@ -934,3 +939,2 @@ | ||
function init() { | ||
if (document.getElementById('clr-picker')) return; /**** DO NOT REMOVE: Prevent binding events multiple times */ | ||
// Render the UI | ||
@@ -1056,2 +1060,3 @@ container = null; | ||
addListener(document, 'mousedown', function (event) { | ||
keyboardNav = false; | ||
picker.classList.remove('clr-keyboard-nav'); | ||
@@ -1062,11 +1067,30 @@ closePicker(); | ||
addListener(document, 'keydown', function (event) { | ||
var key = event.key; | ||
var target = event.target; | ||
var shiftKey = event.shiftKey; | ||
var navKeys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']; | ||
if (event.key === 'Escape') { | ||
if (key === 'Escape') { | ||
closePicker(true); | ||
// Display focus rings when using the keyboard | ||
} else if (navKeys.includes(event.key)) { | ||
} else if (navKeys.includes(key)) { | ||
keyboardNav = true; | ||
picker.classList.add('clr-keyboard-nav'); | ||
} | ||
// Trap the focus within the color picker while it's open | ||
if (key === 'Tab' && target.matches('.clr-picker *')) { | ||
var focusables = getFocusableElements(); | ||
var firstFocusable = focusables.shift(); | ||
var lastFocusable = focusables.pop(); | ||
if (shiftKey && target === firstFocusable) { | ||
lastFocusable.focus(); | ||
event.preventDefault(); | ||
} else if (!shiftKey && target === lastFocusable) { | ||
firstFocusable.focus(); | ||
event.preventDefault(); | ||
} | ||
} | ||
}); | ||
@@ -1089,5 +1113,5 @@ | ||
ArrowLeft: [-1, 0], | ||
ArrowRight: [1, 0] | ||
}; | ||
ArrowRight: [1, 0] }; | ||
if (Object.keys(movements).includes(event.key)) { | ||
@@ -1105,2 +1129,13 @@ moveMarkerOnKeydown.apply(void 0, movements[event.key]); | ||
/** | ||
* Return a list of focusable elements within the color picker. | ||
* @return {array} The list of focusable DOM elemnts. | ||
*/ | ||
function getFocusableElements() { | ||
var controls = Array.from(picker.querySelectorAll('input, button')); | ||
var focusables = controls.filter(function (node) {return !!node.offsetWidth;}); | ||
return focusables; | ||
} | ||
/** | ||
* Shortcut for getElementById to optimize the minified JS. | ||
@@ -1133,3 +1168,3 @@ * @param {string} id The element id. | ||
// If the selector is not a string then it's a function | ||
// in which case we need regular event listener | ||
// in which case we need a regular event listener | ||
} else { | ||
@@ -1163,2 +1198,24 @@ fn = selector; | ||
//***************************************************** | ||
//******* NPM: Custom code starts here **************** | ||
//***************************************************** | ||
/** | ||
* Copy the active color to the linked input field and set the color. | ||
* @param {string} [color] Color value to override the active color. | ||
* @param {HTMLelement} [target] the element setting the color on | ||
*/ | ||
function setColor(color, target) { | ||
currentEl = target; | ||
oldColor = currentEl.value; | ||
attachVirtualInstance(target); | ||
currentFormat = getColorFormatFromStr(color); | ||
updatePickerPosition(); | ||
setColorFromStr(color); | ||
pickColor(); | ||
if (oldColor !== color) { | ||
currentEl.dispatchEvent(new Event('change', { bubbles: true })); | ||
} | ||
} | ||
// Expose the color picker to the global scope | ||
@@ -1172,2 +1229,3 @@ var Coloris = function () { | ||
setInstance: setVirtualInstance, | ||
setColor: setColor, | ||
removeInstance: removeVirtualInstance, | ||
@@ -1187,3 +1245,3 @@ updatePosition: updatePickerPosition | ||
}); | ||
}var _loop3 = function _loop3(key) | ||
}var _loop2 = function _loop2(key) | ||
@@ -1194,4 +1252,10 @@ { | ||
}; | ||
};for (var key in methods) {_loop3(key);} | ||
};for (var key in methods) {_loop2(key);} | ||
// handle window resize events re-aligning the panel | ||
DOMReady(function () { | ||
window.addEventListener('resize', function (event) {Coloris.updatePosition();}); | ||
window.addEventListener('scroll', function (event) {Coloris.updatePosition();}); | ||
}); | ||
return Coloris; | ||
@@ -1207,3 +1271,2 @@ }(); | ||
}(window, document, Math); | ||
}(); | ||
@@ -1216,2 +1279,5 @@ | ||
var _close = Coloris.close; | ||
var _setInstance = Coloris.setInstance; | ||
var _removeInstance = Coloris.removeInstance; | ||
var _updatePosition = Coloris.updatePosition; | ||
export default Coloris; | ||
@@ -1223,2 +1289,5 @@ export { | ||
_set as set, | ||
_wrap as wrap }; | ||
_wrap as wrap, | ||
_setInstance as setInstance, | ||
_removeInstance as removeInstance, | ||
_updatePosition as updatePosition }; |
@@ -9,2 +9,2 @@ var Coloris=function(){ | ||
*/ | ||
return h=window,b=document,v=Math,c=b.createElement("canvas").getContext("2d"),O={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!(H={r:0,g:0,b:0,h:0,s:0,v:0,a:1}),wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:function(){},a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},I={},N="",D=!(_={}),void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(J=function(){var r={init:G,set:o,wrap:s,close:a,setInstance:j,removeInstance:F,updatePosition:i};function e(e){$(function(){e&&("string"==typeof e?W:o)(e)})}for(var t in r)!function(a){e[a]=function(){for(var e=arguments.length,t=new Array(e),l=0;l<e;l++)t[l]=arguments[l];$(r[a],t)}}(t);return e}()).coloris=J;function o(n){if("object"==typeof n)for(var c in n)!function(){switch(c){case"el":W(n.el),!1!==n.wrap&&s(n.el);break;case"parent":(y=b.querySelector(n.parent))&&(y.appendChild(g),O.parent=n.parent,y===b.body)&&(y=null);break;case"themeMode":O.themeMode=n.themeMode,"auto"===n.themeMode&&h.matchMedia&&h.matchMedia("(prefers-color-scheme: dark)").matches&&(O.themeMode="dark");case"theme":n.theme&&(O.theme=n.theme),g.className="clr-picker clr-"+O.theme+" clr-"+O.themeMode,O.inline&&i();break;case"rtl":O.rtl=!!n.rtl,b.querySelectorAll(".clr-field").forEach(function(e){return e.classList.toggle("clr-rtl",O.rtl)});break;case"margin":n.margin*=1,O.margin=(isNaN(n.margin)?O:n).margin;break;case"wrap":n.el&&n.wrap&&s(n.el);break;case"formatToggle":O.formatToggle=!!n.formatToggle,f("clr-format").style.display=O.formatToggle?"block":"none",O.formatToggle&&(O.format="auto");break;case"swatches":var l;Array.isArray(n.swatches)&&(l=[],n.swatches.forEach(function(e,t){l.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),f("clr-swatches").innerHTML=l.length?"<div>"+l.join("")+"</div>":"",O.swatches=n.swatches.slice());break;case"swatchesOnly":O.swatchesOnly=!!n.swatchesOnly,g.setAttribute("data-minimal",O.swatchesOnly);break;case"alpha":O.alpha=!!n.alpha,g.setAttribute("data-alpha",O.alpha);break;case"inline":O.inline=!!n.inline,g.setAttribute("data-inline",O.inline),O.inline&&(e=n.defaultColor||O.defaultColor,M=q(e),i(),u(e));break;case"clearButton":"object"==typeof n.clearButton&&(n.clearButton.label&&(O.clearLabel=n.clearButton.label,x.innerHTML=O.clearLabel),n.clearButton=n.clearButton.show),O.clearButton=!!n.clearButton,x.style.display=O.clearButton?"block":"none";break;case"clearLabel":O.clearLabel=n.clearLabel,x.innerHTML=O.clearLabel;break;case"closeButton":O.closeButton=!!n.closeButton,O.closeButton?g.insertBefore(C,L):L.appendChild(C);break;case"closeLabel":O.closeLabel=n.closeLabel,C.innerHTML=O.closeLabel;break;case"a11y":var e,t,a=n.a11y,r=!1;if("object"==typeof a)for(var o in a)a[o]&&O.a11y[o]&&(O.a11y[o]=a[o],r=!0);r&&(e=f("clr-open-label"),t=f("clr-swatch-label"),e.innerHTML=O.a11y.open,t.innerHTML=O.a11y.swatch,C.setAttribute("aria-label",O.a11y.close),x.setAttribute("aria-label",O.a11y.clear),A.setAttribute("aria-label",O.a11y.hueSlider),S.setAttribute("aria-label",O.a11y.alphaSlider),E.setAttribute("aria-label",O.a11y.input),m.setAttribute("aria-label",O.a11y.instruction));break;default:O[c]=n[c]}}()}function j(e,t){"string"==typeof e&&"object"==typeof t&&(I[e]=t,D=!0)}function F(e){delete I[e],0===Object.keys(I).length&&(D=!1,e===N)&&l()}function R(l){if(D){var a,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(a in I)if("break"===function(){var t=I[a];if(l.matches(a)){for(var e in N=a,_={},r.forEach(function(e){return delete t[e]}),t)_[e]=Array.isArray(O[e])?O[e].slice():O[e];return o(t),"break"}}())break}}function l(){0<Object.keys(_).length&&(o(_),N="",_={})}function W(e){r(b,"click",e,function(e){O.inline||(R(e.target),B=e.target,n=B.value,M=q(n),g.classList.add("clr-open"),i(),u(n),(O.focusInput||O.selectInput)&&E.focus({preventScroll:!0}),O.selectInput&&E.select(),B.dispatchEvent(new Event("open",{bubbles:!0})))}),r(b,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function i(){var e,t,l,a,r=y,o=h.scrollY,n=g.offsetWidth,c=g.offsetHeight,i={left:!1,top:!1},s={x:0,y:0};r&&(t=h.getComputedStyle(r),e=parseFloat(t.marginTop),t=parseFloat(t.borderTopWidth),(s=r.getBoundingClientRect()).y+=t+o),O.inline||(l=(t=B.getBoundingClientRect()).x,a=o+t.y+t.height+O.margin,r?(l-=s.x,a-=s.y,l+n>r.clientWidth&&(l+=t.width-n,i.left=!0),a+c>r.clientHeight-e&&c+O.margin<=t.top-(s.y-o)&&(a-=t.height+c+2*O.margin,i.top=!0),a+=r.scrollTop):(l+n>b.documentElement.clientWidth&&(l+=t.width-n,i.left=!0),a+c-o>b.documentElement.clientHeight&&c+O.margin<=t.top&&(a=o+t.y-c-O.margin,i.top=!0)),g.classList.toggle("clr-left",i.left),g.classList.toggle("clr-top",i.top),g.style.left=l+"px",g.style.top=a+"px",s.x+=g.offsetLeft,s.y+=g.offsetTop),w={width:m.offsetWidth,height:m.offsetHeight,x:m.offsetLeft+s.x,y:m.offsetTop+s.y}}function s(e){b.querySelectorAll(e).forEach(function(e){var t,l,a=e.parentNode;a.classList.contains("clr-field")||(t=b.createElement("div"),l="clr-field",(O.rtl||e.classList.contains("clr-rtl"))&&(l+=" clr-rtl"),t.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',a.insertBefore(t,e),t.setAttribute("class",l),t.style.color=e.value,t.appendChild(e))})}function a(e){var t;B&&!O.inline&&(t=B,e&&(B=null,n!==t.value)&&(t.value=n,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(function(){n!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),g.classList.remove("clr-open"),D&&l(),t.dispatchEvent(new Event("close",{bubbles:!0})),O.focusInput&&t.focus({preventScroll:!0}),B=null)}function u(e){var e=function(e){var t;c.fillStyle="#000",c.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(c.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=c.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),t={r:e[0],g:e[1],b:e[2],a:1});return t}(e),t=function(e){var t=e.r/255,l=e.g/255,a=e.b/255,r=v.max(t,l,a),o=v.min(t,l,a),o=r-o,n=r,c=0,i=0;o&&(r===t&&(c=(l-a)/o),r===l&&(c=2+(a-t)/o),r===a&&(c=4+(t-l)/o),r)&&(i=o/r);return{h:(c=v.floor(60*c))<0?c+360:c,s:v.round(100*i),v:v.round(100*n),a:e.a}}(e);P(t.s,t.v),p(e,t),A.value=t.h,g.style.color="hsl("+t.h+", 100%, 50%)",z.style.left=t.h/360*100+"%",k.style.left=w.width*t.s/100+"px",k.style.top=w.height-w.height*t.v/100+"px",S.value=100*t.a,T.style.left=100*t.a+"%"}function q(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function d(e){e=void 0!==e?e:E.value,B&&(B.value=e,B.dispatchEvent(new Event("input",{bubbles:!0}))),O.onChange&&O.onChange.call(h,e),b.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e}}))}function Y(e,t){var l,a,r,o,n,e={h:+A.value,s:e/w.width*100,v:100-t/w.height*100,a:S.value/100},c=(c=(t=e).s/100,l=t.v/100,c*=l,a=t.h/60,r=c*(1-v.abs(a%2-1)),c+=l-=c,r+=l,a=v.floor(a)%6,o=[c,r,l,l,r,c][a],n=[r,c,c,r,l,l][a],l=[l,l,r,c,c,r][a],{r:v.round(255*o),g:v.round(255*n),b:v.round(255*l),a:t.a});P(e.s,e.v),p(c,e),d()}function P(e,t){var l=O.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),l=(l=l.replace("{s}",e)).replace("{v}",t),k.setAttribute("aria-label",l)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},l=t.pageX-w.x,t=t.pageY-w.y;y&&(t+=y.scrollTop),U(l,t),e.preventDefault(),e.stopPropagation()}function U(e,t){e=e<0?0:e>w.width?w.width:e,t=t<0?0:t>w.height?w.height:t,k.style.left=e+"px",k.style.top=t+"px",Y(e,t),k.focus()}function p(e,t){void 0===t&&(t={});var l,a,r=O.format;for(l in e=void 0===e?{}:e)H[l]=e[l];for(a in t)H[a]=t[a];var o,n=function(e){var t=e.r.toString(16),l=e.g.toString(16),a=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(l="0"+l);e.b<16&&(a="0"+a);O.alpha&&(e.a<1||O.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+l+a+r}(H),c=n.substring(0,7);switch(k.style.color=c,T.parentNode.style.color=c,T.style.color=n,L.style.color=n,m.style.display="none",m.offsetHeight,m.style.display="",T.nextElementSibling.style.display="none",T.nextElementSibling.offsetHeight,T.nextElementSibling.style.display="","mixed"===r?r=1===H.a?"hex":"rgb":"auto"===r&&(r=M),r){case"hex":E.value=n;break;case"rgb":E.value=(o=H,!O.alpha||1===o.a&&!O.forceAlpha?"rgb("+o.r+", "+o.g+", "+o.b+")":"rgba("+o.r+", "+o.g+", "+o.b+", "+o.a+")");break;case"hsl":E.value=(o=function(e){var t,l=e.v/100,a=l*(1-e.s/100/2);0<a&&a<1&&(t=v.round((l-a)/v.min(a,1-a)*100));return{h:e.h,s:t||0,l:v.round(100*a),a:e.a}}(H),!O.alpha||1===o.a&&!O.forceAlpha?"hsl("+o.h+", "+o.s+"%, "+o.l+"%)":"hsla("+o.h+", "+o.s+"%, "+o.l+"%, "+o.a+")")}b.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+A.value,t=+k.style.left.replace("px",""),l=+k.style.top.replace("px","");g.style.color="hsl("+e+", 100%, 50%)",z.style.left=e/360*100+"%",Y(t,l)}function X(){var e=S.value/100;T.style.left=100*e+"%",p({a:e}),d()}function G(){b.getElementById("clr-picker")||(y=null,(g=b.createElement("div")).setAttribute("id","clr-picker"),g.className="clr-picker",g.innerHTML='<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="'+O.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+O.a11y.instruction+'"><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="'+O.a11y.hueSlider+'"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="'+O.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+O.a11y.format+'</legend><input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div><button type="button" id="clr-clear" class="clr-clear" aria-label="'+O.a11y.clear+'">'+O.clearLabel+'</button><div id="clr-color-preview" class="clr-preview"><button type="button" id="clr-close" class="clr-close" aria-label="'+O.a11y.close+'">'+O.closeLabel+'</button></div><span id="clr-open-label" hidden>'+O.a11y.open+'</span><span id="clr-swatch-label" hidden>'+O.a11y.swatch+"</span>",b.body.appendChild(g),m=f("clr-color-area"),k=f("clr-color-marker"),x=f("clr-clear"),C=f("clr-close"),L=f("clr-color-preview"),E=f("clr-color-value"),A=f("clr-hue-slider"),z=f("clr-hue-marker"),S=f("clr-alpha-slider"),T=f("clr-alpha-marker"),W(O.el),s(O.el),r(g,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),r(m,"mousedown",function(e){r(b,"mousemove",t)}),r(m,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),r(k,"mousedown",function(e){r(b,"mousemove",t)}),r(k,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),r(E,"change",function(e){(B||O.inline)&&(u(E.value),d())}),r(x,"click",function(e){d(""),a()}),r(C,"click",function(e){d(),a()}),r(b,"click",".clr-format input",function(e){M=e.target.value,p(),d()}),r(g,"click",".clr-swatches button",function(e){u(e.target.textContent),d(),O.swatchesOnly&&a()}),r(b,"mouseup",function(e){b.removeEventListener("mousemove",t)}),r(b,"touchend",function(e){b.removeEventListener("touchmove",t)}),r(b,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),a()}),r(b,"keydown",function(e){"Escape"===e.key?a(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key)&&g.classList.add("clr-keyboard-nav")}),r(b,"click",".clr-field button",function(e){D&&l(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),r(k,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){U(+k.style.left.replace("px","")+e,+k.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),r(m,"click",t),r(A,"input",e),r(S,"input",X))}function f(e){return b.getElementById(e)}function r(e,t,l,a){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof l?e.addEventListener(t,function(e){r.call(e.target,l)&&a.call(e.target,e)}):(a=l,e.addEventListener(t,a))}function $(e,t){t=void 0!==t?t:[],"loading"!==b.readyState?e.apply(void 0,t):b.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}var h,b,v,y,g,m,w,k,L,E,x,C,A,z,S,T,B,M,n,c,H,O,I,N,_,D,J}(),_coloris=Coloris.coloris,_init=Coloris.init,_set=Coloris.set,_wrap=Coloris.wrap,_close=Coloris.close;export default Coloris;export{_coloris as coloris,_close as close,_init as init,_set as set,_wrap as wrap}; | ||
return f=window,h=document,b=Math,M=h.createElement("canvas").getContext("2d"),H={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!(I={r:0,g:0,b:0,h:0,s:0,v:0,a:1}),wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:function(){},a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},_={},O="",N=!(D={}),void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(V=function(){var r={init:z,set:n,wrap:c,close:o,setInstance:P,setColor:$,removeInstance:j,updatePosition:i};function t(e){K(function(){e&&("string"==typeof e?q:n)(e)})}for(var e in r)!function(l){t[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];K(r[l],t)}}(e);return K(function(){f.addEventListener("resize",function(e){t.updatePosition()}),f.addEventListener("scroll",function(e){t.updatePosition()})}),t}()).coloris=V;function n(e){if("object"==typeof e)for(var t in e)switch(t){case"el":q(e.el),!1!==e.wrap&&c(e.el);break;case"parent":(v=h.querySelector(e.parent))&&(v.appendChild(y),H.parent=e.parent,v===h.body)&&(v=null);break;case"themeMode":H.themeMode=e.themeMode,"auto"===e.themeMode&&f.matchMedia&&f.matchMedia("(prefers-color-scheme: dark)").matches&&(H.themeMode="dark");case"theme":e.theme&&(H.theme=e.theme),y.className="clr-picker clr-"+H.theme+" clr-"+H.themeMode,H.inline&&i();break;case"rtl":H.rtl=!!e.rtl,h.querySelectorAll(".clr-field").forEach(function(e){return e.classList.toggle("clr-rtl",H.rtl)});break;case"margin":e.margin*=1,H.margin=(isNaN(e.margin)?H:e).margin;break;case"wrap":e.el&&e.wrap&&c(e.el);break;case"formatToggle":H.formatToggle=!!e.formatToggle,p("clr-format").style.display=H.formatToggle?"block":"none",H.formatToggle&&(H.format="auto");break;case"swatches":Array.isArray(e.swatches)&&!function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),p("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",H.swatches=e.swatches.slice()}();break;case"swatchesOnly":H.swatchesOnly=!!e.swatchesOnly,y.setAttribute("data-minimal",H.swatchesOnly);break;case"alpha":H.alpha=!!e.alpha,y.setAttribute("data-alpha",H.alpha);break;case"inline":H.inline=!!e.inline,y.setAttribute("data-inline",H.inline),H.inline&&(a=e.defaultColor||H.defaultColor,B=F(a),i(),s(a));break;case"clearButton":"object"==typeof e.clearButton&&(e.clearButton.label&&(H.clearLabel=e.clearButton.label,E.innerHTML=H.clearLabel),e.clearButton=e.clearButton.show),H.clearButton=!!e.clearButton,E.style.display=H.clearButton?"block":"none";break;case"clearLabel":H.clearLabel=e.clearLabel,E.innerHTML=H.clearLabel;break;case"closeButton":H.closeButton=!!e.closeButton,H.closeButton?y.insertBefore(x,k):k.appendChild(x);break;case"closeLabel":H.closeLabel=e.closeLabel,x.innerHTML=H.closeLabel;break;case"a11y":var a,l,r=e.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&H.a11y[o]&&(H.a11y[o]=r[o],n=!0);n&&(a=p("clr-open-label"),l=p("clr-swatch-label"),a.innerHTML=H.a11y.open,l.innerHTML=H.a11y.swatch,x.setAttribute("aria-label",H.a11y.close),E.setAttribute("aria-label",H.a11y.clear),C.setAttribute("aria-label",H.a11y.hueSlider),A.setAttribute("aria-label",H.a11y.alphaSlider),L.setAttribute("aria-label",H.a11y.input),g.setAttribute("aria-label",H.a11y.instruction));break;default:H[t]=e[t]}}function P(e,t){"string"==typeof e&&"object"==typeof t&&(_[e]=t,N=!0)}function j(e){delete _[e],0===Object.keys(_).length&&(N=!1,e===O)&&a()}function W(l){if(N){var e,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(e in _)if("break"===function(e){var t=_[e];if(l.matches(e)){for(var a in O=e,D={},r.forEach(function(e){return delete t[e]}),t)D[a]=Array.isArray(H[a])?H[a].slice():H[a];return n(t),"break"}}(e))break}}function a(){0<Object.keys(D).length&&(n(D),O="",D={})}function q(e){l(h,"click",e,function(e){H.inline||(W(e.target),T=e.target,r=T.value,B=F(r),y.classList.add("clr-open"),i(),s(r),(H.focusInput||H.selectInput)&&L.focus({preventScroll:!0}),H.selectInput&&L.select(),(Q||H.swatchesOnly)&&G().shift().focus(),T.dispatchEvent(new Event("open",{bubbles:!0})))}),l(h,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function i(){var e,t,a,l,r=v,n=f.scrollY,o=y.offsetWidth,i=y.offsetHeight,c={left:!1,top:!1},s={x:0,y:0};r&&(t=f.getComputedStyle(r),e=parseFloat(t.marginTop),t=parseFloat(t.borderTopWidth),(s=r.getBoundingClientRect()).y+=t+n),H.inline||(a=(t=T.getBoundingClientRect()).x,l=n+t.y+t.height+H.margin,r?(a-=s.x,l-=s.y,a+o>r.clientWidth&&(a+=t.width-o,c.left=!0),l+i>r.clientHeight-e&&i+H.margin<=t.top-(s.y-n)&&(l-=t.height+i+2*H.margin,c.top=!0),l+=r.scrollTop):(a+o>h.documentElement.clientWidth&&(a+=t.width-o,c.left=!0),l+i-n>h.documentElement.clientHeight&&i+H.margin<=t.top&&(l=n+t.y-i-H.margin,c.top=!0)),y.classList.toggle("clr-left",c.left),y.classList.toggle("clr-top",c.top),y.style.left=a+"px",y.style.top=l+"px",s.x+=y.offsetLeft,s.y+=y.offsetTop),m={width:g.offsetWidth,height:g.offsetHeight,x:g.offsetLeft+s.x,y:g.offsetTop+s.y}}function c(e){h.querySelectorAll(e).forEach(function(e){var t,a,l=e.parentNode;l.classList.contains("clr-field")||(t=h.createElement("div"),a="clr-field",(H.rtl||e.classList.contains("clr-rtl"))&&(a+=" clr-rtl"),t.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(t,e),t.setAttribute("class",a),t.style.color=e.value,t.appendChild(e))})}function o(e){var t;T&&!H.inline&&(t=T,e&&(T=null,r!==t.value)&&(t.value=r,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(function(){r!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),y.classList.remove("clr-open"),N&&a(),t.dispatchEvent(new Event("close",{bubbles:!0})),H.focusInput&&t.focus({preventScroll:!0}),T=null)}function s(e){var e=function(e){var t;M.fillStyle="#000",M.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(M.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=M.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),t={r:e[0],g:e[1],b:e[2],a:1});return t}(e),t=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=b.max(t,a,l),n=b.min(t,a,l),n=r-n,o=r,i=0,c=0;n&&(r===t&&(i=(a-l)/n),r===a&&(i=2+(l-t)/n),r===l&&(i=4+(t-a)/n),r)&&(c=n/r);return{h:(i=b.floor(60*i))<0?i+360:i,s:b.round(100*c),v:b.round(100*o),a:e.a}}(e);Y(t.s,t.v),d(e,t),C.value=t.h,y.style.color="hsl("+t.h+", 100%, 50%)",J.style.left=t.h/360*100+"%",w.style.left=m.width*t.s/100+"px",w.style.top=m.height-m.height*t.v/100+"px",A.value=100*t.a,S.style.left=100*t.a+"%"}function F(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function u(e){e=void 0!==e?e:L.value,T&&(T.value=e,T.dispatchEvent(new Event("input",{bubbles:!0}))),H.onChange&&H.onChange.call(f,e),h.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e}}))}function R(e,t){var a,l,r,n,o,e={h:+C.value,s:e/m.width*100,v:100-t/m.height*100,a:A.value/100},i=(i=(t=e).s/100,a=t.v/100,i*=a,l=t.h/60,r=i*(1-b.abs(l%2-1)),i+=a-=i,r+=a,l=b.floor(l)%6,n=[i,r,a,a,r,i][l],o=[r,i,i,r,a,a][l],a=[a,a,r,i,i,r][l],{r:b.round(255*n),g:b.round(255*o),b:b.round(255*a),a:t.a});Y(e.s,e.v),d(i,e),u()}function Y(e,t){var a=H.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),w.setAttribute("aria-label",a)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},a=t.pageX-m.x,t=t.pageY-m.y;v&&(t+=v.scrollTop),U(a,t),e.preventDefault(),e.stopPropagation()}function U(e,t){e=e<0?0:e>m.width?m.width:e,t=t<0?0:t>m.height?m.height:t,w.style.left=e+"px",w.style.top=t+"px",R(e,t),w.focus()}function d(e,t){void 0===t&&(t={});var a,l,r=H.format;for(a in e=void 0===e?{}:e)I[a]=e[a];for(l in t)I[l]=t[l];var n,o=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);H.alpha&&(e.a<1||H.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+a+l+r}(I),i=o.substring(0,7);switch(w.style.color=i,S.parentNode.style.color=i,S.style.color=o,k.style.color=o,g.style.display="none",g.offsetHeight,g.style.display="",S.nextElementSibling.style.display="none",S.nextElementSibling.offsetHeight,S.nextElementSibling.style.display="","mixed"===r?r=1===I.a?"hex":"rgb":"auto"===r&&(r=B),r){case"hex":L.value=o;break;case"rgb":L.value=(n=I,!H.alpha||1===n.a&&!H.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":L.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=b.round((a-l)/b.min(l,1-l)*100));return{h:e.h,s:t||0,l:b.round(100*l),a:e.a}}(I),!H.alpha||1===n.a&&!H.forceAlpha?"hsl("+n.h+", "+n.s+"%, "+n.l+"%)":"hsla("+n.h+", "+n.s+"%, "+n.l+"%, "+n.a+")")}h.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+C.value,t=+w.style.left.replace("px",""),a=+w.style.top.replace("px","");y.style.color="hsl("+e+", 100%, 50%)",J.style.left=e/360*100+"%",R(t,a)}function X(){var e=A.value/100;S.style.left=100*e+"%",d({a:e}),u()}function z(){v=null,(y=h.createElement("div")).setAttribute("id","clr-picker"),y.className="clr-picker",y.innerHTML='<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="'+H.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+H.a11y.instruction+'"><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="'+H.a11y.hueSlider+'"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="'+H.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+H.a11y.format+'</legend><input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div><button type="button" id="clr-clear" class="clr-clear" aria-label="'+H.a11y.clear+'">'+H.clearLabel+'</button><div id="clr-color-preview" class="clr-preview"><button type="button" id="clr-close" class="clr-close" aria-label="'+H.a11y.close+'">'+H.closeLabel+'</button></div><span id="clr-open-label" hidden>'+H.a11y.open+'</span><span id="clr-swatch-label" hidden>'+H.a11y.swatch+"</span>",h.body.appendChild(y),g=p("clr-color-area"),w=p("clr-color-marker"),E=p("clr-clear"),x=p("clr-close"),k=p("clr-color-preview"),L=p("clr-color-value"),C=p("clr-hue-slider"),J=p("clr-hue-marker"),A=p("clr-alpha-slider"),S=p("clr-alpha-marker"),q(H.el),c(H.el),l(y,"mousedown",function(e){y.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),l(g,"mousedown",function(e){l(h,"mousemove",t)}),l(g,"touchstart",function(e){h.addEventListener("touchmove",t,{passive:!1})}),l(w,"mousedown",function(e){l(h,"mousemove",t)}),l(w,"touchstart",function(e){h.addEventListener("touchmove",t,{passive:!1})}),l(L,"change",function(e){(T||H.inline)&&(s(L.value),u())}),l(E,"click",function(e){u(""),o()}),l(x,"click",function(e){u(),o()}),l(h,"click",".clr-format input",function(e){B=e.target.value,d(),u()}),l(y,"click",".clr-swatches button",function(e){s(e.target.textContent),u(),H.swatchesOnly&&o()}),l(h,"mouseup",function(e){h.removeEventListener("mousemove",t)}),l(h,"touchend",function(e){h.removeEventListener("touchmove",t)}),l(h,"mousedown",function(e){Q=!1,y.classList.remove("clr-keyboard-nav"),o()}),l(h,"keydown",function(e){var t,a=e.key,l=e.target,r=e.shiftKey;"Escape"===a?o(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(a)&&(Q=!0,y.classList.add("clr-keyboard-nav")),"Tab"===a&&l.matches(".clr-picker *")&&(t=(a=G()).shift(),a=a.pop(),r&&l===t?(a.focus(),e.preventDefault()):r||l!==a||(t.focus(),e.preventDefault()))}),l(h,"click",".clr-field button",function(e){N&&a(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),l(w,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){U(+w.style.left.replace("px","")+e,+w.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),l(g,"click",t),l(C,"input",e),l(A,"input",X)}function G(){return Array.from(y.querySelectorAll("input, button")).filter(function(e){return!!e.offsetWidth})}function p(e){return h.getElementById(e)}function l(e,t,a,l){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof a?e.addEventListener(t,function(e){r.call(e.target,a)&&l.call(e.target,e)}):(l=a,e.addEventListener(t,l))}function K(e,t){t=void 0!==t?t:[],"loading"!==h.readyState?e.apply(void 0,t):h.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}function $(e,t){r=(T=t).value,W(t),B=F(e),i(),s(e),u(),r!==e&&T.dispatchEvent(new Event("change",{bubbles:!0}))}var f,h,b,v,y,g,m,w,k,L,E,x,C,J,A,S,T,B,r,Q,M,I,H,_,O,D,N,V}(),_coloris=Coloris.coloris,_init=Coloris.init,_set=Coloris.set,_wrap=Coloris.wrap,_close=Coloris.close,_setInstance=Coloris.setInstance,_removeInstance=Coloris.removeInstance,_updatePosition=Coloris.updatePosition;export default Coloris;export{_coloris as coloris,_close as close,_init as init,_set as set,_wrap as wrap,_setInstance as setInstance,_removeInstance as removeInstance,_updatePosition as updatePosition}; |
@@ -54,4 +54,4 @@ // https://github.com/umdjs/umd/blob/master/templates/returnExports.js | ||
var currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 }; | ||
var container, picker, colorArea, colorAreaDims, colorMarker, colorPreview, colorValue, clearButton, | ||
closeButton, hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor; | ||
var container, picker, colorArea, colorAreaDims, colorMarker, colorPreview, colorValue, clearButton, closeButton, | ||
hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor, keyboardNav; | ||
@@ -92,6 +92,6 @@ // Default settings | ||
swatch: 'Color swatch', | ||
instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.' | ||
} | ||
}; | ||
instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.' } }; | ||
// Virtual instances cache | ||
@@ -110,5 +110,5 @@ var instances = {}; | ||
return; | ||
}var _loop = function _loop() | ||
} | ||
{ | ||
for (var key in options) { | ||
switch (key) { | ||
@@ -173,11 +173,11 @@ case 'el': | ||
case 'swatches': | ||
if (Array.isArray(options.swatches)) { | ||
var swatches = []; | ||
if (Array.isArray(options.swatches)) {(function () { | ||
var swatches = []; | ||
options.swatches.forEach(function (swatch, i) { | ||
swatches.push("<button type=\"button\" id=\"clr-swatch-" + i + "\" aria-labelledby=\"clr-swatch-label clr-swatch-" + i + "\" style=\"color: " + swatch + ";\">" + swatch + "</button>"); | ||
}); | ||
options.swatches.forEach(function (swatch, i) { | ||
swatches.push("<button type=\"button\" id=\"clr-swatch-" + i + "\" aria-labelledby=\"clr-swatch-label clr-swatch-" + i + "\" style=\"color: " + swatch + ";\">" + swatch + "</button>"); | ||
}); | ||
getEl('clr-swatches').innerHTML = swatches.length ? "<div>" + swatches.join('') + "</div>" : ''; | ||
settings.swatches = options.swatches.slice(); | ||
getEl('clr-swatches').innerHTML = swatches.length ? "<div>" + swatches.join('') + "</div>" : ''; | ||
settings.swatches = options.swatches.slice();})(); | ||
} | ||
@@ -267,3 +267,3 @@ break; | ||
};for (var key in options) {_loop();} | ||
} | ||
} | ||
@@ -306,5 +306,5 @@ | ||
// These options can only be set globally, not per instance | ||
var unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];var _loop2 = function _loop2() | ||
var unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];var _loop = function _loop( | ||
{ | ||
selector) { | ||
var options = instances[selector]; | ||
@@ -326,6 +326,6 @@ | ||
// Set the instance's options | ||
configure(options);return "break"; | ||
} | ||
};for (var selector in instances) {var _ret = _loop2();if (_ret === "break") break;} | ||
configure(options); | ||
return "break"; | ||
}};for (var selector in instances) {var _ret = _loop(selector);if (_ret === "break") break; | ||
} | ||
} | ||
@@ -376,2 +376,7 @@ } | ||
// Always focus the first element when using keyboard navigation | ||
if (keyboardNav || settings.swatchesOnly) { | ||
getFocusableElements().shift().focus(); | ||
} | ||
// Trigger an "open" event | ||
@@ -465,4 +470,4 @@ currentEl.dispatchEvent(new Event('open', { bubbles: true })); | ||
x: colorArea.offsetLeft + offset.x, | ||
y: colorArea.offsetTop + offset.y | ||
}; | ||
y: colorArea.offsetTop + offset.y }; | ||
} | ||
@@ -610,4 +615,4 @@ | ||
v: 100 - y / colorAreaDims.height * 100, | ||
a: alphaSlider.value / 100 | ||
}; | ||
a: alphaSlider.value / 100 }; | ||
var rgba = HSVAtoRGBA(hsva); | ||
@@ -644,4 +649,4 @@ | ||
pageX: event.changedTouches ? event.changedTouches[0].pageX : event.pageX, | ||
pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY | ||
}; | ||
pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY }; | ||
} | ||
@@ -806,4 +811,4 @@ | ||
b: Math.round(blue * 255), | ||
a: hsva.a | ||
}; | ||
a: hsva.a }; | ||
} | ||
@@ -829,4 +834,4 @@ | ||
l: Math.round(lightness * 100), | ||
a: hsva.a | ||
}; | ||
a: hsva.a }; | ||
} | ||
@@ -863,4 +868,4 @@ | ||
v: Math.round(value * 100), | ||
a: rgba.a | ||
}; | ||
a: rgba.a }; | ||
} | ||
@@ -889,5 +894,5 @@ | ||
b: match[5] * 1, | ||
a: match[6] * 1 | ||
}; | ||
a: match[6] * 1 }; | ||
// Workaround to mitigate a Chromium bug where the alpha value is rounded incorrectly | ||
@@ -902,4 +907,4 @@ rgba.a = +rgba.a.toFixed(2); | ||
b: match[2], | ||
a: 1 | ||
}; | ||
a: 1 }; | ||
} | ||
@@ -975,3 +980,2 @@ | ||
function init() { | ||
if (document.getElementById('clr-picker')) return; /**** DO NOT REMOVE: Prevent binding events multiple times */ | ||
// Render the UI | ||
@@ -1097,2 +1101,3 @@ container = null; | ||
addListener(document, 'mousedown', function (event) { | ||
keyboardNav = false; | ||
picker.classList.remove('clr-keyboard-nav'); | ||
@@ -1103,11 +1108,30 @@ closePicker(); | ||
addListener(document, 'keydown', function (event) { | ||
var key = event.key; | ||
var target = event.target; | ||
var shiftKey = event.shiftKey; | ||
var navKeys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']; | ||
if (event.key === 'Escape') { | ||
if (key === 'Escape') { | ||
closePicker(true); | ||
// Display focus rings when using the keyboard | ||
} else if (navKeys.includes(event.key)) { | ||
} else if (navKeys.includes(key)) { | ||
keyboardNav = true; | ||
picker.classList.add('clr-keyboard-nav'); | ||
} | ||
// Trap the focus within the color picker while it's open | ||
if (key === 'Tab' && target.matches('.clr-picker *')) { | ||
var focusables = getFocusableElements(); | ||
var firstFocusable = focusables.shift(); | ||
var lastFocusable = focusables.pop(); | ||
if (shiftKey && target === firstFocusable) { | ||
lastFocusable.focus(); | ||
event.preventDefault(); | ||
} else if (!shiftKey && target === lastFocusable) { | ||
firstFocusable.focus(); | ||
event.preventDefault(); | ||
} | ||
} | ||
}); | ||
@@ -1130,5 +1154,5 @@ | ||
ArrowLeft: [-1, 0], | ||
ArrowRight: [1, 0] | ||
}; | ||
ArrowRight: [1, 0] }; | ||
if (Object.keys(movements).includes(event.key)) { | ||
@@ -1146,2 +1170,13 @@ moveMarkerOnKeydown.apply(void 0, movements[event.key]); | ||
/** | ||
* Return a list of focusable elements within the color picker. | ||
* @return {array} The list of focusable DOM elemnts. | ||
*/ | ||
function getFocusableElements() { | ||
var controls = Array.from(picker.querySelectorAll('input, button')); | ||
var focusables = controls.filter(function (node) {return !!node.offsetWidth;}); | ||
return focusables; | ||
} | ||
/** | ||
* Shortcut for getElementById to optimize the minified JS. | ||
@@ -1174,3 +1209,3 @@ * @param {string} id The element id. | ||
// If the selector is not a string then it's a function | ||
// in which case we need regular event listener | ||
// in which case we need a regular event listener | ||
} else { | ||
@@ -1204,2 +1239,24 @@ fn = selector; | ||
//***************************************************** | ||
//******* NPM: Custom code starts here **************** | ||
//***************************************************** | ||
/** | ||
* Copy the active color to the linked input field and set the color. | ||
* @param {string} [color] Color value to override the active color. | ||
* @param {HTMLelement} [target] the element setting the color on | ||
*/ | ||
function setColor(color, target) { | ||
currentEl = target; | ||
oldColor = currentEl.value; | ||
attachVirtualInstance(target); | ||
currentFormat = getColorFormatFromStr(color); | ||
updatePickerPosition(); | ||
setColorFromStr(color); | ||
pickColor(); | ||
if (oldColor !== color) { | ||
currentEl.dispatchEvent(new Event('change', { bubbles: true })); | ||
} | ||
} | ||
// Expose the color picker to the global scope | ||
@@ -1213,2 +1270,3 @@ var Coloris = function () { | ||
setInstance: setVirtualInstance, | ||
setColor: setColor, | ||
removeInstance: removeVirtualInstance, | ||
@@ -1228,3 +1286,3 @@ updatePosition: updatePickerPosition | ||
}); | ||
}var _loop3 = function _loop3(key) | ||
}var _loop2 = function _loop2(key) | ||
@@ -1235,4 +1293,10 @@ { | ||
}; | ||
};for (var key in methods) {_loop3(key);} | ||
};for (var key in methods) {_loop2(key);} | ||
// handle window resize events re-aligning the panel | ||
DOMReady(function () { | ||
window.addEventListener('resize', function (event) {Coloris.updatePosition();}); | ||
window.addEventListener('scroll', function (event) {Coloris.updatePosition();}); | ||
}); | ||
return Coloris; | ||
@@ -1248,3 +1312,2 @@ }(); | ||
}(window, document, Math); | ||
}); |
@@ -9,2 +9,2 @@ !function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof module&&module.exports?module.exports=t():(e.Coloris=t(),"object"==typeof window&&e.Coloris.init())}("undefined"!=typeof self?self:void 0,function(){ | ||
*/ | ||
return h=window,b=document,v=Math,c=b.createElement("canvas").getContext("2d"),O={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!(H={r:0,g:0,b:0,h:0,s:0,v:0,a:1}),wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:function(){},a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},I={},N="",D=!(j={}),void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(K=function(){var r={init:$,set:n,wrap:s,close:a,setInstance:F,removeInstance:R,updatePosition:i};function e(e){z(function(){e&&("string"==typeof e?q:n)(e)})}for(var t in r)!function(a){e[a]=function(){for(var e=arguments.length,t=new Array(e),l=0;l<e;l++)t[l]=arguments[l];z(r[a],t)}}(t);return e}()).coloris=K;function n(o){if("object"==typeof o)for(var c in o)!function(){switch(c){case"el":q(o.el),!1!==o.wrap&&s(o.el);break;case"parent":(y=b.querySelector(o.parent))&&(y.appendChild(g),O.parent=o.parent,y===b.body)&&(y=null);break;case"themeMode":O.themeMode=o.themeMode,"auto"===o.themeMode&&h.matchMedia&&h.matchMedia("(prefers-color-scheme: dark)").matches&&(O.themeMode="dark");case"theme":o.theme&&(O.theme=o.theme),g.className="clr-picker clr-"+O.theme+" clr-"+O.themeMode,O.inline&&i();break;case"rtl":O.rtl=!!o.rtl,b.querySelectorAll(".clr-field").forEach(function(e){return e.classList.toggle("clr-rtl",O.rtl)});break;case"margin":o.margin*=1,O.margin=(isNaN(o.margin)?O:o).margin;break;case"wrap":o.el&&o.wrap&&s(o.el);break;case"formatToggle":O.formatToggle=!!o.formatToggle,f("clr-format").style.display=O.formatToggle?"block":"none",O.formatToggle&&(O.format="auto");break;case"swatches":var l;Array.isArray(o.swatches)&&(l=[],o.swatches.forEach(function(e,t){l.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),f("clr-swatches").innerHTML=l.length?"<div>"+l.join("")+"</div>":"",O.swatches=o.swatches.slice());break;case"swatchesOnly":O.swatchesOnly=!!o.swatchesOnly,g.setAttribute("data-minimal",O.swatchesOnly);break;case"alpha":O.alpha=!!o.alpha,g.setAttribute("data-alpha",O.alpha);break;case"inline":O.inline=!!o.inline,g.setAttribute("data-inline",O.inline),O.inline&&(e=o.defaultColor||O.defaultColor,M=Y(e),i(),u(e));break;case"clearButton":"object"==typeof o.clearButton&&(o.clearButton.label&&(O.clearLabel=o.clearButton.label,x.innerHTML=O.clearLabel),o.clearButton=o.clearButton.show),O.clearButton=!!o.clearButton,x.style.display=O.clearButton?"block":"none";break;case"clearLabel":O.clearLabel=o.clearLabel,x.innerHTML=O.clearLabel;break;case"closeButton":O.closeButton=!!o.closeButton,O.closeButton?g.insertBefore(A,L):L.appendChild(A);break;case"closeLabel":O.closeLabel=o.closeLabel,A.innerHTML=O.closeLabel;break;case"a11y":var e,t,a=o.a11y,r=!1;if("object"==typeof a)for(var n in a)a[n]&&O.a11y[n]&&(O.a11y[n]=a[n],r=!0);r&&(e=f("clr-open-label"),t=f("clr-swatch-label"),e.innerHTML=O.a11y.open,t.innerHTML=O.a11y.swatch,A.setAttribute("aria-label",O.a11y.close),x.setAttribute("aria-label",O.a11y.clear),S.setAttribute("aria-label",O.a11y.hueSlider),C.setAttribute("aria-label",O.a11y.alphaSlider),E.setAttribute("aria-label",O.a11y.input),m.setAttribute("aria-label",O.a11y.instruction));break;default:O[c]=o[c]}}()}function F(e,t){"string"==typeof e&&"object"==typeof t&&(I[e]=t,D=!0)}function R(e){delete I[e],0===Object.keys(I).length&&(D=!1,e===N)&&l()}function W(l){if(D){var a,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(a in I)if("break"===function(){var t=I[a];if(l.matches(a)){for(var e in N=a,j={},r.forEach(function(e){return delete t[e]}),t)j[e]=Array.isArray(O[e])?O[e].slice():O[e];return n(t),"break"}}())break}}function l(){0<Object.keys(j).length&&(n(j),N="",j={})}function q(e){r(b,"click",e,function(e){O.inline||(W(e.target),B=e.target,o=B.value,M=Y(o),g.classList.add("clr-open"),i(),u(o),(O.focusInput||O.selectInput)&&E.focus({preventScroll:!0}),O.selectInput&&E.select(),B.dispatchEvent(new Event("open",{bubbles:!0})))}),r(b,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function i(){var e,t,l,a,r=y,n=h.scrollY,o=g.offsetWidth,c=g.offsetHeight,i={left:!1,top:!1},s={x:0,y:0};r&&(t=h.getComputedStyle(r),e=parseFloat(t.marginTop),t=parseFloat(t.borderTopWidth),(s=r.getBoundingClientRect()).y+=t+n),O.inline||(l=(t=B.getBoundingClientRect()).x,a=n+t.y+t.height+O.margin,r?(l-=s.x,a-=s.y,l+o>r.clientWidth&&(l+=t.width-o,i.left=!0),a+c>r.clientHeight-e&&c+O.margin<=t.top-(s.y-n)&&(a-=t.height+c+2*O.margin,i.top=!0),a+=r.scrollTop):(l+o>b.documentElement.clientWidth&&(l+=t.width-o,i.left=!0),a+c-n>b.documentElement.clientHeight&&c+O.margin<=t.top&&(a=n+t.y-c-O.margin,i.top=!0)),g.classList.toggle("clr-left",i.left),g.classList.toggle("clr-top",i.top),g.style.left=l+"px",g.style.top=a+"px",s.x+=g.offsetLeft,s.y+=g.offsetTop),w={width:m.offsetWidth,height:m.offsetHeight,x:m.offsetLeft+s.x,y:m.offsetTop+s.y}}function s(e){b.querySelectorAll(e).forEach(function(e){var t,l,a=e.parentNode;a.classList.contains("clr-field")||(t=b.createElement("div"),l="clr-field",(O.rtl||e.classList.contains("clr-rtl"))&&(l+=" clr-rtl"),t.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',a.insertBefore(t,e),t.setAttribute("class",l),t.style.color=e.value,t.appendChild(e))})}function a(e){var t;B&&!O.inline&&(t=B,e&&(B=null,o!==t.value)&&(t.value=o,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(function(){o!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),g.classList.remove("clr-open"),D&&l(),t.dispatchEvent(new Event("close",{bubbles:!0})),O.focusInput&&t.focus({preventScroll:!0}),B=null)}function u(e){var e=function(e){var t;c.fillStyle="#000",c.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(c.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=c.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),t={r:e[0],g:e[1],b:e[2],a:1});return t}(e),t=function(e){var t=e.r/255,l=e.g/255,a=e.b/255,r=v.max(t,l,a),n=v.min(t,l,a),n=r-n,o=r,c=0,i=0;n&&(r===t&&(c=(l-a)/n),r===l&&(c=2+(a-t)/n),r===a&&(c=4+(t-l)/n),r)&&(i=n/r);return{h:(c=v.floor(60*c))<0?c+360:c,s:v.round(100*i),v:v.round(100*o),a:e.a}}(e);U(t.s,t.v),p(e,t),S.value=t.h,g.style.color="hsl("+t.h+", 100%, 50%)",J.style.left=t.h/360*100+"%",k.style.left=w.width*t.s/100+"px",k.style.top=w.height-w.height*t.v/100+"px",C.value=100*t.a,T.style.left=100*t.a+"%"}function Y(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function d(e){e=void 0!==e?e:E.value,B&&(B.value=e,B.dispatchEvent(new Event("input",{bubbles:!0}))),O.onChange&&O.onChange.call(h,e),b.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e}}))}function P(e,t){var l,a,r,n,o,e={h:+S.value,s:e/w.width*100,v:100-t/w.height*100,a:C.value/100},c=(c=(t=e).s/100,l=t.v/100,c*=l,a=t.h/60,r=c*(1-v.abs(a%2-1)),c+=l-=c,r+=l,a=v.floor(a)%6,n=[c,r,l,l,r,c][a],o=[r,c,c,r,l,l][a],l=[l,l,r,c,c,r][a],{r:v.round(255*n),g:v.round(255*o),b:v.round(255*l),a:t.a});U(e.s,e.v),p(c,e),d()}function U(e,t){var l=O.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),l=(l=l.replace("{s}",e)).replace("{v}",t),k.setAttribute("aria-label",l)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},l=t.pageX-w.x,t=t.pageY-w.y;y&&(t+=y.scrollTop),X(l,t),e.preventDefault(),e.stopPropagation()}function X(e,t){e=e<0?0:e>w.width?w.width:e,t=t<0?0:t>w.height?w.height:t,k.style.left=e+"px",k.style.top=t+"px",P(e,t),k.focus()}function p(e,t){void 0===t&&(t={});var l,a,r=O.format;for(l in e=void 0===e?{}:e)H[l]=e[l];for(a in t)H[a]=t[a];var n,o=function(e){var t=e.r.toString(16),l=e.g.toString(16),a=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(l="0"+l);e.b<16&&(a="0"+a);O.alpha&&(e.a<1||O.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+l+a+r}(H),c=o.substring(0,7);switch(k.style.color=c,T.parentNode.style.color=c,T.style.color=o,L.style.color=o,m.style.display="none",m.offsetHeight,m.style.display="",T.nextElementSibling.style.display="none",T.nextElementSibling.offsetHeight,T.nextElementSibling.style.display="","mixed"===r?r=1===H.a?"hex":"rgb":"auto"===r&&(r=M),r){case"hex":E.value=o;break;case"rgb":E.value=(n=H,!O.alpha||1===n.a&&!O.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":E.value=(n=function(e){var t,l=e.v/100,a=l*(1-e.s/100/2);0<a&&a<1&&(t=v.round((l-a)/v.min(a,1-a)*100));return{h:e.h,s:t||0,l:v.round(100*a),a:e.a}}(H),!O.alpha||1===n.a&&!O.forceAlpha?"hsl("+n.h+", "+n.s+"%, "+n.l+"%)":"hsla("+n.h+", "+n.s+"%, "+n.l+"%, "+n.a+")")}b.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+S.value,t=+k.style.left.replace("px",""),l=+k.style.top.replace("px","");g.style.color="hsl("+e+", 100%, 50%)",J.style.left=e/360*100+"%",P(t,l)}function G(){var e=C.value/100;T.style.left=100*e+"%",p({a:e}),d()}function $(){b.getElementById("clr-picker")||(y=null,(g=b.createElement("div")).setAttribute("id","clr-picker"),g.className="clr-picker",g.innerHTML='<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="'+O.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+O.a11y.instruction+'"><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="'+O.a11y.hueSlider+'"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="'+O.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+O.a11y.format+'</legend><input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div><button type="button" id="clr-clear" class="clr-clear" aria-label="'+O.a11y.clear+'">'+O.clearLabel+'</button><div id="clr-color-preview" class="clr-preview"><button type="button" id="clr-close" class="clr-close" aria-label="'+O.a11y.close+'">'+O.closeLabel+'</button></div><span id="clr-open-label" hidden>'+O.a11y.open+'</span><span id="clr-swatch-label" hidden>'+O.a11y.swatch+"</span>",b.body.appendChild(g),m=f("clr-color-area"),k=f("clr-color-marker"),x=f("clr-clear"),A=f("clr-close"),L=f("clr-color-preview"),E=f("clr-color-value"),S=f("clr-hue-slider"),J=f("clr-hue-marker"),C=f("clr-alpha-slider"),T=f("clr-alpha-marker"),q(O.el),s(O.el),r(g,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),r(m,"mousedown",function(e){r(b,"mousemove",t)}),r(m,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),r(k,"mousedown",function(e){r(b,"mousemove",t)}),r(k,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),r(E,"change",function(e){(B||O.inline)&&(u(E.value),d())}),r(x,"click",function(e){d(""),a()}),r(A,"click",function(e){d(),a()}),r(b,"click",".clr-format input",function(e){M=e.target.value,p(),d()}),r(g,"click",".clr-swatches button",function(e){u(e.target.textContent),d(),O.swatchesOnly&&a()}),r(b,"mouseup",function(e){b.removeEventListener("mousemove",t)}),r(b,"touchend",function(e){b.removeEventListener("touchmove",t)}),r(b,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),a()}),r(b,"keydown",function(e){"Escape"===e.key?a(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key)&&g.classList.add("clr-keyboard-nav")}),r(b,"click",".clr-field button",function(e){D&&l(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),r(k,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){X(+k.style.left.replace("px","")+e,+k.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),r(m,"click",t),r(S,"input",e),r(C,"input",G))}function f(e){return b.getElementById(e)}function r(e,t,l,a){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof l?e.addEventListener(t,function(e){r.call(e.target,l)&&a.call(e.target,e)}):(a=l,e.addEventListener(t,a))}function z(e,t){t=void 0!==t?t:[],"loading"!==b.readyState?e.apply(void 0,t):b.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}var h,b,v,y,g,m,w,k,L,E,x,A,S,J,C,T,B,M,o,c,H,O,I,N,j,D,K}); | ||
return f=window,h=document,b=Math,M=h.createElement("canvas").getContext("2d"),O={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!(H={r:0,g:0,b:0,h:0,s:0,v:0,a:1}),wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:function(){},a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},D={},N="",I=!(j={}),void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(Z=function(){var r={init:G,set:n,wrap:c,close:o,setInstance:W,setColor:J,removeInstance:q,updatePosition:i};function t(e){$(function(){e&&("string"==typeof e?P:n)(e)})}for(var e in r)!function(l){t[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];$(r[l],t)}}(e);return $(function(){f.addEventListener("resize",function(e){t.updatePosition()}),f.addEventListener("scroll",function(e){t.updatePosition()})}),t}()).coloris=Z;function n(e){if("object"==typeof e)for(var t in e)switch(t){case"el":P(e.el),!1!==e.wrap&&c(e.el);break;case"parent":(v=h.querySelector(e.parent))&&(v.appendChild(y),O.parent=e.parent,v===h.body)&&(v=null);break;case"themeMode":O.themeMode=e.themeMode,"auto"===e.themeMode&&f.matchMedia&&f.matchMedia("(prefers-color-scheme: dark)").matches&&(O.themeMode="dark");case"theme":e.theme&&(O.theme=e.theme),y.className="clr-picker clr-"+O.theme+" clr-"+O.themeMode,O.inline&&i();break;case"rtl":O.rtl=!!e.rtl,h.querySelectorAll(".clr-field").forEach(function(e){return e.classList.toggle("clr-rtl",O.rtl)});break;case"margin":e.margin*=1,O.margin=(isNaN(e.margin)?O:e).margin;break;case"wrap":e.el&&e.wrap&&c(e.el);break;case"formatToggle":O.formatToggle=!!e.formatToggle,p("clr-format").style.display=O.formatToggle?"block":"none",O.formatToggle&&(O.format="auto");break;case"swatches":Array.isArray(e.swatches)&&!function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),p("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",O.swatches=e.swatches.slice()}();break;case"swatchesOnly":O.swatchesOnly=!!e.swatchesOnly,y.setAttribute("data-minimal",O.swatchesOnly);break;case"alpha":O.alpha=!!e.alpha,y.setAttribute("data-alpha",O.alpha);break;case"inline":O.inline=!!e.inline,y.setAttribute("data-inline",O.inline),O.inline&&(a=e.defaultColor||O.defaultColor,B=R(a),i(),s(a));break;case"clearButton":"object"==typeof e.clearButton&&(e.clearButton.label&&(O.clearLabel=e.clearButton.label,E.innerHTML=O.clearLabel),e.clearButton=e.clearButton.show),O.clearButton=!!e.clearButton,E.style.display=O.clearButton?"block":"none";break;case"clearLabel":O.clearLabel=e.clearLabel,E.innerHTML=O.clearLabel;break;case"closeButton":O.closeButton=!!e.closeButton,O.closeButton?y.insertBefore(x,k):k.appendChild(x);break;case"closeLabel":O.closeLabel=e.closeLabel,x.innerHTML=O.closeLabel;break;case"a11y":var a,l,r=e.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&O.a11y[o]&&(O.a11y[o]=r[o],n=!0);n&&(a=p("clr-open-label"),l=p("clr-swatch-label"),a.innerHTML=O.a11y.open,l.innerHTML=O.a11y.swatch,x.setAttribute("aria-label",O.a11y.close),E.setAttribute("aria-label",O.a11y.clear),A.setAttribute("aria-label",O.a11y.hueSlider),S.setAttribute("aria-label",O.a11y.alphaSlider),L.setAttribute("aria-label",O.a11y.input),g.setAttribute("aria-label",O.a11y.instruction));break;default:O[t]=e[t]}}function W(e,t){"string"==typeof e&&"object"==typeof t&&(D[e]=t,I=!0)}function q(e){delete D[e],0===Object.keys(D).length&&(I=!1,e===N)&&a()}function F(l){if(I){var e,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(e in D)if("break"===function(e){var t=D[e];if(l.matches(e)){for(var a in N=e,j={},r.forEach(function(e){return delete t[e]}),t)j[a]=Array.isArray(O[a])?O[a].slice():O[a];return n(t),"break"}}(e))break}}function a(){0<Object.keys(j).length&&(n(j),N="",j={})}function P(e){l(h,"click",e,function(e){O.inline||(F(e.target),T=e.target,r=T.value,B=R(r),y.classList.add("clr-open"),i(),s(r),(O.focusInput||O.selectInput)&&L.focus({preventScroll:!0}),O.selectInput&&L.select(),(V||O.swatchesOnly)&&K().shift().focus(),T.dispatchEvent(new Event("open",{bubbles:!0})))}),l(h,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function i(){var e,t,a,l,r=v,n=f.scrollY,o=y.offsetWidth,i=y.offsetHeight,c={left:!1,top:!1},s={x:0,y:0};r&&(t=f.getComputedStyle(r),e=parseFloat(t.marginTop),t=parseFloat(t.borderTopWidth),(s=r.getBoundingClientRect()).y+=t+n),O.inline||(a=(t=T.getBoundingClientRect()).x,l=n+t.y+t.height+O.margin,r?(a-=s.x,l-=s.y,a+o>r.clientWidth&&(a+=t.width-o,c.left=!0),l+i>r.clientHeight-e&&i+O.margin<=t.top-(s.y-n)&&(l-=t.height+i+2*O.margin,c.top=!0),l+=r.scrollTop):(a+o>h.documentElement.clientWidth&&(a+=t.width-o,c.left=!0),l+i-n>h.documentElement.clientHeight&&i+O.margin<=t.top&&(l=n+t.y-i-O.margin,c.top=!0)),y.classList.toggle("clr-left",c.left),y.classList.toggle("clr-top",c.top),y.style.left=a+"px",y.style.top=l+"px",s.x+=y.offsetLeft,s.y+=y.offsetTop),m={width:g.offsetWidth,height:g.offsetHeight,x:g.offsetLeft+s.x,y:g.offsetTop+s.y}}function c(e){h.querySelectorAll(e).forEach(function(e){var t,a,l=e.parentNode;l.classList.contains("clr-field")||(t=h.createElement("div"),a="clr-field",(O.rtl||e.classList.contains("clr-rtl"))&&(a+=" clr-rtl"),t.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(t,e),t.setAttribute("class",a),t.style.color=e.value,t.appendChild(e))})}function o(e){var t;T&&!O.inline&&(t=T,e&&(T=null,r!==t.value)&&(t.value=r,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(function(){r!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),y.classList.remove("clr-open"),I&&a(),t.dispatchEvent(new Event("close",{bubbles:!0})),O.focusInput&&t.focus({preventScroll:!0}),T=null)}function s(e){var e=function(e){var t;M.fillStyle="#000",M.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(M.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=M.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),t={r:e[0],g:e[1],b:e[2],a:1});return t}(e),t=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=b.max(t,a,l),n=b.min(t,a,l),n=r-n,o=r,i=0,c=0;n&&(r===t&&(i=(a-l)/n),r===a&&(i=2+(l-t)/n),r===l&&(i=4+(t-a)/n),r)&&(c=n/r);return{h:(i=b.floor(60*i))<0?i+360:i,s:b.round(100*c),v:b.round(100*o),a:e.a}}(e);U(t.s,t.v),d(e,t),A.value=t.h,y.style.color="hsl("+t.h+", 100%, 50%)",Q.style.left=t.h/360*100+"%",w.style.left=m.width*t.s/100+"px",w.style.top=m.height-m.height*t.v/100+"px",S.value=100*t.a,C.style.left=100*t.a+"%"}function R(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function u(e){e=void 0!==e?e:L.value,T&&(T.value=e,T.dispatchEvent(new Event("input",{bubbles:!0}))),O.onChange&&O.onChange.call(f,e),h.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e}}))}function Y(e,t){var a,l,r,n,o,e={h:+A.value,s:e/m.width*100,v:100-t/m.height*100,a:S.value/100},i=(i=(t=e).s/100,a=t.v/100,i*=a,l=t.h/60,r=i*(1-b.abs(l%2-1)),i+=a-=i,r+=a,l=b.floor(l)%6,n=[i,r,a,a,r,i][l],o=[r,i,i,r,a,a][l],a=[a,a,r,i,i,r][l],{r:b.round(255*n),g:b.round(255*o),b:b.round(255*a),a:t.a});U(e.s,e.v),d(i,e),u()}function U(e,t){var a=O.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),w.setAttribute("aria-label",a)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},a=t.pageX-m.x,t=t.pageY-m.y;v&&(t+=v.scrollTop),X(a,t),e.preventDefault(),e.stopPropagation()}function X(e,t){e=e<0?0:e>m.width?m.width:e,t=t<0?0:t>m.height?m.height:t,w.style.left=e+"px",w.style.top=t+"px",Y(e,t),w.focus()}function d(e,t){void 0===t&&(t={});var a,l,r=O.format;for(a in e=void 0===e?{}:e)H[a]=e[a];for(l in t)H[l]=t[l];var n,o=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);O.alpha&&(e.a<1||O.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+a+l+r}(H),i=o.substring(0,7);switch(w.style.color=i,C.parentNode.style.color=i,C.style.color=o,k.style.color=o,g.style.display="none",g.offsetHeight,g.style.display="",C.nextElementSibling.style.display="none",C.nextElementSibling.offsetHeight,C.nextElementSibling.style.display="","mixed"===r?r=1===H.a?"hex":"rgb":"auto"===r&&(r=B),r){case"hex":L.value=o;break;case"rgb":L.value=(n=H,!O.alpha||1===n.a&&!O.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":L.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=b.round((a-l)/b.min(l,1-l)*100));return{h:e.h,s:t||0,l:b.round(100*l),a:e.a}}(H),!O.alpha||1===n.a&&!O.forceAlpha?"hsl("+n.h+", "+n.s+"%, "+n.l+"%)":"hsla("+n.h+", "+n.s+"%, "+n.l+"%, "+n.a+")")}h.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+A.value,t=+w.style.left.replace("px",""),a=+w.style.top.replace("px","");y.style.color="hsl("+e+", 100%, 50%)",Q.style.left=e/360*100+"%",Y(t,a)}function z(){var e=S.value/100;C.style.left=100*e+"%",d({a:e}),u()}function G(){v=null,(y=h.createElement("div")).setAttribute("id","clr-picker"),y.className="clr-picker",y.innerHTML='<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="'+O.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+O.a11y.instruction+'"><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="'+O.a11y.hueSlider+'"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="'+O.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+O.a11y.format+'</legend><input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div><button type="button" id="clr-clear" class="clr-clear" aria-label="'+O.a11y.clear+'">'+O.clearLabel+'</button><div id="clr-color-preview" class="clr-preview"><button type="button" id="clr-close" class="clr-close" aria-label="'+O.a11y.close+'">'+O.closeLabel+'</button></div><span id="clr-open-label" hidden>'+O.a11y.open+'</span><span id="clr-swatch-label" hidden>'+O.a11y.swatch+"</span>",h.body.appendChild(y),g=p("clr-color-area"),w=p("clr-color-marker"),E=p("clr-clear"),x=p("clr-close"),k=p("clr-color-preview"),L=p("clr-color-value"),A=p("clr-hue-slider"),Q=p("clr-hue-marker"),S=p("clr-alpha-slider"),C=p("clr-alpha-marker"),P(O.el),c(O.el),l(y,"mousedown",function(e){y.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),l(g,"mousedown",function(e){l(h,"mousemove",t)}),l(g,"touchstart",function(e){h.addEventListener("touchmove",t,{passive:!1})}),l(w,"mousedown",function(e){l(h,"mousemove",t)}),l(w,"touchstart",function(e){h.addEventListener("touchmove",t,{passive:!1})}),l(L,"change",function(e){(T||O.inline)&&(s(L.value),u())}),l(E,"click",function(e){u(""),o()}),l(x,"click",function(e){u(),o()}),l(h,"click",".clr-format input",function(e){B=e.target.value,d(),u()}),l(y,"click",".clr-swatches button",function(e){s(e.target.textContent),u(),O.swatchesOnly&&o()}),l(h,"mouseup",function(e){h.removeEventListener("mousemove",t)}),l(h,"touchend",function(e){h.removeEventListener("touchmove",t)}),l(h,"mousedown",function(e){V=!1,y.classList.remove("clr-keyboard-nav"),o()}),l(h,"keydown",function(e){var t,a=e.key,l=e.target,r=e.shiftKey;"Escape"===a?o(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(a)&&(V=!0,y.classList.add("clr-keyboard-nav")),"Tab"===a&&l.matches(".clr-picker *")&&(t=(a=K()).shift(),a=a.pop(),r&&l===t?(a.focus(),e.preventDefault()):r||l!==a||(t.focus(),e.preventDefault()))}),l(h,"click",".clr-field button",function(e){I&&a(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),l(w,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){X(+w.style.left.replace("px","")+e,+w.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),l(g,"click",t),l(A,"input",e),l(S,"input",z)}function K(){return Array.from(y.querySelectorAll("input, button")).filter(function(e){return!!e.offsetWidth})}function p(e){return h.getElementById(e)}function l(e,t,a,l){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof a?e.addEventListener(t,function(e){r.call(e.target,a)&&l.call(e.target,e)}):(l=a,e.addEventListener(t,l))}function $(e,t){t=void 0!==t?t:[],"loading"!==h.readyState?e.apply(void 0,t):h.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}function J(e,t){r=(T=t).value,F(t),B=R(e),i(),s(e),u(),r!==e&&T.dispatchEvent(new Event("change",{bubbles:!0}))}var f,h,b,v,y,g,m,w,k,L,E,x,A,Q,S,C,T,B,r,V,M,H,O,D,N,j,I,Z}); |
{ | ||
"name": "@melloware/coloris", | ||
"version": "0.18.0", | ||
"version": "0.19.0", | ||
"description": "A lightweight and elegant color picker.", | ||
@@ -16,3 +16,4 @@ "author": "Momo Bassit", | ||
"import": "./dist/esm/coloris.js", | ||
"require": "./dist/umd/coloris.js" | ||
"require": "./dist/umd/coloris.js", | ||
"types": "./dist/coloris.d.ts" | ||
}, | ||
@@ -64,3 +65,3 @@ "./dist/coloris.css": { | ||
"prepack": "gulp build", | ||
"test-npm": "gulp build && node test-npm/run-tests.js" | ||
"test-npm": "gulp build && node test-npm/harness/esm/run-tests.js" | ||
}, | ||
@@ -67,0 +68,0 @@ "browserslist": "> 0.25%, not dead", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
153286
3090