You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@melloware/coloris

Package Overview
Dependencies
Maintainers
2
Versions
35
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@melloware/coloris - npm Package Compare versions

Comparing version

0.18.0
to
0.19.0

254

dist/coloris.d.ts

@@ -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.

163

dist/esm/coloris.js

@@ -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 };

2

dist/esm/coloris.min.js

@@ -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};

155

dist/umd/coloris.js

@@ -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);
});

2

dist/umd/coloris.min.js

@@ -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});

7

package.json
{
"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",

dist/coloris.css

Sorry, the diff of this file is not supported yet

dist/coloris.min.css

Sorry, the diff of this file is not supported yet