\" : '';\n settings.swatches = options.swatches.slice();\n }\n break;\n case 'swatchesOnly':\n settings.swatchesOnly = !!options.swatchesOnly;\n picker.setAttribute('data-minimal', settings.swatchesOnly);\n break;\n case 'alpha':\n settings.alpha = !!options.alpha;\n picker.setAttribute('data-alpha', settings.alpha);\n break;\n case 'inline':\n settings.inline = !!options.inline;\n picker.setAttribute('data-inline', settings.inline);\n\n if (settings.inline) {\n var defaultColor = options.defaultColor || settings.defaultColor;\n\n currentFormat = getColorFormatFromStr(defaultColor);\n updatePickerPosition();\n setColorFromStr(defaultColor);\n }\n break;\n case 'clearButton':\n // Backward compatibility\n if (typeof options.clearButton === 'object') {\n if (options.clearButton.label) {\n settings.clearLabel = options.clearButton.label;\n clearButton.innerHTML = settings.clearLabel;\n }\n\n options.clearButton = options.clearButton.show;\n }\n\n settings.clearButton = !!options.clearButton;\n clearButton.style.display = settings.clearButton ? 'block' : 'none';\n break;\n case 'clearLabel':\n settings.clearLabel = options.clearLabel;\n clearButton.innerHTML = settings.clearLabel;\n break;\n case 'closeButton':\n settings.closeButton = !!options.closeButton;\n\n if (settings.closeButton) {\n picker.insertBefore(closeButton, colorPreview);\n } else {\n colorPreview.appendChild(closeButton);\n }\n\n break;\n case 'closeLabel':\n settings.closeLabel = options.closeLabel;\n closeButton.innerHTML = settings.closeLabel;\n break;\n case 'a11y':\n var labels = options.a11y;\n var update = false;\n\n if (typeof labels === 'object') {\n for (var label in labels) {\n if (labels[label] && settings.a11y[label]) {\n settings.a11y[label] = labels[label];\n update = true;\n }\n }\n }\n\n if (update) {\n var openLabel = getEl('clr-open-label');\n var swatchLabel = getEl('clr-swatch-label');\n\n openLabel.innerHTML = settings.a11y.open;\n swatchLabel.innerHTML = settings.a11y.swatch;\n closeButton.setAttribute('aria-label', settings.a11y.close);\n clearButton.setAttribute('aria-label', settings.a11y.clear);\n hueSlider.setAttribute('aria-label', settings.a11y.hueSlider);\n alphaSlider.setAttribute('aria-label', settings.a11y.alphaSlider);\n colorValue.setAttribute('aria-label', settings.a11y.input);\n colorArea.setAttribute('aria-label', settings.a11y.instruction);\n }\n break;\n default:\n settings[key] = options[key];\n }\n };for (var key in options) {_loop();}\n }\n\n /**\r\n * Add or update a virtual instance.\r\n * @param {String} selector The CSS selector of the elements to which the instance is attached.\r\n * @param {Object} options Per-instance options to apply.\r\n */\n function setVirtualInstance(selector, options) {\n if (typeof selector === 'string' && typeof options === 'object') {\n instances[selector] = options;\n hasInstance = true;\n }\n }\n\n /**\r\n * Remove a virtual instance.\r\n * @param {String} selector The CSS selector of the elements to which the instance is attached.\r\n */\n function removeVirtualInstance(selector) {\n delete instances[selector];\n\n if (Object.keys(instances).length === 0) {\n hasInstance = false;\n\n if (selector === currentInstanceId) {\n resetVirtualInstance();\n }\n }\n }\n\n /**\r\n * Attach a virtual instance to an element if it matches a selector.\r\n * @param {Object} element Target element that will receive a virtual instance if applicable.\r\n */\n function attachVirtualInstance(element) {\n if (hasInstance) {\n // These options can only be set globally, not per instance\n var unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];var _loop2 = function _loop2()\n\n {\n var options = instances[selector];\n\n // If the element matches an instance's CSS selector\n if (element.matches(selector)) {\n currentInstanceId = selector;\n defaultInstance = {};\n\n // Delete unsupported options\n unsupportedOptions.forEach(function (option) {return delete options[option];});\n\n // Back up the default options so we can restore them later\n for (var option in options) {\n defaultInstance[option] = Array.isArray(settings[option]) ? settings[option].slice() : settings[option];\n }\n\n // Set the instance's options\n configure(options);return \"break\";\n\n }\n };for (var selector in instances) {var _ret = _loop2();if (_ret === \"break\") break;}\n }\n }\n\n /**\r\n * Revert any per-instance options that were previously applied.\r\n */\n function resetVirtualInstance() {\n if (Object.keys(defaultInstance).length > 0) {\n configure(defaultInstance);\n currentInstanceId = '';\n defaultInstance = {};\n }\n }\n\n /**\r\n * Bind the color picker to input fields that match the selector.\r\n * @param {string} selector One or more selectors pointing to input fields.\r\n */\n function bindFields(selector) {\n // Show the color picker on click on the input fields that match the selector\n addListener(document, 'click', selector, function (event) {\n // Skip if inline mode is in use\n if (settings.inline) {\n return;\n }\n\n // Apply any per-instance options first\n attachVirtualInstance(event.target);\n\n currentEl = event.target;\n oldColor = currentEl.value;\n currentFormat = getColorFormatFromStr(oldColor);\n picker.classList.add('clr-open');\n\n updatePickerPosition();\n setColorFromStr(oldColor);\n\n if (settings.focusInput || settings.selectInput) {\n colorValue.focus({ preventScroll: true });\n }\n\n if (settings.selectInput) {\n colorValue.select();\n }\n\n // Always focus the first element when using keyboard navigation\n if (keyboardNav || settings.swatchesOnly) {\n getFocusableElements().shift().focus();\n }\n\n // Trigger an \"open\" event\n currentEl.dispatchEvent(new Event('open', { bubbles: true }));\n });\n\n // Update the color preview of the input fields that match the selector\n addListener(document, 'input', selector, function (event) {\n var parent = event.target.parentNode;\n\n // Only update the preview if the field has been previously wrapped\n if (parent.classList.contains('clr-field')) {\n parent.style.color = event.target.value;\n }\n });\n }\n\n /**\r\n * Update the color picker's position and the color gradient's offset\r\n */\n function updatePickerPosition() {\n if (!picker || !currentEl && !settings.inline) return; //** DO NOT REMOVE: in case called before initialized\n var parent = container;\n var scrollY = window.scrollY;\n var pickerWidth = picker.offsetWidth;\n var pickerHeight = picker.offsetHeight;\n var reposition = { left: false, top: false };\n var parentStyle, parentMarginTop, parentBorderTop;\n var offset = { x: 0, y: 0 };\n\n if (parent) {\n parentStyle = window.getComputedStyle(parent);\n parentMarginTop = parseFloat(parentStyle.marginTop);\n parentBorderTop = parseFloat(parentStyle.borderTopWidth);\n\n offset = parent.getBoundingClientRect();\n offset.y += parentBorderTop + scrollY;\n }\n\n if (!settings.inline) {\n var coords = currentEl.getBoundingClientRect();\n var left = coords.x;\n var top = scrollY + coords.y + coords.height + settings.margin;\n\n // If the color picker is inside a custom container\n // set the position relative to it\n if (parent) {\n left -= offset.x;\n top -= offset.y;\n\n if (left + pickerWidth > parent.clientWidth) {\n left += coords.width - pickerWidth;\n reposition.left = true;\n }\n\n if (top + pickerHeight > parent.clientHeight - parentMarginTop) {\n if (pickerHeight + settings.margin <= coords.top - (offset.y - scrollY)) {\n top -= coords.height + pickerHeight + settings.margin * 2;\n reposition.top = true;\n }\n }\n\n top += parent.scrollTop;\n\n // Otherwise set the position relative to the whole document\n } else {\n if (left + pickerWidth > document.documentElement.clientWidth) {\n left += coords.width - pickerWidth;\n reposition.left = true;\n }\n\n if (top + pickerHeight - scrollY > document.documentElement.clientHeight) {\n if (pickerHeight + settings.margin <= coords.top) {\n top = scrollY + coords.y - pickerHeight - settings.margin;\n reposition.top = true;\n }\n }\n }\n\n picker.classList.toggle('clr-left', reposition.left);\n picker.classList.toggle('clr-top', reposition.top);\n picker.style.left = left + \"px\";\n picker.style.top = top + \"px\";\n offset.x += picker.offsetLeft;\n offset.y += picker.offsetTop;\n }\n\n colorAreaDims = {\n width: colorArea.offsetWidth,\n height: colorArea.offsetHeight,\n x: colorArea.offsetLeft + offset.x,\n y: colorArea.offsetTop + offset.y\n };\n }\n\n /**\r\n * Wrap the linked input fields in a div that adds a color preview.\r\n * @param {string} selector One or more selectors pointing to input fields.\r\n */\n function wrapFields(selector) {\n document.querySelectorAll(selector).forEach(function (field) {\n var parentNode = field.parentNode;\n\n if (!parentNode.classList.contains('clr-field')) {\n var wrapper = document.createElement('div');\n var classes = 'clr-field';\n\n if (settings.rtl || field.classList.contains('clr-rtl')) {\n classes += ' clr-rtl';\n }\n\n wrapper.innerHTML = \"\";\n parentNode.insertBefore(wrapper, field);\n wrapper.setAttribute('class', classes);\n wrapper.style.color = field.value;\n wrapper.appendChild(field);\n }\n });\n }\n\n /**\r\n * Close the color picker.\r\n * @param {boolean} [revert] If true, revert the color to the original value.\r\n */\n function closePicker(revert) {\n if (currentEl && !settings.inline) {\n var prevEl = currentEl;\n\n // Revert the color to the original value if needed\n if (revert) {\n // This will prevent the \"change\" event on the colorValue input to execute its handler\n currentEl = undefined;\n\n if (oldColor !== prevEl.value) {\n prevEl.value = oldColor;\n\n // Trigger an \"input\" event to force update the thumbnail next to the input field\n prevEl.dispatchEvent(new Event('input', { bubbles: true }));\n }\n }\n\n // Trigger a \"change\" event if needed\n setTimeout(function () {// Add this to the end of the event loop\n if (oldColor !== prevEl.value) {\n prevEl.dispatchEvent(new Event('change', { bubbles: true }));\n }\n });\n\n // Hide the picker dialog\n picker.classList.remove('clr-open');\n\n // Reset any previously set per-instance options\n if (hasInstance) {\n resetVirtualInstance();\n }\n\n // Trigger a \"close\" event\n prevEl.dispatchEvent(new Event('close', { bubbles: true }));\n\n if (settings.focusInput) {\n prevEl.focus({ preventScroll: true });\n }\n\n // This essentially marks the picker as closed\n currentEl = undefined;\n }\n }\n\n /**\r\n * Set the active color from a string.\r\n * @param {string} str String representing a color.\r\n */\n function setColorFromStr(str) {\n var rgba = strToRGBA(str);\n var hsva = RGBAtoHSVA(rgba);\n\n updateMarkerA11yLabel(hsva.s, hsva.v);\n updateColor(rgba, hsva);\n\n // Update the UI\n hueSlider.value = hsva.h;\n picker.style.color = \"hsl(\" + hsva.h + \", 100%, 50%)\";\n hueMarker.style.left = hsva.h / 360 * 100 + \"%\";\n\n colorMarker.style.left = colorAreaDims.width * hsva.s / 100 + \"px\";\n colorMarker.style.top = colorAreaDims.height - colorAreaDims.height * hsva.v / 100 + \"px\";\n\n alphaSlider.value = hsva.a * 100;\n alphaMarker.style.left = hsva.a * 100 + \"%\";\n }\n\n /**\r\n * Guess the color format from a string.\r\n * @param {string} str String representing a color.\r\n * @return {string} The color format.\r\n */\n function getColorFormatFromStr(str) {\n var format = str.substring(0, 3).toLowerCase();\n\n if (format === 'rgb' || format === 'hsl') {\n return format;\n }\n\n return 'hex';\n }\n\n /**\r\n * Copy the active color to the linked input field.\r\n * @param {number} [color] Color value to override the active color.\r\n */\n function pickColor(color) {\n color = color !== undefined ? color : colorValue.value;\n\n if (currentEl) {\n currentEl.value = color;\n currentEl.dispatchEvent(new Event('input', { bubbles: true }));\n }\n\n if (settings.onChange) {\n settings.onChange.call(window, color, currentEl);\n }\n\n document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color: color, currentEl: currentEl } }));\n }\n\n /**\r\n * Set the active color based on a specific point in the color gradient.\r\n * @param {number} x Left position.\r\n * @param {number} y Top position.\r\n */\n function setColorAtPosition(x, y) {\n var hsva = {\n h: hueSlider.value * 1,\n s: x / colorAreaDims.width * 100,\n v: 100 - y / colorAreaDims.height * 100,\n a: alphaSlider.value / 100\n };\n var rgba = HSVAtoRGBA(hsva);\n\n updateMarkerA11yLabel(hsva.s, hsva.v);\n updateColor(rgba, hsva);\n pickColor();\n }\n\n /**\r\n * Update the color marker's accessibility label.\r\n * @param {number} saturation\r\n * @param {number} value\r\n */\n function updateMarkerA11yLabel(saturation, value) {\n var label = settings.a11y.marker;\n\n saturation = saturation.toFixed(1) * 1;\n value = value.toFixed(1) * 1;\n label = label.replace('{s}', saturation);\n label = label.replace('{v}', value);\n colorMarker.setAttribute('aria-label', label);\n }\n\n //\n /**\r\n * Get the pageX and pageY positions of the pointer.\r\n * @param {object} event The MouseEvent or TouchEvent object.\r\n * @return {object} The pageX and pageY positions.\r\n */\n function getPointerPosition(event) {\n return {\n pageX: event.changedTouches ? event.changedTouches[0].pageX : event.pageX,\n pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY\n };\n }\n\n /**\r\n * Move the color marker when dragged.\r\n * @param {object} event The MouseEvent object.\r\n */\n function moveMarker(event) {\n var pointer = getPointerPosition(event);\n var x = pointer.pageX - colorAreaDims.x;\n var y = pointer.pageY - colorAreaDims.y;\n\n if (container) {\n y += container.scrollTop;\n }\n\n setMarkerPosition(x, y);\n\n // Prevent scrolling while dragging the marker\n event.preventDefault();\n event.stopPropagation();\n }\n\n /**\r\n * Move the color marker when the arrow keys are pressed.\r\n * @param {number} offsetX The horizontal amount to move.\r\n * @param {number} offsetY The vertical amount to move.\r\n */\n function moveMarkerOnKeydown(offsetX, offsetY) {\n var x = colorMarker.style.left.replace('px', '') * 1 + offsetX;\n var y = colorMarker.style.top.replace('px', '') * 1 + offsetY;\n\n setMarkerPosition(x, y);\n }\n\n /**\r\n * Set the color marker's position.\r\n * @param {number} x Left position.\r\n * @param {number} y Top position.\r\n */\n function setMarkerPosition(x, y) {\n // Make sure the marker doesn't go out of bounds\n x = x < 0 ? 0 : x > colorAreaDims.width ? colorAreaDims.width : x;\n y = y < 0 ? 0 : y > colorAreaDims.height ? colorAreaDims.height : y;\n\n // Set the position\n colorMarker.style.left = x + \"px\";\n colorMarker.style.top = y + \"px\";\n\n // Update the color\n setColorAtPosition(x, y);\n\n // Make sure the marker is focused\n colorMarker.focus();\n }\n\n /**\r\n * Update the color picker's input field and preview thumb.\r\n * @param {Object} rgba Red, green, blue and alpha values.\r\n * @param {Object} [hsva] Hue, saturation, value and alpha values.\r\n */\n function updateColor(rgba, hsva) {if (rgba === void 0) {rgba = {};}if (hsva === void 0) {hsva = {};}\n var format = settings.format;\n\n for (var key in rgba) {\n currentColor[key] = rgba[key];\n }\n\n for (var _key in hsva) {\n currentColor[_key] = hsva[_key];\n }\n\n var hex = RGBAToHex(currentColor);\n var opaqueHex = hex.substring(0, 7);\n\n colorMarker.style.color = opaqueHex;\n alphaMarker.parentNode.style.color = opaqueHex;\n alphaMarker.style.color = hex;\n colorPreview.style.color = hex;\n\n // Force repaint the color and alpha gradients as a workaround for a Google Chrome bug\n colorArea.style.display = 'none';\n colorArea.offsetHeight;\n colorArea.style.display = '';\n alphaMarker.nextElementSibling.style.display = 'none';\n alphaMarker.nextElementSibling.offsetHeight;\n alphaMarker.nextElementSibling.style.display = '';\n\n if (format === 'mixed') {\n format = currentColor.a === 1 ? 'hex' : 'rgb';\n } else if (format === 'auto') {\n format = currentFormat;\n }\n\n switch (format) {\n case 'hex':\n colorValue.value = hex;\n break;\n case 'rgb':\n colorValue.value = RGBAToStr(currentColor);\n break;\n case 'hsl':\n colorValue.value = HSLAToStr(HSVAtoHSLA(currentColor));\n break;\n }\n\n // Select the current format in the format switcher\n document.querySelector(\".clr-format [value=\\\"\" + format + \"\\\"]\").checked = true;\n }\n\n /**\r\n * Set the hue when its slider is moved.\r\n */\n function setHue() {\n var hue = hueSlider.value * 1;\n var x = colorMarker.style.left.replace('px', '') * 1;\n var y = colorMarker.style.top.replace('px', '') * 1;\n\n picker.style.color = \"hsl(\" + hue + \", 100%, 50%)\";\n hueMarker.style.left = hue / 360 * 100 + \"%\";\n\n setColorAtPosition(x, y);\n }\n\n /**\r\n * Set the alpha when its slider is moved.\r\n */\n function setAlpha() {\n var alpha = alphaSlider.value / 100;\n\n alphaMarker.style.left = alpha * 100 + \"%\";\n updateColor({ a: alpha });\n pickColor();\n }\n\n /**\r\n * Convert HSVA to RGBA.\r\n * @param {object} hsva Hue, saturation, value and alpha values.\r\n * @return {object} Red, green, blue and alpha values.\r\n */\n function HSVAtoRGBA(hsva) {\n var saturation = hsva.s / 100;\n var value = hsva.v / 100;\n var chroma = saturation * value;\n var hueBy60 = hsva.h / 60;\n var x = chroma * (1 - Math.abs(hueBy60 % 2 - 1));\n var m = value - chroma;\n\n chroma = chroma + m;\n x = x + m;\n\n var index = Math.floor(hueBy60) % 6;\n var red = [chroma, x, m, m, x, chroma][index];\n var green = [x, chroma, chroma, x, m, m][index];\n var blue = [m, m, x, chroma, chroma, x][index];\n\n return {\n r: Math.round(red * 255),\n g: Math.round(green * 255),\n b: Math.round(blue * 255),\n a: hsva.a\n };\n }\n\n /**\r\n * Convert HSVA to HSLA.\r\n * @param {object} hsva Hue, saturation, value and alpha values.\r\n * @return {object} Hue, saturation, lightness and alpha values.\r\n */\n function HSVAtoHSLA(hsva) {\n var value = hsva.v / 100;\n var lightness = value * (1 - hsva.s / 100 / 2);\n var saturation;\n\n if (lightness > 0 && lightness < 1) {\n saturation = Math.round((value - lightness) / Math.min(lightness, 1 - lightness) * 100);\n }\n\n return {\n h: hsva.h,\n s: saturation || 0,\n l: Math.round(lightness * 100),\n a: hsva.a\n };\n }\n\n /**\r\n * Convert RGBA to HSVA.\r\n * @param {object} rgba Red, green, blue and alpha values.\r\n * @return {object} Hue, saturation, value and alpha values.\r\n */\n function RGBAtoHSVA(rgba) {\n var red = rgba.r / 255;\n var green = rgba.g / 255;\n var blue = rgba.b / 255;\n var xmax = Math.max(red, green, blue);\n var xmin = Math.min(red, green, blue);\n var chroma = xmax - xmin;\n var value = xmax;\n var hue = 0;\n var saturation = 0;\n\n if (chroma) {\n if (xmax === red) {hue = (green - blue) / chroma;}\n if (xmax === green) {hue = 2 + (blue - red) / chroma;}\n if (xmax === blue) {hue = 4 + (red - green) / chroma;}\n if (xmax) {saturation = chroma / xmax;}\n }\n\n hue = Math.floor(hue * 60);\n\n return {\n h: hue < 0 ? hue + 360 : hue,\n s: Math.round(saturation * 100),\n v: Math.round(value * 100),\n a: rgba.a\n };\n }\n\n /**\r\n * Parse a string to RGBA.\r\n * @param {string} str String representing a color.\r\n * @return {object} Red, green, blue and alpha values.\r\n */\n function strToRGBA(str) {\n var regex = /^((rgba)|rgb)[\\D]+([\\d.]+)[\\D]+([\\d.]+)[\\D]+([\\d.]+)[\\D]*?([\\d.]+|$)/i;\n var match, rgba;\n\n // Default to black for invalid color strings\n ctx.fillStyle = '#000';\n\n // Use canvas to convert the string to a valid color string\n ctx.fillStyle = str;\n match = regex.exec(ctx.fillStyle);\n\n if (match) {\n rgba = {\n r: match[3] * 1,\n g: match[4] * 1,\n b: match[5] * 1,\n a: match[6] * 1\n };\n\n // Workaround to mitigate a Chromium bug where the alpha value is rounded incorrectly\n rgba.a = +rgba.a.toFixed(2);\n\n } else {\n match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map(function (h) {return parseInt(h, 16);});\n rgba = {\n r: match[0],\n g: match[1],\n b: match[2],\n a: 1\n };\n }\n\n return rgba;\n }\n\n /**\r\n * Convert RGBA to Hex.\r\n * @param {object} rgba Red, green, blue and alpha values.\r\n * @return {string} Hex color string.\r\n */\n function RGBAToHex(rgba) {\n var R = rgba.r.toString(16);\n var G = rgba.g.toString(16);\n var B = rgba.b.toString(16);\n var A = '';\n\n if (rgba.r < 16) {\n R = '0' + R;\n }\n\n if (rgba.g < 16) {\n G = '0' + G;\n }\n\n if (rgba.b < 16) {\n B = '0' + B;\n }\n\n if (settings.alpha && (rgba.a < 1 || settings.forceAlpha)) {\n var alpha = rgba.a * 255 | 0;\n A = alpha.toString(16);\n\n if (alpha < 16) {\n A = '0' + A;\n }\n }\n\n return '#' + R + G + B + A;\n }\n\n /**\r\n * Convert RGBA values to a CSS rgb/rgba string.\r\n * @param {object} rgba Red, green, blue and alpha values.\r\n * @return {string} CSS color string.\r\n */\n function RGBAToStr(rgba) {\n if (!settings.alpha || rgba.a === 1 && !settings.forceAlpha) {\n return \"rgb(\" + rgba.r + \", \" + rgba.g + \", \" + rgba.b + \")\";\n } else {\n return \"rgba(\" + rgba.r + \", \" + rgba.g + \", \" + rgba.b + \", \" + rgba.a + \")\";\n }\n }\n\n /**\r\n * Convert HSLA values to a CSS hsl/hsla string.\r\n * @param {object} hsla Hue, saturation, lightness and alpha values.\r\n * @return {string} CSS color string.\r\n */\n function HSLAToStr(hsla) {\n if (!settings.alpha || hsla.a === 1 && !settings.forceAlpha) {\n return \"hsl(\" + hsla.h + \", \" + hsla.s + \"%, \" + hsla.l + \"%)\";\n } else {\n return \"hsla(\" + hsla.h + \", \" + hsla.s + \"%, \" + hsla.l + \"%, \" + hsla.a + \")\";\n }\n }\n\n /**\r\n * Init the color picker.\r\n */\n function init() {\n if (document.getElementById('clr-picker')) return; //** DO NOT REMOVE: Prevent binding events multiple times\n // Render the UI\n container = undefined;\n picker = document.createElement('div');\n picker.setAttribute('id', 'clr-picker');\n picker.className = 'clr-picker';\n picker.innerHTML =\n \"\" + (\"
\") +\n '' +\n '
' +\n '
' + (\"\") +\n '' +\n '
' +\n '
' + (\"\") +\n '' +\n '' +\n '
' +\n '
' +\n '' +\n '
' +\n '' + (\"\") +\n '
' + (\"\") +\n '
' + (\"\" +\n settings.a11y.open + \"\") + (\"\" +\n settings.a11y.swatch + \"\");\n\n // Append the color picker to the DOM\n document.body.appendChild(picker);\n\n // Reference the UI elements\n colorArea = getEl('clr-color-area');\n colorMarker = getEl('clr-color-marker');\n clearButton = getEl('clr-clear');\n closeButton = getEl('clr-close');\n colorPreview = getEl('clr-color-preview');\n colorValue = getEl('clr-color-value');\n hueSlider = getEl('clr-hue-slider');\n hueMarker = getEl('clr-hue-marker');\n alphaSlider = getEl('clr-alpha-slider');\n alphaMarker = getEl('clr-alpha-marker');\n\n // Bind the picker to the default selector\n bindFields(settings.el);\n wrapFields(settings.el);\n\n addListener(picker, 'mousedown', function (event) {\n picker.classList.remove('clr-keyboard-nav');\n event.stopPropagation();\n });\n\n addListener(colorArea, 'mousedown', function (event) {\n addListener(document, 'mousemove', moveMarker);\n });\n\n addListener(colorArea, 'touchstart', function (event) {\n document.addEventListener('touchmove', moveMarker, { passive: false });\n });\n\n addListener(colorMarker, 'mousedown', function (event) {\n addListener(document, 'mousemove', moveMarker);\n });\n\n addListener(colorMarker, 'touchstart', function (event) {\n document.addEventListener('touchmove', moveMarker, { passive: false });\n });\n\n addListener(colorValue, 'change', function (event) {\n if (currentEl || settings.inline) {\n setColorFromStr(colorValue.value);\n pickColor();\n }\n });\n\n addListener(clearButton, 'click', function (event) {\n pickColor('');\n closePicker();\n });\n\n addListener(closeButton, 'click', function (event) {\n pickColor();\n closePicker();\n });\n\n addListener(document, 'click', '.clr-format input', function (event) {\n currentFormat = event.target.value;\n updateColor();\n pickColor();\n });\n\n addListener(picker, 'click', '.clr-swatches button', function (event) {\n setColorFromStr(event.target.textContent);\n pickColor();\n\n if (settings.swatchesOnly) {\n closePicker();\n }\n });\n\n addListener(document, 'mouseup', function (event) {\n document.removeEventListener('mousemove', moveMarker);\n });\n\n addListener(document, 'touchend', function (event) {\n document.removeEventListener('touchmove', moveMarker);\n });\n\n addListener(document, 'mousedown', function (event) {\n keyboardNav = false;\n picker.classList.remove('clr-keyboard-nav');\n closePicker();\n });\n\n addListener(document, 'keydown', function (event) {\n var key = event.key;\n var target = event.target;\n var shiftKey = event.shiftKey;\n var navKeys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n if (key === 'Escape') {\n closePicker(true);\n\n // Display focus rings when using the keyboard\n } else if (navKeys.includes(key)) {\n keyboardNav = true;\n picker.classList.add('clr-keyboard-nav');\n }\n\n // Trap the focus within the color picker while it's open\n if (key === 'Tab' && target.matches('.clr-picker *')) {\n var focusables = getFocusableElements();\n var firstFocusable = focusables.shift();\n var lastFocusable = focusables.pop();\n\n if (shiftKey && target === firstFocusable) {\n lastFocusable.focus();\n event.preventDefault();\n } else if (!shiftKey && target === lastFocusable) {\n firstFocusable.focus();\n event.preventDefault();\n }\n }\n });\n\n addListener(document, 'click', '.clr-field button', function (event) {\n // Reset any previously set per-instance options\n if (hasInstance) {\n resetVirtualInstance();\n }\n\n // Open the color picker\n event.target.nextElementSibling.dispatchEvent(new Event('click', { bubbles: true }));\n });\n\n addListener(colorMarker, 'keydown', function (event) {\n var movements = {\n ArrowUp: [0, -1],\n ArrowDown: [0, 1],\n ArrowLeft: [-1, 0],\n ArrowRight: [1, 0]\n };\n\n if (Object.keys(movements).includes(event.key)) {\n moveMarkerOnKeydown.apply(void 0, movements[event.key]);\n event.preventDefault();\n }\n });\n\n addListener(colorArea, 'click', moveMarker);\n addListener(hueSlider, 'input', setHue);\n addListener(alphaSlider, 'input', setAlpha);\n }\n\n /**\r\n * Return a list of focusable elements within the color picker.\r\n * @return {array} The list of focusable DOM elemnts.\r\n */\n function getFocusableElements() {\n var controls = Array.from(picker.querySelectorAll('input, button'));\n var focusables = controls.filter(function (node) {return !!node.offsetWidth;});\n\n return focusables;\n }\n\n /**\r\n * Shortcut for getElementById to optimize the minified JS.\r\n * @param {string} id The element id.\r\n * @return {object} The DOM element with the provided id.\r\n */\n function getEl(id) {\n return document.getElementById(id);\n }\n\n /**\r\n * Shortcut for addEventListener to optimize the minified JS.\r\n * @param {object} context The context to which the listener is attached.\r\n * @param {string} type Event type.\r\n * @param {(string|function)} selector Event target if delegation is used, event handler if not.\r\n * @param {function} [fn] Event handler if delegation is used.\r\n */\n function addListener(context, type, selector, fn) {\n var matches = Element.prototype.matches || Element.prototype.msMatchesSelector;\n\n // Delegate event to the target of the selector\n if (typeof selector === 'string') {\n context.addEventListener(type, function (event) {\n if (matches.call(event.target, selector)) {\n fn.call(event.target, event);\n }\n });\n\n // If the selector is not a string then it's a function\n // in which case we need a regular event listener\n } else {\n fn = selector;\n context.addEventListener(type, fn);\n }\n }\n\n /**\r\n * Call a function only when the DOM is ready.\r\n * @param {function} fn The function to call.\r\n * @param {array} [args] Arguments to pass to the function.\r\n */\n function DOMReady(fn, args) {\n args = args !== undefined ? args : [];\n\n if (document.readyState !== 'loading') {\n fn.apply(void 0, args);\n } else {\n document.addEventListener('DOMContentLoaded', function () {\n fn.apply(void 0, args);\n });\n }\n }\n\n // Polyfill for Nodelist.forEach\n if (NodeList !== undefined && NodeList.prototype && !NodeList.prototype.forEach) {\n NodeList.prototype.forEach = Array.prototype.forEach;\n }\n\n //*****************************************************\n //******* NPM: Custom code starts here ****************\n //*****************************************************\n\n /**\r\n * Copy the active color to the linked input field and set the color.\r\n * @param {string} [color] Color value to override the active color.\r\n * @param {HTMLelement} [target] the element setting the color on\r\n */\n function setColor(color, target) {\n currentEl = target;\n oldColor = currentEl.value;\n attachVirtualInstance(target);\n currentFormat = getColorFormatFromStr(color);\n updatePickerPosition();\n setColorFromStr(color);\n pickColor();\n if (oldColor !== color) {\n currentEl.dispatchEvent(new Event('change', { bubbles: true }));\n }\n }\n\n // Expose the color picker to the global scope\n var Coloris = function () {\n var methods = {\n init: init,\n set: configure,\n wrap: wrapFields,\n close: closePicker,\n setInstance: setVirtualInstance,\n setColor: setColor,\n removeInstance: removeVirtualInstance,\n updatePosition: updatePickerPosition\n };\n\n function Coloris(options) {\n DOMReady(function () {\n if (options) {\n if (typeof options === 'string') {\n bindFields(options);\n } else {\n configure(options);\n }\n }\n });\n }var _loop3 = function _loop3(key)\n\n {\n Coloris[key] = function () {for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {args[_key2] = arguments[_key2];}\n DOMReady(methods[key], args);\n };\n };for (var key in methods) {_loop3(key);}\n\n // handle window resize events re-aligning the panel\n DOMReady(function () {\n window.addEventListener('resize', function (event) {Coloris.updatePosition();});\n window.addEventListener('scroll', function (event) {Coloris.updatePosition();});\n });\n\n return Coloris;\n }();\n\n // Ensure init function is available not only as as a default import\n Coloris.coloris = Coloris;\n\n // Init the color picker when the DOM is ready\n return Coloris;\n\n }(window, document, Math);\n}();\n\nvar _coloris = Coloris.coloris;\nvar _init = Coloris.init;\nvar _set = Coloris.set;\nvar _wrap = Coloris.wrap;\nvar _close = Coloris.close;\nvar _setInstance = Coloris.setInstance;\nvar _removeInstance = Coloris.removeInstance;\nvar _updatePosition = Coloris.updatePosition;\nexport default Coloris;\nexport {\n _coloris as coloris,\n _close as close,\n _init as init,\n _set as set,\n _wrap as wrap,\n _setInstance as setInstance,\n _removeInstance as removeInstance,\n _updatePosition as updatePosition };"],"names":[],"sourceRoot":""}