├── .gitignore
├── LICENSE
├── README.md
├── _config.yml
├── dist
    ├── acolorpicker.d.ts
    └── acolorpicker.js
├── docs
    ├── docs.js
    ├── docs.js.map
    └── index.html
├── package-lock.json
├── package.json
├── screenshots
    ├── favicon.png
    ├── favicon.svg
    ├── logotype.png
    ├── logotype.svg
    ├── screenshot.png
    ├── screenshot_all.png
    ├── screenshot_alpha.png
    ├── screenshot_palette.png
    └── screenshot_palette_editable.png
├── src
    ├── acolorpicker.css
    ├── acolorpicker.d.ts
    ├── acolorpicker.html
    ├── acolorpicker.js
    ├── docs
    │   ├── docs.css
    │   ├── docs.js
    │   └── index.html
    ├── test-ts
    │   ├── test.ts
    │   └── tsconfig.json
    ├── test.html
    └── utils.js
├── webpack.common.js
├── webpack.dev.js
├── webpack.docs.js
└── webpack.prod.js


/.gitignore:
--------------------------------------------------------------------------------
1 | *.sublime*
2 | .DS_Store
3 | data/
4 | node_modules/
5 | bower_components/
6 | .jshintrc
7 | .eslintrc*
8 | todo
9 | .vscode/


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017-2018 Gianfranco Caldi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | [![npm version](https://badge.fury.io/js/a-color-picker.svg)](https://badge.fury.io/js/a-color-picker) [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![live demo](https://img.shields.io/badge/demo-codepen-yellow.svg)](https://codepen.io/narsenico/pen/xPxNeE) [![](https://data.jsdelivr.com/v1/package/npm/a-color-picker/badge)](https://www.jsdelivr.com/package/npm/a-color-picker)
 3 | 
 4 | ![a-color-picker](/screenshots/logotype.png)
 5 | 
 6 | See [api and demo](https://narsenico.github.io/a-color-picker/)
 7 | 
 8 | ![a-color-picker screenshot](/screenshots/screenshot_all.png)
 9 | 
10 | ## Usage
11 | 1. Include `acolorpicker.js`
12 |     ```html
13 |     <script type="text/javascript" src="acolorpicker.js"></script>
14 |     ```
15 |     or require `a-color-picker`
16 |     ```js
17 |     const AColorPicker = require('a-color-picker');
18 |     ```
19 | 2. Call this JavaScript function
20 |     ```js
21 |     AColorPicker.from('div.container');
22 |     ```


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-slate


--------------------------------------------------------------------------------
/dist/acolorpicker.d.ts:
--------------------------------------------------------------------------------
 1 | declare module 'a-color-picker';
 2 | 
 3 | declare namespace AColorPicker {
 4 | 
 5 |     type OutFormat = (
 6 |         'rgb' | 'rgbcss' | 'rgbcss4' | 'rgba' | 'rgbacss' |
 7 |         'hsl' | 'hslcss' | 'hslcss4' | 'hsla' | 'hslacss' |
 8 |         'hex' | 'hexcss4' | 'int'
 9 |     );
10 | 
11 |     type EventName = ('change' | 'coloradd' | 'colorremove');
12 | 
13 |     type ACPCallback = (controller: ACPController, color?: string) => void;
14 | 
15 |     interface ACPHTMLElement extends HTMLElement {
16 |         readonly ctrl: ACPController;
17 |     }
18 | 
19 |     interface ACPColor extends Object {
20 |         rgb: Array<number>;
21 |         rgbcss: string;
22 |         rgbcss4: string;
23 |         rgba: Array<number>;
24 |         rgbacss: string;
25 |         hsl: Array<number>;
26 |         hslcss: string;
27 |         hslcss4: string;
28 |         hsla: Array<number>;
29 |         hslacss: string;
30 |         hex: string;
31 |         hexcss4: string;
32 |         int: number;
33 |         toString(): string;
34 |     }
35 | 
36 |     interface ACPController extends Object {
37 |         readonly element: ACPHTMLElement;
38 |         readonly rgbhex: string;
39 |         readonly all: ACPColor;
40 |         readonly palette: Array<string>;
41 |         rgb: Array<number>;
42 |         rgba: Array<number>;
43 |         hsl: Array<number>;
44 |         hsla: Array<number>;
45 |         color: string | Array<number>;
46 |         /**
47 |          * @deprecated  use on('change', cb) instead
48 |          */
49 |         onchange: ACPCallback;
50 |         /**
51 |          * @deprecated  use on('coloradd', cb) instead
52 |          */
53 |         oncoloradd: ACPCallback;
54 |         /**
55 |          * @deprecated  use on('colorremove', cb) instead
56 |          */
57 |         oncolorremove: ACPCallback;
58 |         on(eventName: EventName, cb: ACPCallback): ACPController;
59 |         off(eventName: EventName, cb?: ACPCallback): ACPController;
60 |     }
61 | 
62 |     /**
63 |      * @param   color   {string | Array<number>}   color to be parsed
64 |      * @param   outFormat   {string}    format
65 |      * @returns {string}    color formattted    
66 |      */
67 |     export function parseColor(color: string | Array<number>, outFormat?: OutFormat): string;
68 |     /**
69 |      * @param   color   {string | Array<number>}   color to be parsed
70 |      * @param   objToFill   {Object}    plain object
71 |      * @returns {Object}    objToFill object filled with properties
72 |      */
73 |     export function parseColor(color: string | Array<number>, objToFill: Object): Object & ACPColor;
74 |     export function createPicker(options?: Object): ACPController;
75 |     export function createPicker(element: any, options?: Object): ACPController;
76 |     export function from(selector: any, options?: Object): Array<ACPController>;
77 | }
78 | 
79 | export = AColorPicker;


--------------------------------------------------------------------------------
/dist/acolorpicker.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * a-color-picker (https://github.com/narsenico/a-color-picker)
 3 |  * 
 4 |  * Copyright (c) 2017-2018, Gianfranco Caldi.
 5 |  * Released under the MIT License.
 6 |  */
 7 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("AColorPicker",[],t):"object"==typeof exports?exports.AColorPicker=t():e.AColorPicker=t()}("undefined"!=typeof self?self:this,function(){return function(e){var t={};function r(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,i){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(r.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(i,o,function(t){return e[t]}.bind(null,o));return i},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t,r){"use strict";
 8 | /*!
 9 |  * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
10 |  *
11 |  * Copyright (c) 2014-2017, Jon Schlinkert.
12 |  * Released under the MIT License.
13 |  */var i=r(3);function o(e){return!0===i(e)&&"[object Object]"===Object.prototype.toString.call(e)}e.exports=function(e){var t,r;return!1!==o(e)&&"function"==typeof(t=e.constructor)&&!1!==o(r=t.prototype)&&!1!==r.hasOwnProperty("isPrototypeOf")}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.VERSION=t.PALETTE_MATERIAL_CHROME=t.PALETTE_MATERIAL_500=t.COLOR_NAMES=t.getLuminance=t.intToRgb=t.rgbToInt=t.rgbToHsv=t.rgbToHsl=t.hslToRgb=t.rgbToHex=t.parseColor=t.parseColorToHsla=t.parseColorToHsl=t.parseColorToRgba=t.parseColorToRgb=t.from=t.createPicker=void 0;var i=function(){function e(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,r,i){return r&&e(t.prototype,r),i&&e(t,i),t}}(),o=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],i=!0,o=!1,s=void 0;try{for(var n,a=e[Symbol.iterator]();!(i=(n=a.next()).done)&&(r.push(n.value),!t||r.length!==t);i=!0);}catch(e){o=!0,s=e}finally{try{!i&&a.return&&a.return()}finally{if(o)throw s}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},s=r(2),n=l(r(0)),a=l(r(4));function l(e){return e&&e.__esModule?e:{default:e}}function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}
14 | /*!
15 |  * a-color-picker
16 |  * https://github.com/narsenico/a-color-picker
17 |  *
18 |  * Copyright (c) 2017-2019, Gianfranco Caldi.
19 |  * Released under the MIT License.
20 |  */var u="undefined"!=typeof window&&window.navigator.userAgent.indexOf("Edge")>-1,p="undefined"!=typeof window&&window.navigator.userAgent.indexOf("rv:")>-1,d={id:null,attachTo:"body",showHSL:!0,showRGB:!0,showHEX:!0,showAlpha:!1,color:"#ff0000",palette:null,paletteEditable:!1,useAlphaInPalette:"auto",slBarSize:[232,150],hueBarSize:[150,11],alphaBarSize:[150,11]},f="COLOR",g="RGBA_USER",b="HSLA_USER";function v(e,t,r){return e?e instanceof HTMLElement?e:e instanceof NodeList?e[0]:"string"==typeof e?document.querySelector(e):e.jquery?e.get(0):r?t:null:t}function m(e){var t=e.getContext("2d"),r=+e.width,i=+e.height,n=t.createLinearGradient(1,1,1,i-1);return n.addColorStop(0,"white"),n.addColorStop(1,"black"),{setHue:function(e){var o=t.createLinearGradient(1,0,r-1,0);o.addColorStop(0,"hsla("+e+", 100%, 50%, 0)"),o.addColorStop(1,"hsla("+e+", 100%, 50%, 1)"),t.fillStyle=n,t.fillRect(0,0,r,i),t.fillStyle=o,t.globalCompositeOperation="multiply",t.fillRect(0,0,r,i),t.globalCompositeOperation="source-over"},grabColor:function(e,r){return t.getImageData(e,r,1,1).data},findColor:function(e,t,n){var a=(0,s.rgbToHsv)(e,t,n),l=o(a,3),c=l[1],h=l[2];return[c*r,i-h*i]}}}function A(e,t,r){return null===e?t:/^\s*$/.test(e)?r:!!/true|yes|1/i.test(e)||!/false|no|0/i.test(e)&&t}function y(e,t,r){if(null===e)return t;if(/^\s*$/.test(e))return r;var i=e.split(",").map(Number);return 2===i.length&&i[0]&&i[1]?i:t}var k=function(){function e(t,r){if(c(this,e),r?(t=v(t),this.options=Object.assign({},d,r)):t&&(0,n.default)(t)?(this.options=Object.assign({},d,t),t=v(this.options.attachTo)):(this.options=Object.assign({},d),t=v((0,s.nvl)(t,this.options.attachTo))),!t)throw new Error("Container not found: "+this.options.attachTo);!function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"acp-";if(t.hasAttribute(r+"show-hsl")&&(e.showHSL=A(t.getAttribute(r+"show-hsl"),d.showHSL,!0)),t.hasAttribute(r+"show-rgb")&&(e.showRGB=A(t.getAttribute(r+"show-rgb"),d.showRGB,!0)),t.hasAttribute(r+"show-hex")&&(e.showHEX=A(t.getAttribute(r+"show-hex"),d.showHEX,!0)),t.hasAttribute(r+"show-alpha")&&(e.showAlpha=A(t.getAttribute(r+"show-alpha"),d.showAlpha,!0)),t.hasAttribute(r+"palette-editable")&&(e.paletteEditable=A(t.getAttribute(r+"palette-editable"),d.paletteEditable,!0)),t.hasAttribute(r+"sl-bar-size")&&(e.slBarSize=y(t.getAttribute(r+"sl-bar-size"),d.slBarSize,[232,150])),t.hasAttribute(r+"hue-bar-size")&&(e.hueBarSize=y(t.getAttribute(r+"hue-bar-size"),d.hueBarSize,[150,11]),e.alphaBarSize=e.hueBarSize),t.hasAttribute(r+"palette")){var i=t.getAttribute(r+"palette");switch(i){case"PALETTE_MATERIAL_500":e.palette=s.PALETTE_MATERIAL_500;break;case"PALETTE_MATERIAL_CHROME":case"":e.palette=s.PALETTE_MATERIAL_CHROME;break;default:e.palette=i.split(/[;|]/)}}t.hasAttribute(r+"color")&&(e.color=t.getAttribute(r+"color"))}(this.options,t),this.H=0,this.S=0,this.L=0,this.R=0,this.G=0,this.B=0,this.A=1,this.palette={},this.element=document.createElement("div"),this.options.id&&(this.element.id=this.options.id),this.element.className="a-color-picker",this.element.innerHTML=a.default,t.appendChild(this.element);var i=this.element.querySelector(".a-color-picker-h");this.setupHueCanvas(i),this.hueBarHelper=m(i),this.huePointer=this.element.querySelector(".a-color-picker-h+.a-color-picker-dot");var o=this.element.querySelector(".a-color-picker-sl");this.setupSlCanvas(o),this.slBarHelper=m(o),this.slPointer=this.element.querySelector(".a-color-picker-sl+.a-color-picker-dot"),this.preview=this.element.querySelector(".a-color-picker-preview"),this.setupClipboard(this.preview.querySelector(".a-color-picker-clipbaord")),this.options.showHSL?(this.setupInput(this.inputH=this.element.querySelector(".a-color-picker-hsl>input[nameref=H]")),this.setupInput(this.inputS=this.element.querySelector(".a-color-picker-hsl>input[nameref=S]")),this.setupInput(this.inputL=this.element.querySelector(".a-color-picker-hsl>input[nameref=L]"))):this.element.querySelector(".a-color-picker-hsl").remove(),this.options.showRGB?(this.setupInput(this.inputR=this.element.querySelector(".a-color-picker-rgb>input[nameref=R]")),this.setupInput(this.inputG=this.element.querySelector(".a-color-picker-rgb>input[nameref=G]")),this.setupInput(this.inputB=this.element.querySelector(".a-color-picker-rgb>input[nameref=B]"))):this.element.querySelector(".a-color-picker-rgb").remove(),this.options.showHEX?this.setupInput(this.inputRGBHEX=this.element.querySelector("input[nameref=RGBHEX]")):this.element.querySelector(".a-color-picker-rgbhex").remove(),this.options.paletteEditable||this.options.palette&&this.options.palette.length>0?this.setPalette(this.paletteRow=this.element.querySelector(".a-color-picker-palette")):(this.paletteRow=this.element.querySelector(".a-color-picker-palette"),this.paletteRow.remove()),this.options.showAlpha?(this.setupAlphaCanvas(this.element.querySelector(".a-color-picker-a")),this.alphaPointer=this.element.querySelector(".a-color-picker-a+.a-color-picker-dot")):this.element.querySelector(".a-color-picker-alpha").remove(),this.element.style.width=this.options.slBarSize[0]+"px",this.onValueChanged(f,this.options.color)}return i(e,[{key:"setupHueCanvas",value:function(e){var t=this;e.width=this.options.hueBarSize[0],e.height=this.options.hueBarSize[1];for(var r=e.getContext("2d"),i=r.createLinearGradient(0,0,this.options.hueBarSize[0],0),o=0;o<=1;o+=1/360)i.addColorStop(o,"hsl("+360*o+", 100%, 50%)");r.fillStyle=i,r.fillRect(0,0,this.options.hueBarSize[0],this.options.hueBarSize[1]);var n=function(r){var i=(0,s.limit)(r.clientX-e.getBoundingClientRect().left,0,t.options.hueBarSize[0]),o=Math.round(360*i/t.options.hueBarSize[0]);t.huePointer.style.left=i-7+"px",t.onValueChanged("H",o)},a=function e(){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e)};e.addEventListener("mousedown",function(e){n(e),document.addEventListener("mousemove",n),document.addEventListener("mouseup",a)})}},{key:"setupSlCanvas",value:function(e){var t=this;e.width=this.options.slBarSize[0],e.height=this.options.slBarSize[1];var r=function(r){var i=(0,s.limit)(r.clientX-e.getBoundingClientRect().left,0,t.options.slBarSize[0]-1),o=(0,s.limit)(r.clientY-e.getBoundingClientRect().top,0,t.options.slBarSize[1]-1),n=t.slBarHelper.grabColor(i,o);t.slPointer.style.left=i-7+"px",t.slPointer.style.top=o-7+"px",t.onValueChanged("RGB",n)},i=function e(){document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",e)};e.addEventListener("mousedown",function(e){r(e),document.addEventListener("mousemove",r),document.addEventListener("mouseup",i)})}},{key:"setupAlphaCanvas",value:function(e){var t=this;e.width=this.options.alphaBarSize[0],e.height=this.options.alphaBarSize[1];var r=e.getContext("2d"),i=r.createLinearGradient(0,0,e.width-1,0);i.addColorStop(0,"hsla(0, 0%, 50%, 0)"),i.addColorStop(1,"hsla(0, 0%, 50%, 1)"),r.fillStyle=i,r.fillRect(0,0,this.options.alphaBarSize[0],this.options.alphaBarSize[1]);var o=function(r){var i=(0,s.limit)(r.clientX-e.getBoundingClientRect().left,0,t.options.alphaBarSize[0]),o=+(i/t.options.alphaBarSize[0]).toFixed(2);t.alphaPointer.style.left=i-7+"px",t.onValueChanged("ALPHA",o)},n=function e(){document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",e)};e.addEventListener("mousedown",function(e){o(e),document.addEventListener("mousemove",o),document.addEventListener("mouseup",n)})}},{key:"setupInput",value:function(e){var t=this,r=+e.min,i=+e.max,o=e.getAttribute("nameref");e.hasAttribute("select-on-focus")&&e.addEventListener("focus",function(){e.select()}),"text"===e.type?e.addEventListener("change",function(){t.onValueChanged(o,e.value)}):((u||p)&&e.addEventListener("keydown",function(n){"Up"===n.key?(e.value=(0,s.limit)(+e.value+1,r,i),t.onValueChanged(o,e.value),n.returnValue=!1):"Down"===n.key&&(e.value=(0,s.limit)(+e.value-1,r,i),t.onValueChanged(o,e.value),n.returnValue=!1)}),e.addEventListener("change",function(){var n=+e.value;t.onValueChanged(o,(0,s.limit)(n,r,i))}))}},{key:"setupClipboard",value:function(e){var t=this;e.title="click to copy",e.addEventListener("click",function(){e.value=(0,s.parseColor)([t.R,t.G,t.B,t.A],"hexcss4"),e.select(),document.execCommand("copy")})}},{key:"setPalette",value:function(e){var t=this,r="auto"===this.options.useAlphaInPalette?this.options.showAlpha:this.options.useAlphaInPalette,i=null;switch(this.options.palette){case"PALETTE_MATERIAL_500":i=s.PALETTE_MATERIAL_500;break;case"PALETTE_MATERIAL_CHROME":i=s.PALETTE_MATERIAL_CHROME;break;default:i=(0,s.ensureArray)(this.options.palette)}if(this.options.paletteEditable||i.length>0){var o=function(r,i,o){var s=e.querySelector('.a-color-picker-palette-color[data-color="'+r+'"]')||document.createElement("div");s.className="a-color-picker-palette-color",s.style.backgroundColor=r,s.setAttribute("data-color",r),s.title=r,e.insertBefore(s,i),t.palette[r]=!0,o&&t.onPaletteColorAdd(r)},n=function(r,i){r?(e.removeChild(r),t.palette[r.getAttribute("data-color")]=!1,i&&t.onPaletteColorRemove(r.getAttribute("data-color"))):(e.querySelectorAll(".a-color-picker-palette-color[data-color]").forEach(function(t){e.removeChild(t)}),Object.keys(t.palette).forEach(function(e){t.palette[e]=!1}),i&&t.onPaletteColorRemove())};if(i.map(function(e){return(0,s.parseColor)(e,r?"rgbcss4":"hex")}).filter(function(e){return!!e}).forEach(function(e){return o(e)}),this.options.paletteEditable){var a=document.createElement("div");a.className="a-color-picker-palette-color a-color-picker-palette-add",a.innerHTML="+",e.appendChild(a),e.addEventListener("click",function(e){/a-color-picker-palette-add/.test(e.target.className)?e.shiftKey?n(null,!0):o(r?(0,s.parseColor)([t.R,t.G,t.B,t.A],"rgbcss4"):(0,s.rgbToHex)(t.R,t.G,t.B),e.target,!0):/a-color-picker-palette-color/.test(e.target.className)&&(e.shiftKey?n(e.target,!0):t.onValueChanged(f,e.target.getAttribute("data-color")))})}else e.addEventListener("click",function(e){/a-color-picker-palette-color/.test(e.target.className)&&t.onValueChanged(f,e.target.getAttribute("data-color"))})}else e.style.display="none"}},{key:"updatePalette",value:function(e){this.paletteRow.innerHTML="",this.palette={},this.paletteRow.parentElement||this.element.appendChild(this.paletteRow),this.options.palette=e,this.setPalette(this.paletteRow)}},{key:"onValueChanged",value:function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{silent:!1};switch(e){case"H":this.H=t;var i=(0,s.hslToRgb)(this.H,this.S,this.L),n=o(i,3);this.R=n[0],this.G=n[1],this.B=n[2],this.slBarHelper.setHue(t),this.updatePointerH(this.H),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B,this.A);break;case"S":this.S=t;var a=(0,s.hslToRgb)(this.H,this.S,this.L),l=o(a,3);this.R=l[0],this.G=l[1],this.B=l[2],this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B,this.A);break;case"L":this.L=t;var c=(0,s.hslToRgb)(this.H,this.S,this.L),h=o(c,3);this.R=h[0],this.G=h[1],this.B=h[2],this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B,this.A);break;case"R":this.R=t;var u=(0,s.rgbToHsl)(this.R,this.G,this.B),p=o(u,3);this.H=p[0],this.S=p[1],this.L=p[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B,this.A);break;case"G":this.G=t;var d=(0,s.rgbToHsl)(this.R,this.G,this.B),v=o(d,3);this.H=v[0],this.S=v[1],this.L=v[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B,this.A);break;case"B":this.B=t;var m=(0,s.rgbToHsl)(this.R,this.G,this.B),A=o(m,3);this.H=A[0],this.S=A[1],this.L=A[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B,this.A);break;case"RGB":var y=o(t,3);this.R=y[0],this.G=y[1],this.B=y[2];var k=(0,s.rgbToHsl)(this.R,this.G,this.B),F=o(k,3);this.H=F[0],this.S=F[1],this.L=F[2],this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B,this.A);break;case g:var E=o(t,4);this.R=E[0],this.G=E[1],this.B=E[2],this.A=E[3];var B=(0,s.rgbToHsl)(this.R,this.G,this.B),H=o(B,3);this.H=H[0],this.S=H[1],this.L=H[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B,this.A),this.updatePointerA(this.A);break;case b:var R=o(t,4);this.H=R[0],this.S=R[1],this.L=R[2],this.A=R[3];var C=(0,s.hslToRgb)(this.H,this.S,this.L),S=o(C,3);this.R=S[0],this.G=S[1],this.B=S[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B,this.A),this.updatePointerA(this.A);break;case"RGBHEX":var L=(0,s.cssColorToRgba)(t)||[this.R,this.G,this.B,this.A],w=o(L,4);this.R=w[0],this.G=w[1],this.B=w[2],this.A=w[3];var T=(0,s.rgbToHsl)(this.R,this.G,this.B),x=o(T,3);this.H=x[0],this.S=x[1],this.L=x[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updatePointerA(this.A);break;case f:var G=(0,s.parseColor)(t,"rgba")||[0,0,0,1],I=o(G,4);this.R=I[0],this.G=I[1],this.B=I[2],this.A=I[3];var P=(0,s.rgbToHsl)(this.R,this.G,this.B),D=o(P,3);this.H=D[0],this.S=D[1],this.L=D[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B,this.A),this.updatePointerA(this.A);break;case"ALPHA":this.A=t,this.updateInputRGBHEX(this.R,this.G,this.B,this.A)}1===this.A?this.preview.style.backgroundColor="rgb("+this.R+","+this.G+","+this.B+")":this.preview.style.backgroundColor="rgba("+this.R+","+this.G+","+this.B+","+this.A+")",r&&r.silent||this.onchange&&this.onchange(this.preview.style.backgroundColor)}},{key:"onPaletteColorAdd",value:function(e){this.oncoloradd&&this.oncoloradd(e)}},{key:"onPaletteColorRemove",value:function(e){this.oncolorremove&&this.oncolorremove(e)}},{key:"updateInputHSL",value:function(e,t,r){this.options.showHSL&&(this.inputH.value=e,this.inputS.value=t,this.inputL.value=r)}},{key:"updateInputRGB",value:function(e,t,r){this.options.showRGB&&(this.inputR.value=e,this.inputG.value=t,this.inputB.value=r)}},{key:"updateInputRGBHEX",value:function(e,t,r,i){this.options.showHEX&&(this.options.showAlpha?this.inputRGBHEX.value=(0,s.parseColor)([e,t,r,i],"hexcss4"):this.inputRGBHEX.value=(0,s.rgbToHex)(e,t,r))}},{key:"updatePointerH",value:function(e){var t=this.options.hueBarSize[0]*e/360;this.huePointer.style.left=t-7+"px"}},{key:"updatePointerSL",value:function(e,t,r){var i=(0,s.hslToRgb)(e,t,r),n=o(i,3),a=n[0],l=n[1],c=n[2],h=this.slBarHelper.findColor(a,l,c),u=o(h,2),p=u[0],d=u[1];p>=0&&(this.slPointer.style.left=p-7+"px",this.slPointer.style.top=d-7+"px")}},{key:"updatePointerA",value:function(e){if(this.options.showAlpha){var t=this.options.alphaBarSize[0]*e;this.alphaPointer.style.left=t-7+"px"}}}]),e}(),F=function(){function e(t){c(this,e),this.name=t,this.listeners=[]}return i(e,[{key:"on",value:function(e){e&&this.listeners.push(e)}},{key:"off",value:function(e){this.listeners=e?this.listeners.filter(function(t){return t!==e}):[]}},{key:"emit",value:function(e,t){for(var r=this.listeners.slice(0),i=0;i<r.length;i++)r[i].apply(t,e)}}]),e}();function E(e,t){var r=new k(e,t),i={change:new F("change"),coloradd:new F("coloradd"),colorremove:new F("colorremove")},n=!0,a={},l={get element(){return r.element},get rgb(){return[r.R,r.G,r.B]},set rgb(e){var t=o(e,3),i=t[0],n=t[1],a=t[2],l=[(0,s.limit)(i,0,255),(0,s.limit)(n,0,255),(0,s.limit)(a,0,255)];i=l[0],n=l[1],a=l[2],r.onValueChanged(g,[i,n,a,1])},get hsl(){return[r.H,r.S,r.L]},set hsl(e){var t=o(e,3),i=t[0],n=t[1],a=t[2],l=[(0,s.limit)(i,0,360),(0,s.limit)(n,0,100),(0,s.limit)(a,0,100)];i=l[0],n=l[1],a=l[2],r.onValueChanged(b,[i,n,a,1])},get rgbhex(){return this.all.hex},get rgba(){return[r.R,r.G,r.B,r.A]},set rgba(e){var t=o(e,4),i=t[0],n=t[1],a=t[2],l=t[3],c=[(0,s.limit)(i,0,255),(0,s.limit)(n,0,255),(0,s.limit)(a,0,255),(0,s.limit)(l,0,1)];i=c[0],n=c[1],a=c[2],l=c[3],r.onValueChanged(g,[i,n,a,l])},get hsla(){return[r.H,r.S,r.L,r.A]},set hsla(e){var t=o(e,4),i=t[0],n=t[1],a=t[2],l=t[3],c=[(0,s.limit)(i,0,360),(0,s.limit)(n,0,100),(0,s.limit)(a,0,100),(0,s.limit)(l,0,1)];i=c[0],n=c[1],a=c[2],l=c[3],r.onValueChanged(b,[i,n,a,l])},get color(){return this.all.toString()},set color(e){r.onValueChanged(f,e)},setColor:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];r.onValueChanged(f,e,{silent:t})},get all(){if(n){var e=[r.R,r.G,r.B,r.A],t=r.A<1?"rgba("+r.R+","+r.G+","+r.B+","+r.A+")":s.rgbToHex.apply(void 0,e);(a=(0,s.parseColor)(e,a)).toString=function(){return t},n=!1}return Object.assign({},a)},get onchange(){return i.change&&i.change.listeners[0]},set onchange(e){this.off("change").on("change",e)},get oncoloradd(){return i.coloradd&&i.coloradd.listeners[0]},set oncoloradd(e){this.off("coloradd").on("coloradd",e)},get oncolorremove(){return i.colorremove&&i.colorremove.listeners[0]},set oncolorremove(e){this.off("colorremove").on("colorremove",e)},get palette(){return Object.keys(r.palette).filter(function(e){return r.palette[e]})},set palette(e){r.updatePalette(e)},show:function(){r.element.classList.remove("hidden")},hide:function(){r.element.classList.add("hidden")},toggle:function(){r.element.classList.toggle("hidden")},on:function(e,t){return e&&i[e]&&i[e].on(t),this},off:function(e,t){return e&&i[e]&&i[e].off(t),this},destroy:function(){i.change.off(),i.coloradd.off(),i.colorremove.off(),r.element.remove(),i=null,r=null}};return r.onchange=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];n=!0,i.change.emit([l].concat(t),l)},r.oncoloradd=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];i.coloradd.emit([l].concat(t),l)},r.oncolorremove=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];i.colorremove.emit([l].concat(t),l)},r.element.ctrl=l,l}if("undefined"!=typeof window&&!document.querySelector('head>style[data-source="a-color-picker"]')){var B=r(5).toString(),H=document.createElement("style");H.setAttribute("type","text/css"),H.setAttribute("data-source","a-color-picker"),H.innerHTML=B,document.querySelector("head").appendChild(H)}t.createPicker=E,t.from=function(e,t){var r=function(e){return e?Array.isArray(e)?e:e instanceof HTMLElement?[e]:e instanceof NodeList?[].concat(h(e)):"string"==typeof e?[].concat(h(document.querySelectorAll(e))):e.jquery?e.get():[]:[]}(e).map(function(e,r){var i=E(e,t);return i.index=r,i});return r.on=function(e,t){return r.forEach(function(r){return r.on(e,t)}),this},r.off=function(e){return r.forEach(function(t){return t.off(e)}),this},r},t.parseColorToRgb=s.parseColorToRgb,t.parseColorToRgba=s.parseColorToRgba,t.parseColorToHsl=s.parseColorToHsl,t.parseColorToHsla=s.parseColorToHsla,t.parseColor=s.parseColor,t.rgbToHex=s.rgbToHex,t.hslToRgb=s.hslToRgb,t.rgbToHsl=s.rgbToHsl,t.rgbToHsv=s.rgbToHsv,t.rgbToInt=s.rgbToInt,t.intToRgb=s.intToRgb,t.getLuminance=s.getLuminance,t.COLOR_NAMES=s.COLOR_NAMES,t.PALETTE_MATERIAL_500=s.PALETTE_MATERIAL_500,t.PALETTE_MATERIAL_CHROME=s.PALETTE_MATERIAL_CHROME,t.VERSION="1.2.2"},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.nvl=t.ensureArray=t.limit=t.getLuminance=t.parseColor=t.parseColorToHsla=t.parseColorToHsl=t.cssHslaToHsla=t.cssHslToHsl=t.parseColorToRgba=t.parseColorToRgb=t.cssRgbaToRgba=t.cssRgbToRgb=t.cssColorToRgba=t.cssColorToRgb=t.intToRgb=t.rgbToInt=t.rgbToHsv=t.rgbToHsl=t.hslToRgb=t.rgbToHex=t.PALETTE_MATERIAL_CHROME=t.PALETTE_MATERIAL_500=t.COLOR_NAMES=void 0;var i=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],i=!0,o=!1,s=void 0;try{for(var n,a=e[Symbol.iterator]();!(i=(n=a.next()).done)&&(r.push(n.value),!t||r.length!==t);i=!0);}catch(e){o=!0,s=e}finally{try{!i&&a.return&&a.return()}finally{if(o)throw s}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},o=function(e){return e&&e.__esModule?e:{default:e}}(r(0));function s(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}var n={aliceblue:"#F0F8FF",antiquewhite:"#FAEBD7",aqua:"#00FFFF",aquamarine:"#7FFFD4",azure:"#F0FFFF",beige:"#F5F5DC",bisque:"#FFE4C4",black:"#000000",blanchedalmond:"#FFEBCD",blue:"#0000FF",blueviolet:"#8A2BE2",brown:"#A52A2A",burlywood:"#DEB887",cadetblue:"#5F9EA0",chartreuse:"#7FFF00",chocolate:"#D2691E",coral:"#FF7F50",cornflowerblue:"#6495ED",cornsilk:"#FFF8DC",crimson:"#DC143C",cyan:"#00FFFF",darkblue:"#00008B",darkcyan:"#008B8B",darkgoldenrod:"#B8860B",darkgray:"#A9A9A9",darkgrey:"#A9A9A9",darkgreen:"#006400",darkkhaki:"#BDB76B",darkmagenta:"#8B008B",darkolivegreen:"#556B2F",darkorange:"#FF8C00",darkorchid:"#9932CC",darkred:"#8B0000",darksalmon:"#E9967A",darkseagreen:"#8FBC8F",darkslateblue:"#483D8B",darkslategray:"#2F4F4F",darkslategrey:"#2F4F4F",darkturquoise:"#00CED1",darkviolet:"#9400D3",deeppink:"#FF1493",deepskyblue:"#00BFFF",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1E90FF",firebrick:"#B22222",floralwhite:"#FFFAF0",forestgreen:"#228B22",fuchsia:"#FF00FF",gainsboro:"#DCDCDC",ghostwhite:"#F8F8FF",gold:"#FFD700",goldenrod:"#DAA520",gray:"#808080",grey:"#808080",green:"#008000",greenyellow:"#ADFF2F",honeydew:"#F0FFF0",hotpink:"#FF69B4","indianred ":"#CD5C5C","indigo ":"#4B0082",ivory:"#FFFFF0",khaki:"#F0E68C",lavender:"#E6E6FA",lavenderblush:"#FFF0F5",lawngreen:"#7CFC00",lemonchiffon:"#FFFACD",lightblue:"#ADD8E6",lightcoral:"#F08080",lightcyan:"#E0FFFF",lightgoldenrodyellow:"#FAFAD2",lightgray:"#D3D3D3",lightgrey:"#D3D3D3",lightgreen:"#90EE90",lightpink:"#FFB6C1",lightsalmon:"#FFA07A",lightseagreen:"#20B2AA",lightskyblue:"#87CEFA",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#B0C4DE",lightyellow:"#FFFFE0",lime:"#00FF00",limegreen:"#32CD32",linen:"#FAF0E6",magenta:"#FF00FF",maroon:"#800000",mediumaquamarine:"#66CDAA",mediumblue:"#0000CD",mediumorchid:"#BA55D3",mediumpurple:"#9370DB",mediumseagreen:"#3CB371",mediumslateblue:"#7B68EE",mediumspringgreen:"#00FA9A",mediumturquoise:"#48D1CC",mediumvioletred:"#C71585",midnightblue:"#191970",mintcream:"#F5FFFA",mistyrose:"#FFE4E1",moccasin:"#FFE4B5",navajowhite:"#FFDEAD",navy:"#000080",oldlace:"#FDF5E6",olive:"#808000",olivedrab:"#6B8E23",orange:"#FFA500",orangered:"#FF4500",orchid:"#DA70D6",palegoldenrod:"#EEE8AA",palegreen:"#98FB98",paleturquoise:"#AFEEEE",palevioletred:"#DB7093",papayawhip:"#FFEFD5",peachpuff:"#FFDAB9",peru:"#CD853F",pink:"#FFC0CB",plum:"#DDA0DD",powderblue:"#B0E0E6",purple:"#800080",rebeccapurple:"#663399",red:"#FF0000",rosybrown:"#BC8F8F",royalblue:"#4169E1",saddlebrown:"#8B4513",salmon:"#FA8072",sandybrown:"#F4A460",seagreen:"#2E8B57",seashell:"#FFF5EE",sienna:"#A0522D",silver:"#C0C0C0",skyblue:"#87CEEB",slateblue:"#6A5ACD",slategray:"#708090",slategrey:"#708090",snow:"#FFFAFA",springgreen:"#00FF7F",steelblue:"#4682B4",tan:"#D2B48C",teal:"#008080",thistle:"#D8BFD8",tomato:"#FF6347",turquoise:"#40E0D0",violet:"#EE82EE",wheat:"#F5DEB3",white:"#FFFFFF",whitesmoke:"#F5F5F5",yellow:"#FFFF00",yellowgreen:"#9ACD32"};function a(e,t,r){return e=+e,isNaN(e)?t:e<t?t:e>r?r:e}function l(e,t){return null==e?t:e}function c(e,t,r){var i=[a(e,0,255),a(t,0,255),a(r,0,255)];return"#"+("000000"+((e=i[0])<<16|(t=i[1])<<8|(r=i[2])).toString(16)).slice(-6)}function h(e,t,r){var i=void 0,o=void 0,s=void 0,n=[a(e,0,360)/360,a(t,0,100)/100,a(r,0,100)/100];if(e=n[0],r=n[2],0==(t=n[1]))i=o=s=r;else{var l=function(e,t,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?e+6*(t-e)*r:r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e},c=r<.5?r*(1+t):r+t-r*t,h=2*r-c;i=l(h,c,e+1/3),o=l(h,c,e),s=l(h,c,e-1/3)}return[255*i,255*o,255*s].map(Math.round)}function u(e,t,r){var i=[a(e,0,255)/255,a(t,0,255)/255,a(r,0,255)/255];e=i[0],t=i[1],r=i[2];var o=Math.max(e,t,r),s=Math.min(e,t,r),n=void 0,l=void 0,c=(o+s)/2;if(o==s)n=l=0;else{var h=o-s;switch(l=c>.5?h/(2-o-s):h/(o+s),o){case e:n=(t-r)/h+(t<r?6:0);break;case t:n=(r-e)/h+2;break;case r:n=(e-t)/h+4}n/=6}return[360*n,100*l,100*c].map(Math.round)}function p(e,t,r){return e<<16|t<<8|r}function d(e){if(e){var t=n[e.toString().toLowerCase()],r=/^\s*#?((([0-9A-F])([0-9A-F])([0-9A-F]))|(([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})))\s*$/i.exec(t||e)||[],o=i(r,10),s=o[3],a=o[4],l=o[5],c=o[7],h=o[8],u=o[9];if(void 0!==s)return[parseInt(s+s,16),parseInt(a+a,16),parseInt(l+l,16)];if(void 0!==c)return[parseInt(c,16),parseInt(h,16),parseInt(u,16)]}}function f(e){if(e){var t=n[e.toString().toLowerCase()],r=/^\s*#?((([0-9A-F])([0-9A-F])([0-9A-F])([0-9A-F])?)|(([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})?))\s*$/i.exec(t||e)||[],o=i(r,12),s=o[3],a=o[4],l=o[5],c=o[6],h=o[8],u=o[9],p=o[10],d=o[11];if(void 0!==s)return[parseInt(s+s,16),parseInt(a+a,16),parseInt(l+l,16),c?+(parseInt(c+c,16)/255).toFixed(2):1];if(void 0!==h)return[parseInt(h,16),parseInt(u,16),parseInt(p,16),d?+(parseInt(d,16)/255).toFixed(2):1]}}function g(e){if(e){var t=/^rgb\((\d+)[\s,](\d+)[\s,](\d+)\)/i.exec(e)||[],r=i(t,4),o=r[0],s=r[1],n=r[2],l=r[3];return o?[a(s,0,255),a(n,0,255),a(l,0,255)]:void 0}}function b(e){if(e){var t=/^rgba?\((\d+)\s*[\s,]\s*(\d+)\s*[\s,]\s*(\d+)(\s*[\s,]\s*(\d*(.\d+)?))?\)/i.exec(e)||[],r=i(t,6),o=r[0],s=r[1],n=r[2],c=r[3],h=r[5];return o?[a(s,0,255),a(n,0,255),a(c,0,255),a(l(h,1),0,1)]:void 0}}function v(e){if(Array.isArray(e))return[a(e[0],0,255),a(e[1],0,255),a(e[2],0,255),a(l(e[3],1),0,1)];var t=f(e)||b(e);return t&&3===t.length&&t.push(1),t}function m(e){if(e){var t=/^hsl\((\d+)[\s,](\d+)[\s,](\d+)\)/i.exec(e)||[],r=i(t,4),o=r[0],s=r[1],n=r[2],l=r[3];return o?[a(s,0,360),a(n,0,100),a(l,0,100)]:void 0}}function A(e){if(e){var t=/^hsla?\((\d+)\s*[\s,]\s*(\d+)\s*[\s,]\s*(\d+)(\s*[\s,]\s*(\d*(.\d+)?))?\)/i.exec(e)||[],r=i(t,6),o=r[0],s=r[1],n=r[2],c=r[3],h=r[5];return o?[a(s,0,255),a(n,0,255),a(c,0,255),a(l(h,1),0,1)]:void 0}}function y(e){if(Array.isArray(e))return[a(e[0],0,360),a(e[1],0,100),a(e[2],0,100),a(l(e[3],1),0,1)];var t=A(e);return t&&3===t.length&&t.push(1),t}function k(e,t){switch(t){case"rgb":default:return e.slice(0,3);case"rgbcss":return"rgb("+e[0]+", "+e[1]+", "+e[2]+")";case"rgbcss4":return"rgb("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+")";case"rgba":return e;case"rgbacss":return"rgba("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+")";case"hsl":return u.apply(void 0,s(e));case"hslcss":return"hsl("+(e=u.apply(void 0,s(e)))[0]+", "+e[1]+", "+e[2]+")";case"hslcss4":var r=u.apply(void 0,s(e));return"hsl("+r[0]+", "+r[1]+", "+r[2]+", "+e[3]+")";case"hsla":return[].concat(s(u.apply(void 0,s(e))),[e[3]]);case"hslacss":var i=u.apply(void 0,s(e));return"hsla("+i[0]+", "+i[1]+", "+i[2]+", "+e[3]+")";case"hex":return c.apply(void 0,s(e));case"hexcss4":return c.apply(void 0,s(e))+("00"+parseInt(255*e[3]).toString(16)).slice(-2);case"int":return p.apply(void 0,s(e))}}t.COLOR_NAMES=n,t.PALETTE_MATERIAL_500=["#F44336","#E91E63","#E91E63","#9C27B0","#9C27B0","#673AB7","#673AB7","#3F51B5","#3F51B5","#2196F3","#2196F3","#03A9F4","#03A9F4","#00BCD4","#00BCD4","#009688","#009688","#4CAF50","#4CAF50","#8BC34A","#8BC34A","#CDDC39","#CDDC39","#FFEB3B","#FFEB3B","#FFC107","#FFC107","#FF9800","#FF9800","#FF5722","#FF5722","#795548","#795548","#9E9E9E","#9E9E9E","#607D8B","#607D8B"],t.PALETTE_MATERIAL_CHROME=["#f44336","#e91e63","#9c27b0","#673ab7","#3f51b5","#2196f3","#03a9f4","#00bcd4","#009688","#4caf50","#8bc34a","#cddc39","#ffeb3b","#ffc107","#ff9800","#ff5722","#795548","#9e9e9e","#607d8b"],t.rgbToHex=c,t.hslToRgb=h,t.rgbToHsl=u,t.rgbToHsv=function(e,t,r){var i=[a(e,0,255)/255,a(t,0,255)/255,a(r,0,255)/255];e=i[0],t=i[1],r=i[2];var o,s=Math.max(e,t,r),n=Math.min(e,t,r),l=void 0,c=s,h=s-n;if(o=0===s?0:h/s,s==n)l=0;else{switch(s){case e:l=(t-r)/h+(t<r?6:0);break;case t:l=(r-e)/h+2;break;case r:l=(e-t)/h+4}l/=6}return[l,o,c]},t.rgbToInt=p,t.intToRgb=function(e){return[e>>16&255,e>>8&255,255&e]},t.cssColorToRgb=d,t.cssColorToRgba=f,t.cssRgbToRgb=g,t.cssRgbaToRgba=b,t.parseColorToRgb=function(e){return Array.isArray(e)?e=[a(e[0],0,255),a(e[1],0,255),a(e[2],0,255)]:d(e)||g(e)},t.parseColorToRgba=v,t.cssHslToHsl=m,t.cssHslaToHsla=A,t.parseColorToHsl=function(e){return Array.isArray(e)?e=[a(e[0],0,360),a(e[1],0,100),a(e[2],0,100)]:m(e)},t.parseColorToHsla=y,t.parseColor=function(e,t){if(t=t||"rgb",null!=e){var r=void 0;if((r=v(e))||(r=y(e))&&(r=[].concat(s(h.apply(void 0,s(r))),[r[3]])))return(0,o.default)(t)?["rgb","rgbcss","rgbcss4","rgba","rgbacss","hsl","hslcss","hslcss4","hsla","hslacss","hex","hexcss4","int"].reduce(function(e,t){return e[t]=k(r,t),e},t||{}):k(r,t.toString().toLowerCase())}},t.getLuminance=function(e,t,r){return.2126*(e=(e/=255)<.03928?e/12.92:Math.pow((e+.055)/1.055,2.4))+.7152*(t=(t/=255)<.03928?t/12.92:Math.pow((t+.055)/1.055,2.4))+.0722*((r/=255)<.03928?r/12.92:Math.pow((r+.055)/1.055,2.4))},t.limit=a,t.ensureArray=function(e){return e?Array.from(e):[]},t.nvl=l},function(e,t,r){"use strict";
21 | /*!
22 |  * isobject <https://github.com/jonschlinkert/isobject>
23 |  *
24 |  * Copyright (c) 2014-2017, Jon Schlinkert.
25 |  * Released under the MIT License.
26 |  */e.exports=function(e){return null!=e&&"object"==typeof e&&!1===Array.isArray(e)}},function(e,t){e.exports='<div class="a-color-picker-row a-color-picker-stack a-color-picker-row-top"> <canvas class="a-color-picker-sl a-color-picker-transparent"></canvas> <div class=a-color-picker-dot></div> </div> <div class=a-color-picker-row> <div class="a-color-picker-stack a-color-picker-transparent a-color-picker-circle"> <div class=a-color-picker-preview> <input class=a-color-picker-clipbaord type=text> </div> </div> <div class=a-color-picker-column> <div class="a-color-picker-cell a-color-picker-stack"> <canvas class=a-color-picker-h></canvas> <div class=a-color-picker-dot></div> </div> <div class="a-color-picker-cell a-color-picker-alpha a-color-picker-stack" show-on-alpha> <canvas class="a-color-picker-a a-color-picker-transparent"></canvas> <div class=a-color-picker-dot></div> </div> </div> </div> <div class="a-color-picker-row a-color-picker-hsl" show-on-hsl> <label>H</label> <input nameref=H type=number maxlength=3 min=0 max=360 value=0> <label>S</label> <input nameref=S type=number maxlength=3 min=0 max=100 value=0> <label>L</label> <input nameref=L type=number maxlength=3 min=0 max=100 value=0> </div> <div class="a-color-picker-row a-color-picker-rgb" show-on-rgb> <label>R</label> <input nameref=R type=number maxlength=3 min=0 max=255 value=0> <label>G</label> <input nameref=G type=number maxlength=3 min=0 max=255 value=0> <label>B</label> <input nameref=B type=number maxlength=3 min=0 max=255 value=0> </div> <div class="a-color-picker-row a-color-picker-rgbhex a-color-picker-single-input" show-on-single-input> <label>HEX</label> <input nameref=RGBHEX type=text select-on-focus> </div> <div class="a-color-picker-row a-color-picker-palette"></div>'},function(e,t,r){var i=r(6);e.exports="string"==typeof i?i:i.toString()},function(e,t,r){(e.exports=r(7)(!1)).push([e.i,"/*!\n * a-color-picker\n * https://github.com/narsenico/a-color-picker\n *\n * Copyright (c) 2017-2018, Gianfranco Caldi.\n * Released under the MIT License.\n */.a-color-picker{background-color:#fff;padding:0;display:inline-flex;flex-direction:column;user-select:none;width:232px;font:400 10px Helvetica,Arial,sans-serif;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 2px 4px rgba(0,0,0,.25)}.a-color-picker,.a-color-picker-row,.a-color-picker input{box-sizing:border-box}.a-color-picker-row{padding:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;user-select:none}.a-color-picker-row-top{padding:0}.a-color-picker-row:not(:first-child){border-top:1px solid #f5f5f5}.a-color-picker-column{display:flex;flex-direction:column}.a-color-picker-cell{flex:1 1 auto;margin-bottom:4px}.a-color-picker-cell:last-child{margin-bottom:0}.a-color-picker-stack{position:relative}.a-color-picker-dot{position:absolute;width:14px;height:14px;top:0;left:0;background:#fff;pointer-events:none;border-radius:50px;z-index:1000;box-shadow:0 1px 2px rgba(0,0,0,.75)}.a-color-picker-a,.a-color-picker-h,.a-color-picker-sl{cursor:cell}.a-color-picker-a+.a-color-picker-dot,.a-color-picker-h+.a-color-picker-dot{top:-2px}.a-color-picker-a,.a-color-picker-h{border-radius:2px}.a-color-picker-preview{box-sizing:border-box;width:30px;height:30px;user-select:none;border-radius:15px}.a-color-picker-circle{border-radius:50px;border:1px solid #eee}.a-color-picker-hsl,.a-color-picker-rgb,.a-color-picker-single-input{justify-content:space-evenly}.a-color-picker-hsl>label,.a-color-picker-rgb>label,.a-color-picker-single-input>label{padding:0 8px;flex:0 0 auto;color:#969696}.a-color-picker-hsl>input,.a-color-picker-rgb>input,.a-color-picker-single-input>input{text-align:center;padding:2px 0;width:0;flex:1 1 auto;border:1px solid #e0e0e0;line-height:20px}.a-color-picker-hsl>input::-webkit-inner-spin-button,.a-color-picker-rgb>input::-webkit-inner-spin-button,.a-color-picker-single-input>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.a-color-picker-hsl>input:focus,.a-color-picker-rgb>input:focus,.a-color-picker-single-input>input:focus{border-color:#04a9f4;outline:none}.a-color-picker-transparent{background-image:linear-gradient(-45deg,#cdcdcd 25%,transparent 0),linear-gradient(45deg,#cdcdcd 25%,transparent 0),linear-gradient(-45deg,transparent 75%,#cdcdcd 0),linear-gradient(45deg,transparent 75%,#cdcdcd 0);background-size:11px 11px;background-position:0 0,0 -5.5px,-5.5px 5.5px,5.5px 0}.a-color-picker-sl{border-radius:3px 3px 0 0}.a-color-picker.hide-alpha [show-on-alpha],.a-color-picker.hide-hsl [show-on-hsl],.a-color-picker.hide-rgb [show-on-rgb],.a-color-picker.hide-single-input [show-on-single-input]{display:none}.a-color-picker-clipbaord{width:100%;height:100%;opacity:0;cursor:pointer}.a-color-picker-palette{flex-flow:wrap;flex-direction:row;justify-content:flex-start;padding:10px}.a-color-picker-palette-color{width:15px;height:15px;flex:0 1 15px;margin:3px;box-sizing:border-box;cursor:pointer;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.a-color-picker-palette-add{text-align:center;line-height:13px;color:#607d8b}.a-color-picker.hidden{display:none}",""])},function(e,t){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=function(e,t){var r=e[1]||"",i=e[3];if(!i)return r;if(t&&"function"==typeof btoa){var o=function(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}(i),s=i.sources.map(function(e){return"/*# sourceURL="+i.sourceRoot+e+" */"});return[r].concat(s).concat([o]).join("\n")}return[r].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,r){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},o=0;o<this.length;o++){var s=this[o][0];"number"==typeof s&&(i[s]=!0)}for(o=0;o<e.length;o++){var n=e[o];"number"==typeof n[0]&&i[n[0]]||(r&&!n[2]?n[2]=r:r&&(n[2]="("+n[2]+") and ("+r+")"),t.push(n))}},t}}])});


--------------------------------------------------------------------------------
/docs/docs.js:
--------------------------------------------------------------------------------
 1 | !function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}([function(e,t){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=function(e,t){var r=e[1]||"",o=e[3];if(!o)return r;if(t&&"function"==typeof btoa){var n=(s=o,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),i=o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"});return[r].concat(i).concat([n]).join("\n")}var s;return[r].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,r){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},n=0;n<this.length;n++){var i=this[n][0];"number"==typeof i&&(o[i]=!0)}for(n=0;n<e.length;n++){var s=e[n];"number"==typeof s[0]&&o[s[0]]||(r&&!s[2]?s[2]=r:r&&(s[2]="("+s[2]+") and ("+r+")"),t.push(s))}},t}},function(e,t,r){"use strict";
 2 | /*!
 3 |  * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
 4 |  *
 5 |  * Copyright (c) 2014-2017, Jon Schlinkert.
 6 |  * Released under the MIT License.
 7 |  */var o=r(11);function n(e){return!0===o(e)&&"[object Object]"===Object.prototype.toString.call(e)}e.exports=function(e){var t,r;return!1!==n(e)&&("function"==typeof(t=e.constructor)&&(!1!==n(r=t.prototype)&&!1!==r.hasOwnProperty("isPrototypeOf")))}},function(e,t,r){"use strict";r(3);var o=r(9),n=document.querySelector(".title");o.from(".picker").on("change",function(e,t){console.log(t),n.style.backgroundColor=t,o.getLuminance.apply(o,function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}(e.rgb))<.5?n.style.color="#fff":n.style.color="#333"}).on("coloradd",function(e,t){console.log(t)}).on("colorremove",function(e,t){console.log(t)})},function(e,t,r){var o=r(4);"string"==typeof o&&(o=[[e.i,o,""]]);var n={hmr:!0,transform:void 0,insertInto:void 0};r(7)(o,n);o.locals&&(e.exports=o.locals)},function(e,t,r){var o=r(5);(t=e.exports=r(0)(!1)).push([e.i,"@import url(https://fonts.googleapis.com/css?family=Roboto);",""]),t.push([e.i,"*{box-sizing:border-box}html{font-family:Roboto,sans-serif;font-size:14px;font-display:fallback;line-height:1.7;--color-light:#f2eeee}body{margin:0;background-color:#697b82}footer{font-size:.8em;text-align:center;padding:8px}.logo{background-image:url("+o(r(6))+');background-size:contain;background-repeat:no-repeat}.logo.upper-right{position:fixed;top:16px;right:8px;width:50px;height:50px;opacity:.5;pointer-events:none;z-index:3}code{color:#bc8f49}code .par{color:#5b995b}code .prop{color:#9a8297}code .comment{color:#795548;font-style:italic}.flexrow{display:flex;flex-direction:row;flex-wrap:wrap}.flexcol-1{flex-grow:1;flex-basis:9em;margin:16px 8px;max-width:1024px}.flexcol-2{flex-grow:9999;flex-basis:20em}.flexcol-3{flex-grow:1;flex-basis:9em;margin:16px 8px;max-width:1024px}.shadow{box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 0 1px rgba(3,1,1,.08)}.darken{background:#0000001f}.explanation{color:#9e9e9e;font-size:.85em}.mark{border-bottom:2px solid #9a8297;padding-bottom:.6em;margin-bottom:1.6em}.eg{position:relative;border:1px solid #e3ddd5;padding:4px;border-radius:2px;background-color:#f7f1e9}.eg:before{content:attr(title);position:absolute;top:-1.6em;font-size:.85em;font-weight:400;color:#dedede}.title{top:0;padding:0 8px}.title>h1{padding:8px 4px;margin:0;letter-spacing:.1em;font-size:3em;color:var(--color-light)}.title>h1.logo{padding:4px 0 11px 38px}.avatar{border-radius:4px;vertical-align:text-top;object-fit:cover;width:100%;max-height:6.6em;opacity:.3;filter:grayscale(100%);-webkit-filter:grayscale(100%)}.badges{padding:4px}.badges a{text-decoration:none}.content>nav a{color:var(--color-light)}.content>nav>ul{position:sticky;position:-webkit-sticky;top:0;list-style:none;padding:0}.content>nav>ul>li:before{content:"> ";color:#dedede}.content>nav>ul>li>ul{font-size:.8em;top:0;list-style:none;padding:0 0 0 .8em}.content>.pens>section{background-color:#fafafa;margin:16px 8px;padding:8px 24px;border-radius:2px}.content>.pens>section>h3:before{content:"> ";color:#dedede}table.detail{width:100%;border-collapse:collapse}table.detail th{font-size:.85em;text-align:left;padding-top:16px}table.detail td{vertical-align:top;border-bottom:1px solid #ededed;max-width:14em;padding:4px 0}table.detail tbody,table.detail tbody>tr{transition:background-color .4s ease}table.detail.hover-on-body tbody:hover,table.detail.hover-on-row tbody>tr:hover{background-color:#efefef}@media (min-width:68em){html{font-size:18px}}@media (max-height:400px){.content>nav>ul{position:relative}}.theme-gray{--color-light:#697b82}.theme-gray body{background-color:#f5f5f5}.theme-gray .avatar{opacity:.6}',""])},function(e,t){e.exports=function(e){return"string"!=typeof e?e:(/^['"].*['"]$/.test(e)&&(e=e.slice(1,-1)),/["'() \t\n]/.test(e)?'"'+e.replace(/"/g,'\\"').replace(/\n/g,"\\n")+'"':e)}},function(e,t){e.exports="\"data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1000px' height='1000px' viewBox='0 0 1000 1000' enable-background='new 0 0 1000 1000' xml:space='preserve'%3E %3Cg%3E %3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='100' y1='274.7212' x2='900' y2='274.7212'%3E %3Cstop offset='0' style='stop-color:%23ED1C24'/%3E %3Cstop offset='0.0028' style='stop-color:%23EE2423'/%3E %3Cstop offset='0.0226' style='stop-color:%23F25520'/%3E %3Cstop offset='0.0429' style='stop-color:%23F67F1D'/%3E %3Cstop offset='0.0635' style='stop-color:%23F9A11B'/%3E %3Cstop offset='0.0842' style='stop-color:%23FCBC19'/%3E %3Cstop offset='0.1053' style='stop-color:%23FECF18'/%3E %3Cstop offset='0.127' style='stop-color:%23FFDA17'/%3E %3Cstop offset='0.15' style='stop-color:%23FFDE17'/%3E %3Cstop offset='0.3' style='stop-color:%23F26522'/%3E %3Cstop offset='0.47' style='stop-color:%2300A14B'/%3E %3Cstop offset='0.64' style='stop-color:%2300AEEF'/%3E %3Cstop offset='0.8012' style='stop-color:%232E3192'/%3E %3Cstop offset='1' style='stop-color:%23EC008C'/%3E %3C/linearGradient%3E %3Cpath fill='url(%23SVGID_1_)' d='M900,449.444V215.606c0-63.849-51.756-115.608-115.604-115.608H215.61 c-63.851,0-115.61,51.76-115.61,115.608v233.838H900z'/%3E %3ClinearGradient id='SVGID_2_' gradientUnits='userSpaceOnUse' x1='100' y1='725.2764' x2='900' y2='725.2764'%3E %3Cstop offset='0' style='stop-color:%23A7A9AC'/%3E %3Cstop offset='0.0732' style='stop-color:%23ADAFB2'/%3E %3Cstop offset='0.2797' style='stop-color:%23B8BABC'/%3E %3Cstop offset='0.5' style='stop-color:%23BCBEC0'/%3E %3Cstop offset='1' style='stop-color:%23414042'/%3E %3C/linearGradient%3E %3Cpath fill='url(%23SVGID_2_)' d='M100,550.551v233.836c0,63.844,51.759,115.615,115.61,115.615h568.786 C848.244,900.002,900,848.23,900,784.387V550.551H100z'/%3E %3Cpath fill='%23FFFFFF' d='M756.787,499.999c0,141.822-114.969,256.779-256.781,256.779c-141.83,0-256.792-114.957-256.792-256.779 c0-141.818,114.962-256.783,256.792-256.783C641.818,243.216,756.787,358.181,756.787,499.999z'/%3E %3Cpath fill='%2338A9D6' d='M732.328,499.998c0,128.309-104.019,232.32-232.322,232.32c-128.318,0-232.33-104.012-232.33-232.32 c0-128.31,104.012-232.324,232.33-232.324C628.31,267.674,732.328,371.688,732.328,499.998z'/%3E %3C/g%3E %3C/svg%3E\""},function(e,t,r){var o,n,i={},s=(o=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===n&&(n=o.apply(this,arguments)),n}),a=function(e){var t={};return function(e){if("function"==typeof e)return e();if(void 0===t[e]){var r=function(e){return document.querySelector(e)}.call(this,e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}}(),l=null,c=0,p=[],u=r(8);function h(e,t){for(var r=0;r<e.length;r++){var o=e[r],n=i[o.id];if(n){n.refs++;for(var s=0;s<n.parts.length;s++)n.parts[s](o.parts[s]);for(;s<o.parts.length;s++)n.parts.push(m(o.parts[s],t))}else{var a=[];for(s=0;s<o.parts.length;s++)a.push(m(o.parts[s],t));i[o.id]={id:o.id,refs:1,parts:a}}}}function d(e,t){for(var r=[],o={},n=0;n<e.length;n++){var i=e[n],s=t.base?i[0]+t.base:i[0],a={css:i[1],media:i[2],sourceMap:i[3]};o[s]?o[s].parts.push(a):r.push(o[s]={id:s,parts:[a]})}return r}function f(e,t){var r=a(e.insertInto);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var o=p[p.length-1];if("top"===e.insertAt)o?o.nextSibling?r.insertBefore(t,o.nextSibling):r.appendChild(t):r.insertBefore(t,r.firstChild),p.push(t);else if("bottom"===e.insertAt)r.appendChild(t);else{if("object"!=typeof e.insertAt||!e.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var n=a(e.insertInto+" "+e.insertAt.before);r.insertBefore(t,n)}}function g(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e);var t=p.indexOf(e);t>=0&&p.splice(t,1)}function b(e){var t=document.createElement("style");return void 0===e.attrs.type&&(e.attrs.type="text/css"),v(t,e.attrs),f(e,t),t}function v(e,t){Object.keys(t).forEach(function(r){e.setAttribute(r,t[r])})}function m(e,t){var r,o,n,i;if(t.transform&&e.css){if(!(i=t.transform(e.css)))return function(){};e.css=i}if(t.singleton){var s=c++;r=l||(l=b(t)),o=A.bind(null,r,s,!1),n=A.bind(null,r,s,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(r=function(e){var t=document.createElement("link");return void 0===e.attrs.type&&(e.attrs.type="text/css"),e.attrs.rel="stylesheet",v(t,e.attrs),f(e,t),t}(t),o=function(e,t,r){var o=r.css,n=r.sourceMap,i=void 0===t.convertToAbsoluteUrls&&n;(t.convertToAbsoluteUrls||i)&&(o=u(o));n&&(o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var s=new Blob([o],{type:"text/css"}),a=e.href;e.href=URL.createObjectURL(s),a&&URL.revokeObjectURL(a)}.bind(null,r,t),n=function(){g(r),r.href&&URL.revokeObjectURL(r.href)}):(r=b(t),o=function(e,t){var r=t.css,o=t.media;o&&e.setAttribute("media",o);if(e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}.bind(null,r),n=function(){g(r)});return o(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;o(e=t)}else n()}}e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(t=t||{}).attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=s()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var r=d(e,t);return h(r,t),function(e){for(var o=[],n=0;n<r.length;n++){var s=r[n];(a=i[s.id]).refs--,o.push(a)}e&&h(d(e,t),t);for(n=0;n<o.length;n++){var a;if(0===(a=o[n]).refs){for(var l=0;l<a.parts.length;l++)a.parts[l]();delete i[a.id]}}}};var y,x=(y=[],function(e,t){return y[e]=t,y.filter(Boolean).join("\n")});function A(e,t,r,o){var n=r?"":o.css;if(e.styleSheet)e.styleSheet.cssText=x(t,n);else{var i=document.createTextNode(n),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(i,s[t]):e.appendChild(i)}}},function(e,t){e.exports=function(e){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var r=t.protocol+"//"+t.host,o=r+t.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(e,t){var n,i=t.trim().replace(/^"(.*)"$/,function(e,t){return t}).replace(/^'(.*)'$/,function(e,t){return t});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i)?e:(n=0===i.indexOf("//")?i:0===i.indexOf("/")?r+i:o+i.replace(/^\.\//,""),"url("+JSON.stringify(n)+")")})}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.VERSION=t.PALETTE_MATERIAL_CHROME=t.PALETTE_MATERIAL_500=t.COLOR_NAMES=t.getLuminance=t.intToRgb=t.rgbToInt=t.rgbToHsv=t.rgbToHsl=t.hslToRgb=t.rgbToHex=t.parseColor=t.parseColorToHsla=t.parseColorToHsl=t.parseColorToRgba=t.parseColorToRgb=t.from=t.createPicker=void 0;var o=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),n=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],o=!0,n=!1,i=void 0;try{for(var s,a=e[Symbol.iterator]();!(o=(s=a.next()).done)&&(r.push(s.value),!t||r.length!==t);o=!0);}catch(e){n=!0,i=e}finally{try{!o&&a.return&&a.return()}finally{if(n)throw i}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),i=r(10),s=l(r(1)),a=l(r(12));function l(e){return e&&e.__esModule?e:{default:e}}function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function p(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}
 8 | /*!
 9 |  * a-color-picker
10 |  * https://github.com/narsenico/a-color-picker
11 |  *
12 |  * Copyright (c) 2017-2019, Gianfranco Caldi.
13 |  * Released under the MIT License.
14 |  */var u="undefined"!=typeof window&&window.navigator.userAgent.indexOf("Edge")>-1,h="undefined"!=typeof window&&window.navigator.userAgent.indexOf("rv:")>-1,d={id:null,attachTo:"body",showHSL:!0,showRGB:!0,showHEX:!0,showAlpha:!1,color:"#ff0000",palette:null,paletteEditable:!1,useAlphaInPalette:"auto",slBarSize:[232,150],hueBarSize:[150,11],alphaBarSize:[150,11]},f="COLOR",g="RGBA_USER",b="HSLA_USER";function v(e,t,r){return e?e instanceof HTMLElement?e:e instanceof NodeList?e[0]:"string"==typeof e?document.querySelector(e):e.jquery?e.get(0):r?t:null:t}function m(e){var t=e.getContext("2d"),r=+e.width,o=+e.height,s=t.createLinearGradient(1,1,1,o-1);return s.addColorStop(0,"white"),s.addColorStop(1,"black"),{setHue:function(e){var n=t.createLinearGradient(1,0,r-1,0);n.addColorStop(0,"hsla("+e+", 100%, 50%, 0)"),n.addColorStop(1,"hsla("+e+", 100%, 50%, 1)"),t.fillStyle=s,t.fillRect(0,0,r,o),t.fillStyle=n,t.globalCompositeOperation="multiply",t.fillRect(0,0,r,o),t.globalCompositeOperation="source-over"},grabColor:function(e,r){return t.getImageData(e,r,1,1).data},findColor:function(e,t,s){var a=(0,i.rgbToHsv)(e,t,s),l=n(a,3),c=l[1],p=l[2];return[c*r,o-p*o]}}}function y(e,t,r){return null===e?t:/^\s*$/.test(e)?r:!!/true|yes|1/i.test(e)||!/false|no|0/i.test(e)&&t}function x(e,t,r){if(null===e)return t;if(/^\s*$/.test(e))return r;var o=e.split(",").map(Number);return 2===o.length&&o[0]&&o[1]?o:t}var A=function(){function e(t,r){if(c(this,e),r?(t=v(t),this.options=Object.assign({},d,r)):t&&(0,s.default)(t)?(this.options=Object.assign({},d,t),t=v(this.options.attachTo)):(this.options=Object.assign({},d),t=v((0,i.nvl)(t,this.options.attachTo))),!t)throw new Error("Container not found: "+this.options.attachTo);!function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"acp-";if(t.hasAttribute(r+"show-hsl")&&(e.showHSL=y(t.getAttribute(r+"show-hsl"),d.showHSL,!0)),t.hasAttribute(r+"show-rgb")&&(e.showRGB=y(t.getAttribute(r+"show-rgb"),d.showRGB,!0)),t.hasAttribute(r+"show-hex")&&(e.showHEX=y(t.getAttribute(r+"show-hex"),d.showHEX,!0)),t.hasAttribute(r+"show-alpha")&&(e.showAlpha=y(t.getAttribute(r+"show-alpha"),d.showAlpha,!0)),t.hasAttribute(r+"palette-editable")&&(e.paletteEditable=y(t.getAttribute(r+"palette-editable"),d.paletteEditable,!0)),t.hasAttribute(r+"sl-bar-size")&&(e.slBarSize=x(t.getAttribute(r+"sl-bar-size"),d.slBarSize,[232,150])),t.hasAttribute(r+"hue-bar-size")&&(e.hueBarSize=x(t.getAttribute(r+"hue-bar-size"),d.hueBarSize,[150,11]),e.alphaBarSize=e.hueBarSize),t.hasAttribute(r+"palette")){var o=t.getAttribute(r+"palette");switch(o){case"PALETTE_MATERIAL_500":e.palette=i.PALETTE_MATERIAL_500;break;case"PALETTE_MATERIAL_CHROME":case"":e.palette=i.PALETTE_MATERIAL_CHROME;break;default:e.palette=o.split(/[;|]/)}}t.hasAttribute(r+"color")&&(e.color=t.getAttribute(r+"color"))}(this.options,t),this.H=0,this.S=0,this.L=0,this.R=0,this.G=0,this.B=0,this.A=1,this.palette={},this.element=document.createElement("div"),this.options.id&&(this.element.id=this.options.id),this.element.className="a-color-picker",this.element.innerHTML=a.default,t.appendChild(this.element);var o=this.element.querySelector(".a-color-picker-h");this.setupHueCanvas(o),this.hueBarHelper=m(o),this.huePointer=this.element.querySelector(".a-color-picker-h+.a-color-picker-dot");var n=this.element.querySelector(".a-color-picker-sl");this.setupSlCanvas(n),this.slBarHelper=m(n),this.slPointer=this.element.querySelector(".a-color-picker-sl+.a-color-picker-dot"),this.preview=this.element.querySelector(".a-color-picker-preview"),this.setupClipboard(this.preview.querySelector(".a-color-picker-clipbaord")),this.options.showHSL?(this.setupInput(this.inputH=this.element.querySelector(".a-color-picker-hsl>input[nameref=H]")),this.setupInput(this.inputS=this.element.querySelector(".a-color-picker-hsl>input[nameref=S]")),this.setupInput(this.inputL=this.element.querySelector(".a-color-picker-hsl>input[nameref=L]"))):this.element.querySelector(".a-color-picker-hsl").remove(),this.options.showRGB?(this.setupInput(this.inputR=this.element.querySelector(".a-color-picker-rgb>input[nameref=R]")),this.setupInput(this.inputG=this.element.querySelector(".a-color-picker-rgb>input[nameref=G]")),this.setupInput(this.inputB=this.element.querySelector(".a-color-picker-rgb>input[nameref=B]"))):this.element.querySelector(".a-color-picker-rgb").remove(),this.options.showHEX?this.setupInput(this.inputRGBHEX=this.element.querySelector("input[nameref=RGBHEX]")):this.element.querySelector(".a-color-picker-rgbhex").remove(),this.options.paletteEditable||this.options.palette&&this.options.palette.length>0?this.setPalette(this.paletteRow=this.element.querySelector(".a-color-picker-palette")):(this.paletteRow=this.element.querySelector(".a-color-picker-palette"),this.paletteRow.remove()),this.options.showAlpha?(this.setupAlphaCanvas(this.element.querySelector(".a-color-picker-a")),this.alphaPointer=this.element.querySelector(".a-color-picker-a+.a-color-picker-dot")):this.element.querySelector(".a-color-picker-alpha").remove(),this.element.style.width=this.options.slBarSize[0]+"px",this.onValueChanged(f,this.options.color)}return o(e,[{key:"setupHueCanvas",value:function(e){var t=this;e.width=this.options.hueBarSize[0],e.height=this.options.hueBarSize[1];for(var r=e.getContext("2d"),o=r.createLinearGradient(0,0,this.options.hueBarSize[0],0),n=0;n<=1;n+=1/360)o.addColorStop(n,"hsl("+360*n+", 100%, 50%)");r.fillStyle=o,r.fillRect(0,0,this.options.hueBarSize[0],this.options.hueBarSize[1]);var s=function(r){var o=(0,i.limit)(r.clientX-e.getBoundingClientRect().left,0,t.options.hueBarSize[0]),n=Math.round(360*o/t.options.hueBarSize[0]);t.huePointer.style.left=o-7+"px",t.onValueChanged("H",n)},a=function e(){document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",e)};e.addEventListener("mousedown",function(e){s(e),document.addEventListener("mousemove",s),document.addEventListener("mouseup",a)})}},{key:"setupSlCanvas",value:function(e){var t=this;e.width=this.options.slBarSize[0],e.height=this.options.slBarSize[1];var r=function(r){var o=(0,i.limit)(r.clientX-e.getBoundingClientRect().left,0,t.options.slBarSize[0]-1),n=(0,i.limit)(r.clientY-e.getBoundingClientRect().top,0,t.options.slBarSize[1]-1),s=t.slBarHelper.grabColor(o,n);t.slPointer.style.left=o-7+"px",t.slPointer.style.top=n-7+"px",t.onValueChanged("RGB",s)},o=function e(){document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",e)};e.addEventListener("mousedown",function(e){r(e),document.addEventListener("mousemove",r),document.addEventListener("mouseup",o)})}},{key:"setupAlphaCanvas",value:function(e){var t=this;e.width=this.options.alphaBarSize[0],e.height=this.options.alphaBarSize[1];var r=e.getContext("2d"),o=r.createLinearGradient(0,0,e.width-1,0);o.addColorStop(0,"hsla(0, 0%, 50%, 0)"),o.addColorStop(1,"hsla(0, 0%, 50%, 1)"),r.fillStyle=o,r.fillRect(0,0,this.options.alphaBarSize[0],this.options.alphaBarSize[1]);var n=function(r){var o=(0,i.limit)(r.clientX-e.getBoundingClientRect().left,0,t.options.alphaBarSize[0]),n=+(o/t.options.alphaBarSize[0]).toFixed(2);t.alphaPointer.style.left=o-7+"px",t.onValueChanged("ALPHA",n)},s=function e(){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e)};e.addEventListener("mousedown",function(e){n(e),document.addEventListener("mousemove",n),document.addEventListener("mouseup",s)})}},{key:"setupInput",value:function(e){var t=this,r=+e.min,o=+e.max,n=e.getAttribute("nameref");e.hasAttribute("select-on-focus")&&e.addEventListener("focus",function(){e.select()}),"text"===e.type?e.addEventListener("change",function(){t.onValueChanged(n,e.value)}):((u||h)&&e.addEventListener("keydown",function(s){"Up"===s.key?(e.value=(0,i.limit)(+e.value+1,r,o),t.onValueChanged(n,e.value),s.returnValue=!1):"Down"===s.key&&(e.value=(0,i.limit)(+e.value-1,r,o),t.onValueChanged(n,e.value),s.returnValue=!1)}),e.addEventListener("change",function(){var s=+e.value;t.onValueChanged(n,(0,i.limit)(s,r,o))}))}},{key:"setupClipboard",value:function(e){var t=this;e.title="click to copy",e.addEventListener("click",function(){e.value=(0,i.parseColor)([t.R,t.G,t.B,t.A],"hexcss4"),e.select(),document.execCommand("copy")})}},{key:"setPalette",value:function(e){var t=this,r="auto"===this.options.useAlphaInPalette?this.options.showAlpha:this.options.useAlphaInPalette,o=null;switch(this.options.palette){case"PALETTE_MATERIAL_500":o=i.PALETTE_MATERIAL_500;break;case"PALETTE_MATERIAL_CHROME":o=i.PALETTE_MATERIAL_CHROME;break;default:o=(0,i.ensureArray)(this.options.palette)}if(this.options.paletteEditable||o.length>0){var n=function(r,o,n){var i=e.querySelector('.a-color-picker-palette-color[data-color="'+r+'"]')||document.createElement("div");i.className="a-color-picker-palette-color",i.style.backgroundColor=r,i.setAttribute("data-color",r),i.title=r,e.insertBefore(i,o),t.palette[r]=!0,n&&t.onPaletteColorAdd(r)},s=function(r,o){r?(e.removeChild(r),t.palette[r.getAttribute("data-color")]=!1,o&&t.onPaletteColorRemove(r.getAttribute("data-color"))):(e.querySelectorAll(".a-color-picker-palette-color[data-color]").forEach(function(t){e.removeChild(t)}),Object.keys(t.palette).forEach(function(e){t.palette[e]=!1}),o&&t.onPaletteColorRemove())};if(o.map(function(e){return(0,i.parseColor)(e,r?"rgbcss4":"hex")}).filter(function(e){return!!e}).forEach(function(e){return n(e)}),this.options.paletteEditable){var a=document.createElement("div");a.className="a-color-picker-palette-color a-color-picker-palette-add",a.innerHTML="+",e.appendChild(a),e.addEventListener("click",function(e){/a-color-picker-palette-add/.test(e.target.className)?e.shiftKey?s(null,!0):n(r?(0,i.parseColor)([t.R,t.G,t.B,t.A],"rgbcss4"):(0,i.rgbToHex)(t.R,t.G,t.B),e.target,!0):/a-color-picker-palette-color/.test(e.target.className)&&(e.shiftKey?s(e.target,!0):t.onValueChanged(f,e.target.getAttribute("data-color")))})}else e.addEventListener("click",function(e){/a-color-picker-palette-color/.test(e.target.className)&&t.onValueChanged(f,e.target.getAttribute("data-color"))})}else e.style.display="none"}},{key:"updatePalette",value:function(e){this.paletteRow.innerHTML="",this.palette={},this.paletteRow.parentElement||this.element.appendChild(this.paletteRow),this.options.palette=e,this.setPalette(this.paletteRow)}},{key:"onValueChanged",value:function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{silent:!1};switch(e){case"H":this.H=t;var o=(0,i.hslToRgb)(this.H,this.S,this.L),s=n(o,3);this.R=s[0],this.G=s[1],this.B=s[2],this.slBarHelper.setHue(t),this.updatePointerH(this.H),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"S":this.S=t;var a=(0,i.hslToRgb)(this.H,this.S,this.L),l=n(a,3);this.R=l[0],this.G=l[1],this.B=l[2],this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"L":this.L=t;var c=(0,i.hslToRgb)(this.H,this.S,this.L),p=n(c,3);this.R=p[0],this.G=p[1],this.B=p[2],this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"R":this.R=t;var u=(0,i.rgbToHsl)(this.R,this.G,this.B),h=n(u,3);this.H=h[0],this.S=h[1],this.L=h[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"G":this.G=t;var d=(0,i.rgbToHsl)(this.R,this.G,this.B),v=n(d,3);this.H=v[0],this.S=v[1],this.L=v[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"B":this.B=t;var m=(0,i.rgbToHsl)(this.R,this.G,this.B),y=n(m,3);this.H=y[0],this.S=y[1],this.L=y[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"RGB":var x=n(t,3);this.R=x[0],this.G=x[1],this.B=x[2];var A=(0,i.rgbToHsl)(this.R,this.G,this.B),E=n(A,3);this.H=E[0],this.S=E[1],this.L=E[2],this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case g:var k=n(t,4);this.R=k[0],this.G=k[1],this.B=k[2],this.A=k[3];var F=(0,i.rgbToHsl)(this.R,this.G,this.B),C=n(F,3);this.H=C[0],this.S=C[1],this.L=C[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case b:var w=n(t,4);this.H=w[0],this.S=w[1],this.L=w[2],this.A=w[3];var B=(0,i.hslToRgb)(this.H,this.S,this.L),H=n(B,3);this.R=H[0],this.G=H[1],this.B=H[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case"RGBHEX":var R=(0,i.cssColorToRgb)(t)||[this.R,this.G,this.B],S=n(R,3);this.R=S[0],this.G=S[1],this.B=S[2];var L=(0,i.rgbToHsl)(this.R,this.G,this.B),T=n(L,3);this.H=T[0],this.S=T[1],this.L=T[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B);break;case f:var G=(0,i.parseColor)(t,"rgba")||[0,0,0,1],I=n(G,4);this.R=I[0],this.G=I[1],this.B=I[2],this.A=I[3];var D=(0,i.rgbToHsl)(this.R,this.G,this.B),P=n(D,3);this.H=P[0],this.S=P[1],this.L=P[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case"ALPHA":this.A=t}1===this.A?this.preview.style.backgroundColor="rgb("+this.R+","+this.G+","+this.B+")":this.preview.style.backgroundColor="rgba("+this.R+","+this.G+","+this.B+","+this.A+")",r&&r.silent||this.onchange&&this.onchange(this.preview.style.backgroundColor)}},{key:"onPaletteColorAdd",value:function(e){this.oncoloradd&&this.oncoloradd(e)}},{key:"onPaletteColorRemove",value:function(e){this.oncolorremove&&this.oncolorremove(e)}},{key:"updateInputHSL",value:function(e,t,r){this.options.showHSL&&(this.inputH.value=e,this.inputS.value=t,this.inputL.value=r)}},{key:"updateInputRGB",value:function(e,t,r){this.options.showRGB&&(this.inputR.value=e,this.inputG.value=t,this.inputB.value=r)}},{key:"updateInputRGBHEX",value:function(e,t,r){this.options.showHEX&&(this.inputRGBHEX.value=(0,i.rgbToHex)(e,t,r))}},{key:"updatePointerH",value:function(e){var t=this.options.hueBarSize[0]*e/360;this.huePointer.style.left=t-7+"px"}},{key:"updatePointerSL",value:function(e,t,r){var o=(0,i.hslToRgb)(e,t,r),s=n(o,3),a=s[0],l=s[1],c=s[2],p=this.slBarHelper.findColor(a,l,c),u=n(p,2),h=u[0],d=u[1];h>=0&&(this.slPointer.style.left=h-7+"px",this.slPointer.style.top=d-7+"px")}},{key:"updatePointerA",value:function(e){if(this.options.showAlpha){var t=this.options.alphaBarSize[0]*e;this.alphaPointer.style.left=t-7+"px"}}}]),e}(),E=function(){function e(t){c(this,e),this.name=t,this.listeners=[]}return o(e,[{key:"on",value:function(e){e&&this.listeners.push(e)}},{key:"off",value:function(e){this.listeners=e?this.listeners.filter(function(t){return t!==e}):[]}},{key:"emit",value:function(e,t){for(var r=this.listeners.slice(0),o=0;o<r.length;o++)r[o].apply(t,e)}}]),e}();function k(e,t){var r=new A(e,t),o={change:new E("change"),coloradd:new E("coloradd"),colorremove:new E("colorremove")},s=!0,a={},l={get element(){return r.element},get rgb(){return[r.R,r.G,r.B]},set rgb(e){var t=n(e,3),o=t[0],s=t[1],a=t[2],l=[(0,i.limit)(o,0,255),(0,i.limit)(s,0,255),(0,i.limit)(a,0,255)];o=l[0],s=l[1],a=l[2],r.onValueChanged(g,[o,s,a,1])},get hsl(){return[r.H,r.S,r.L]},set hsl(e){var t=n(e,3),o=t[0],s=t[1],a=t[2],l=[(0,i.limit)(o,0,360),(0,i.limit)(s,0,100),(0,i.limit)(a,0,100)];o=l[0],s=l[1],a=l[2],r.onValueChanged(b,[o,s,a,1])},get rgbhex(){return this.all.hex},get rgba(){return[r.R,r.G,r.B,r.A]},set rgba(e){var t=n(e,4),o=t[0],s=t[1],a=t[2],l=t[3],c=[(0,i.limit)(o,0,255),(0,i.limit)(s,0,255),(0,i.limit)(a,0,255),(0,i.limit)(l,0,1)];o=c[0],s=c[1],a=c[2],l=c[3],r.onValueChanged(g,[o,s,a,l])},get hsla(){return[r.H,r.S,r.L,r.A]},set hsla(e){var t=n(e,4),o=t[0],s=t[1],a=t[2],l=t[3],c=[(0,i.limit)(o,0,360),(0,i.limit)(s,0,100),(0,i.limit)(a,0,100),(0,i.limit)(l,0,1)];o=c[0],s=c[1],a=c[2],l=c[3],r.onValueChanged(b,[o,s,a,l])},get color(){return this.all.toString()},set color(e){r.onValueChanged(f,e)},setColor:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];r.onValueChanged(f,e,{silent:t})},get all(){if(s){var e=[r.R,r.G,r.B,r.A],t=r.A<1?"rgba("+r.R+","+r.G+","+r.B+","+r.A+")":i.rgbToHex.apply(void 0,e);(a=(0,i.parseColor)(e,a)).toString=function(){return t},s=!1}return Object.assign({},a)},get onchange(){return o.change&&o.change.listeners[0]},set onchange(e){this.off("change").on("change",e)},get oncoloradd(){return o.coloradd&&o.coloradd.listeners[0]},set oncoloradd(e){this.off("coloradd").on("coloradd",e)},get oncolorremove(){return o.colorremove&&o.colorremove.listeners[0]},set oncolorremove(e){this.off("colorremove").on("colorremove",e)},get palette(){return Object.keys(r.palette).filter(function(e){return r.palette[e]})},set palette(e){r.updatePalette(e)},show:function(){r.element.classList.remove("hidden")},hide:function(){r.element.classList.add("hidden")},toggle:function(){r.element.classList.toggle("hidden")},on:function(e,t){return e&&o[e]&&o[e].on(t),this},off:function(e,t){return e&&o[e]&&o[e].off(t),this},destroy:function(){o.change.off(),o.coloradd.off(),o.colorremove.off(),r.element.remove(),o=null,r=null}};return r.onchange=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];s=!0,o.change.emit([l].concat(t),l)},r.oncoloradd=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];o.coloradd.emit([l].concat(t),l)},r.oncolorremove=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];o.colorremove.emit([l].concat(t),l)},r.element.ctrl=l,l}if("undefined"!=typeof window&&!document.querySelector('head>style[data-source="a-color-picker"]')){var F=r(13).toString(),C=document.createElement("style");C.setAttribute("type","text/css"),C.setAttribute("data-source","a-color-picker"),C.innerHTML=F,document.querySelector("head").appendChild(C)}t.createPicker=k,t.from=function(e,t){var r=function(e){return e?Array.isArray(e)?e:e instanceof HTMLElement?[e]:e instanceof NodeList?[].concat(p(e)):"string"==typeof e?[].concat(p(document.querySelectorAll(e))):e.jquery?e.get():[]:[]}(e).map(function(e,r){var o=k(e,t);return o.index=r,o});return r.on=function(e,t){return r.forEach(function(r){return r.on(e,t)}),this},r.off=function(e){return r.forEach(function(t){return t.off(e)}),this},r},t.parseColorToRgb=i.parseColorToRgb,t.parseColorToRgba=i.parseColorToRgba,t.parseColorToHsl=i.parseColorToHsl,t.parseColorToHsla=i.parseColorToHsla,t.parseColor=i.parseColor,t.rgbToHex=i.rgbToHex,t.hslToRgb=i.hslToRgb,t.rgbToHsl=i.rgbToHsl,t.rgbToHsv=i.rgbToHsv,t.rgbToInt=i.rgbToInt,t.intToRgb=i.intToRgb,t.getLuminance=i.getLuminance,t.COLOR_NAMES=i.COLOR_NAMES,t.PALETTE_MATERIAL_500=i.PALETTE_MATERIAL_500,t.PALETTE_MATERIAL_CHROME=i.PALETTE_MATERIAL_CHROME,t.VERSION="1.2.1"},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.nvl=t.ensureArray=t.limit=t.getLuminance=t.parseColor=t.parseColorToHsla=t.parseColorToHsl=t.cssHslaToHsla=t.cssHslToHsl=t.parseColorToRgba=t.parseColorToRgb=t.cssRgbaToRgba=t.cssRgbToRgb=t.cssColorToRgba=t.cssColorToRgb=t.intToRgb=t.rgbToInt=t.rgbToHsv=t.rgbToHsl=t.hslToRgb=t.rgbToHex=t.PALETTE_MATERIAL_CHROME=t.PALETTE_MATERIAL_500=t.COLOR_NAMES=void 0;var o,n=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],o=!0,n=!1,i=void 0;try{for(var s,a=e[Symbol.iterator]();!(o=(s=a.next()).done)&&(r.push(s.value),!t||r.length!==t);o=!0);}catch(e){n=!0,i=e}finally{try{!o&&a.return&&a.return()}finally{if(n)throw i}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),i=r(1),s=(o=i)&&o.__esModule?o:{default:o};function a(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}var l={aliceblue:"#F0F8FF",antiquewhite:"#FAEBD7",aqua:"#00FFFF",aquamarine:"#7FFFD4",azure:"#F0FFFF",beige:"#F5F5DC",bisque:"#FFE4C4",black:"#000000",blanchedalmond:"#FFEBCD",blue:"#0000FF",blueviolet:"#8A2BE2",brown:"#A52A2A",burlywood:"#DEB887",cadetblue:"#5F9EA0",chartreuse:"#7FFF00",chocolate:"#D2691E",coral:"#FF7F50",cornflowerblue:"#6495ED",cornsilk:"#FFF8DC",crimson:"#DC143C",cyan:"#00FFFF",darkblue:"#00008B",darkcyan:"#008B8B",darkgoldenrod:"#B8860B",darkgray:"#A9A9A9",darkgrey:"#A9A9A9",darkgreen:"#006400",darkkhaki:"#BDB76B",darkmagenta:"#8B008B",darkolivegreen:"#556B2F",darkorange:"#FF8C00",darkorchid:"#9932CC",darkred:"#8B0000",darksalmon:"#E9967A",darkseagreen:"#8FBC8F",darkslateblue:"#483D8B",darkslategray:"#2F4F4F",darkslategrey:"#2F4F4F",darkturquoise:"#00CED1",darkviolet:"#9400D3",deeppink:"#FF1493",deepskyblue:"#00BFFF",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1E90FF",firebrick:"#B22222",floralwhite:"#FFFAF0",forestgreen:"#228B22",fuchsia:"#FF00FF",gainsboro:"#DCDCDC",ghostwhite:"#F8F8FF",gold:"#FFD700",goldenrod:"#DAA520",gray:"#808080",grey:"#808080",green:"#008000",greenyellow:"#ADFF2F",honeydew:"#F0FFF0",hotpink:"#FF69B4","indianred ":"#CD5C5C","indigo ":"#4B0082",ivory:"#FFFFF0",khaki:"#F0E68C",lavender:"#E6E6FA",lavenderblush:"#FFF0F5",lawngreen:"#7CFC00",lemonchiffon:"#FFFACD",lightblue:"#ADD8E6",lightcoral:"#F08080",lightcyan:"#E0FFFF",lightgoldenrodyellow:"#FAFAD2",lightgray:"#D3D3D3",lightgrey:"#D3D3D3",lightgreen:"#90EE90",lightpink:"#FFB6C1",lightsalmon:"#FFA07A",lightseagreen:"#20B2AA",lightskyblue:"#87CEFA",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#B0C4DE",lightyellow:"#FFFFE0",lime:"#00FF00",limegreen:"#32CD32",linen:"#FAF0E6",magenta:"#FF00FF",maroon:"#800000",mediumaquamarine:"#66CDAA",mediumblue:"#0000CD",mediumorchid:"#BA55D3",mediumpurple:"#9370DB",mediumseagreen:"#3CB371",mediumslateblue:"#7B68EE",mediumspringgreen:"#00FA9A",mediumturquoise:"#48D1CC",mediumvioletred:"#C71585",midnightblue:"#191970",mintcream:"#F5FFFA",mistyrose:"#FFE4E1",moccasin:"#FFE4B5",navajowhite:"#FFDEAD",navy:"#000080",oldlace:"#FDF5E6",olive:"#808000",olivedrab:"#6B8E23",orange:"#FFA500",orangered:"#FF4500",orchid:"#DA70D6",palegoldenrod:"#EEE8AA",palegreen:"#98FB98",paleturquoise:"#AFEEEE",palevioletred:"#DB7093",papayawhip:"#FFEFD5",peachpuff:"#FFDAB9",peru:"#CD853F",pink:"#FFC0CB",plum:"#DDA0DD",powderblue:"#B0E0E6",purple:"#800080",rebeccapurple:"#663399",red:"#FF0000",rosybrown:"#BC8F8F",royalblue:"#4169E1",saddlebrown:"#8B4513",salmon:"#FA8072",sandybrown:"#F4A460",seagreen:"#2E8B57",seashell:"#FFF5EE",sienna:"#A0522D",silver:"#C0C0C0",skyblue:"#87CEEB",slateblue:"#6A5ACD",slategray:"#708090",slategrey:"#708090",snow:"#FFFAFA",springgreen:"#00FF7F",steelblue:"#4682B4",tan:"#D2B48C",teal:"#008080",thistle:"#D8BFD8",tomato:"#FF6347",turquoise:"#40E0D0",violet:"#EE82EE",wheat:"#F5DEB3",white:"#FFFFFF",whitesmoke:"#F5F5F5",yellow:"#FFFF00",yellowgreen:"#9ACD32"};function c(e,t,r){return e=+e,isNaN(e)?t:e<t?t:e>r?r:e}function p(e,t){return null==e?t:e}function u(e,t,r){var o=[c(e,0,255),c(t,0,255),c(r,0,255)];return"#"+("000000"+((e=o[0])<<16|(t=o[1])<<8|(r=o[2])).toString(16)).slice(-6)}function h(e,t,r){var o=void 0,n=void 0,i=void 0,s=[c(e,0,360)/360,c(t,0,100)/100,c(r,0,100)/100];if(e=s[0],r=s[2],0==(t=s[1]))o=n=i=r;else{var a=function(e,t,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?e+6*(t-e)*r:r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e},l=r<.5?r*(1+t):r+t-r*t,p=2*r-l;o=a(p,l,e+1/3),n=a(p,l,e),i=a(p,l,e-1/3)}return[255*o,255*n,255*i].map(Math.round)}function d(e,t,r){var o=[c(e,0,255)/255,c(t,0,255)/255,c(r,0,255)/255];e=o[0],t=o[1],r=o[2];var n=Math.max(e,t,r),i=Math.min(e,t,r),s=void 0,a=void 0,l=(n+i)/2;if(n==i)s=a=0;else{var p=n-i;switch(a=l>.5?p/(2-n-i):p/(n+i),n){case e:s=(t-r)/p+(t<r?6:0);break;case t:s=(r-e)/p+2;break;case r:s=(e-t)/p+4}s/=6}return[360*s,100*a,100*l].map(Math.round)}function f(e,t,r){return e<<16|t<<8|r}function g(e){if(e){var t=l[e.toString().toLowerCase()],r=/^\s*#?((([0-9A-F])([0-9A-F])([0-9A-F]))|(([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})))\s*$/i.exec(t||e)||[],o=n(r,10),i=o[3],s=o[4],a=o[5],c=o[7],p=o[8],u=o[9];if(void 0!==i)return[parseInt(i+i,16),parseInt(s+s,16),parseInt(a+a,16)];if(void 0!==c)return[parseInt(c,16),parseInt(p,16),parseInt(u,16)]}}function b(e){if(e){var t=l[e.toString().toLowerCase()],r=/^\s*#?((([0-9A-F])([0-9A-F])([0-9A-F])([0-9A-F])?)|(([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})?))\s*$/i.exec(t||e)||[],o=n(r,12),i=o[3],s=o[4],a=o[5],c=o[6],p=o[8],u=o[9],h=o[10],d=o[11];if(void 0!==i)return[parseInt(i+i,16),parseInt(s+s,16),parseInt(a+a,16),c?+(parseInt(c+c,16)/255).toFixed(2):1];if(void 0!==p)return[parseInt(p,16),parseInt(u,16),parseInt(h,16),d?+(parseInt(d,16)/255).toFixed(2):1]}}function v(e){if(e){var t=/^rgb\((\d+)[\s,](\d+)[\s,](\d+)\)/i.exec(e)||[],r=n(t,4),o=r[0],i=r[1],s=r[2],a=r[3];return o?[c(i,0,255),c(s,0,255),c(a,0,255)]:void 0}}function m(e){if(e){var t=/^rgba?\((\d+)\s*[\s,]\s*(\d+)\s*[\s,]\s*(\d+)(\s*[\s,]\s*(\d*(.\d+)?))?\)/i.exec(e)||[],r=n(t,6),o=r[0],i=r[1],s=r[2],a=r[3],l=r[5];return o?[c(i,0,255),c(s,0,255),c(a,0,255),c(p(l,1),0,1)]:void 0}}function y(e){if(Array.isArray(e))return e=[c(e[0],0,255),c(e[1],0,255),c(e[2],0,255),c(p(e[3],1),0,1)];var t=b(e)||m(e);return t&&3===t.length&&t.push(1),t}function x(e){if(e){var t=/^hsl\((\d+)[\s,](\d+)[\s,](\d+)\)/i.exec(e)||[],r=n(t,4),o=r[0],i=r[1],s=r[2],a=r[3];return o?[c(i,0,360),c(s,0,100),c(a,0,100)]:void 0}}function A(e){if(e){var t=/^hsla?\((\d+)\s*[\s,]\s*(\d+)\s*[\s,]\s*(\d+)(\s*[\s,]\s*(\d*(.\d+)?))?\)/i.exec(e)||[],r=n(t,6),o=r[0],i=r[1],s=r[2],a=r[3],l=r[5];return o?[c(i,0,255),c(s,0,255),c(a,0,255),c(p(l,1),0,1)]:void 0}}function E(e){if(Array.isArray(e))return e=[c(e[0],0,360),c(e[1],0,100),c(e[2],0,100),c(p(e[3],1),0,1)];var t=A(e);return t&&3===t.length&&t.push(1),t}function k(e,t){switch(t){case"rgb":default:return e.slice(0,3);case"rgbcss":return"rgb("+e[0]+", "+e[1]+", "+e[2]+")";case"rgbcss4":return"rgb("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+")";case"rgba":return e;case"rgbacss":return"rgba("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+")";case"hsl":return d.apply(void 0,a(e));case"hslcss":return"hsl("+(e=d.apply(void 0,a(e)))[0]+", "+e[1]+", "+e[2]+")";case"hslcss4":var r=d.apply(void 0,a(e));return"hsl("+r[0]+", "+r[1]+", "+r[2]+", "+e[3]+")";case"hsla":return[].concat(a(d.apply(void 0,a(e))),[e[3]]);case"hslacss":var o=d.apply(void 0,a(e));return"hsla("+o[0]+", "+o[1]+", "+o[2]+", "+e[3]+")";case"hex":return u.apply(void 0,a(e));case"hexcss4":return u.apply(void 0,a(e))+("00"+parseInt(255*e[3]).toString(16)).slice(-2);case"int":return f.apply(void 0,a(e))}}t.COLOR_NAMES=l,t.PALETTE_MATERIAL_500=["#F44336","#E91E63","#E91E63","#9C27B0","#9C27B0","#673AB7","#673AB7","#3F51B5","#3F51B5","#2196F3","#2196F3","#03A9F4","#03A9F4","#00BCD4","#00BCD4","#009688","#009688","#4CAF50","#4CAF50","#8BC34A","#8BC34A","#CDDC39","#CDDC39","#FFEB3B","#FFEB3B","#FFC107","#FFC107","#FF9800","#FF9800","#FF5722","#FF5722","#795548","#795548","#9E9E9E","#9E9E9E","#607D8B","#607D8B"],t.PALETTE_MATERIAL_CHROME=["#f44336","#e91e63","#9c27b0","#673ab7","#3f51b5","#2196f3","#03a9f4","#00bcd4","#009688","#4caf50","#8bc34a","#cddc39","#ffeb3b","#ffc107","#ff9800","#ff5722","#795548","#9e9e9e","#607d8b"],t.rgbToHex=u,t.hslToRgb=h,t.rgbToHsl=d,t.rgbToHsv=function(e,t,r){var o=[c(e,0,255)/255,c(t,0,255)/255,c(r,0,255)/255];e=o[0],t=o[1],r=o[2];var n,i=Math.max(e,t,r),s=Math.min(e,t,r),a=void 0,l=i,p=i-s;if(n=0===i?0:p/i,i==s)a=0;else{switch(i){case e:a=(t-r)/p+(t<r?6:0);break;case t:a=(r-e)/p+2;break;case r:a=(e-t)/p+4}a/=6}return[a,n,l]},t.rgbToInt=f,t.intToRgb=function(e){return[e>>16&255,e>>8&255,255&e]},t.cssColorToRgb=g,t.cssColorToRgba=b,t.cssRgbToRgb=v,t.cssRgbaToRgba=m,t.parseColorToRgb=function(e){return Array.isArray(e)?e=[c(e[0],0,255),c(e[1],0,255),c(e[2],0,255)]:g(e)||v(e)},t.parseColorToRgba=y,t.cssHslToHsl=x,t.cssHslaToHsla=A,t.parseColorToHsl=function(e){return Array.isArray(e)?e=[c(e[0],0,360),c(e[1],0,100),c(e[2],0,100)]:x(e)},t.parseColorToHsla=E,t.parseColor=function(e,t){if(t=t||"rgb",null!=e){var r=void 0;if((r=y(e))||(r=E(e))&&(r=[].concat(a(h.apply(void 0,a(r))),[r[3]])))return(0,s.default)(t)?["rgb","rgbcss","rgbcss4","rgba","rgbacss","hsl","hslcss","hslcss4","hsla","hslacss","hex","hexcss4","int"].reduce(function(e,t){return e[t]=k(r,t),e},t||{}):k(r,t.toString().toLowerCase())}},t.getLuminance=function(e,t,r){return.2126*(e=(e/=255)<.03928?e/12.92:Math.pow((e+.055)/1.055,2.4))+.7152*(t=(t/=255)<.03928?t/12.92:Math.pow((t+.055)/1.055,2.4))+.0722*(r=(r/=255)<.03928?r/12.92:Math.pow((r+.055)/1.055,2.4))},t.limit=c,t.ensureArray=function(e){return e?Array.from(e):[]},t.nvl=p},function(e,t,r){"use strict";
15 | /*!
16 |  * isobject <https://github.com/jonschlinkert/isobject>
17 |  *
18 |  * Copyright (c) 2014-2017, Jon Schlinkert.
19 |  * Released under the MIT License.
20 |  */e.exports=function(e){return null!=e&&"object"==typeof e&&!1===Array.isArray(e)}},function(e,t){e.exports='<div class="a-color-picker-row a-color-picker-stack a-color-picker-row-top"> <canvas class="a-color-picker-sl a-color-picker-transparent"></canvas> <div class=a-color-picker-dot></div> </div> <div class=a-color-picker-row> <div class="a-color-picker-stack a-color-picker-transparent a-color-picker-circle"> <div class=a-color-picker-preview> <input class=a-color-picker-clipbaord type=text> </div> </div> <div class=a-color-picker-column> <div class="a-color-picker-cell a-color-picker-stack"> <canvas class=a-color-picker-h></canvas> <div class=a-color-picker-dot></div> </div> <div class="a-color-picker-cell a-color-picker-alpha a-color-picker-stack" show-on-alpha> <canvas class="a-color-picker-a a-color-picker-transparent"></canvas> <div class=a-color-picker-dot></div> </div> </div> </div> <div class="a-color-picker-row a-color-picker-hsl" show-on-hsl> <label>H</label> <input nameref=H type=number maxlength=3 min=0 max=360 value=0> <label>S</label> <input nameref=S type=number maxlength=3 min=0 max=100 value=0> <label>L</label> <input nameref=L type=number maxlength=3 min=0 max=100 value=0> </div> <div class="a-color-picker-row a-color-picker-rgb" show-on-rgb> <label>R</label> <input nameref=R type=number maxlength=3 min=0 max=255 value=0> <label>G</label> <input nameref=G type=number maxlength=3 min=0 max=255 value=0> <label>B</label> <input nameref=B type=number maxlength=3 min=0 max=255 value=0> </div> <div class="a-color-picker-row a-color-picker-rgbhex a-color-picker-single-input" show-on-single-input> <label>HEX</label> <input nameref=RGBHEX type=text select-on-focus> </div> <div class="a-color-picker-row a-color-picker-palette"></div>'},function(e,t,r){var o=r(14);e.exports="string"==typeof o?o:o.toString()},function(e,t,r){(e.exports=r(0)(!1)).push([e.i,"/*!\n * a-color-picker\n * https://github.com/narsenico/a-color-picker\n *\n * Copyright (c) 2017-2018, Gianfranco Caldi.\n * Released under the MIT License.\n */\n\n.a-color-picker {\n    background-color: #FFFFFF;\n    padding: 0px;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: column;\n    user-select: none;\n    width: 232px;\n    font: 400 10px Helvetica,Arial,sans-serif;\n    border-radius: 3px;\n    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.05), 0px 2px 4px rgba(0,0,0,0.25);\n}\n\n.a-color-picker input {\n    box-sizing: border-box;\n}\n\n.a-color-picker-row {\n    padding: 15px;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    user-select: none;\n}\n\n.a-color-picker-row-top {\n    padding: 0;\n}\n\n.a-color-picker-row:not(:first-child) {\n    border-top: solid 1px #F5F5F5;\n}\n\n.a-color-picker-column {\n    display: flex;\n    flex-direction: column;\n}\n\n.a-color-picker-cell {\n    flex: 1 1 auto;\n    margin-bottom: 4px;\n}\n\n.a-color-picker-cell:last-child {\n    margin-bottom: 0;\n}\n\n.a-color-picker-stack {\n    position: relative;\n}\n\n.a-color-picker-dot {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    top: 0px;\n    left: 0px;\n    background: #ffffff;\n    pointer-events: none;\n    border-radius: 50px;\n    z-index: 1000;\n    box-shadow: 0px 1px 2px rgba(0,0,0,0.75);\n}\n\n.a-color-picker-a, .a-color-picker-h, .a-color-picker-sl {\n    cursor: cell;\n}\n\n.a-color-picker-h+.a-color-picker-dot,\n.a-color-picker-a+.a-color-picker-dot {\n    top: -2px;\n}\n\n.a-color-picker-h,\n.a-color-picker-a {\n    border-radius: 2px;\n}\n\n.a-color-picker-preview {\n    box-sizing: border-box;\n    width: 30px;\n    height: 30px;\n    user-select: none;\n    border-radius: 15px;\n}\n\n.a-color-picker-circle {\n    border-radius: 50px;\n    border: solid 1px #eee;\n}\n\n.a-color-picker-hsl,\n.a-color-picker-rgb,\n.a-color-picker-single-input {\n    justify-content: space-evenly;\n}\n\n.a-color-picker-hsl>label,\n.a-color-picker-rgb>label,\n.a-color-picker-single-input>label {\n    padding: 0 8px;\n    flex: 0 0 auto;\n    color: #969696;\n}\n\n.a-color-picker-hsl>input,\n.a-color-picker-rgb>input,\n.a-color-picker-single-input>input {\n    text-align: center;\n    padding: 2px 0px;\n    width: 0;\n    flex: 1 1 auto;\n    border: 1px solid #e0e0e0;\n    line-height: 20px;\n}\n\n.a-color-picker-hsl>input::-webkit-inner-spin-button,\n.a-color-picker-rgb>input::-webkit-inner-spin-button,\n.a-color-picker-single-input>input::-webkit-inner-spin-button,\n.a-color-picker-hsl>input::-webkit-inner-spin-button,\n.a-color-picker-rgb>input::-webkit-inner-spin-button,\n.a-color-picker-single-input>input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n}\n\n.a-color-picker-hsl>input:focus,\n.a-color-picker-rgb>input:focus,\n.a-color-picker-single-input>input:focus {\n    border-color: #04a9f4;\n    outline: none;\n}\n\n.a-color-picker-transparent {\n    background-image: linear-gradient(-45deg, #cdcdcd 25%, transparent 25%), linear-gradient(45deg, #cdcdcd 25%, transparent 25%), linear-gradient(-45deg, transparent 75%, #cdcdcd 75%), linear-gradient(45deg, transparent 75%, #cdcdcd 75%);\n    background-size: 11px 11px;\n    background-position: 0 0, 0 -5.5px, -5.5px 5.5px, 5.5px 0px;\n\n}\n\n.a-color-picker-sl {\n    border-radius: 3px 3px 0px 0px;\n}\n\n.a-color-picker.hide-hsl [show-on-hsl],\n.a-color-picker.hide-rgb [show-on-rgb],\n.a-color-picker.hide-single-input [show-on-single-input],\n.a-color-picker.hide-alpha [show-on-alpha] {\n    display: none;\n}\n\n.a-color-picker-clipbaord {\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    cursor: pointer;\n}\n\n.a-color-picker-palette {\n    flex-flow: wrap;\n    flex-direction: row;\n    justify-content: flex-start;\n    padding: 10px;\n}\n\n.a-color-picker-palette-color {\n    width: 15px;\n    height: 15px;\n    flex: 0 1 15px;\n    margin: 3px;\n    box-sizing: border-box;\n    cursor: pointer;\n    border-radius: 3px;\n    box-shadow: 0px 0px 0px 1px inset rgba(0,0,0,0.10);\n}\n\n.a-color-picker-palette-add {\n    text-align: center;\n    line-height: 13px;\n    color: #607D8B;\n}\n\n.a-color-picker.hidden {\n    display: none;\n}",""])}]);
21 | //# sourceMappingURL=docs.js.map


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> <html lang=en class=theme-gray> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width"> <meta http-equiv=X-UA-Compatible content="IE=edge"> <title>a-color-picker</title> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=author content=narsenico> <meta name=description content="A color picker for web app"> </head> <body> <div class="logo upper-right">&nbsp;</div> <header class="shadow darken flexrow"> <div class=flexcol-1> <a href=https://github.com/narsenico title="narsenico github repositories"> <img alt=avatar class=avatar src=https://www.gravatar.com/avatar/5e6f1401ca340dee16dc70107619b400> </a> </div> <div class="title flexcol-2"> <h1 class=""> a-color-picker | for web app </h1> <div class=badges> <a href=https://badge.fury.io/js/a-color-picker> <img src=https://badge.fury.io/js/a-color-picker.svg alt="npm version" height=18> </a> <a href=https://codepen.io/collection/XprWjO/ > <img src=https://img.shields.io/badge/demo-codepen-0ebeff.svg alt=codepen height=18> </a> <iframe src="https://ghbtns.com/github-btn.html?user=narsenico&repo=a-color-picker&type=star&count=true" frameborder=0 scrolling=0 width=170px height=20px></iframe> </div> </div> </header> <div class="content flexrow"> <nav class=flexcol-1> <ul> <li> <a href=#install>Install</a> </li> <li> <a href=#create_a_picker>Create a picker</a> </li> <li> <a href=#choose_which_controls_to_show>Choose which controls to show</a> </li> <li> <a href=#palette>Palette</a> </li> <li> <a href=#events>Events</a> </li> <li> <a href=#tips>Tips</a> </li> <li> <a href=#api>API</a> <ul> <li> <a href=#api_acolorpicker_createpicker>.createPicker</a> </li> <li> <a href=#api_acolorpicker_from>.from</a> </li> <li> <a href=#api_acolorpicker_parsecolor>.parseColor</a> </li> <li> <a href=#api_picker_controller>ACPController</a> </li> <li> <a href=#api_options>options</a> </li> </ul> </li> </ul> </nav> <div class="pens flexcol-2"> <section class=shadow> <a name=install></a> <h3>Install</h3> <ul> <li> <code>npm install a-color-picker --save</code> </li> <li> <code>bower install a-color-picker --save</code> </li> <li>a-color-picker is available on <a href=https://www.jsdelivr.com/package/npm/a-color-picker>jsdelivr</a> </li> </ul> </section> <section class=shadow> <a name=create_a_picker></a> <h3>Create a picker</h3> <p>Define an HTML element to contain the picker and use <code>AColorPicker.<span class=prop>from</span>(<span class=par>selector</span>)</code> to create it. <br>The default picker is created with HSL, RGB and HEX controls. <br>The <code>acp-color</code> attribute is used to set the initial value.</p> <p data-height=355 data-theme-id=1 data-slug-hash=WJoQBm data-default-tab=html,result data-user=narsenico data-embed-version=2 data-pen-title=WJoQBm class=codepen>See the Pen <a href=https://codepen.io/narsenico/pen/WJoQBm/ >WJoQBm</a> by Caldi Gianfranco ( <a href=https://codepen.io/narsenico>@narsenico</a>) on <a href=https://codepen.io>CodePen</a>.</p> </section> <section class=shadow> <a name=choose_which_controls_to_show></a> <h3>Choose which controls to show</h3> <p>Show or hide controls through attributes. <br> <code>acp-show-*</code> attributes accepts <code>yes/no/true/false</code> values. Attributes without value are considered <code>true</code>. </p> <p data-height=326 data-theme-id=1 data-slug-hash=WJorZe data-default-tab=html,result data-user=narsenico data-embed-version=2 data-pen-title="a-color-picker demo attr" class=codepen>See the Pen <a href=https://codepen.io/narsenico/pen/WJorZe/ >a-color-picker demo attr</a> by Caldi Gianfranco ( <a href=https://codepen.io/narsenico>@narsenico</a>) on <a href=https://codepen.io>CodePen</a>.</p> </section> <section class=shadow> <a name=palette></a> <h3>Palette</h3> <p>Show a palette of colors using the <code>acp-palette</code> attribute. <br> Set a list of colors - named color, hex rgb, rgb(), rgba(), hsl(), hsla() - pipe separated or a predefined palette (PALETTE_MATERIAL_500, PALETTE_MATERIAL_CHROME). <br> The <code>acp-palette-editable</code> attribute can be set to allow the user to change the palette.</p> <p data-height=434 data-theme-id=1 data-slug-hash=NMbxoq data-default-tab=html,result data-user=narsenico data-embed-version=2 data-pen-title="a-color-picker demo palette editable" class=codepen>See the Pen <a href=https://codepen.io/narsenico/pen/NMbxoq/ >a-color-picker demo palette editable</a> by Narsenico ( <a href=https://codepen.io/narsenico>@narsenico</a>) on <a href=https://codepen.io>CodePen</a>.</p> </section> <section class=shadow> <a name=events></a> <h3>Events</h3> <p> To attach an event use <code>on</code> method and <code>off</code> to detach it. <pre class=eg><code>AColorPicker.<span class=prop>from</span>(<span class=par>selector</span>)
 2 |     .on(<span class=par>eventName</span>, <span class=par>callback</span>)
 3 |     .off(<span class=par>eventName</span>, <span class=par>callback</span>)</code></pre> <table class="detail hover-on-body"> <thead> <tr> <th>Event name</th> <th>Callback parameters</th> <th></th> </tr> </thead> <tbody> <tr> <td rowspan=2>change</td> <td> <code><span class=prop>picker</span></code> </td> <td class=explanation>target</td> </tr> <tr> <td> <code><span class=prop>color</span></code> </td> <td class=explanation>selected color</td> </tr> </tbody> <tbody> <tr> <td rowspan=2>coloradd</td> <td> <code><span class=prop>picker</span></code> </td> <td class=explanation>target</td> </tr> <tr> <td> <code><span class=prop>color</span></code> </td> <td class=explanation>color added</td> </tr> </tbody> <tbody> <tr> <td rowspan=2>colorremove</td> <td> <code><span class=prop>picker</span></code> </td> <td class=explanation>target</td> </tr> <tr> <td> <code><span class=prop>color</span></code> </td> <td class=explanation>color removed or null if all colors are removed</td> </tr> </tbody> </table> </p> </section> <section class=shadow> <a name=tips></a> <h3>Tips</h3> <p> </p><ul> <li>Click on the preview circle to copy current color</li> <li>Shift-click on a palette color to remove it</li> <li>Shift-click the '+' button to remove all the palette colors</li> </ul> <p></p> </section> <section class=shadow> <a name=api></a> <h3>API</h3> <section class=mark> <a name=api_acolorpicker_createpicker></a> <code>AColorPicker.<span class=prop>createPicker</span>(<span class=par>element</span>, <span class=par>options</span>)</code> <br> <code>AColorPicker.<span class=prop>createPicker</span>(<span class=par>options</span>)</code> <p>Create a color picker.</p> <table class="detail hover-on-row"> <thead> <tr> <th>Parameter</th> <th></th> </tr> </thead> <tbody> <tr> <td>element</td> <td class=explanation>HTMLElement, jQuery object or css selector string. <br> Optional: if not defined, <code>options.<span class=prop>attachTo</span></code> is used.</td> </tr> <tr> <td>options</td> <td class=explanation>See <a href=#api_options>options</a> <br> Optional only if element is defined. </td> </tr> </tbody> <thead> <tr> <th>Return</th> <th></th> </tr> </thead> <tbody> <tr> <td colspan=2 class=explanation>A <a href=#api_picker_controller>ACPController</a> instance </td> </tr> </tbody> </table> </section> <section class=mark> <a name=api_acolorpicker_from></a> <code>AColorPicker.<span class=prop>from</span>(<span class=par>selector</span>, <span class=par>options</span>)</code> <p>Create one or more color pickers.</p> <table class="detail hover-on-row"> <thead> <tr> <th>Parameter</th> <th></th> </tr> </thead> <tbody> <tr> <td>selector</td> <td class=explanation>HTMLElement, NodeList, jQuery object or css selector string.</td> </tr> <tr> <td>options</td> <td class=explanation>Optional, see <a href=#api_options>options</a> </td> </tr> </tbody> <thead> <tr> <th>Return</th> <th></th> </tr> </thead> <tbody> <tr> <td colspan=2 class=explanation>An array of <a href=#api_picker_controller>ACPController</a>. This array has helper methods <code>on</code> and <code>off</code> to attach/detach <a href=#events>events</a> to all items. </td> </tr> </tbody> </table> </section> <section class=mark> <a name=api_acolorpicker_parsecolor></a> <code>AColorPicker.<span class=prop>parseColor</span>(<span class=par>color</span>, <span class=par>outFormat</span>)</code> <p>Parse color in input and return formatted value.</p> <table class="detail hover-on-row"> <thead> <tr> <th>Parameter</th> <th></th> </tr> </thead> <tbody> <tr> <td>color</td> <td class=explanation>Value to be parsed <br>Accepts color name, rgb array, hex rgb, rgb(), rgba(), hsl(), hsla()</td> </tr> <tr> <td>outFormat</td> <td class=explanation>Output format, one of: rgb, rgbcss, rgbcss4, rgba, rgbacss, hsl, hslcss, hslcss4, hsla, hslacss, hex, hexcss4. <br> If outFormat is a plain object, will be filled with all formats as properties. </td> </tr> </tbody> <thead> <tr> <th>Return</th> <th></th> </tr> </thead> <tbody> <tr> <td colspan=2 class=explanation>Formatted color or <code><span class=par>undefined</span></code> if not recognized. <pre class=eg title=e.g.><code>AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>");<span class=comment>           // return [255, 0, 0]</span>
 4 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", "<span class=par>rgb</span>");<span class=comment>    // return [255, 0, 0]</span>
 5 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", "<span class=par>rgbcss</span>");<span class=comment> // return "rgb(255, 0, 0)"</span>
 6 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", "<span class=par>rgbcss4</span>");<span class=comment>// return "rgb(255, 0, 0, 1)"</span>
 7 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", "<span class=par>rgba</span>");<span class=comment>   // return [255, 0, 0, 1]</span>
 8 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", "<span class=par>rgbacss</span>");<span class=comment>// return "rgba(255, 0, 0, 1)"</span>
 9 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", "<span class=par>hsl</span>");<span class=comment>    // return [0,100,50]</span>
10 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", "<span class=par>hslcss</span>");<span class=comment> // return "hsl(0, 100, 50)"</span>
11 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", "<span class=par>hslcss4</span>");<span class=comment>// return "hsl(0, 100, 50, 1)"</span>
12 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", "<span class=par>hsla</span>");<span class=comment>   // return [0, 100, 50, 1]</span>
13 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", "<span class=par>hslacss</span>");<span class=comment>// return "hsla(0, 100, 50, 1)"</span>
14 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", "<span class=par>hex</span>");<span class=comment>    // return "#ff0000"</span>
15 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", "<span class=par>hexcss4</span>");<span class=comment>// return "#ff0000ff"</span>
16 | AColorPicker.<span class=prop>parseColor</span>("<span class=par>red</span>", <span class=par>{ }</span>);<span class=comment>// return { "rgb":[255,0,0], ... }</span>
17 | </code></pre> </td> </tr> </tbody> </table> </section> <section class=mark> <a name=api_picker_controller></a> <code>ACPController</code> <p>Can access picker properties and handle events.</p> <table class="detail hover-on-body"> <thead> <tr> <th colspan=2>Property</th> <th colspan=2>Type</th> </tr> </thead> <tbody> <tr> <td rowspan=3>color</td> <td rowspan=2 class=explanation>Get or set the current color</td> <td rowspan=2 class=explanation>String|Array</td> <td class=explanation>Accept: named color, hex rgb, rgb(), rgba(), hsl(), hsla()</td> </tr> <tr> <td class=explanation>Return: hex rgb or rgba() if alpha != 1</td> </tr> <tr> <td colspan=3 class=explanation> <pre class=eg title=e.g.><code><span class=comment>// set</span>
18 | picker.<span class=prop>color</span> = [<span class=par>205, 220, 57</span>]; <span class=comment>           // [R, G, B]</span>
19 | picker.<span class=prop>color</span> = [<span class=par>205, 220, 57, .5</span>]; <span class=comment>       // [R, G, B, A]</span>
20 | picker.<span class=prop>color</span> = "<span class=par>yellow</span>"; <span class=comment>                 // named color</span>
21 | picker.<span class=prop>color</span> = "<span class=par>#ffdd00</span>"; <span class=comment>                // hex rgb</span>
22 | picker.<span class=prop>color</span> = "<span class=par>#ffdd00ff</span>"; <span class=comment>              // hex rgba</span>
23 | picker.<span class=prop>color</span> = "<span class=par>#fd0</span>"; <span class=comment>                   // short hex rgb</span>
24 | picker.<span class=prop>color</span> = "<span class=par>#fd0f</span>"; <span class=comment>                  // short hex rgba</span>
25 | picker.<span class=prop>color</span> = "<span class=par>rgb(205, 220, 57)</span>"; <span class=comment>      // rgb() notation</span>
26 | picker.<span class=prop>color</span> = "<span class=par>rgb(205, 220, 57, .5)</span>"; <span class=comment>  // rgb() notation + alpha (css level 4)</span>
27 | picker.<span class=prop>color</span> = "<span class=par>rgba(205, 220, 57, .5)</span>"; <span class=comment> // rgba() notation</span>
28 | picker.<span class=prop>color</span> = "<span class=par>hsl(120, 100, 125)</span>"; <span class=comment>     // hsl() notation</span>
29 | picker.<span class=prop>color</span> = "<span class=par>hsl(120, 100, 125, .5)</span>"; <span class=comment> // hsl() notation + alpha (css level 4)</span>
30 | picker.<span class=prop>color</span> = "<span class=par>hsla(120, 100, 125, .5)</span>"; <span class=comment>// hsla() notation</span>
31 | <span class=comment>// get</span>
32 | picker.<span class=prop>color</span>; <span class=comment>// return "#ffdd00"</span>
33 | picker.<span class=prop>color</span>; <span class=comment>// return "rgba(205, 220, 57, .5)" if alpha is != 1</span>
34 | <span class=comment>// formatting color (see <a href=#api_acolorpicker_parsecolor>parseColor</a> for detail)</span>
35 | AColorPicker.<span class=prop>parseColor</span>(picker.<span class=prop>color</span>, <span class=par>"hsl"</span>); <span class=comment>// return "hsl(120, 100, 125)"</span>
36 | 							</code></pre> </td> </tr> </tbody> <tbody> <tr> <td rowspan=2>palette</td> <td class=explanation>Get or set the current palette </td> <td class=explanation>Array</td> <td class=explanation>Array of colors</td> </tr> <tr> <td colspan=3 class=explanation> <pre class=eg title=e.g.><code><span class=comment>// set</span>
37 | picker.<span class=prop>palette</span> = ['red', '#00ff00', 'rgb(0, 0, 255)']; <span class=comment>// array of color</span>
38 | <code><span class=comment>// get</span>
39 | picker.<span class=prop>palette</span>; <span class=comment>// return ["#ff0000","#00ff00","#0000ff"]</span></code></code></pre> </td> </tr> </tbody> <thead> <tr> <th colspan=2>Function</th> <th colspan=2>Parameters</th> </tr> </thead> <tbody> <tr> <td rowspan=3>on</td> <td rowspan=2 class=explanation>Attach an event to the controller.</td> <td class=explanation>eventName</td> <td rowspan=2 class=explanation>See <a href=#events>events</a> for detail</td> </tr> <tr> <td class=explanation>callback</td> </tr> <tr> <td colspan=3 class=explanation> <pre class=eg title=e.g.><code>picker.<span class=prop>on</span>("<span class=par>change</span>", (<span class=par>picker</span>, <span class=par>color</span>) => { });</code></pre> </td> </tr> </tbody> <tbody> <tr> <td rowspan=2>off</td> <td class=explanation>Detach an event from the controller.</td> <td class=explanation>eventName</td> <td class=explanation>See <a href=#events>events</a> for detail</td> </tr> <tr> <td colspan=3 class=explanation> <pre class=eg title=e.g.><code>picker.<span class=prop>off</span>("<span class=par>change</span>");</code></pre> </td> </tr> </tbody> <tbody> <tr> <td rowspan=2>show</td> <td class=explanation>Show the picker.</td> </tr> <tr> <td colspan=3 class=explanation> <pre class=eg title=e.g.><code>picker.<span class=prop>show</span>();</code></pre> </td> </tr> </tbody> <tbody> <tr> <td rowspan=2>hide</td> <td class=explanation>Hide the picker.</td> </tr> <tr> <td colspan=3 class=explanation> <pre class=eg title=e.g.><code>picker.<span class=prop>hide</span>();</code></pre> </td> </tr> </tbody> <tbody> <tr> <td rowspan=2>toggle</td> <td class=explanation>Show or hide the picker.</td> </tr> <tr> <td colspan=3 class=explanation> <pre class=eg title=e.g.><code>picker.<span class=prop>toggle</span>();</code></pre> </td> </tr> </tbody> <tbody> <tr> <td rowspan=3>setColor</td> <td rowspan=2 class=explanation>Set current color</td> <td class=explanation>color</td> <td class=explanation>Same of 'color' property</td> </tr> <tr> <td class=explanation>silent</td> <td class=explanation>If true the change event will not be triggered</td> </tr> <tr> <td colspan=3 class=explanation> <pre class=eg title=e.g.><code>picker.<span class=prop>setColor</span>("<span class=par>red</span>", <span class=par>true</span>); <span class=comment>// change event not triggered</span></code>
40 | <code>picker.<span class=prop>setColor</span>("<span class=par>red</span>", <span class=par>false</span>); <span class=comment>// change event triggered</span></code>
41 | <code>picker.<span class=prop>setColor</span>("<span class=par>red</span>"); <span class=comment>// change event triggered</span></code></pre> </td> </tr> </tbody> </table> </section> <section class=mark> <a name=api_options></a> <code>options</code> <p></p> <table class="detail hover-on-row"> <thead> <tr> <th>Property</th> <th></th> <th>Type</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>attachTo</td> <td class=explanation>Where to attach the picker top element, can be HTMLElement, jQuery object or css selector</td> <td class=explanation>String|Object</td> <td class=explanation>body</td> </tr> <tr> <td>showHSL</td> <td class=explanation>If falsy hide the HSL inputs</td> <td class=explanation>Boolean</td> <td class=explanation>true</td> </tr> <tr> <td>showRGB</td> <td class=explanation>If falsy hide the RGB inputs</td> <td class=explanation>Boolean</td> <td class=explanation>true</td> </tr> <tr> <td>showHEX</td> <td class=explanation>If falsy hide the RGB HEX inputs</td> <td class=explanation>Boolean</td> <td class=explanation>true</td> </tr> <tr> <td>showAlpha</td> <td class=explanation>If truly show control to change opacity</td> <td class=explanation>Boolean</td> <td class=explanation>false</td> </tr> <tr> <td>color</td> <td class=explanation>Initial color</td> <td class=explanation>Boolean</td> <td class=explanation>#ff0000</td> </tr> <tr> <td>palette</td> <td class=explanation>Array of predefined colors. <br>Each element can be color name, rgb array, hex rgb, rgb(), rgba(), hsl(), hsla()</td> <td class=explanation>Array</td> <td class=explanation>null</td> </tr> <tr> <td>paletteEditable</td> <td class=explanation>If truly make the palette editable</td> <td class=explanation>Boolean</td> <td class=explanation>false</td> </tr> <tr> <td>useAlphaInPalette</td> <td class=explanation>If truly enable alpha channel in palette colors,<br>if 'auto' depends on the value of 'showAlpha'</td> <td class=explanation>String|Boolean</td> <td class=explanation>auto</td> </tr> <tr> <td>hueBarSize</td> <td class=explanation>Size of hue bar in pixel (width, height)</td> <td class=explanation>Array</td> <td class=explanation>[150,11]</td> </tr> <tr> <td>slBarSize</td> <td class=explanation>Size of saturation/luminance canvas in pixel (width, height)</td> <td class=explanation>Array</td> <td class=explanation>[232,150]</td> </tr> </tbody> </table> </section> </section> </div> </div> <footer> by <a href=https://github.com/narsenico title="narsenico github repositories">narsenico</a> </footer> <script async src=https://static.codepen.io/assets/embed/ei.js></script> <script type="text/javascript" src="docs.js"></script></body> </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "a-color-picker",
 3 |   "version": "1.2.2",
 4 |   "description": "a color pikcer for web app",
 5 |   "main": "./dist/acolorpicker.js",
 6 |   "types": "./dist/acolorpicker.d.ts",
 7 |   "scripts": {
 8 |     "build": "webpack --config webpack.prod.js",
 9 |     "build:dev": "webpack --display-used-exports --display-reasons --config webpack.dev.js",
10 |     "build:docs": "webpack --config webpack.docs.js",
11 |     "start:docs": "webpack-dev-server --open --open-page index.html --port 3000 --config webpack.docs.js",
12 |     "test": "webpack-dev-server --open --open-page test.html --port 3000 --config webpack.dev.js"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/narsenico/a-color-picker.git"
17 |   },
18 |   "keywords": [
19 |     "javascript",
20 |     "color",
21 |     "picker",
22 |     "color-picker"
23 |   ],
24 |   "author": "narsenico",
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/narsenico/a-color-picker/issues"
28 |   },
29 |   "homepage": "https://narsenico.github.io/a-color-picker/",
30 |   "devDependencies": {
31 |     "babel-core": "^6.26.3",
32 |     "babel-loader": "^7.1.5",
33 |     "babel-preset-env": "^1.7.0",
34 |     "clean-webpack-plugin": "^0.1.19",
35 |     "copy-webpack-plugin": "^4.6.0",
36 |     "css-loader": "^0.28.11",
37 |     "file-loader": "^1.1.11",
38 |     "html-loader": "^0.5.5",
39 |     "html-webpack-plugin": "^3.2.0",
40 |     "style-loader": "^0.21.0",
41 |     "svg-url-loader": "^2.3.2",
42 |     "text-loader": "0.0.1",
43 |     "to-string-loader": "^1.1.5",
44 |     "uglifyjs-webpack-plugin": "^1.3.0",
45 |     "url-loader": "^1.1.2",
46 |     "webpack": "^4.33.0",
47 |     "webpack-cli": "^3.3.3",
48 |     "webpack-dev-server": "^3.7.1",
49 |     "webpack-merge": "^4.2.1"
50 |   },
51 |   "dependencies": {
52 |     "is-plain-object": "^2.0.4"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/screenshots/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/narsenico/a-color-picker/76973d09b4a98f1bc21d38fb41260f5a20ec80c0/screenshots/favicon.png


--------------------------------------------------------------------------------
/screenshots/favicon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
 6 | <g>
 7 | 	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="100" y1="274.7212" x2="900" y2="274.7212">
 8 | 		<stop  offset="0" style="stop-color:#ED1C24"/>
 9 | 		<stop  offset="0.0028" style="stop-color:#EE2423"/>
10 | 		<stop  offset="0.0226" style="stop-color:#F25520"/>
11 | 		<stop  offset="0.0429" style="stop-color:#F67F1D"/>
12 | 		<stop  offset="0.0635" style="stop-color:#F9A11B"/>
13 | 		<stop  offset="0.0842" style="stop-color:#FCBC19"/>
14 | 		<stop  offset="0.1053" style="stop-color:#FECF18"/>
15 | 		<stop  offset="0.127" style="stop-color:#FFDA17"/>
16 | 		<stop  offset="0.15" style="stop-color:#FFDE17"/>
17 | 		<stop  offset="0.3" style="stop-color:#F26522"/>
18 | 		<stop  offset="0.47" style="stop-color:#00A14B"/>
19 | 		<stop  offset="0.64" style="stop-color:#00AEEF"/>
20 | 		<stop  offset="0.8012" style="stop-color:#2E3192"/>
21 | 		<stop  offset="1" style="stop-color:#EC008C"/>
22 | 	</linearGradient>
23 | 	<path fill="url(#SVGID_1_)" d="M900,449.444V215.606c0-63.849-51.756-115.608-115.604-115.608H215.61
24 | 		c-63.851,0-115.61,51.76-115.61,115.608v233.838H900z"/>
25 | 	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="100" y1="725.2764" x2="900" y2="725.2764">
26 | 		<stop  offset="0" style="stop-color:#A7A9AC"/>
27 | 		<stop  offset="0.0732" style="stop-color:#ADAFB2"/>
28 | 		<stop  offset="0.2797" style="stop-color:#B8BABC"/>
29 | 		<stop  offset="0.5" style="stop-color:#BCBEC0"/>
30 | 		<stop  offset="1" style="stop-color:#414042"/>
31 | 	</linearGradient>
32 | 	<path fill="url(#SVGID_2_)" d="M100,550.551v233.836c0,63.844,51.759,115.615,115.61,115.615h568.786
33 | 		C848.244,900.002,900,848.23,900,784.387V550.551H100z"/>
34 | 	<path fill="#FFFFFF" d="M756.787,499.999c0,141.822-114.969,256.779-256.781,256.779c-141.83,0-256.792-114.957-256.792-256.779
35 | 		c0-141.818,114.962-256.783,256.792-256.783C641.818,243.216,756.787,358.181,756.787,499.999z"/>
36 | 	<path fill="#38A9D6" d="M732.328,499.998c0,128.309-104.019,232.32-232.322,232.32c-128.318,0-232.33-104.012-232.33-232.32
37 | 		c0-128.31,104.012-232.324,232.33-232.324C628.31,267.674,732.328,371.688,732.328,499.998z"/>
38 | </g>
39 | </svg>
40 | 


--------------------------------------------------------------------------------
/screenshots/logotype.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/narsenico/a-color-picker/76973d09b4a98f1bc21d38fb41260f5a20ec80c0/screenshots/logotype.png


--------------------------------------------------------------------------------
/screenshots/logotype.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  5 | 	 width="665.662px" height="240px" viewBox="0 0 665.662 240" enable-background="new 0 0 665.662 240" xml:space="preserve">
  6 | <g>
  7 | 	<g>
  8 | 		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60" y1="86.2085" x2="180" y2="86.2085">
  9 | 			<stop  offset="0" style="stop-color:#ED1C24"/>
 10 | 			<stop  offset="0.0028" style="stop-color:#EE2423"/>
 11 | 			<stop  offset="0.0226" style="stop-color:#F25520"/>
 12 | 			<stop  offset="0.0429" style="stop-color:#F67F1D"/>
 13 | 			<stop  offset="0.0635" style="stop-color:#F9A11B"/>
 14 | 			<stop  offset="0.0842" style="stop-color:#FCBC19"/>
 15 | 			<stop  offset="0.1053" style="stop-color:#FECF18"/>
 16 | 			<stop  offset="0.127" style="stop-color:#FFDA17"/>
 17 | 			<stop  offset="0.15" style="stop-color:#FFDE17"/>
 18 | 			<stop  offset="0.3" style="stop-color:#F26522"/>
 19 | 			<stop  offset="0.47" style="stop-color:#00A14B"/>
 20 | 			<stop  offset="0.64" style="stop-color:#00AEEF"/>
 21 | 			<stop  offset="0.8012" style="stop-color:#2E3192"/>
 22 | 			<stop  offset="1" style="stop-color:#EC008C"/>
 23 | 		</linearGradient>
 24 | 		<path fill="url(#SVGID_1_)" d="M180,112.417V77.342C180,67.764,172.236,60,162.658,60H77.342C67.764,60,60,67.764,60,77.342
 25 | 			v35.075H180z"/>
 26 | 		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="60" y1="153.791" x2="180" y2="153.791">
 27 | 			<stop  offset="0" style="stop-color:#A7A9AC"/>
 28 | 			<stop  offset="0.0732" style="stop-color:#ADAFB2"/>
 29 | 			<stop  offset="0.2797" style="stop-color:#B8BABC"/>
 30 | 			<stop  offset="0.5" style="stop-color:#BCBEC0"/>
 31 | 			<stop  offset="1" style="stop-color:#414042"/>
 32 | 		</linearGradient>
 33 | 		<path fill="url(#SVGID_2_)" d="M60,127.582v35.076C60,172.234,67.764,180,77.342,180h85.316c9.578,0,17.342-7.766,17.342-17.342
 34 | 			v-35.076H60z"/>
 35 | 		<circle fill="#FFFFFF" cx="120" cy="120" r="38.518"/>
 36 | 		<circle fill="#38A9D6" cx="120" cy="120" r="34.849"/>
 37 | 	</g>
 38 | 	<g>
 39 | 		<g>
 40 | 			<path fill="#FC5D20" d="M239.232,107.878c3.344,3.346,5.018,7.382,5.018,12.106v14.271c0,0.795-0.281,1.463-0.848,2.007
 41 | 				c-0.564,0.564-1.232,0.847-2.006,0.847h-0.094c-0.775,0-1.443-0.282-2.008-0.847c-0.564-0.544-0.848-1.212-0.848-2.007v-1.443
 42 | 				c-3.24,2.865-7.016,4.297-11.322,4.297c-4.726,0-8.762-1.673-12.106-5.019c-3.346-3.345-5.019-7.381-5.019-12.106
 43 | 				c0-4.725,1.673-8.761,5.019-12.106c3.345-3.345,7.381-5.019,12.106-5.019S235.887,104.533,239.232,107.878z M219.096,111.986
 44 | 				c-2.195,2.217-3.293,4.883-3.293,7.998c0,3.137,1.098,5.813,3.293,8.029c2.217,2.195,4.893,3.293,8.029,3.293
 45 | 				s5.803-1.098,7.998-3.293c2.216-2.217,3.324-4.893,3.324-8.029c0-3.115-1.108-5.781-3.324-7.998
 46 | 				c-2.195-2.216-4.861-3.324-7.998-3.324S221.313,109.771,219.096,111.986z"/>
 47 | 			<path fill="#FC5D20" d="M267.521,113.586c0,0.795-0.281,1.464-0.846,2.008c-0.564,0.564-1.244,0.847-2.039,0.847h-12.828
 48 | 				c-0.795,0-1.463-0.282-2.008-0.847c-0.564-0.544-0.846-1.213-0.846-2.008v-0.063c0-0.795,0.281-1.475,0.846-2.039
 49 | 				c0.545-0.564,1.213-0.847,2.008-0.847h12.828c0.795,0,1.475,0.282,2.039,0.847s0.846,1.244,0.846,2.039V113.586z"/>
 50 | 			<path fill="#FC5D20" d="M293.586,103.675c1.338,0.419,2.008,1.328,2.008,2.729v0.156c0,0.962-0.387,1.725-1.16,2.289
 51 | 				c-0.795,0.586-1.652,0.732-2.572,0.439c-1.109-0.377-2.258-0.564-3.451-0.564c-3.135,0-5.813,1.109-8.029,3.324
 52 | 				c-2.195,2.217-3.293,4.894-3.293,8.029c0,3.116,1.098,5.782,3.293,7.998c2.217,2.217,4.895,3.324,8.029,3.324
 53 | 				c1.193,0,2.342-0.177,3.451-0.533c0.92-0.292,1.777-0.156,2.572,0.408c0.773,0.564,1.16,1.339,1.16,2.32
 54 | 				c0,1.381-0.67,2.291-2.008,2.729c-1.674,0.522-3.398,0.784-5.176,0.784c-4.725,0-8.76-1.673-12.105-5.019
 55 | 				c-3.346-3.345-5.02-7.381-5.02-12.106c0-4.725,1.674-8.761,5.02-12.106c3.346-3.345,7.381-5.019,12.105-5.019
 56 | 				C290.188,102.859,291.912,103.131,293.586,103.675z"/>
 57 | 			<path fill="#FC5D20" d="M317.109,102.859c4.725,0,8.762,1.674,12.107,5.019c3.344,3.346,5.018,7.382,5.018,12.106
 58 | 				c0,4.726-1.674,8.762-5.018,12.106c-3.346,3.346-7.383,5.019-12.107,5.019c-4.727,0-8.762-1.673-12.107-5.019
 59 | 				c-3.346-3.345-5.018-7.381-5.018-12.106c0-4.725,1.672-8.761,5.018-12.106C308.348,104.533,312.383,102.859,317.109,102.859z
 60 | 				 M317.109,108.725c-3.137,0-5.813,1.109-8.029,3.324c-2.195,2.217-3.293,4.894-3.293,8.029c0,3.116,1.098,5.782,3.293,7.998
 61 | 				c2.217,2.217,4.893,3.324,8.029,3.324s5.803-1.107,7.998-3.324c2.217-2.216,3.324-4.882,3.324-7.998
 62 | 				c0-3.136-1.107-5.813-3.324-8.029C322.912,109.834,320.246,108.725,317.109,108.725z"/>
 63 | 			<path fill="#FC5D20" d="M343.77,90c0.773,0,1.441,0.272,2.008,0.816c0.564,0.564,0.846,1.244,0.846,2.039v41.401
 64 | 				c0,0.795-0.281,1.463-0.846,2.007c-0.566,0.564-1.234,0.847-2.008,0.847h-0.094c-0.775,0-1.443-0.282-2.008-0.847
 65 | 				c-0.564-0.544-0.848-1.212-0.848-2.007V92.854c0-0.794,0.283-1.475,0.848-2.039C342.232,90.272,342.9,90,343.676,90H343.77z"/>
 66 | 			<path fill="#FC5D20" d="M370.334,102.859c4.727,0,8.762,1.674,12.107,5.019c3.346,3.346,5.02,7.382,5.02,12.106
 67 | 				c0,4.726-1.674,8.762-5.02,12.106c-3.346,3.346-7.381,5.019-12.107,5.019c-4.725,0-8.76-1.673-12.105-5.019
 68 | 				c-3.346-3.345-5.018-7.381-5.018-12.106c0-4.725,1.672-8.761,5.018-12.106C361.574,104.533,365.609,102.859,370.334,102.859z
 69 | 				 M370.334,108.725c-3.135,0-5.813,1.109-8.027,3.324c-2.197,2.217-3.295,4.894-3.295,8.029c0,3.116,1.098,5.782,3.295,7.998
 70 | 				c2.215,2.217,4.893,3.324,8.027,3.324c3.137,0,5.803-1.107,8-3.324c2.215-2.216,3.324-4.882,3.324-7.998
 71 | 				c0-3.136-1.109-5.813-3.324-8.029C376.137,109.834,373.471,108.725,370.334,108.725z"/>
 72 | 			<path fill="#FC5D20" d="M407.471,102.859c0.795,0,1.473,0.282,2.039,0.848c0.543,0.563,0.814,1.244,0.814,2.038v0.063
 73 | 				c0,0.795-0.271,1.464-0.814,2.007c-0.566,0.564-1.244,0.848-2.039,0.848h-1.787c-1.967,0-3.639,0.689-5.02,2.07
 74 | 				c-1.359,1.379-2.049,3.053-2.07,5.018v18.506c0,0.795-0.281,1.463-0.846,2.007c-0.564,0.564-1.234,0.847-2.008,0.847h-0.094
 75 | 				c-0.775,0-1.443-0.282-2.008-0.847c-0.564-0.544-0.848-1.212-0.848-2.007V115.75c0.043-3.575,1.297-6.617,3.766-9.127
 76 | 				c2.508-2.51,5.551-3.764,9.127-3.764H407.471z"/>
 77 | 			<path fill="#FC5D20" d="M430.773,113.586c0,0.795-0.281,1.464-0.846,2.008c-0.564,0.564-1.244,0.847-2.039,0.847h-12.828
 78 | 				c-0.795,0-1.465-0.282-2.008-0.847c-0.564-0.544-0.846-1.213-0.846-2.008v-0.063c0-0.795,0.281-1.475,0.846-2.039
 79 | 				c0.543-0.564,1.213-0.847,2.008-0.847h12.828c0.795,0,1.475,0.282,2.039,0.847s0.846,1.244,0.846,2.039V113.586z"/>
 80 | 			<path fill="#FC5D20" d="M438.334,150c-0.775,0-1.443-0.282-2.008-0.847s-0.848-1.233-0.848-2.007v-27.225
 81 | 				c0.021-4.726,1.705-8.751,5.051-12.075c3.324-3.325,7.35-4.987,12.074-4.987c4.727,0,8.762,1.674,12.107,5.019
 82 | 				c3.346,3.346,5.018,7.382,5.018,12.106c0,4.726-1.672,8.762-5.018,12.106c-3.346,3.346-7.381,5.019-12.107,5.019
 83 | 				c-4.328,0-8.102-1.432-11.322-4.297v14.334c0,0.773-0.283,1.442-0.848,2.007c-0.563,0.564-1.232,0.847-2.006,0.847H438.334z
 84 | 				 M460.602,127.92c2.217-2.217,3.324-4.883,3.324-7.998c0-3.137-1.107-5.813-3.324-8.029c-2.195-2.195-4.861-3.293-7.998-3.293
 85 | 				s-5.813,1.098-8.029,3.293c-2.195,2.217-3.293,4.893-3.293,8.029c0,3.115,1.098,5.781,3.293,7.998
 86 | 				c2.217,2.217,4.893,3.324,8.029,3.324S458.406,130.137,460.602,127.92z"/>
 87 | 			<path fill="#FC5D20" d="M479.139,96.9c-0.963,0-1.777-0.334-2.447-1.004c-0.67-0.669-1.004-1.484-1.004-2.446
 88 | 				c0-0.941,0.334-1.746,1.004-2.415c0.67-0.669,1.484-1.004,2.447-1.004c0.939,0,1.744,0.335,2.414,1.004
 89 | 				c0.689,0.669,1.035,1.474,1.035,2.415c0,0.962-0.346,1.777-1.035,2.446C480.883,96.566,480.078,96.9,479.139,96.9z
 90 | 				 M479.17,102.859c0.793,0,1.463,0.282,2.006,0.848c0.564,0.563,0.848,1.244,0.848,2.038v28.511c0,0.795-0.283,1.463-0.848,2.007
 91 | 				c-0.543,0.564-1.213,0.847-2.006,0.847h-0.063c-0.795,0-1.475-0.282-2.039-0.847c-0.564-0.544-0.848-1.212-0.848-2.007v-28.511
 92 | 				c0-0.794,0.283-1.475,0.848-2.038c0.564-0.565,1.244-0.848,2.039-0.848H479.17z"/>
 93 | 			<path fill="#FC5D20" d="M510.848,103.675c1.338,0.419,2.008,1.328,2.008,2.729v0.156c0,0.962-0.389,1.725-1.16,2.289
 94 | 				c-0.795,0.586-1.652,0.732-2.572,0.439c-1.109-0.377-2.26-0.564-3.451-0.564c-3.137,0-5.813,1.109-8.029,3.324
 95 | 				c-2.195,2.217-3.293,4.894-3.293,8.029c0,3.116,1.098,5.782,3.293,7.998c2.217,2.217,4.893,3.324,8.029,3.324
 96 | 				c1.191,0,2.342-0.177,3.451-0.533c0.92-0.292,1.777-0.156,2.572,0.408c0.771,0.564,1.16,1.339,1.16,2.32
 97 | 				c0,1.381-0.67,2.291-2.008,2.729c-1.672,0.522-3.398,0.784-5.176,0.784c-4.725,0-8.762-1.673-12.105-5.019
 98 | 				c-3.346-3.345-5.02-7.381-5.02-12.106c0-4.725,1.674-8.761,5.02-12.106c3.344-3.345,7.381-5.019,12.105-5.019
 99 | 				C507.449,102.859,509.176,103.131,510.848,103.675z"/>
100 | 			<path fill="#FC5D20" d="M521.135,90c0.773,0,1.443,0.272,2.008,0.816c0.564,0.564,0.846,1.244,0.846,2.039v22.677h2.133
101 | 				c2.906,0,5.447-0.973,7.623-2.918c2.131-1.944,3.344-4.338,3.637-7.182c0.084-0.732,0.398-1.338,0.941-1.819
102 | 				c0.543-0.502,1.182-0.753,1.914-0.753h0.094c0.836,0,1.537,0.313,2.102,0.941c0.564,0.627,0.805,1.369,0.721,2.227
103 | 				c-0.48,4.977-2.74,8.971-6.775,11.98c2.51,1.527,4.496,3.566,5.961,6.117c1.525,2.635,2.289,5.479,2.289,8.531v1.6
104 | 				c0,0.795-0.281,1.463-0.848,2.007c-0.564,0.564-1.232,0.847-2.008,0.847h-0.094c-0.773,0-1.441-0.282-2.006-0.847
105 | 				c-0.564-0.544-0.848-1.212-0.848-2.007v-1.6c-0.021-3.116-1.129-5.771-3.324-7.967c-2.217-2.195-4.883-3.293-7.998-3.293h-3.514
106 | 				v12.859c0,0.795-0.281,1.463-0.846,2.007c-0.564,0.564-1.234,0.847-2.008,0.847h-0.094c-0.773,0-1.443-0.282-2.008-0.847
107 | 				c-0.564-0.544-0.848-1.212-0.848-2.007V92.854c0-0.794,0.283-1.475,0.848-2.039c0.564-0.544,1.234-0.816,2.008-0.816H521.135z"/>
108 | 			<path fill="#FC5D20" d="M581.699,112.865c0.336,0.711,0.367,1.441,0.096,2.195c-0.273,0.732-0.775,1.266-1.506,1.6
109 | 				c-2.928,1.316-6.775,3.053-11.543,5.206c-5.918,2.677-9.754,4.412-11.51,5.206c2.258,2.886,5.227,4.328,8.908,4.328
110 | 				c2.445,0,4.66-0.721,6.648-2.164c1.924-1.4,3.271-3.219,4.045-5.457c0.461-1.296,1.381-1.944,2.762-1.944
111 | 				c0.982,0,1.766,0.407,2.352,1.224c0.564,0.795,0.678,1.662,0.346,2.603c-1.172,3.388-3.221,6.127-6.148,8.218
112 | 				c-2.99,2.154-6.324,3.23-10.004,3.23c-4.727,0-8.762-1.673-12.107-5.019c-3.346-3.345-5.02-7.381-5.02-12.106
113 | 				c0-4.725,1.674-8.761,5.02-12.106c3.346-3.345,7.381-5.019,12.107-5.019c3.406,0,6.521,0.931,9.346,2.791
114 | 				C578.27,107.47,580.342,109.875,581.699,112.865z M566.145,108.725c-3.139,0-5.814,1.109-8.031,3.324
115 | 				c-2.195,2.217-3.293,4.894-3.293,8.029c0,0.564,0.041,1.119,0.125,1.662l19.855-8.97
116 | 				C572.541,110.073,569.656,108.725,566.145,108.725z"/>
117 | 			<path fill="#FC5D20" d="M602.809,102.859c0.793,0,1.475,0.282,2.037,0.848c0.545,0.563,0.816,1.244,0.816,2.038v0.063
118 | 				c0,0.795-0.271,1.464-0.816,2.007c-0.563,0.564-1.244,0.848-2.037,0.848h-1.787c-1.967,0-3.639,0.689-5.02,2.07
119 | 				c-1.359,1.379-2.049,3.053-2.07,5.018v18.506c0,0.795-0.281,1.463-0.846,2.007c-0.566,0.564-1.234,0.847-2.008,0.847h-0.094
120 | 				c-0.773,0-1.443-0.282-2.008-0.847c-0.564-0.544-0.848-1.212-0.848-2.007V115.75c0.043-3.575,1.297-6.617,3.764-9.127
121 | 				c2.51-2.51,5.553-3.764,9.129-3.764H602.809z"/>
122 | 		</g>
123 | 	</g>
124 | </g>
125 | </svg>
126 | 


--------------------------------------------------------------------------------
/screenshots/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/narsenico/a-color-picker/76973d09b4a98f1bc21d38fb41260f5a20ec80c0/screenshots/screenshot.png


--------------------------------------------------------------------------------
/screenshots/screenshot_all.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/narsenico/a-color-picker/76973d09b4a98f1bc21d38fb41260f5a20ec80c0/screenshots/screenshot_all.png


--------------------------------------------------------------------------------
/screenshots/screenshot_alpha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/narsenico/a-color-picker/76973d09b4a98f1bc21d38fb41260f5a20ec80c0/screenshots/screenshot_alpha.png


--------------------------------------------------------------------------------
/screenshots/screenshot_palette.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/narsenico/a-color-picker/76973d09b4a98f1bc21d38fb41260f5a20ec80c0/screenshots/screenshot_palette.png


--------------------------------------------------------------------------------
/screenshots/screenshot_palette_editable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/narsenico/a-color-picker/76973d09b4a98f1bc21d38fb41260f5a20ec80c0/screenshots/screenshot_palette_editable.png


--------------------------------------------------------------------------------
/src/acolorpicker.css:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * a-color-picker
  3 |  * https://github.com/narsenico/a-color-picker
  4 |  *
  5 |  * Copyright (c) 2017-2018, Gianfranco Caldi.
  6 |  * Released under the MIT License.
  7 |  */
  8 | 
  9 | .a-color-picker {
 10 |     background-color: #FFFFFF;
 11 |     padding: 0px;
 12 |     box-sizing: border-box;
 13 |     display: inline-flex;
 14 |     flex-direction: column;
 15 |     user-select: none;
 16 |     width: 232px;
 17 |     font: 400 10px Helvetica,Arial,sans-serif;
 18 |     border-radius: 3px;
 19 |     box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.05), 0px 2px 4px rgba(0,0,0,0.25);
 20 | }
 21 | 
 22 | .a-color-picker input {
 23 |     box-sizing: border-box;
 24 | }
 25 | 
 26 | .a-color-picker-row {
 27 |     padding: 15px;
 28 |     box-sizing: border-box;
 29 |     display: flex;
 30 |     flex-direction: row;
 31 |     align-items: center;
 32 |     justify-content: space-between;
 33 |     user-select: none;
 34 | }
 35 | 
 36 | .a-color-picker-row-top {
 37 |     padding: 0;
 38 | }
 39 | 
 40 | .a-color-picker-row:not(:first-child) {
 41 |     border-top: solid 1px #F5F5F5;
 42 | }
 43 | 
 44 | .a-color-picker-column {
 45 |     display: flex;
 46 |     flex-direction: column;
 47 | }
 48 | 
 49 | .a-color-picker-cell {
 50 |     flex: 1 1 auto;
 51 |     margin-bottom: 4px;
 52 | }
 53 | 
 54 | .a-color-picker-cell:last-child {
 55 |     margin-bottom: 0;
 56 | }
 57 | 
 58 | .a-color-picker-stack {
 59 |     position: relative;
 60 | }
 61 | 
 62 | .a-color-picker-dot {
 63 |     position: absolute;
 64 |     width: 14px;
 65 |     height: 14px;
 66 |     top: 0px;
 67 |     left: 0px;
 68 |     background: #ffffff;
 69 |     pointer-events: none;
 70 |     border-radius: 50px;
 71 |     z-index: 1000;
 72 |     box-shadow: 0px 1px 2px rgba(0,0,0,0.75);
 73 | }
 74 | 
 75 | .a-color-picker-a, .a-color-picker-h, .a-color-picker-sl {
 76 |     cursor: cell;
 77 | }
 78 | 
 79 | .a-color-picker-h+.a-color-picker-dot,
 80 | .a-color-picker-a+.a-color-picker-dot {
 81 |     top: -2px;
 82 | }
 83 | 
 84 | .a-color-picker-h,
 85 | .a-color-picker-a {
 86 |     border-radius: 2px;
 87 | }
 88 | 
 89 | .a-color-picker-preview {
 90 |     box-sizing: border-box;
 91 |     width: 30px;
 92 |     height: 30px;
 93 |     user-select: none;
 94 |     border-radius: 15px;
 95 | }
 96 | 
 97 | .a-color-picker-circle {
 98 |     border-radius: 50px;
 99 |     border: solid 1px #eee;
100 | }
101 | 
102 | .a-color-picker-hsl,
103 | .a-color-picker-rgb,
104 | .a-color-picker-single-input {
105 |     justify-content: space-evenly;
106 | }
107 | 
108 | .a-color-picker-hsl>label,
109 | .a-color-picker-rgb>label,
110 | .a-color-picker-single-input>label {
111 |     padding: 0 8px;
112 |     flex: 0 0 auto;
113 |     color: #969696;
114 | }
115 | 
116 | .a-color-picker-hsl>input,
117 | .a-color-picker-rgb>input,
118 | .a-color-picker-single-input>input {
119 |     text-align: center;
120 |     padding: 2px 0px;
121 |     width: 0;
122 |     flex: 1 1 auto;
123 |     border: 1px solid #e0e0e0;
124 |     line-height: 20px;
125 | }
126 | 
127 | .a-color-picker-hsl>input::-webkit-inner-spin-button,
128 | .a-color-picker-rgb>input::-webkit-inner-spin-button,
129 | .a-color-picker-single-input>input::-webkit-inner-spin-button,
130 | .a-color-picker-hsl>input::-webkit-inner-spin-button,
131 | .a-color-picker-rgb>input::-webkit-inner-spin-button,
132 | .a-color-picker-single-input>input::-webkit-inner-spin-button {
133 |     -webkit-appearance: none;
134 |     margin: 0;
135 | }
136 | 
137 | .a-color-picker-hsl>input:focus,
138 | .a-color-picker-rgb>input:focus,
139 | .a-color-picker-single-input>input:focus {
140 |     border-color: #04a9f4;
141 |     outline: none;
142 | }
143 | 
144 | .a-color-picker-transparent {
145 |     background-image: linear-gradient(-45deg, #cdcdcd 25%, transparent 25%), linear-gradient(45deg, #cdcdcd 25%, transparent 25%), linear-gradient(-45deg, transparent 75%, #cdcdcd 75%), linear-gradient(45deg, transparent 75%, #cdcdcd 75%);
146 |     background-size: 11px 11px;
147 |     background-position: 0 0, 0 -5.5px, -5.5px 5.5px, 5.5px 0px;
148 | 
149 | }
150 | 
151 | .a-color-picker-sl {
152 |     border-radius: 3px 3px 0px 0px;
153 | }
154 | 
155 | .a-color-picker.hide-hsl [show-on-hsl],
156 | .a-color-picker.hide-rgb [show-on-rgb],
157 | .a-color-picker.hide-single-input [show-on-single-input],
158 | .a-color-picker.hide-alpha [show-on-alpha] {
159 |     display: none;
160 | }
161 | 
162 | .a-color-picker-clipbaord {
163 |     width: 100%;
164 |     height: 100%;
165 |     opacity: 0;
166 |     cursor: pointer;
167 | }
168 | 
169 | .a-color-picker-palette {
170 |     flex-flow: wrap;
171 |     flex-direction: row;
172 |     justify-content: flex-start;
173 |     padding: 10px;
174 | }
175 | 
176 | .a-color-picker-palette-color {
177 |     width: 15px;
178 |     height: 15px;
179 |     flex: 0 1 15px;
180 |     margin: 3px;
181 |     box-sizing: border-box;
182 |     cursor: pointer;
183 |     border-radius: 3px;
184 |     box-shadow: 0px 0px 0px 1px inset rgba(0,0,0,0.10);
185 | }
186 | 
187 | .a-color-picker-palette-add {
188 |     text-align: center;
189 |     line-height: 13px;
190 |     color: #607D8B;
191 | }
192 | 
193 | .a-color-picker.hidden {
194 |     display: none;
195 | }


--------------------------------------------------------------------------------
/src/acolorpicker.d.ts:
--------------------------------------------------------------------------------
 1 | declare module 'a-color-picker';
 2 | 
 3 | declare namespace AColorPicker {
 4 | 
 5 |     type OutFormat = (
 6 |         'rgb' | 'rgbcss' | 'rgbcss4' | 'rgba' | 'rgbacss' |
 7 |         'hsl' | 'hslcss' | 'hslcss4' | 'hsla' | 'hslacss' |
 8 |         'hex' | 'hexcss4' | 'int'
 9 |     );
10 | 
11 |     type EventName = ('change' | 'coloradd' | 'colorremove');
12 | 
13 |     type ACPCallback = (controller: ACPController, color?: string) => void;
14 | 
15 |     interface ACPHTMLElement extends HTMLElement {
16 |         readonly ctrl: ACPController;
17 |     }
18 | 
19 |     interface ACPColor extends Object {
20 |         rgb: Array<number>;
21 |         rgbcss: string;
22 |         rgbcss4: string;
23 |         rgba: Array<number>;
24 |         rgbacss: string;
25 |         hsl: Array<number>;
26 |         hslcss: string;
27 |         hslcss4: string;
28 |         hsla: Array<number>;
29 |         hslacss: string;
30 |         hex: string;
31 |         hexcss4: string;
32 |         int: number;
33 |         toString(): string;
34 |     }
35 | 
36 |     interface ACPController extends Object {
37 |         readonly element: ACPHTMLElement;
38 |         readonly rgbhex: string;
39 |         readonly all: ACPColor;
40 |         readonly palette: Array<string>;
41 |         rgb: Array<number>;
42 |         rgba: Array<number>;
43 |         hsl: Array<number>;
44 |         hsla: Array<number>;
45 |         color: string | Array<number>;
46 |         /**
47 |          * @deprecated  use on('change', cb) instead
48 |          */
49 |         onchange: ACPCallback;
50 |         /**
51 |          * @deprecated  use on('coloradd', cb) instead
52 |          */
53 |         oncoloradd: ACPCallback;
54 |         /**
55 |          * @deprecated  use on('colorremove', cb) instead
56 |          */
57 |         oncolorremove: ACPCallback;
58 |         on(eventName: EventName, cb: ACPCallback): ACPController;
59 |         off(eventName: EventName, cb?: ACPCallback): ACPController;
60 |     }
61 | 
62 |     /**
63 |      * @param   color   {string | Array<number>}   color to be parsed
64 |      * @param   outFormat   {string}    format
65 |      * @returns {string}    color formattted    
66 |      */
67 |     export function parseColor(color: string | Array<number>, outFormat?: OutFormat): string;
68 |     /**
69 |      * @param   color   {string | Array<number>}   color to be parsed
70 |      * @param   objToFill   {Object}    plain object
71 |      * @returns {Object}    objToFill object filled with properties
72 |      */
73 |     export function parseColor(color: string | Array<number>, objToFill: Object): Object & ACPColor;
74 |     export function createPicker(options?: Object): ACPController;
75 |     export function createPicker(element: any, options?: Object): ACPController;
76 |     export function from(selector: any, options?: Object): Array<ACPController>;
77 | }
78 | 
79 | export = AColorPicker;


--------------------------------------------------------------------------------
/src/acolorpicker.html:
--------------------------------------------------------------------------------
 1 | <div class="a-color-picker-row a-color-picker-stack a-color-picker-row-top">
 2 |     <canvas class="a-color-picker-sl a-color-picker-transparent"></canvas>
 3 |     <div class="a-color-picker-dot"></div>
 4 | </div>
 5 | <div class="a-color-picker-row">
 6 |     <div class="a-color-picker-stack a-color-picker-transparent a-color-picker-circle">
 7 |         <div class="a-color-picker-preview">
 8 |             <input class="a-color-picker-clipbaord" type="text">
 9 |         </div>
10 |     </div>
11 |     <div class="a-color-picker-column">
12 |         <div class="a-color-picker-cell a-color-picker-stack">
13 |             <canvas class="a-color-picker-h"></canvas>
14 |             <div class="a-color-picker-dot"></div>
15 |         </div>
16 |         <div class="a-color-picker-cell a-color-picker-alpha a-color-picker-stack" show-on-alpha>
17 |             <canvas class="a-color-picker-a a-color-picker-transparent"></canvas>
18 |             <div class="a-color-picker-dot"></div>
19 |         </div>
20 |     </div>
21 | </div>
22 | <div class="a-color-picker-row a-color-picker-hsl" show-on-hsl>
23 |     <label>H</label>
24 |     <input nameref="H" type="number" maxlength="3" min="0" max="360" value="0">
25 |     <label>S</label>
26 |     <input nameref="S" type="number" maxlength="3" min="0" max="100" value="0">
27 |     <label>L</label>
28 |     <input nameref="L" type="number" maxlength="3" min="0" max="100" value="0">
29 | </div>
30 | <div class="a-color-picker-row a-color-picker-rgb" show-on-rgb>
31 |     <label>R</label>
32 |     <input nameref="R" type="number" maxlength="3" min="0" max="255" value="0">
33 |     <label>G</label>
34 |     <input nameref="G" type="number" maxlength="3" min="0" max="255" value="0">
35 |     <label>B</label>
36 |     <input nameref="B" type="number" maxlength="3" min="0" max="255" value="0">
37 | </div>
38 | <div class="a-color-picker-row a-color-picker-rgbhex a-color-picker-single-input" show-on-single-input>
39 |     <label>HEX</label>
40 |     <input nameref="RGBHEX" type="text" select-on-focus>
41 | </div>
42 | <div class="a-color-picker-row a-color-picker-palette"></div>


--------------------------------------------------------------------------------
/src/docs/docs.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Roboto');
  2 | 
  3 | * {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | html {
  8 | 	font-family: 'Roboto', sans-serif;
  9 | 	font-size: 14px;
 10 | 	font-display: fallback;
 11 | 	line-height: 1.7;
 12 | 	--color-light: #f2eeee;
 13 | }
 14 | 
 15 | body {
 16 | 	margin: 0;
 17 | 	background-color: #697b82;
 18 | }
 19 | 
 20 | footer {
 21 | 	font-size: .8em;
 22 | 	text-align: center;
 23 | 	padding: 8px;
 24 | }
 25 | 
 26 | .logo {
 27 | 	background-image: url('../../screenshots/favicon.svg');
 28 | 	background-size: contain;
 29 |     background-repeat: no-repeat;
 30 | }
 31 | 
 32 | .logo.upper-right {
 33 | 	position: fixed;
 34 | 	top: 16px;
 35 | 	right: 8px;
 36 | 	width: 50px;
 37 | 	height: 50px;
 38 | 	opacity: .5;
 39 | 	pointer-events: none;
 40 | 	z-index: 3;
 41 | }
 42 | 
 43 | code {
 44 | 	color: #bc8f49;
 45 | }
 46 | 
 47 | code .par {
 48 | 	color: #5b995b;
 49 | }
 50 | 
 51 | code .prop {
 52 | 	color: #9a8297;
 53 | }
 54 | 
 55 | code .comment {
 56 |     color: #795548;
 57 |     font-style: italic;
 58 | }
 59 | 
 60 | .flexrow {
 61 | 	display: flex;
 62 | 	flex-direction: row;
 63 | 	flex-wrap: wrap;
 64 | }
 65 | 
 66 | .flexcol-1 {
 67 | 	flex-grow: 1;
 68 | 	flex-basis: 9em;
 69 |     margin: 16px 8px;
 70 |     max-width: 1024px;	
 71 | }
 72 | 
 73 | .flexcol-2 {
 74 | 	flex-grow: 9999;
 75 | 	flex-basis: 20em;
 76 | }
 77 | 
 78 | .flexcol-3 {
 79 | 	flex-grow: 1;
 80 | 	flex-basis: 9em;
 81 |     margin: 16px 8px;
 82 |     max-width: 1024px;	
 83 | }
 84 | 
 85 | .shadow {
 86 | 	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(3, 1, 1, 0.08);
 87 | }
 88 | 
 89 | .darken {
 90 | 	background: #0000001f;
 91 | }
 92 | 
 93 | .explanation {
 94 |     color: #9E9E9E;
 95 | 	font-size: .85em;
 96 | }
 97 | 
 98 | .mark {
 99 | 	border-bottom: solid 2px #9a8297;
100 |     padding-bottom: .6em;
101 | 	margin-bottom: 1.6em;
102 | }
103 | 
104 | .eg {
105 | 	position: relative;
106 | 	border: solid 1px #e3ddd5;
107 |     padding: 4px;
108 |     border-radius: 2px;
109 |     background-color: #f7f1e9;
110 | }
111 | 
112 | .eg::before {
113 | 	content: attr(title);
114 |     position: absolute;
115 |     top: -1.6em;
116 |     font-size: .85em;
117 |     font-weight: normal;
118 |     color: #dedede;	
119 | }
120 | 
121 | .title {
122 | 	top: 0;
123 | 	padding: 0px 8px;
124 | }
125 | 
126 | .title>h1 {
127 | 	padding: 8px 4px;
128 | 	margin: 0;
129 | 	letter-spacing: .1em;
130 | 	font-size: 3em;
131 | 	color: var(--color-light);
132 | }
133 | 
134 | .title>h1.logo {
135 | 	padding: 4px 0 11px 38px;
136 | }
137 | 
138 | .avatar {
139 | 	border-radius: 4px;
140 | 	vertical-align: text-top;
141 | 	object-fit: cover;
142 |     width: 100%;
143 | 	max-height: 6.6em;
144 |     opacity: .3;
145 |     filter: grayscale(100%);
146 |     -webkit-filter: grayscale(100%);	
147 | }
148 | 
149 | .badges {
150 | 	padding: 4px;
151 | }
152 | 
153 | .badges a {
154 | 	text-decoration: none;
155 | }
156 | 
157 | .content>nav a {
158 |     color: var(--color-light);
159 | }
160 | 
161 | .content>nav>ul {
162 | 	position: sticky;
163 | 	position: -webkit-sticky;
164 | 	top: 0px;
165 | 	list-style: none;
166 | 	padding: 0;
167 | }
168 | 
169 | .content>nav>ul>li::before {
170 | 	content: '> ';
171 | 	color: #dedede;
172 | }
173 | 
174 | .content>nav>ul>li>ul {
175 | 	font-size: .8em;
176 | 	top: 0px;
177 | 	list-style: none;
178 | 	padding: 0 0 0 .8em;
179 | }
180 | 
181 | .content>.pens>section {
182 | 	background-color: #fafafa;
183 | 	margin: 16px 8px;
184 | 	padding: 8px 24px;
185 | 	border-radius: 2px;
186 | }
187 | 
188 | .content>.pens>section>h3::before {
189 | 	content: '> ';
190 | 	color: #dedede;
191 | }
192 | 
193 | table.detail {
194 | 	width: 100%;
195 | 	border-collapse: collapse;
196 | }
197 | 
198 | table.detail th {
199 | 	font-size: .85em;
200 | 	text-align: left;
201 | 	padding-top: 16px;
202 | }
203 | 
204 | table.detail td {
205 | 	vertical-align: top;
206 | 	border-bottom: solid 1px #ededed;
207 | 	max-width: 14em;
208 | 	padding: 4px 0px;
209 | }
210 | 
211 | table.detail tbody,
212 | table.detail tbody>tr {
213 | 	transition: background-color .4s ease;
214 | }
215 | 
216 | table.detail.hover-on-row tbody>tr:hover,
217 | table.detail.hover-on-body tbody:hover {
218 | 	background-color: #efefef;
219 | }
220 | 
221 | @media (min-width: 68em) {
222 | 	html {
223 | 		font-size: 18px;
224 | 	}
225 | }
226 | 
227 | @media (max-height: 400px) {
228 | 	.content>nav>ul {
229 | 		position: relative;
230 | 	}	
231 | }
232 | 
233 | .theme-gray {
234 | 	--color-light: #697b82;
235 | }
236 | 
237 | .theme-gray body {
238 | 	background-color: #f5f5f5;
239 | }
240 | 
241 | .theme-gray .avatar {
242 | 	opacity: .6;
243 | }


--------------------------------------------------------------------------------
/src/docs/docs.js:
--------------------------------------------------------------------------------
 1 | import './docs.css';
 2 | const AColorPicker = require('../acolorpicker.js');
 3 | const $title = document.querySelector('.title');
 4 | 
 5 | const pickers = AColorPicker.from('.picker')
 6 |     .on('change', (picker, color) => {
 7 |         console.log(color)
 8 |         $title.style.backgroundColor = color;
 9 |         if (AColorPicker.getLuminance(...picker.rgb) < .5) {
10 |             $title.style.color = '#fff';
11 |         } else {
12 |             $title.style.color = '#333';
13 |         }
14 |     })
15 |     .on('coloradd', (picker, color) => {
16 |         console.log(color)
17 |     })
18 |     .on('colorremove', (picker, color) => {
19 |         console.log(color)
20 |     });
21 | // console.log(pickers[0].color = '#fd0a');
22 | // console.log(pickers[0].color);
23 | // // console.log(pickers[0].getColor('hex'));
24 | // console.log(AColorPicker.parseColor(pickers[0].color, 'hex'));


--------------------------------------------------------------------------------
/src/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" class="theme-gray">
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8">
  6 | 	<meta name="viewport" content="width=device-width">
  7 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 | 	<title>a-color-picker</title>
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 10 | 	<meta name="author" content="narsenico">
 11 | 	<meta name="description" content="A color picker for web app">
 12 | </head>
 13 | 
 14 | <body>
 15 | 	<!-- <div class="picker" acp-show-alpha acp-palette="red|yellow" acp-palette-editable></div> -->
 16 | 	<div class="logo upper-right">&nbsp;</div>
 17 | 	<header class="shadow darken flexrow">
 18 | 		<div class="flexcol-1">
 19 | 			<a href="https://github.com/narsenico" title="narsenico github repositories">
 20 | 				<img alt="avatar" class="avatar" src="https://www.gravatar.com/avatar/5e6f1401ca340dee16dc70107619b400">
 21 | 			</a>
 22 | 		</div>
 23 | 		<div class="title flexcol-2">
 24 | 			<h1 class="">
 25 | 				a-color-picker | for web app
 26 | 			</h1>
 27 | 			<div class="badges">
 28 | 				<a href="https://badge.fury.io/js/a-color-picker">
 29 | 					<img src="https://badge.fury.io/js/a-color-picker.svg" alt="npm version" height="18">
 30 | 				</a>
 31 | 				<a href="https://codepen.io/collection/XprWjO/">
 32 | 					<img src="https://img.shields.io/badge/demo-codepen-0ebeff.svg" alt="codepen" height="18">
 33 | 				</a>
 34 | 				<iframe src="https://ghbtns.com/github-btn.html?user=narsenico&repo=a-color-picker&type=star&count=true" frameborder="0"
 35 | 				 scrolling="0" width="170px" height="20px"></iframe>
 36 | 			</div>
 37 | 		</div>
 38 | 	</header>
 39 | 	<div class="content flexrow">
 40 | 		<nav class="flexcol-1">
 41 | 			<ul>
 42 | 				<li>
 43 | 					<a href="#install">Install</a>
 44 | 				</li>
 45 | 				<li>
 46 | 					<a href="#create_a_picker">Create a picker</a>
 47 | 				</li>
 48 | 				<li>
 49 | 					<a href="#choose_which_controls_to_show">Choose which controls to show</a>
 50 | 				</li>
 51 | 				<li>
 52 | 					<a href="#palette">Palette</a>
 53 | 				</li>
 54 | 				<li>
 55 | 					<a href="#events">Events</a>
 56 | 				</li>
 57 | 				<li>
 58 | 					<a href="#tips">Tips</a>
 59 | 				</li>
 60 | 				<li>
 61 | 					<a href="#api">API</a>
 62 | 					<ul>
 63 | 						<li>
 64 | 							<a href="#api_acolorpicker_createpicker">.createPicker</a>
 65 | 						</li>
 66 | 						<li>
 67 | 							<a href="#api_acolorpicker_from">.from</a>
 68 | 						</li>
 69 | 						<li>
 70 | 							<a href="#api_acolorpicker_parsecolor">.parseColor</a>
 71 | 						</li>
 72 | 						<li>
 73 | 							<a href="#api_picker_controller">ACPController</a>
 74 | 						</li>
 75 | 						<li>
 76 | 							<a href="#api_options">options</a>
 77 | 						</li>
 78 | 					</ul>
 79 | 				</li>
 80 | 			</ul>
 81 | 		</nav>
 82 | 		<div class="pens flexcol-2">
 83 | 			<section class="shadow">
 84 | 				<a name="install"></a>
 85 | 				<h3>Install</h3>
 86 | 				<ul>
 87 | 					<li>
 88 | 						<code>npm install a-color-picker --save</code>
 89 | 					</li>
 90 | 					<li>
 91 | 						<code>bower install a-color-picker --save</code>
 92 | 					</li>
 93 | 					<li>a-color-picker is available on
 94 | 						<a href="https://www.jsdelivr.com/package/npm/a-color-picker">jsdelivr</a>
 95 | 					</li>
 96 | 				</ul>
 97 | 			</section>
 98 | 			<section class="shadow">
 99 | 				<a name="create_a_picker"></a>
100 | 				<h3>Create a picker</h3>
101 | 				<p>Define an HTML element to contain the picker and use
102 | 					<code>AColorPicker.<span class="prop">from</span>(<span class="par">selector</span>)</code> to create it.
103 | 					<br>The default picker is created with HSL, RGB and HEX controls.
104 | 					<br>The
105 | 					<code>acp-color</code> attribute is used to set the initial value.</p>
106 | 				<p data-height="355" data-theme-id="1" data-slug-hash="WJoQBm" data-default-tab="html,result" data-user="narsenico" data-embed-version="2"
107 | 				 data-pen-title="WJoQBm" class="codepen">See the Pen
108 | 					<a href="https://codepen.io/narsenico/pen/WJoQBm/">WJoQBm</a> by Caldi Gianfranco (
109 | 					<a href="https://codepen.io/narsenico">@narsenico</a>) on
110 | 					<a href="https://codepen.io">CodePen</a>.</p>
111 | 			</section>
112 | 			<section class="shadow">
113 | 				<a name="choose_which_controls_to_show"></a>
114 | 				<h3>Choose which controls to show</h3>
115 | 				<p>Show or hide controls through attributes.
116 | 					<br>
117 | 					<code>acp-show-*</code> attributes accepts
118 | 					<code>yes/no/true/false</code> values. Attributes without value are considered
119 | 					<code>true</code>.
120 | 				</p>
121 | 				<p data-height="326" data-theme-id="1" data-slug-hash="WJorZe" data-default-tab="html,result" data-user="narsenico" data-embed-version="2"
122 | 				 data-pen-title="a-color-picker demo attr" class="codepen">See the Pen
123 | 					<a href="https://codepen.io/narsenico/pen/WJorZe/">a-color-picker demo attr</a> by Caldi Gianfranco (
124 | 					<a href="https://codepen.io/narsenico">@narsenico</a>) on
125 | 					<a href="https://codepen.io">CodePen</a>.</p>
126 | 			</section>
127 | 			<section class="shadow">
128 | 				<a name="palette"></a>
129 | 				<h3>Palette</h3>
130 | 				<p>Show a palette of colors using the
131 | 					<code>acp-palette</code> attribute.
132 | 					<br> Set a list of colors - named color, hex rgb, rgb(), rgba(), hsl(), hsla() - pipe separated or a predefined palette (PALETTE_MATERIAL_500,
133 | 					PALETTE_MATERIAL_CHROME).
134 | 					<br> The
135 | 					<code>acp-palette-editable</code> attribute can be set to allow the user to change the palette.</p>
136 | 				<p data-height="434" data-theme-id="1" data-slug-hash="NMbxoq" data-default-tab="html,result" data-user="narsenico" data-embed-version="2"
137 | 				 data-pen-title="a-color-picker demo palette editable" class="codepen">See the Pen
138 | 					<a href="https://codepen.io/narsenico/pen/NMbxoq/">a-color-picker demo palette editable</a> by Narsenico (
139 | 					<a href="https://codepen.io/narsenico">@narsenico</a>) on
140 | 					<a href="https://codepen.io">CodePen</a>.</p>
141 | 			</section>
142 | 			<section class="shadow">
143 | 				<a name="events"></a>
144 | 				<h3>Events</h3>
145 | 				<p>
146 | 					To attach an event use
147 | 					<code>on</code> method and
148 | 					<code>off</code> to detach it.
149 | 					<pre class="eg"><code>AColorPicker.<span class="prop">from</span>(<span class="par">selector</span>)
150 |     .on(<span class="par">eventName</span>, <span class="par">callback</span>)
151 |     .off(<span class="par">eventName</span>, <span class="par">callback</span>)</code></pre>
152 | 					<table class="detail hover-on-body">
153 | 						<thead>
154 | 							<tr>
155 | 								<th>Event name</th>
156 | 								<th>Callback parameters</th>
157 | 								<th></th>
158 | 							</tr>
159 | 						</thead>
160 | 						<tbody>
161 | 							<tr>
162 | 								<td rowspan="2">change</td>
163 | 								<td>
164 | 									<code><span class="prop">picker</span></code>
165 | 								</td>
166 | 								<td class="explanation">target</td>
167 | 							</tr>
168 | 							<tr>
169 | 								<td>
170 | 									<code><span class="prop">color</span></code>
171 | 								</td>
172 | 								<td class="explanation">selected color</td>
173 | 							</tr>
174 | 						</tbody>
175 | 						<tbody>
176 | 							<tr>
177 | 								<td rowspan="2">coloradd</td>
178 | 								<td>
179 | 									<code><span class="prop">picker</span></code>
180 | 								</td>
181 | 								<td class="explanation">target</td>
182 | 							</tr>
183 | 							<tr>
184 | 								<td>
185 | 									<code><span class="prop">color</span></code>
186 | 								</td>
187 | 								<td class="explanation">color added</td>
188 | 							</tr>
189 | 						</tbody>
190 | 						<tbody>
191 | 							<tr>
192 | 								<td rowspan="2">colorremove</td>
193 | 								<td>
194 | 									<code><span class="prop">picker</span></code>
195 | 								</td>
196 | 								<td class="explanation">target</td>
197 | 							</tr>
198 | 							<tr>
199 | 								<td>
200 | 									<code><span class="prop">color</span></code>
201 | 								</td>
202 | 								<td class="explanation">color removed or null if all colors are removed</td>
203 | 							</tr>
204 | 						</tbody>
205 | 					</table>
206 | 				</p>
207 | 			</section>
208 | 			<section class="shadow">
209 | 				<a name="tips"></a>
210 | 				<h3>Tips</h3>
211 | 				<p>
212 | 					<ul>
213 | 						<li>Click on the preview circle to copy current color</li>
214 | 						<li>Shift-click on a palette color to remove it</li>
215 | 						<li>Shift-click the '+' button to remove all the palette colors</li>
216 | 					</ul>
217 | 				</p>
218 | 			</section>
219 | 			<section class="shadow">
220 | 				<a name="api"></a>
221 | 				<h3>API</h3>
222 | 				<section class="mark">
223 | 					<a name="api_acolorpicker_createpicker"></a>
224 | 					<code>AColorPicker.<span class="prop">createPicker</span>(<span class="par">element</span>, <span class="par">options</span>)</code>
225 | 					<br>
226 | 					<code>AColorPicker.<span class="prop">createPicker</span>(<span class="par">options</span>)</code>
227 | 					<p>Create a color picker.</p>
228 | 					<table class="detail hover-on-row">
229 | 						<thead>
230 | 							<tr>
231 | 								<th>Parameter</th>
232 | 								<th></th>
233 | 							</tr>
234 | 						</thead>
235 | 						<tbody>
236 | 							<tr>
237 | 								<td>element</td>
238 | 								<td class="explanation">HTMLElement, jQuery object or css selector string.
239 | 									<br> Optional: if not defined,
240 | 									<code>options.<span class="prop">attachTo</span></code> is used.</td>
241 | 							</tr>
242 | 							<tr>
243 | 								<td>options</td>
244 | 								<td class="explanation">See
245 | 									<a href="#api_options">options</a>
246 | 									<br> Optional only if element is defined.
247 | 								</td>
248 | 							</tr>
249 | 						</tbody>
250 | 						<thead>
251 | 							<tr>
252 | 								<th>Return</th>
253 | 								<th></th>
254 | 							</tr>
255 | 						</thead>
256 | 						<tbody>
257 | 							<tr>
258 | 								<td colspan="2" class="explanation">A
259 | 									<a href="#api_picker_controller">ACPController</a> instance
260 | 								</td>
261 | 							</tr>
262 | 						</tbody>
263 | 					</table>
264 | 				</section>
265 | 				<section class="mark">
266 | 					<a name="api_acolorpicker_from"></a>
267 | 					<code>AColorPicker.<span class="prop">from</span>(<span class="par">selector</span>, <span class="par">options</span>)</code>
268 | 					<p>Create one or more color pickers.</p>
269 | 					<table class="detail hover-on-row">
270 | 						<thead>
271 | 							<tr>
272 | 								<th>Parameter</th>
273 | 								<th></th>
274 | 							</tr>
275 | 						</thead>
276 | 						<tbody>
277 | 							<tr>
278 | 								<td>selector</td>
279 | 								<td class="explanation">HTMLElement, NodeList, jQuery object or css selector string.</td>
280 | 							</tr>
281 | 							<tr>
282 | 								<td>options</td>
283 | 								<td class="explanation">Optional, see
284 | 									<a href="#api_options">options</a>
285 | 								</td>
286 | 							</tr>
287 | 						</tbody>
288 | 						<thead>
289 | 							<tr>
290 | 								<th>Return</th>
291 | 								<th></th>
292 | 							</tr>
293 | 						</thead>
294 | 						<tbody>
295 | 							<tr>
296 | 								<td colspan="2" class="explanation">An array of
297 | 									<a href="#api_picker_controller">ACPController</a>. This array has helper methods
298 | 									<code>on</code> and
299 | 									<code>off</code> to attach/detach
300 | 									<a href="#events">events</a> to all items.
301 | 								</td>
302 | 							</tr>
303 | 						</tbody>
304 | 					</table>
305 | 				</section>
306 | 				<section class="mark">
307 | 					<a name="api_acolorpicker_parsecolor"></a>
308 | 					<code>AColorPicker.<span class="prop">parseColor</span>(<span class="par">color</span>, <span class="par">outFormat</span>)</code>
309 | 					<p>Parse color in input and return formatted value.</p>
310 | 					<table class="detail hover-on-row">
311 | 						<thead>
312 | 							<tr>
313 | 								<th>Parameter</th>
314 | 								<th></th>
315 | 							</tr>
316 | 						</thead>
317 | 						<tbody>
318 | 							<tr>
319 | 								<td>color</td>
320 | 								<td class="explanation">Value to be parsed
321 | 									<br>Accepts color name, rgb array, hex rgb, rgb(), rgba(), hsl(), hsla()</td>
322 | 							</tr>
323 | 							<tr>
324 | 								<td>outFormat</td>
325 | 								<td class="explanation">Output format, one of: rgb, rgbcss, rgbcss4, rgba, rgbacss, hsl, hslcss, hslcss4, hsla, hslacss, hex, hexcss4.
326 | 									<br> If outFormat is a plain object, will be filled with all formats as properties.
327 | 								</td>
328 | 							</tr>
329 | 						</tbody>
330 | 						<thead>
331 | 							<tr>
332 | 								<th>Return</th>
333 | 								<th></th>
334 | 							</tr>
335 | 						</thead>
336 | 						<tbody>
337 | 							<tr>
338 | 								<td colspan="2" class="explanation">Formatted color or
339 | 									<code><span class="par">undefined</span></code> if not recognized.
340 | 									<pre class="eg" title="e.g."><code>AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>");<span class="comment">           // return [255, 0, 0]</span>
341 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", "<span class="par">rgb</span>");<span class="comment">    // return [255, 0, 0]</span>
342 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", "<span class="par">rgbcss</span>");<span class="comment"> // return "rgb(255, 0, 0)"</span>
343 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", "<span class="par">rgbcss4</span>");<span class="comment">// return "rgb(255, 0, 0, 1)"</span>
344 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", "<span class="par">rgba</span>");<span class="comment">   // return [255, 0, 0, 1]</span>
345 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", "<span class="par">rgbacss</span>");<span class="comment">// return "rgba(255, 0, 0, 1)"</span>
346 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", "<span class="par">hsl</span>");<span class="comment">    // return [0,100,50]</span>
347 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", "<span class="par">hslcss</span>");<span class="comment"> // return "hsl(0, 100, 50)"</span>
348 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", "<span class="par">hslcss4</span>");<span class="comment">// return "hsl(0, 100, 50, 1)"</span>
349 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", "<span class="par">hsla</span>");<span class="comment">   // return [0, 100, 50, 1]</span>
350 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", "<span class="par">hslacss</span>");<span class="comment">// return "hsla(0, 100, 50, 1)"</span>
351 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", "<span class="par">hex</span>");<span class="comment">    // return "#ff0000"</span>
352 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", "<span class="par">hexcss4</span>");<span class="comment">// return "#ff0000ff"</span>
353 | AColorPicker.<span class="prop">parseColor</span>("<span class="par">red</span>", <span class="par">{ }</span>);<span class="comment">// return { "rgb":[255,0,0], ... }</span>
354 | </code></pre>
355 | 								</td>
356 | 							</tr>
357 | 						</tbody>
358 | 					</table>
359 | 				</section>
360 | 				<section class="mark">
361 | 					<a name="api_picker_controller"></a>
362 | 					<code>ACPController</code>
363 | 					<p>Can access picker properties and handle events.</p>
364 | 					<table class="detail hover-on-body">
365 | 						<thead>
366 | 							<tr>
367 | 								<th colspan="2">Property</th>
368 | 								<th colspan="2">Type</th>
369 | 							</tr>
370 | 						</thead>
371 | 						<!-- <tbody>
372 | 							<tr>
373 | 								<td rowspan="2">rgb</td>
374 | 								<td class="explanation">Get or set the current color in RGB array format
375 | 								</td>
376 | 								<td class="explanation">Array
377 | 									<br>[R, G, B]</td>
378 | 								<td class="explanation">R (red), G (green), B (blue) are number between 0 and 255</td>
379 | 							</tr>
380 | 							<tr>
381 | 								<td colspan="3" class="explanation">
382 | 									<pre class="eg" title="e.g."><code>picker.<span class="prop">rgb</span> = [<span class="par">0, 128, 0</span>];</code></pre>
383 | 								</td>
384 | 							</tr>
385 | 						</tbody>
386 | 						<tbody>
387 | 							<tr>
388 | 								<td rowspan="2">rgba</td>
389 | 								<td class="explanation">Get or set the current color in RGBA array format
390 | 								</td>
391 | 								<td class="explanation">Array
392 | 									<br>[R, G, B, A]</td>
393 | 								<td class="explanation">R (red), G (green), B (blue) are numbers between 0 and 255
394 | 									<br>A (alpha) is a number between 0 (transparent) and 1 (100%, full opacity)</td>
395 | 							</tr>
396 | 							<tr>
397 | 								<td colspan="3" class="explanation">
398 | 									<pre class="eg" title="e.g."><code>picker.<span class="prop">rgba</span> = [<span class="par">205, 220, 57, 1</span>]; <span class="comment"> // alpha 100% full opacity</span>
399 | picker.<span class="prop">rgba</span> = [<span class="par">205, 220, 57, .5</span>]; <span class="comment">// alpha 50% opacity</span>
400 | </code></pre>
401 | 								</td>
402 | 							</tr>
403 | 						</tbody>
404 | 						<tbody>
405 | 							<tr>
406 | 								<td rowspan="2">hsl</td>
407 | 								<td class="explanation">Get or set the current color in HSL array format
408 | 								</td>
409 | 								<td class="explanation">Array
410 | 									<br>[H, S, L]</td>
411 | 								<td class="explanation">H (hue) is an angle with value between 0 and 360
412 | 									<br> S (saturation) and L (lightness) are numbers between 0 and 100</td>
413 | 							</tr>
414 | 							<tr>
415 | 								<td colspan="3" class="explanation">
416 | 									<pre class="eg" title="e.g."><code>picker.<span class="prop">hsl</span> = [<span class="par">120, 100, 125</span>];</code></pre>
417 | 								</td>
418 | 							</tr>
419 | 						</tbody>
420 | 						<tbody>
421 | 							<tr>
422 | 								<td rowspan="2">hsla</td>
423 | 								<td class="explanation">Get or set the current color in HSLA array format
424 | 								</td>
425 | 								<td class="explanation">Array
426 | 									<br>[H, S, L, A]</td>
427 | 								<td class="explanation">H (hue) is an angle with value between 0 and 360
428 | 									<br> S (saturation) and L (lightness) are numbers between 0 and 100
429 | 									<br>A (alpha) is a number between 0 (transparent) and 1 (100%, full opacity)</td>
430 | 							</tr>
431 | 							<tr>
432 | 								<td colspan="3" class="explanation">
433 | 									<pre class="eg" title="e.g."><code>picker.<span class="prop">hsla</span> = [<span class="par">120, 100, 125, 1</span>]; <span class="comment"> // alpha 100% full opacity</span>
434 | picker.<span class="prop">hsla</span> = [<span class="par">120, 100, 125, .5</span>]; <span class="comment">// alpha 50% opacity</span>
435 | </code></pre>
436 | 								</td>
437 | 							</tr>
438 | 						</tbody> -->
439 | 						<tbody>
440 | 							<tr>
441 | 								<td rowspan="3">color</td>
442 | 								<td rowspan="2" class="explanation">Get or set the current color</td>
443 | 								<td rowspan="2" class="explanation">String|Array</td>
444 | 								<td class="explanation">Accept: named color, hex rgb, rgb(), rgba(), hsl(), hsla()</td>
445 | 							</tr>
446 | 							<tr>
447 | 								<td class="explanation">Return: hex rgb or rgba() if alpha != 1</td>
448 | 							</tr>
449 | 							<tr>
450 | 								<td colspan="3" class="explanation">
451 | 									<pre class="eg" title="e.g."><code><span class="comment">// set</span>
452 | picker.<span class="prop">color</span> = [<span class="par">205, 220, 57</span>]; <span class="comment">           // [R, G, B]</span>
453 | picker.<span class="prop">color</span> = [<span class="par">205, 220, 57, .5</span>]; <span class="comment">       // [R, G, B, A]</span>
454 | picker.<span class="prop">color</span> = "<span class="par">yellow</span>"; <span class="comment">                 // named color</span>
455 | picker.<span class="prop">color</span> = "<span class="par">#ffdd00</span>"; <span class="comment">                // hex rgb</span>
456 | picker.<span class="prop">color</span> = "<span class="par">#ffdd00ff</span>"; <span class="comment">              // hex rgba</span>
457 | picker.<span class="prop">color</span> = "<span class="par">#fd0</span>"; <span class="comment">                   // short hex rgb</span>
458 | picker.<span class="prop">color</span> = "<span class="par">#fd0f</span>"; <span class="comment">                  // short hex rgba</span>
459 | picker.<span class="prop">color</span> = "<span class="par">rgb(205, 220, 57)</span>"; <span class="comment">      // rgb() notation</span>
460 | picker.<span class="prop">color</span> = "<span class="par">rgb(205, 220, 57, .5)</span>"; <span class="comment">  // rgb() notation + alpha (css level 4)</span>
461 | picker.<span class="prop">color</span> = "<span class="par">rgba(205, 220, 57, .5)</span>"; <span class="comment"> // rgba() notation</span>
462 | picker.<span class="prop">color</span> = "<span class="par">hsl(120, 100, 125)</span>"; <span class="comment">     // hsl() notation</span>
463 | picker.<span class="prop">color</span> = "<span class="par">hsl(120, 100, 125, .5)</span>"; <span class="comment"> // hsl() notation + alpha (css level 4)</span>
464 | picker.<span class="prop">color</span> = "<span class="par">hsla(120, 100, 125, .5)</span>"; <span class="comment">// hsla() notation</span>
465 | <span class="comment">// get</span>
466 | picker.<span class="prop">color</span>; <span class="comment">// return "#ffdd00"</span>
467 | picker.<span class="prop">color</span>; <span class="comment">// return "rgba(205, 220, 57, .5)" if alpha is != 1</span>
468 | <span class="comment">// formatting color (see <a href="#api_acolorpicker_parsecolor">parseColor</a> for detail)</span>
469 | AColorPicker.<span class="prop">parseColor</span>(picker.<span class="prop">color</span>, <span class="par">"hsl"</span>); <span class="comment">// return "hsl(120, 100, 125)"</span>
470 | 							</code></pre>
471 | 								</td>
472 | 							</tr>
473 | 						</tbody>
474 | 						<tbody>
475 | 							<tr>
476 | 								<td rowspan="2">palette</td>
477 | 								<td class="explanation">Get or set the current palette
478 | 								</td>
479 | 								<td class="explanation">Array</td>
480 | 								<td class="explanation">Array of colors</td>
481 | 							</tr>
482 | 							<tr>
483 | 								<td colspan="3" class="explanation">
484 | 									<pre class="eg" title="e.g."><code><span class="comment">// set</span>
485 | picker.<span class="prop">palette</span> = ['red', '#00ff00', 'rgb(0, 0, 255)']; <span class="comment">// array of color</span>
486 | <code><span class="comment">// get</span>
487 | picker.<span class="prop">palette</span>; <span class="comment">// return ["#ff0000","#00ff00","#0000ff"]</span></code></pre>
488 | 								</td>
489 | 							</tr>
490 | 						</tbody>
491 | 						<thead>
492 | 							<tr>
493 | 								<th colspan="2">Function</th>
494 | 								<th colspan="2">Parameters</th>
495 | 							</tr>
496 | 						</thead>
497 | 						<tbody>
498 | 							<tr>
499 | 								<td rowspan="3">on</td>
500 | 								<td rowspan="2" class="explanation">Attach an event to the controller.</td>
501 | 								<td class="explanation">eventName</td>
502 | 								<td rowspan="2" class="explanation">See
503 | 									<a href="#events">events</a> for detail</td>
504 | 							</tr>
505 | 							<tr>
506 | 								<td class="explanation">callback</td>
507 | 							</tr>
508 | 							<tr>
509 | 								<td colspan="3" class="explanation">
510 | 									<pre class="eg" title="e.g."><code>picker.<span class="prop">on</span>("<span class="par">change</span>", (<span class="par">picker</span>, <span class="par">color</span>) => { });</code></pre>
511 | 								</td>
512 | 							</tr>
513 | 						</tbody>
514 | 						<tbody>
515 | 							<tr>
516 | 								<td rowspan="2">off</td>
517 | 								<td class="explanation">Detach an event from the controller.</td>
518 | 								<td class="explanation">eventName</td>
519 | 								<td class="explanation">See
520 | 									<a href="#events">events</a> for detail</td>
521 | 							</tr>
522 | 							<tr>
523 | 								<td colspan="3" class="explanation">
524 | 									<pre class="eg" title="e.g."><code>picker.<span class="prop">off</span>("<span class="par">change</span>");</code></pre>
525 | 								</td>
526 | 							</tr>
527 | 						</tbody>
528 | 						<tbody>
529 | 							<tr>
530 | 								<td rowspan="2">show</td>
531 | 								<td class="explanation">Show the picker.</td>
532 | 							</tr>
533 | 							<tr>
534 | 								<td colspan="3" class="explanation">
535 | 									<pre class="eg" title="e.g."><code>picker.<span class="prop">show</span>();</code></pre>
536 | 								</td>
537 | 							</tr>
538 | 						</tbody>
539 | 						<tbody>
540 | 							<tr>
541 | 								<td rowspan="2">hide</td>
542 | 								<td class="explanation">Hide the picker.</td>
543 | 							</tr>
544 | 							<tr>
545 | 								<td colspan="3" class="explanation">
546 | 									<pre class="eg" title="e.g."><code>picker.<span class="prop">hide</span>();</code></pre>
547 | 								</td>
548 | 							</tr>
549 | 						</tbody>
550 | 						<tbody>
551 | 							<tr>
552 | 								<td rowspan="2">toggle</td>
553 | 								<td class="explanation">Show or hide the picker.</td>
554 | 							</tr>
555 | 							<tr>
556 | 								<td colspan="3" class="explanation">
557 | 									<pre class="eg" title="e.g."><code>picker.<span class="prop">toggle</span>();</code></pre>
558 | 								</td>
559 | 							</tr>
560 | 						</tbody>
561 | 						<tbody>
562 | 							<tr>
563 | 								<td rowspan="3">setColor</td>
564 | 								<td rowspan="2" class="explanation">Set current color</td>
565 | 								<td class="explanation">color</td>
566 | 								<td class="explanation">Same of 'color' property</td>
567 | 							</tr>
568 | 							<tr>
569 | 								<td class="explanation">silent</td>
570 | 								<td class="explanation">If true the change event will not be triggered</td>
571 | 							</tr>
572 | 							<tr>
573 | 								<td colspan="3" class="explanation">
574 | 									<pre class="eg"
575 | 										title="e.g."><code>picker.<span class="prop">setColor</span>("<span class="par">red</span>", <span class="par">true</span>); <span class="comment">// change event not triggered</span></code>
576 | <code>picker.<span class="prop">setColor</span>("<span class="par">red</span>", <span class="par">false</span>); <span class="comment">// change event triggered</span></code>
577 | <code>picker.<span class="prop">setColor</span>("<span class="par">red</span>"); <span class="comment">// change event triggered</span></code></pre>
578 | 								</td>
579 | 							</tr>
580 | 						</tbody>
581 | 					</table>
582 | 				</section>
583 | 				<section class="mark">
584 | 					<a name="api_options"></a>
585 | 					<code>options</code>
586 | 					<p></p>
587 | 					<table class="detail hover-on-row">
588 | 						<thead>
589 | 							<tr>
590 | 								<th>Property</th>
591 | 								<th></th>
592 | 								<th>Type</th>
593 | 								<th>Default</th>
594 | 							</tr>
595 | 						</thead>
596 | 						<tbody>
597 | 							<tr>
598 | 								<td>attachTo</td>
599 | 								<td class="explanation">Where to attach the picker top element, can be HTMLElement, jQuery object or css selector</td>
600 | 								<td class="explanation">String|Object</td>
601 | 								<td class="explanation">body</td>
602 | 							</tr>
603 | 							<tr>
604 | 								<td>showHSL</td>
605 | 								<td class="explanation">If falsy hide the HSL inputs</td>
606 | 								<td class="explanation">Boolean</td>
607 | 								<td class="explanation">true</td>
608 | 							</tr>
609 | 							<tr>
610 | 								<td>showRGB</td>
611 | 								<td class="explanation">If falsy hide the RGB inputs</td>
612 | 								<td class="explanation">Boolean</td>
613 | 								<td class="explanation">true</td>
614 | 							</tr>
615 | 							<tr>
616 | 								<td>showHEX</td>
617 | 								<td class="explanation">If falsy hide the RGB HEX inputs</td>
618 | 								<td class="explanation">Boolean</td>
619 | 								<td class="explanation">true</td>
620 | 							</tr>
621 | 							<tr>
622 | 								<td>showAlpha</td>
623 | 								<td class="explanation">If truly show control to change opacity</td>
624 | 								<td class="explanation">Boolean</td>
625 | 								<td class="explanation">false</td>
626 | 							</tr>
627 | 							<tr>
628 | 								<td>color</td>
629 | 								<td class="explanation">Initial color</td>
630 | 								<td class="explanation">Boolean</td>
631 | 								<td class="explanation">#ff0000</td>
632 | 							</tr>
633 | 							<tr>
634 | 								<td>palette</td>
635 | 								<td class="explanation">Array of predefined colors.
636 | 									<br>Each element can be color name, rgb array, hex rgb, rgb(), rgba(), hsl(), hsla()</td>
637 | 								<td class="explanation">Array</td>
638 | 								<td class="explanation">null</td>
639 | 							</tr>
640 | 							<tr>
641 | 								<td>paletteEditable</td>
642 | 								<td class="explanation">If truly make the palette editable</td>
643 | 								<td class="explanation">Boolean</td>
644 | 								<td class="explanation">false</td>
645 | 							</tr>
646 | 							<tr>
647 | 								<td>useAlphaInPalette</td>
648 | 								<td class="explanation">If truly enable alpha channel in palette colors,<br>if 'auto' depends on the value of 'showAlpha'</td>
649 | 								<td class="explanation">String|Boolean</td>
650 | 								<td class="explanation">auto</td>
651 | 							</tr>
652 | 							<tr>
653 | 								<td>hueBarSize</td>
654 | 								<td class="explanation">Size of hue bar in pixel (width, height)</td>
655 | 								<td class="explanation">Array</td>
656 | 								<td class="explanation">[150,11]</td>
657 | 							</tr>
658 | 							<tr>
659 | 								<td>slBarSize</td>
660 | 								<td class="explanation">Size of saturation/luminance canvas in pixel (width, height)</td>
661 | 								<td class="explanation">Array</td>
662 | 								<td class="explanation">[232,150]</td>
663 | 							</tr>
664 | 						</tbody>
665 | 					</table>
666 | 				</section>
667 | 			</section>
668 | 		</div>
669 | 	</div>
670 | 	<footer>
671 | 		by <a href="https://github.com/narsenico" title="narsenico github repositories">narsenico</a>
672 | 	</footer>
673 | 	<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
674 | </body>
675 | 
676 | </html>


--------------------------------------------------------------------------------
/src/test-ts/test.ts:
--------------------------------------------------------------------------------
 1 | /// <reference path="../acolorpicker.d.ts" />
 2 | import * as AColorPicker from '../acolorpicker.js';
 3 | 
 4 | const c1 = AColorPicker.parseColor('yellow', 'hex');
 5 | const c2 = AColorPicker.parseColor('yellow');
 6 | const c3 = AColorPicker.parseColor([0, 0, 0]);
 7 | const o1: AColorPicker.ACPColor = AColorPicker.parseColor('yellow', {});
 8 | const o2: Object = AColorPicker.parseColor('yellow', {});
 9 | 
10 | const a1: AColorPicker.ACPController = AColorPicker.createPicker('div');
11 | a1.element;
12 | a1.rgb = [0, 0, 0];
13 | a1.rgba = [0, 0, 0, 0];
14 | a1.hsl = [0, 0, 0];
15 | a1.hsla = [0, 0, 0, 0];
16 | a1.color = 'yellow';
17 | const p1: string = a1.rgbhex;
18 | const p2: AColorPicker.ACPColor = a1.all;
19 | const cb1: AColorPicker.ACPCallback = (controller: AColorPicker.ACPController, color?: string) => {};
20 | const cb2: AColorPicker.ACPCallback = () => {};
21 | a1.onchange = cb1;
22 | a1.onchange = cb2;
23 | a1.onchange = cb2;
24 | a1.onchange = null;
25 | a1.oncoloradd = cb1;
26 | a1.oncoloradd = cb2;
27 | a1.oncoloradd = cb2;
28 | a1.oncoloradd = null;
29 | a1.oncolorremove = cb1;
30 | a1.oncolorremove = cb2;
31 | a1.oncolorremove = cb2;
32 | a1.oncolorremove = null;
33 | a1.on('change', cb1);
34 | a1.on('change', cb2);
35 | a1.off('change', cb1);
36 | a1.off('change');
37 | 
38 | // test su proprietà che devono risultare non validi
39 | // a1.element = document.querySelector('body');
40 | // let rgb: Array<number> = a1.element;
41 | // a1.rgbhex = '#ffffff';


--------------------------------------------------------------------------------
/src/test-ts/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compileOnSave": false,
 3 |     "compilerOptions": {
 4 |         "module": "commonjs",
 5 |         "noEmit": true,
 6 |         "noImplicitAny": true
 7 |     },
 8 |     "files": [
 9 |         "../acolorpicker.d.ts",
10 |         "./test.ts"
11 |     ]
12 | }


--------------------------------------------------------------------------------
/src/test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <title>a-color-picker test</title>
  6 |     <script src="http://chaijs.com/chai.js"></script>
  7 |     <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
  8 |     <link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
  9 | </head>
 10 | 
 11 | <body>
 12 |     <h1>a-color-picker test with <a href="https://mochajs.org/">mocha</a> and <a href="http://www.chaijs.com/">chai</a></h1>
 13 |     <div id="mocha"></div>
 14 |     <script>
 15 |         const expect = chai.expect;
 16 |         mocha.setup('bdd');
 17 | 
 18 |         describe('Static functions', () => {
 19 |             it('parseColor with named color', () => {
 20 |                 expect(AColorPicker.parseColor('red')).to.eql([255, 0, 0]);
 21 |             });
 22 |             it('parseColor with hex', () => {
 23 |                 expect(AColorPicker.parseColor('#ff0000')).to.eql([255, 0, 0]);
 24 |             });
 25 |             it('parseColor with hex in rgba', () => {
 26 |                 expect(AColorPicker.parseColor('#ff0000', 'rgba')).to.eql([255, 0, 0, 1]);
 27 |             });
 28 |             it('parseColor with hex 0% opacity in rgba', () => {
 29 |                 expect(AColorPicker.parseColor('#ff000000', 'rgba')).to.eql([255, 0, 0, 0]);
 30 |             });
 31 |             it('parseColor with hex 50% opacity in rgba', () => {
 32 |                 expect(AColorPicker.parseColor('#ff000080', 'rgba')).to.eql([255, 0, 0, .5]);
 33 |             });
 34 |             it('parseColor with short hex', () => {
 35 |                 expect(AColorPicker.parseColor('#f00')).to.eql([255, 0, 0]);
 36 |             });
 37 |             it('parseColor with short hex in rgba', () => {
 38 |                 expect(AColorPicker.parseColor('#f00', 'rgba')).to.eql([255, 0, 0, 1]);
 39 |             });
 40 |             it('parseColor with short hex 0% opacity in rgba', () => {
 41 |                 expect(AColorPicker.parseColor('#f000', 'rgba')).to.eql([255, 0, 0, 0]);
 42 |             });
 43 |             it('parseColor with short hex  => rgba67% opacity', () => {
 44 |                 expect(AColorPicker.parseColor('#f00a', 'rgba')).to.eql([255, 0, 0, .67]);
 45 |             });
 46 |             it('parseColor with color name  => hex + alpha', () => {
 47 |                 expect(AColorPicker.parseColor('red', 'hexcss4')).to.eql('#ff0000ff');
 48 |             });
 49 |             it('parseColor with color name  => hex67% opacity', () => {
 50 |                 expect(AColorPicker.parseColor('#f00a', 'hexcss4')).to.eql('#ff0000aa');
 51 |             });
 52 |             it('parseColor with color name  => hex0% opacity', () => {
 53 |                 expect(AColorPicker.parseColor('#f000', 'hexcss4')).to.eql('#ff000000');
 54 |             });
 55 |             // RGB
 56 |             it('parseColor with rgb(<comma>)', () => {
 57 |                 expect(AColorPicker.parseColor('rgb(255,0,0)')).to.eql([255, 0, 0]);
 58 |             });
 59 |             it('parseColor with rgb(<comma>) in rgba', () => {
 60 |                 expect(AColorPicker.parseColor('rgb(255,0,0)', 'rgba')).to.eql([255, 0, 0, 1]);
 61 |             });
 62 |             it('parseColor with rgb(<space>)', () => {
 63 |                 expect(AColorPicker.parseColor('rgb(255 0 0)')).to.eql([255, 0, 0]);
 64 |             });
 65 |             it('parseColor with rgb(<comma><space>)', () => {
 66 |                 expect(AColorPicker.parseColor('rgb(255, 0, 0)')).to.eql([255, 0, 0]);
 67 |             });
 68 |             it('parseColor with rgb(<comma>) 50% opacity in rgba', () => {
 69 |                 expect(AColorPicker.parseColor('rgb(255,0,0,.5)', 'rgba')).to.eql([255, 0, 0, .5]);
 70 |             });
 71 |             it('parseColor with rgb(<space>) 50% opacity in rgba', () => {
 72 |                 expect(AColorPicker.parseColor('rgb(255 0 0 .5)', 'rgba')).to.eql([255, 0, 0, .5]);
 73 |             });
 74 |             it('parseColor with rgba(<comma>) 70% opacity in rgba', () => {
 75 |                 expect(AColorPicker.parseColor('rgba(255,0,0,.7)', 'rgba')).to.eql([255, 0, 0, .7]);
 76 |             });
 77 |             it('parseColor with rgba(<space>) 70% opacity in rgba', () => {
 78 |                 expect(AColorPicker.parseColor('rgba(255 0 0 .7)', 'rgba')).to.eql([255, 0, 0, .7]);
 79 |             });
 80 |             // HSL
 81 |             it('parseColor with hsl(<comma>)', () => {
 82 |                 expect(AColorPicker.parseColor('hsl(0,100,50)')).to.eql([255, 0, 0]);
 83 |             });
 84 |             it('parseColor with hsl(<comma>) in rgba', () => {
 85 |                 expect(AColorPicker.parseColor('hsl(0,100,50)', 'rgba')).to.eql([255, 0, 0, 1]);
 86 |             });
 87 |             it('parseColor with hsl(<space>)', () => {
 88 |                 expect(AColorPicker.parseColor('hsl(0 100 50)')).to.eql([255, 0, 0]);
 89 |             });
 90 |             it('parseColor with hsl(<comma><space>)', () => {
 91 |                 expect(AColorPicker.parseColor('hsl(0, 100, 50)')).to.eql([255, 0, 0]);
 92 |             });
 93 |             it('parseColor with hsl(<comma>) 50% opacity in rgba', () => {
 94 |                 expect(AColorPicker.parseColor('hsl(0,100,50,.5)', 'rgba')).to.eql([255, 0, 0, .5]);
 95 |             });
 96 |             it('parseColor with hsl(<space>) 50% opacity in rgba', () => {
 97 |                 expect(AColorPicker.parseColor('hsl(0 100 50 .5)', 'rgba')).to.eql([255, 0, 0, .5]);
 98 |             });
 99 |             it('parseColor with hsla(<comma>) 70% opacity in rgba', () => {
100 |                 expect(AColorPicker.parseColor('hsla(0,100,50,.7)', 'rgba')).to.eql([255, 0, 0, .7]);
101 |             });
102 |             it('parseColor with hsla(<space>) 70% opacity in rgba', () => {
103 |                 expect(AColorPicker.parseColor('hsla(0 100 50 .7)', 'rgba')).to.eql([255, 0, 0, .7]);
104 |             });
105 |             // all
106 |             it('parseColor with named color in {}', () => {
107 |                 expect(JSON.stringify(AColorPicker.parseColor('red', {}))).to.eql('{"rgb":[255,0,0],"rgbcss":"rgb(255, 0, 0)","rgbcss4":"rgb(255, 0, 0, 1)","rgba":[255,0,0,1],"rgbacss":"rgba(255, 0, 0, 1)","hsl":[0,100,50],"hslcss":"hsl(0, 100, 50)","hslcss4":"hsl(0, 100, 50, 1)","hsla":[0,100,50,1],"hslacss":"hsla(0, 100, 50, 1)","hex":"#ff0000","hexcss4":"#ff0000ff","int":16711680}');
108 |             });
109 |             it('parseColor with named color in new Object()', () => {
110 |                 expect(JSON.stringify(AColorPicker.parseColor('red', new Object()))).to.eql('{"rgb":[255,0,0],"rgbcss":"rgb(255, 0, 0)","rgbcss4":"rgb(255, 0, 0, 1)","rgba":[255,0,0,1],"rgbacss":"rgba(255, 0, 0, 1)","hsl":[0,100,50],"hslcss":"hsl(0, 100, 50)","hslcss4":"hsl(0, 100, 50, 1)","hsla":[0,100,50,1],"hslacss":"hsla(0, 100, 50, 1)","hex":"#ff0000","hexcss4":"#ff0000ff","int":16711680}');
111 |             });
112 |             // default
113 |             it('parseColor with named color in unknown outFormat', () => {
114 |                 expect(AColorPicker.parseColor('red', 'aaa')).to.eql([255, 0, 0]);
115 |             });
116 |             it('parseColor with named color in wrong case outFormat', () => {
117 |                 expect(AColorPicker.parseColor('red', 'HEXCSS4')).to.eql('#ff0000ff');
118 |             });
119 |             it('parseColor with named color in No plain object', () => {
120 |                 expect(AColorPicker.parseColor('red', new Date())).to.eql([255, 0, 0]);
121 |             });
122 |             it('parseColor with named color in class', () => {
123 |                 class a { };
124 |                 expect(AColorPicker.parseColor('red', new a())).to.eql([255, 0, 0]);
125 |             });
126 |         });
127 |         describe('Constructor functions', () => {
128 |             it('createPicker with no arguments: attach to body', () => {
129 |                 expect(AColorPicker.createPicker().element.parentElement).to.be.equal(document.body);
130 |             });
131 |             it('createPicker with empty object: attach to body', () => {
132 |                 expect(AColorPicker.createPicker({}).element.parentElement).to.be.equal(document.body);
133 |             });
134 |             it('createPicker with valid container', () => {
135 |                 expect(AColorPicker.createPicker('body').element.parentElement).to.be.equal(document.body);
136 |             });
137 |             it('createPicker with options containing attachTo', () => {
138 |                 expect(AColorPicker.createPicker({ attachTo: 'body' }).element.parentElement).to.be.equal(document.body);
139 |             });
140 |             it('createPicker with invalid container: throw err', (done) => {
141 |                 expect(() => AColorPicker.createPicker('.not-found')).to.throw();
142 |                 done();
143 |             });
144 |             it('createPicker with empty string: throw err', (done) => {
145 |                 expect(() => AColorPicker.createPicker('')).to.throw();
146 |                 done();
147 |             });
148 |             it('createPicker with options containing invalid attachTo: throw err', (done) => {
149 |                 expect(() => AColorPicker.createPicker({ attachTo: '.not-found' })).to.throw();
150 |                 done();
151 |             });
152 |             it('createPicker with id', () => {
153 |                 expect(AColorPicker.createPicker({ id: 'myColorPicker0' }).element.id).to.be.equal('myColorPicker0');
154 |             });
155 |             it('createPicker with initial color', () => {
156 |                 const c = AColorPicker.parseColor('yellow', 'hex');
157 |                 expect(AColorPicker.createPicker({ color: 'yellow' }).color).to.be.equal(c);
158 |             });
159 |             it('retrieve controller from picker element', () => {
160 |                 const a = AColorPicker.createPicker({ id: 'myColorPicker1' });
161 |                 const c = document.querySelector('#myColorPicker1').ctrl;
162 |                 expect(a).to.be.equal(c);
163 |             });
164 |             it('createPicker with enabled alpha channel in palette', () => {
165 |                 const a = AColorPicker.createPicker({
166 |                     id: 'myColorPicker2',
167 |                     showAlpha: true,
168 |                     useAlphaInPalette: 'auto',
169 |                     palette: ['rgba(255, 0, 0, .5)']
170 |                 });
171 |                 const c1 = AColorPicker.parseColor(a.element.querySelector('.a-color-picker-palette-color').style.backgroundColor, 'hexcss4');
172 |                 const c2 = AColorPicker.parseColor('rgba(255, 0, 0, .5)', 'hexcss4');
173 |                 expect(c1).to.be.equal(c2);
174 |             });
175 |             it('createPicker with only RGB', () => {
176 |                 const a = AColorPicker.createPicker({
177 |                     showRGB: true, showHSL: false, showHEX: false, showAlpha: false
178 |                 });
179 |                 expect(a.element.querySelector('.a-color-picker-rgb')).to.not.be.equal(null);
180 |                 expect(a.element.querySelector('.a-color-picker-hsl')).to.be.equal(null);
181 |                 expect(a.element.querySelector('.a-color-picker-rgbhex')).to.be.equal(null);
182 |                 expect(a.element.querySelector('.a-color-picker-alpha')).to.be.equal(null);
183 |                 expect(a.element.querySelector('.a-color-picker-palette')).to.be.equal(null);
184 |                 expect(a.element.querySelectorAll('input[nameref]').length).to.be.equal(3);
185 |             });
186 |             it('createPicker with only HSL', () => {
187 |                 const a = AColorPicker.createPicker({
188 |                     showRGB: false, showHSL: true, showHEX: false, showAlpha: false
189 |                 });
190 |                 expect(a.element.querySelector('.a-color-picker-rgb')).to.be.equal(null);
191 |                 expect(a.element.querySelector('.a-color-picker-hsl')).to.not.be.equal(null);
192 |                 expect(a.element.querySelector('.a-color-picker-rgbhex')).to.be.equal(null);
193 |                 expect(a.element.querySelector('.a-color-picker-alpha')).to.be.equal(null);
194 |                 expect(a.element.querySelector('.a-color-picker-palette')).to.be.equal(null);
195 |                 expect(a.element.querySelectorAll('input[nameref]').length).to.be.equal(3);
196 |             });
197 |             it('createPicker with only HEX', () => {
198 |                 const a = AColorPicker.createPicker({
199 |                     showRGB: false, showHSL: false, showHEX: true, showAlpha: false
200 |                 });
201 |                 expect(a.element.querySelector('.a-color-picker-rgb')).to.be.equal(null);
202 |                 expect(a.element.querySelector('.a-color-picker-hsl')).to.be.equal(null);
203 |                 expect(a.element.querySelector('.a-color-picker-rgbhex')).to.not.be.equal(null);
204 |                 expect(a.element.querySelector('.a-color-picker-alpha')).to.be.equal(null);
205 |                 expect(a.element.querySelector('.a-color-picker-palette')).to.be.equal(null);
206 |                 expect(a.element.querySelectorAll('input[nameref]').length).to.be.equal(1);
207 |             });
208 |             it('createPicker with only palette editable', () => {
209 |                 const a = AColorPicker.createPicker({
210 |                     showRGB: false, showHSL: false, showHEX: false, showAlpha: false,
211 |                     palette: 'PALETTE_MATERIAL_CHROME',
212 |                     paletteEditable: true
213 |                 });
214 |                 expect(a.element.querySelector('.a-color-picker-rgb')).to.be.equal(null);
215 |                 expect(a.element.querySelector('.a-color-picker-hsl')).to.be.equal(null);
216 |                 expect(a.element.querySelector('.a-color-picker-rgbhex')).to.be.equal(null);
217 |                 expect(a.element.querySelector('.a-color-picker-alpha')).to.be.equal(null);
218 |                 expect(a.element.querySelector('.a-color-picker-palette')).to.not.be.equal(null);
219 |                 expect(a.element.querySelectorAll('input[nameref]').length).to.be.equal(0);
220 |             });
221 |             it('createPicker with hue and sl bar size changed', () => {
222 |                 const a = AColorPicker.createPicker({
223 |                     showRGB: true, showHSL: false, showHEX: false, showAlpha: false,
224 |                     hueBarSize: [190, 7],
225 |                     slBarSize: [290, 190]
226 |                 });
227 |                 expect(a.element.querySelector('canvas.a-color-picker-sl').width).to.be.equal(290);
228 |                 expect(a.element.querySelector('canvas.a-color-picker-sl').height).to.be.equal(190);
229 |                 expect(a.element.querySelector('canvas.a-color-picker-h').width).to.be.equal(190);
230 |                 expect(a.element.querySelector('canvas.a-color-picker-h').height).to.be.equal(7);
231 |             });
232 |         });
233 |         describe('Other functions', () => {
234 |             it('submit a form: picker\'s inputs must not be sent', () => {
235 |                 const form = document.createElement('FORM');
236 |                 const inputColor = document.createElement('INPUT');
237 |                 const inputSubmit = document.createElement('INPUT');
238 |                 const divColorPicker = document.createElement('DIV');
239 |                 const iframe = document.createElement('iframe');
240 |                 form.action = '/';
241 |                 form.target = 'result';
242 |                 form.method = 'GET';
243 |                 inputColor.name = 'color';
244 |                 inputColor.id = 'color';
245 |                 inputColor.value = 'red';
246 |                 inputSubmit.type = 'submit';
247 |                 divColorPicker.className = 'colorPicker';
248 |                 iframe.name = 'result';
249 |                 iframe.style.display = 'none';
250 |                 form.appendChild(inputColor);
251 |                 form.appendChild(inputSubmit);
252 |                 form.appendChild(divColorPicker);
253 |                 document.body.appendChild(form);
254 |                 document.body.appendChild(iframe);
255 |                 AColorPicker.createPicker({
256 |                     attachTo: 'div.colorPicker', showHSL: false, showRGB: false
257 |                 });
258 |                 return new Promise((resolve, reject) => {
259 |                     iframe.onload = e => {
260 |                         if (iframe.contentWindow.location.search == '?color=red') {
261 |                             resolve();
262 |                         } else {
263 |                             reject('expected "' + iframe.contentWindow.location.search + '" to equal "?color=red"');
264 |                         }
265 |                     };
266 |                     console.warn('mi aspetto un errore al submit della form');
267 |                     form.submit();
268 |                 });
269 |             });
270 |             it('changing palette', () => {
271 |                 const a = AColorPicker.createPicker({
272 |                     palette: ['red', 'yellow']
273 |                 });
274 |                 expect(a.element.querySelectorAll('.a-color-picker-palette>.a-color-picker-palette-color').length).to.be.equal(2);
275 |                 a.palette = ['blue'];
276 |                 expect(a.element.querySelectorAll('.a-color-picker-palette>.a-color-picker-palette-color').length).to.be.equal(1);
277 |             });
278 |             it('create palette', () => {
279 |                 const a = AColorPicker.createPicker({});
280 |                 expect(a.element.querySelectorAll('.a-color-picker-palette>.a-color-picker-palette-color').length).to.be.equal(0);
281 |                 a.palette = ['blue'];
282 |                 expect(a.element.querySelectorAll('.a-color-picker-palette>.a-color-picker-palette-color').length).to.be.equal(1);
283 |             });
284 |             it('set palette with array', () => {
285 |                 const a = AColorPicker.createPicker({});
286 |                 a.palette = ['red', '#00ff00', 'rgb(0, 0, 255)'];
287 |                 expect(a.palette.length).to.be.equal(3);
288 |                 expect(JSON.stringify(a.palette)).to.be.equal('["#ff0000","#00ff00","#0000ff"]');
289 |             });
290 |             it('show/hide with button', async (done) => {
291 |                 const event = new MouseEvent('click', {
292 |                     view: window,
293 |                     bubbles: true,
294 |                     cancelable: true
295 |                 });
296 |                 const testDisplay = async (picker, func, expected) => {
297 |                     return new Promise((resolve, reject) => {
298 |                         button.addEventListener('click', () => {
299 |                             picker[func]();
300 |                             let cs = getComputedStyle(picker.element);
301 |                             if (cs.display === expected) resolve();
302 |                             else reject(new Error(`calling ${func}: expected ${expected} but found ${cs.display}`));
303 |                         }, { once: true });
304 |                         button.dispatchEvent(event);
305 |                     });
306 |                 };
307 |                 const container = document.createElement('div');
308 |                 const button = document.createElement('button');
309 |                 const a = AColorPicker.from(container);
310 |                 button.innerHTML = 'toggle';
311 |                 container.appendChild(button);
312 |                 document.body.appendChild(container);
313 | 
314 |                 try {
315 |                     await testDisplay(a[0], 'toggle', 'none');
316 |                     await testDisplay(a[0], 'toggle', 'inline-flex');
317 |                     await testDisplay(a[0], 'hide', 'none');
318 |                     await testDisplay(a[0], 'show', 'inline-flex');
319 |                     done();
320 |                 } catch (e) {
321 |                     done(e);
322 |                 }
323 |             });
324 |             it('trigger change event', (done) => {
325 |                 const a = AColorPicker.createPicker({});
326 |                 let count = 0;
327 |                 a.on('change', (p, color) => {
328 |                     if (color === 'rgb(0, 0, 255)') ++count;
329 |                     else if (color === 'rgb(240, 240, 240)') ++count
330 |                     else if (color === 'rgb(255, 240, 0)' && ++count === 3) done();
331 |                     else done(new Error('color not changed ' + color + ' ' + count));
332 |                 });
333 |                 a.color = '#0000ff';
334 |                 a.setColor('#00ff00', true); // non scatenato
335 |                 a.setColor('#f0f0f0', false);
336 |                 a.setColor('#fff000');
337 |             });
338 |             it('dont trigger change event', (done) => {
339 |                 const newcolor = '#0000ff';
340 |                 const a = AColorPicker.createPicker({});
341 |                 a.on('change', (p, color) => {
342 |                     done(new Error('changed color silently but event was fired'))
343 |                 });
344 |                 a.setColor(newcolor, true);
345 |                 setTimeout(() => {
346 |                     if (a.color === newcolor) {
347 |                         done();
348 |                     } else {
349 |                         done(new Error(`expected ${newcolor}, found ${a.color}`));
350 |                     }
351 |                 }, 250);
352 |             });
353 |         });
354 |         setTimeout(() => {
355 |             mocha.run();
356 |         }, 500);
357 |     </script>
358 | </body>
359 | 
360 | </html>


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * a-color-picker - utility library
  3 |  * https://github.com/narsenico/a-color-picker
  4 |  * 
  5 |  * Copyright (c) 2017-2018, Gianfranco Caldi.
  6 |  * Released under the MIT License.
  7 |  */
  8 | 
  9 | import isPlainObject from 'is-plain-object';
 10 | 
 11 | const COLOR_NAMES = { 'aliceblue': '#F0F8FF', 'antiquewhite': '#FAEBD7', 'aqua': '#00FFFF', 'aquamarine': '#7FFFD4', 'azure': '#F0FFFF', 'beige': '#F5F5DC', 'bisque': '#FFE4C4', 'black': '#000000', 'blanchedalmond': '#FFEBCD', 'blue': '#0000FF', 'blueviolet': '#8A2BE2', 'brown': '#A52A2A', 'burlywood': '#DEB887', 'cadetblue': '#5F9EA0', 'chartreuse': '#7FFF00', 'chocolate': '#D2691E', 'coral': '#FF7F50', 'cornflowerblue': '#6495ED', 'cornsilk': '#FFF8DC', 'crimson': '#DC143C', 'cyan': '#00FFFF', 'darkblue': '#00008B', 'darkcyan': '#008B8B', 'darkgoldenrod': '#B8860B', 'darkgray': '#A9A9A9', 'darkgrey': '#A9A9A9', 'darkgreen': '#006400', 'darkkhaki': '#BDB76B', 'darkmagenta': '#8B008B', 'darkolivegreen': '#556B2F', 'darkorange': '#FF8C00', 'darkorchid': '#9932CC', 'darkred': '#8B0000', 'darksalmon': '#E9967A', 'darkseagreen': '#8FBC8F', 'darkslateblue': '#483D8B', 'darkslategray': '#2F4F4F', 'darkslategrey': '#2F4F4F', 'darkturquoise': '#00CED1', 'darkviolet': '#9400D3', 'deeppink': '#FF1493', 'deepskyblue': '#00BFFF', 'dimgray': '#696969', 'dimgrey': '#696969', 'dodgerblue': '#1E90FF', 'firebrick': '#B22222', 'floralwhite': '#FFFAF0', 'forestgreen': '#228B22', 'fuchsia': '#FF00FF', 'gainsboro': '#DCDCDC', 'ghostwhite': '#F8F8FF', 'gold': '#FFD700', 'goldenrod': '#DAA520', 'gray': '#808080', 'grey': '#808080', 'green': '#008000', 'greenyellow': '#ADFF2F', 'honeydew': '#F0FFF0', 'hotpink': '#FF69B4', 'indianred ': '#CD5C5C', 'indigo ': '#4B0082', 'ivory': '#FFFFF0', 'khaki': '#F0E68C', 'lavender': '#E6E6FA', 'lavenderblush': '#FFF0F5', 'lawngreen': '#7CFC00', 'lemonchiffon': '#FFFACD', 'lightblue': '#ADD8E6', 'lightcoral': '#F08080', 'lightcyan': '#E0FFFF', 'lightgoldenrodyellow': '#FAFAD2', 'lightgray': '#D3D3D3', 'lightgrey': '#D3D3D3', 'lightgreen': '#90EE90', 'lightpink': '#FFB6C1', 'lightsalmon': '#FFA07A', 'lightseagreen': '#20B2AA', 'lightskyblue': '#87CEFA', 'lightslategray': '#778899', 'lightslategrey': '#778899', 'lightsteelblue': '#B0C4DE', 'lightyellow': '#FFFFE0', 'lime': '#00FF00', 'limegreen': '#32CD32', 'linen': '#FAF0E6', 'magenta': '#FF00FF', 'maroon': '#800000', 'mediumaquamarine': '#66CDAA', 'mediumblue': '#0000CD', 'mediumorchid': '#BA55D3', 'mediumpurple': '#9370DB', 'mediumseagreen': '#3CB371', 'mediumslateblue': '#7B68EE', 'mediumspringgreen': '#00FA9A', 'mediumturquoise': '#48D1CC', 'mediumvioletred': '#C71585', 'midnightblue': '#191970', 'mintcream': '#F5FFFA', 'mistyrose': '#FFE4E1', 'moccasin': '#FFE4B5', 'navajowhite': '#FFDEAD', 'navy': '#000080', 'oldlace': '#FDF5E6', 'olive': '#808000', 'olivedrab': '#6B8E23', 'orange': '#FFA500', 'orangered': '#FF4500', 'orchid': '#DA70D6', 'palegoldenrod': '#EEE8AA', 'palegreen': '#98FB98', 'paleturquoise': '#AFEEEE', 'palevioletred': '#DB7093', 'papayawhip': '#FFEFD5', 'peachpuff': '#FFDAB9', 'peru': '#CD853F', 'pink': '#FFC0CB', 'plum': '#DDA0DD', 'powderblue': '#B0E0E6', 'purple': '#800080', 'rebeccapurple': '#663399', 'red': '#FF0000', 'rosybrown': '#BC8F8F', 'royalblue': '#4169E1', 'saddlebrown': '#8B4513', 'salmon': '#FA8072', 'sandybrown': '#F4A460', 'seagreen': '#2E8B57', 'seashell': '#FFF5EE', 'sienna': '#A0522D', 'silver': '#C0C0C0', 'skyblue': '#87CEEB', 'slateblue': '#6A5ACD', 'slategray': '#708090', 'slategrey': '#708090', 'snow': '#FFFAFA', 'springgreen': '#00FF7F', 'steelblue': '#4682B4', 'tan': '#D2B48C', 'teal': '#008080', 'thistle': '#D8BFD8', 'tomato': '#FF6347', 'turquoise': '#40E0D0', 'violet': '#EE82EE', 'wheat': '#F5DEB3', 'white': '#FFFFFF', 'whitesmoke': '#F5F5F5', 'yellow': '#FFFF00', 'yellowgreen': '#9ACD32' };
 12 | const PALETTE_MATERIAL_500 = ['#F44336', '#E91E63', '#E91E63', '#9C27B0', '#9C27B0', '#673AB7', '#673AB7', '#3F51B5', '#3F51B5', '#2196F3', '#2196F3', '#03A9F4', '#03A9F4', '#00BCD4', '#00BCD4', '#009688', '#009688', '#4CAF50', '#4CAF50', '#8BC34A', '#8BC34A', '#CDDC39', '#CDDC39', '#FFEB3B', '#FFEB3B', '#FFC107', '#FFC107', '#FF9800', '#FF9800', '#FF5722', '#FF5722', '#795548', '#795548', '#9E9E9E', '#9E9E9E', '#607D8B', '#607D8B'];
 13 | const PALETTE_MATERIAL_CHROME = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b'];
 14 | 
 15 | function limit(value, min, max) {
 16 |     value = +value;
 17 |     return isNaN(value) ? min : (value < min ? min : (value > max ? max : value));
 18 | }
 19 | 
 20 | function nvl(value, def) {
 21 |     return value === null || value === undefined ? def : value;
 22 | }
 23 | 
 24 | function ensureArray(arrayLike) {
 25 |     if (!arrayLike) return [];
 26 |     return Array.from(arrayLike);
 27 | }
 28 | 
 29 | /**
 30 |  * Converte il colore da [r,g,b] al formato RGB HEX.
 31 |  *
 32 |  * @param      {number}  r       rosso (0-255)
 33 |  * @param      {number}  g       verde (0-255)
 34 |  * @param      {number}  b       blu (0-255)
 35 |  * @return     {string}  colore nel fomrato RGB HX (es: #ffdd00)
 36 |  */
 37 | function rgbToHex(r, g, b) {
 38 |     [r, g, b] = [limit(r, 0, 255), limit(g, 0, 255), limit(b, 0, 255)];
 39 |     return "#" + ("000000" + ((r << 16) | (g << 8) | b).toString(16)).slice(-6);
 40 | }
 41 | 
 42 | /**
 43 |  * Converte da HSL a RGB.
 44 |  * @see https://gist.github.com/mjackson/5311256
 45 |  *
 46 |  * @param      {number}                   h       hue 0-360
 47 |  * @param      {number}                   s       saturaion 0-100
 48 |  * @param      {(Function|number)}        l       luminance 0-100
 49 |  * @return     {Array}  un array con R(0-255) G(0-255) B(0-255)
 50 |  */
 51 | function hslToRgb(h, s, l) {
 52 |     let r, g, b;
 53 |     [h, s, l] = [limit(h, 0, 360) / 360, limit(s, 0, 100) / 100, limit(l, 0, 100) / 100];
 54 | 
 55 |     if (s == 0) {
 56 |         r = g = b = l; // achromatic
 57 |     } else {
 58 |         const hue2rgb = (p, q, t) => {
 59 |             if (t < 0) t += 1;
 60 |             if (t > 1) t -= 1;
 61 |             if (t < 1 / 6) return p + (q - p) * 6 * t;
 62 |             if (t < 1 / 2) return q;
 63 |             if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
 64 |             return p;
 65 |         };
 66 | 
 67 |         const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
 68 |         const p = (2 * l) - q;
 69 | 
 70 |         r = hue2rgb(p, q, h + (1 / 3));
 71 |         g = hue2rgb(p, q, h);
 72 |         b = hue2rgb(p, q, h - (1 / 3));
 73 |     }
 74 | 
 75 |     return [r * 255, g * 255, b * 255].map(Math.round);
 76 | }
 77 | 
 78 | /**
 79 |  * Converte da RGB a HSL.
 80 |  * @see https://gist.github.com/mjackson/5311256
 81 |  * 
 82 |  * @param      {number}  r       rosso 0-255
 83 |  * @param      {number}  g       veerde 0-255
 84 |  * @param      {number}  b       blu 0-255
 85 |  * @return     {Array}   un array con H(0-360) S(0-100) L(0-100)
 86 |  */
 87 | function rgbToHsl(r, g, b) {
 88 |     [r, g, b] = [limit(r, 0, 255) / 255, limit(g, 0, 255) / 255, limit(b, 0, 255) / 255];
 89 | 
 90 |     const max = Math.max(r, g, b),
 91 |         min = Math.min(r, g, b);
 92 |     let h, s, l = (max + min) / 2;
 93 | 
 94 |     if (max == min) {
 95 |         h = s = 0; // achromatic
 96 |     } else {
 97 |         const d = max - min;
 98 |         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
 99 | 
100 |         switch (max) {
101 |             case r:
102 |                 h = ((g - b) / d) + (g < b ? 6 : 0);
103 |                 break;
104 |             case g:
105 |                 h = ((b - r) / d) + 2;
106 |                 break;
107 |             case b:
108 |                 h = ((r - g) / d) + 4;
109 |                 break;
110 |         }
111 | 
112 |         h /= 6;
113 |     }
114 | 
115 |     return [h * 360, s * 100, l * 100].map(Math.round);
116 | }
117 | 
118 | 
119 | /**
120 |  * Converte from RGB to HSV.
121 |  * 
122 |  * @param      {number}  r       rosso 0-255
123 |  * @param      {number}  g       veerde 0-255
124 |  * @param      {number}  b       blu 0-255
125 |  * @return     {Array}   un array con H(0-360) S(0-100) V(0-100)
126 |  */
127 | function rgbToHsv(r, g, b) {
128 |     [r, g, b] = [limit(r, 0, 255) / 255, limit(g, 0, 255) / 255, limit(b, 0, 255) / 255];
129 |     const max = Math.max(r, g, b),
130 |         min = Math.min(r, g, b);
131 |     let h, s, v = max;
132 |     let d = max - min;
133 |     s = max === 0 ? 0 : d / max;
134 |     if(max == min) {
135 |         h = 0;
136 |     } else {
137 |         switch(max) {
138 |             case r: h = (g - b) / d + (g < b ? 6 : 0); break;
139 |             case g: h = (b - r) / d + 2; break;
140 |             case b: h = (r - g) / d + 4; break;
141 |         }
142 |         h /= 6;
143 |     }
144 |     return [h, s, v];
145 | }
146 | 
147 | function rgbToInt(r, g, b) {
148 |     return (r << 16) | (g << 8) | b;
149 | }
150 | 
151 | function intToRgb(int) {
152 |     return [
153 |         (int >> 16) & 255, //r
154 |         (int >> 8) & 255, //g
155 |         int & 255 //b
156 |     ];
157 | }
158 | 
159 | /**
160 |  * @deprecated  usare cssColorToRgba()
161 |  * @param {string} color 
162 |  */
163 | function cssColorToRgb(color) {
164 |     if (color) {
165 |         const colorByName = COLOR_NAMES[color.toString().toLowerCase()];
166 |         // considero sia il formato esteso #RRGGGBB che quello corto #RGB
167 |         // provo a estrarre i valori da colorByName solo se questo è valorizzato, altrimenti uso direttamente color
168 |         const [, , , r, g, b, , rr, gg, bb] = /^\s*#?((([0-9A-F])([0-9A-F])([0-9A-F]))|(([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})))\s*$/i.exec(colorByName || color) || [];
169 |         if (r !== undefined) {
170 |             return [
171 |                 parseInt(r + r, 16),
172 |                 parseInt(g + g, 16),
173 |                 parseInt(b + b, 16)
174 |             ];
175 |         } else if (rr !== undefined) {
176 |             return [
177 |                 parseInt(rr, 16),
178 |                 parseInt(gg, 16),
179 |                 parseInt(bb, 16)
180 |             ];
181 |         }
182 |     }
183 |     return undefined;
184 | }
185 | 
186 | function cssColorToRgba(color) {
187 |     if (color) {
188 |         const colorByName = COLOR_NAMES[color.toString().toLowerCase()];
189 |         // considero sia il formato esteso #RRGGGBB[AA] che quello corto #RGB[A]
190 |         // provo a estrarre i valori da colorByName solo se questo è valorizzato, altrimenti uso direttamente color
191 |         const [, , , r, g, b, a, , rr, gg, bb, aa] = /^\s*#?((([0-9A-F])([0-9A-F])([0-9A-F])([0-9A-F])?)|(([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})?))\s*$/i.exec(colorByName || color) || [];
192 |         if (r !== undefined) {
193 |             return [
194 |                 parseInt(r + r, 16),
195 |                 parseInt(g + g, 16),
196 |                 parseInt(b + b, 16),
197 |                 a ? +((parseInt(a + a, 16)) / 255).toFixed(2) : 1
198 |             ];
199 |         } else if (rr !== undefined) {
200 |             return [
201 |                 parseInt(rr, 16),
202 |                 parseInt(gg, 16),
203 |                 parseInt(bb, 16),
204 |                 aa ? +((parseInt(aa, 16)) / 255).toFixed(2) : 1
205 |             ];
206 |         }
207 |     }
208 |     return undefined;
209 | }
210 | 
211 | /**
212 |  * @deprecated  usare cssRgbaToRgba()
213 |  * @param {string} rgb 
214 |  */
215 | function cssRgbToRgb(rgb) {
216 |     if (rgb) {
217 |         // rgb(int, int, int)
218 |         const [m, r, g, b] = /^rgb\((\d+)[\s,](\d+)[\s,](\d+)\)/i.exec(rgb) || [];
219 |         return m ? [limit(r, 0, 255), limit(g, 0, 255), limit(b, 0, 255)] : undefined;
220 |     }
221 |     return undefined;
222 | }
223 | 
224 | function cssRgbaToRgba(rgba) {
225 |     if (rgba) {
226 |         // in CSS Colors Level 4 rgba() è un alias di rgb()
227 |         // rgb[a](int, int, int[, dec])
228 |         const [m, r, g, b, , a] = /^rgba?\((\d+)\s*[\s,]\s*(\d+)\s*[\s,]\s*(\d+)(\s*[\s,]\s*(\d*(.\d+)?))?\)/i.exec(rgba) || [];
229 |         return m ? [limit(r, 0, 255), limit(g, 0, 255), limit(b, 0, 255), limit(nvl(a, 1), 0, 1)] : undefined;
230 |     }
231 |     return undefined;
232 | }
233 | 
234 | /**
235 |  * Converte il colore in ingresso nel formato [r,g,b].
236 |  * Color può assumere questi valori:
237 |  * - array con [r,g,b] (viene ritornato così come è)
238 |  * - nome del colore
239 |  * - colore nel formato RGB HEX sia compatto che esteso
240 |  *
241 |  * @param      {string|array}    color   Il colore da convertire
242 |  * @return     {array}  colore nel formato [r,g,b] o undefined se non valido
243 |  */
244 | function parseColorToRgb(color) {
245 |     if (Array.isArray(color)) {
246 |         color = [limit(color[0], 0, 255), limit(color[1], 0, 255), limit(color[2], 0, 255)];
247 |         return color;
248 |     } else {
249 |         return cssColorToRgb(color) || cssRgbToRgb(color);
250 |     }
251 | }
252 | 
253 | function parseColorToRgba(color) {
254 |     if (Array.isArray(color)) {
255 |         color = [
256 |             limit(color[0], 0, 255),
257 |             limit(color[1], 0, 255),
258 |             limit(color[2], 0, 255),
259 |             limit(nvl(color[3], 1), 0, 1)
260 |         ];
261 |         return color;
262 |     } else {
263 |         const parsed = cssColorToRgba(color) || cssRgbaToRgba(color);
264 |         if (parsed && parsed.length === 3) {
265 |             parsed.push(1);
266 |         }
267 |         return parsed;
268 |     }
269 | }
270 | 
271 | /**
272 |  * @deprecated  usare cssHslaToHsla()
273 |  * @param {string} hsl 
274 |  */
275 | function cssHslToHsl(hsl) {
276 |     if (hsl) {
277 |         // hsl(int, int, int)
278 |         const [m, h, s, l] = /^hsl\((\d+)[\s,](\d+)[\s,](\d+)\)/i.exec(hsl) || [];
279 |         return m ? [limit(h, 0, 360), limit(s, 0, 100), limit(l, 0, 100)] : undefined;
280 |     }
281 |     return undefined;
282 | }
283 | 
284 | function cssHslaToHsla(hsla) {
285 |     if (hsla) {
286 |         // in CSS Colors Level 4 hsla() è un alias di hsl()
287 |         // hsl[a](int, int, int[, dec])
288 |         const [m, h, s, l, , a] = /^hsla?\((\d+)\s*[\s,]\s*(\d+)\s*[\s,]\s*(\d+)(\s*[\s,]\s*(\d*(.\d+)?))?\)/i.exec(hsla) || [];
289 |         return m ? [limit(h, 0, 255), limit(s, 0, 255), limit(l, 0, 255), limit(nvl(a, 1), 0, 1)] : undefined;
290 |     }
291 |     return undefined;
292 | }
293 | 
294 | function parseColorToHsl(color) {
295 |     if (Array.isArray(color)) {
296 |         color = [limit(color[0], 0, 360), limit(color[1], 0, 100), limit(color[2], 0, 100)];
297 |         return color;
298 |     } else {
299 |         return cssHslToHsl(color);
300 |     }
301 | }
302 | 
303 | function parseColorToHsla(color) {
304 |     if (Array.isArray(color)) {
305 |         color = [
306 |             limit(color[0], 0, 360),
307 |             limit(color[1], 0, 100),
308 |             limit(color[2], 0, 100),
309 |             limit(nvl(color[3], 1), 0, 1)
310 |         ];
311 |         return color;
312 |     } else {
313 |         const parsed = cssHslaToHsla(color);
314 |         if (parsed && parsed.length === 3) {
315 |             parsed.push(1);
316 |         }
317 |         return parsed;
318 |     }
319 | }
320 | 
321 | /**
322 |  * TODO: i formati *css4 devono restituire alpha solo se questa è < 1
323 |  * 
324 |  * outFormat può assumere questi valori:
325 |  * rgb (default), rgbcss, rgbcss4, rgba, rgbacss, hsl, hslcss, hslcss4, hsla, hslacss, hex, hexcss4, int
326 |  * 
327 |  * se outFormat è un oggetto (typeof 'object') gli vengono aggiunte tante proprietà 
328 |  * quanti sono i formati supportati e i rispettivi valori
329 |  * 
330 |  * @param   {any} color 
331 |  * @param   {String|Object} outFormat formato output
332 |  * @return  {String} colore formattato o undefined se non riconosciuto
333 |  */
334 | function parseColor(color, outFormat) {
335 |     outFormat = (outFormat || 'rgb');
336 |     if (color !== null && color !== undefined) {
337 |         let pp;
338 |         if ((pp = parseColorToRgba(color)) ||
339 |             ((pp = parseColorToHsla(color)) && (pp = [...hslToRgb(...pp), pp[3]]))) {
340 | 
341 |             // se outFormat è un plain object quindi {} oppure new Object()
342 |             // if (typeof outFormat === 'object') {
343 |             if (isPlainObject(outFormat)) {
344 |                 return ['rgb', 'rgbcss', 'rgbcss4', 'rgba', 'rgbacss',
345 |                     'hsl', 'hslcss', 'hslcss4', 'hsla', 'hslacss',
346 |                     'hex', 'hexcss4', 'int'].reduce((m, f) => { m[f] = formatColor(pp, f); return m; }, outFormat || {});
347 |             } else {
348 |                 // per sicurezza trasformo in stringa (potrebbe essere un numero)
349 |                 return formatColor(pp, outFormat.toString().toLowerCase());
350 |             }
351 |         }
352 |     }
353 | 
354 |     return undefined;
355 | }
356 | 
357 | /**
358 |  * 
359 |  * @private
360 |  * @param {Array} pp rgba
361 |  * @param {String} outFormat 
362 |  */
363 | function formatColor(pp, outFormat) {
364 |     switch (outFormat) {
365 |         case 'rgb':
366 |         default:
367 |             return pp.slice(0, 3);
368 |         case 'rgbcss':
369 |             return `rgb(${pp[0]}, ${pp[1]}, ${pp[2]})`;
370 |         case 'rgbcss4':
371 |             return `rgb(${pp[0]}, ${pp[1]}, ${pp[2]}, ${pp[3]})`;
372 |         case 'rgba':
373 |             return pp;
374 |         case 'rgbacss':
375 |             return `rgba(${pp[0]}, ${pp[1]}, ${pp[2]}, ${pp[3]})`;
376 |         case 'hsl':
377 |             return rgbToHsl(...pp);
378 |         case 'hslcss':
379 |             pp = rgbToHsl(...pp);
380 |             return `hsl(${pp[0]}, ${pp[1]}, ${pp[2]})`;
381 |         case 'hslcss4':
382 |             const hh = rgbToHsl(...pp);
383 |             return `hsl(${hh[0]}, ${hh[1]}, ${hh[2]}, ${pp[3]})`;
384 |         case 'hsla':
385 |             return [...rgbToHsl(...pp), pp[3]];
386 |         case 'hslacss':
387 |             const ha = rgbToHsl(...pp);
388 |             return `hsla(${ha[0]}, ${ha[1]}, ${ha[2]}, ${pp[3]})`;
389 |         case 'hex':
390 |             return rgbToHex(...pp);
391 |         case 'hexcss4':
392 |             return rgbToHex(...pp) + ('00' + parseInt(pp[3] * 255).toString(16)).slice(-2);
393 |         case 'int':
394 |             return rgbToInt(...pp);
395 |     }
396 | }
397 | 
398 | /**
399 |  * Più il risultato tende a 1 e più è luminoso.
400 |  * 
401 |  * @param       {number} r red
402 |  * @param       {number} g green
403 |  * @param       {number} b blue
404 |  * @return      {number} la luminosità da 0 (scuro) a 1 (chiaro)
405 |  */
406 | function getLuminance(r, g, b) {
407 |     r = r / 255;
408 |     r = r < 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
409 |     g = g / 255;
410 |     g = g < 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
411 |     b = b / 255;
412 |     b = b < 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
413 |     return (0.2126 * r) + (0.7152 * g) + (0.0722 * b);
414 | }
415 | 
416 | export {
417 |     COLOR_NAMES,
418 |     PALETTE_MATERIAL_500,
419 |     PALETTE_MATERIAL_CHROME,
420 |     rgbToHex,
421 |     hslToRgb,
422 |     rgbToHsl,
423 |     rgbToHsv,
424 |     rgbToInt,
425 |     intToRgb,
426 |     cssColorToRgb,
427 |     cssColorToRgba,
428 |     cssRgbToRgb,
429 |     cssRgbaToRgba,
430 |     parseColorToRgb,
431 |     parseColorToRgba,
432 |     cssHslToHsl,
433 |     cssHslaToHsla,
434 |     parseColorToHsl,
435 |     parseColorToHsla,
436 |     parseColor,
437 |     getLuminance,
438 |     limit,
439 |     ensureArray,
440 |     nvl
441 | };


--------------------------------------------------------------------------------
/webpack.common.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack'),
 2 |     CopyWebpackPlugin = require('copy-webpack-plugin'),
 3 |     CleanWebpackPlugin = require('clean-webpack-plugin');
 4 | 
 5 | const banner = `a-color-picker (https://github.com/narsenico/a-color-picker)
 6 | 
 7 | Copyright (c) 2017-2018, Gianfranco Caldi.
 8 | Released under the MIT License.`;
 9 | 
10 | module.exports = {
11 |     entry: {
12 |         acolorpicker: './src/acolorpicker.js'
13 |     },
14 |     output: {
15 |         path: __dirname + '/dist',
16 |         libraryTarget: 'umd',
17 |         library: 'AColorPicker',
18 |         umdNamedDefine: true,
19 |         globalObject: 'typeof self !== \'undefined\' ? self : this'
20 |     },
21 |     plugins: [
22 |         // pulisce le cartelle specificate in caso di successo nella compilazione
23 |         new CleanWebpackPlugin(['dist']),
24 |         // copio i file di definizione di typescript nella cartella di destinazione
25 |         new CopyWebpackPlugin([
26 |             {
27 |                 from: 'src/*.d.ts',
28 |                 to: '[name].ts',
29 |                 toType: 'template'
30 |             }
31 |         ]),
32 |         // aggiunge un banner (con il copyright) in cima al file prodotto
33 |         new webpack.BannerPlugin(banner)
34 |     ],
35 |     module: {
36 |         rules: [{
37 |             test: /acolorpicker\.css$/,
38 |             use: [
39 |                 {
40 |                     loader: 'to-string-loader'
41 |                 }, {
42 |                     loader: 'css-loader',
43 |                     options: {
44 |                         minimize: true
45 |                     }
46 |                 }
47 |             ]
48 |         }, {
49 |             test: /[^acolorpicker]\.css$/,
50 |             use: [
51 |                 {
52 |                     loader: 'style-loader'
53 |                 }, {
54 |                     loader: 'css-loader',
55 |                     options: {
56 |                         minimize: true
57 |                     }
58 |                 }
59 |             ],
60 |         }, {
61 |             test: /\.js$/,
62 |             exclude: /(node_modules)/,
63 |             use: {
64 |                 loader: 'babel-loader',
65 |                 options: {
66 |                     presets: ['env']
67 |                 }
68 |             }
69 |         }, {
70 |             test: /\.(html)$/,
71 |             use: {
72 |                 loader: 'html-loader',
73 |                 options: {
74 |                     minimize: true
75 |                 }
76 |             }
77 |         }]
78 |     }
79 | }


--------------------------------------------------------------------------------
/webpack.dev.js:
--------------------------------------------------------------------------------
 1 | const merge = require('webpack-merge'),
 2 |     HtmlWebpackPlugin = require('html-webpack-plugin'),
 3 | 	common = require('./webpack.common.js');
 4 | 
 5 | module.exports = merge(common, {
 6 |     mode: 'development',
 7 |     // da usare solo in sviluppo
 8 |     devtool: 'inline-source-map',
 9 |     devServer: {
10 |     	contentBase: 'dist/' // equivalente a webpack-dev-server --content-base ./dist
11 |     },
12 |     plugins: [
13 |         new HtmlWebpackPlugin({
14 |             title: '[TEST] a-color-picker',
15 |             filename: 'test.html',
16 |             template: 'src/test.html'
17 |         })
18 |     ]
19 | })


--------------------------------------------------------------------------------
/webpack.docs.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack'),
 2 |     HtmlWebpackPlugin = require('html-webpack-plugin'),
 3 |     CleanWebpackPlugin = require('clean-webpack-plugin');
 4 | 
 5 | module.exports = {
 6 |     entry: {
 7 |         docs: './src/docs/docs.js'
 8 |     },
 9 |     output: {
10 |         path: __dirname + '/docs',
11 |         filename: '[name].js'
12 |     },
13 |     mode: 'production',
14 |     plugins: [
15 |         // pulisce le cartelle specificate in caso di successo nella compilazione
16 |         new CleanWebpackPlugin(['docs']),
17 |         // usa un file come template
18 |         new HtmlWebpackPlugin({
19 |             filename: 'index.html',
20 |             template: './src/docs/index.html'
21 |         }),
22 |         // new UglifyJSPlugin(),
23 |         new webpack.DefinePlugin({
24 |             'process.env': {
25 |                 'NODE_ENV': JSON.stringify('production')
26 |             }
27 |         })
28 |     ],
29 |     module: {
30 |         rules: [{
31 |             test: /acolorpicker\.css$/,
32 |             use: ['to-string-loader', 'css-loader']
33 |         }, {
34 |             test: /[^acolorpicker]\.css$/,
35 |             use: [
36 |                 {
37 |                     loader: 'style-loader'
38 |                 }, {
39 |                     loader: 'css-loader',
40 |                     options: {
41 |                         minimize: true
42 |                     }
43 |                 }
44 |             ]
45 |         }, {
46 |             test: /\.js$/,
47 |             exclude: /(node_modules)/,
48 |             use: {
49 |                 loader: 'babel-loader',
50 |                 options: {
51 |                     presets: ['env']
52 |                 }
53 |             }
54 |         }, {
55 |             test: /\.svg$/,
56 |             use: {
57 |                 loader: 'svg-url-loader',
58 |                 options: {
59 |                     stripdeclarations: true
60 |                 }
61 |             }
62 |         }, {
63 |             test: /\.(html)$/,
64 |             use: {
65 |                 loader: 'html-loader',
66 |                 options: {
67 |                     minimize: true
68 |                 }
69 |             }
70 |         }]
71 |     },
72 |     devtool: 'cheap-module-source-map',
73 |     devServer: {
74 |         contentBase: 'docs/' // equivalente a webpack-dev-server --content-base ./docs
75 |     },
76 | }


--------------------------------------------------------------------------------
/webpack.prod.js:
--------------------------------------------------------------------------------
 1 | const merge = require('webpack-merge'),
 2 | 	common = require('./webpack.common.js'),
 3 | 	webpack = require('webpack'),
 4 | 	UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 5 | 
 6 | module.exports = merge(common, {
 7 | 	mode: 'production',
 8 |     devtool: 'cheap-module-source-map',
 9 |     plugins: [
10 |     	new UglifyJSPlugin(),
11 |     	new webpack.DefinePlugin({
12 |     		'process.env': {
13 |     			'NODE_ENV': JSON.stringify('production')
14 |     		}
15 |     	})
16 |     ]
17 | })


--------------------------------------------------------------------------------