@digipair/skill-web-jsoneditor 0.94.0-8 → 0.95.1

package/{dist/vanilla-picker.esm.js → vanilla-picker.esm.js}

@@ -76,159 +76,159 @@ String.prototype.padStart = String.prototype.padStart || function(len, pad) {
     return str;
 };
 var colorNames = {
-    cb: '0f8ff',
-    tqw: 'aebd7',
-    q: '-ffff',
-    qmrn: '7fffd4',
-    zr: '0ffff',
-    bg: '5f5dc',
-    bsq: 'e4c4',
-    bck: '---',
-    nch: 'ebcd',
-    b: '--ff',
-    bvt: '8a2be2',
-    brwn: 'a52a2a',
-    brw: 'deb887',
-    ctb: '5f9ea0',
-    hrt: '7fff-',
-    chcT: 'd2691e',
-    cr: '7f50',
-    rnw: '6495ed',
-    crns: '8dc',
-    crms: 'dc143c',
-    cn: '-ffff',
-    Db: '--8b',
-    Dcn: '-8b8b',
-    Dgnr: 'b8860b',
-    Dgr: 'a9a9a9',
-    Dgrn: '-64-',
-    Dkhk: 'bdb76b',
-    Dmgn: '8b-8b',
-    Dvgr: '556b2f',
-    Drng: '8c-',
-    Drch: '9932cc',
-    Dr: '8b--',
-    Dsmn: 'e9967a',
-    Dsgr: '8fbc8f',
-    DsTb: '483d8b',
-    DsTg: '2f4f4f',
-    Dtrq: '-ced1',
-    Dvt: '94-d3',
-    ppnk: '1493',
-    pskb: '-bfff',
-    mgr: '696969',
-    grb: '1e90ff',
-    rbrc: 'b22222',
-    rwht: 'af0',
-    stg: '228b22',
-    chs: '-ff',
-    gnsb: 'dcdcdc',
-    st: '8f8ff',
-    g: 'd7-',
-    gnr: 'daa520',
-    gr: '808080',
-    grn: '-8-0',
-    grnw: 'adff2f',
-    hnw: '0fff0',
-    htpn: '69b4',
-    nnr: 'cd5c5c',
-    ng: '4b-82',
-    vr: '0',
-    khk: '0e68c',
-    vnr: 'e6e6fa',
-    nrb: '0f5',
-    wngr: '7cfc-',
-    mnch: 'acd',
-    Lb: 'add8e6',
-    Lcr: '08080',
-    Lcn: 'e0ffff',
-    Lgnr: 'afad2',
-    Lgr: 'd3d3d3',
-    Lgrn: '90ee90',
-    Lpnk: 'b6c1',
-    Lsmn: 'a07a',
-    Lsgr: '20b2aa',
-    Lskb: '87cefa',
-    LsTg: '778899',
-    Lstb: 'b0c4de',
-    Lw: 'e0',
-    m: '-ff-',
-    mgrn: '32cd32',
-    nn: 'af0e6',
-    mgnt: '-ff',
-    mrn: '8--0',
-    mqm: '66cdaa',
-    mmb: '--cd',
-    mmrc: 'ba55d3',
-    mmpr: '9370db',
-    msg: '3cb371',
-    mmsT: '7b68ee',
-    '': '-fa9a',
-    mtr: '48d1cc',
-    mmvt: 'c71585',
-    mnLb: '191970',
-    ntc: '5fffa',
-    mstr: 'e4e1',
-    mccs: 'e4b5',
-    vjw: 'dead',
-    nv: '--80',
-    c: 'df5e6',
-    v: '808-0',
-    vrb: '6b8e23',
-    rng: 'a5-',
-    rngr: '45-',
-    rch: 'da70d6',
-    pgnr: 'eee8aa',
-    pgrn: '98fb98',
-    ptrq: 'afeeee',
-    pvtr: 'db7093',
-    ppwh: 'efd5',
-    pchp: 'dab9',
-    pr: 'cd853f',
-    pnk: 'c0cb',
-    pm: 'dda0dd',
-    pwrb: 'b0e0e6',
-    prp: '8-080',
-    cc: '663399',
-    r: '--',
-    sbr: 'bc8f8f',
-    rb: '4169e1',
-    sbrw: '8b4513',
-    smn: 'a8072',
-    nbr: '4a460',
-    sgrn: '2e8b57',
-    ssh: '5ee',
-    snn: 'a0522d',
-    svr: 'c0c0c0',
-    skb: '87ceeb',
-    sTb: '6a5acd',
-    sTgr: '708090',
-    snw: 'afa',
-    n: '-ff7f',
-    stb: '4682b4',
-    tn: 'd2b48c',
-    t: '-8080',
-    thst: 'd8bfd8',
-    tmT: '6347',
-    trqs: '40e0d0',
-    vt: 'ee82ee',
-    whT: '5deb3',
-    wht: '',
-    hts: '5f5f5',
-    w: '-',
-    wgrn: '9acd32'
+    cb: "0f8ff",
+    tqw: "aebd7",
+    q: "-ffff",
+    qmrn: "7fffd4",
+    zr: "0ffff",
+    bg: "5f5dc",
+    bsq: "e4c4",
+    bck: "---",
+    nch: "ebcd",
+    b: "--ff",
+    bvt: "8a2be2",
+    brwn: "a52a2a",
+    brw: "deb887",
+    ctb: "5f9ea0",
+    hrt: "7fff-",
+    chcT: "d2691e",
+    cr: "7f50",
+    rnw: "6495ed",
+    crns: "8dc",
+    crms: "dc143c",
+    cn: "-ffff",
+    Db: "--8b",
+    Dcn: "-8b8b",
+    Dgnr: "b8860b",
+    Dgr: "a9a9a9",
+    Dgrn: "-64-",
+    Dkhk: "bdb76b",
+    Dmgn: "8b-8b",
+    Dvgr: "556b2f",
+    Drng: "8c-",
+    Drch: "9932cc",
+    Dr: "8b--",
+    Dsmn: "e9967a",
+    Dsgr: "8fbc8f",
+    DsTb: "483d8b",
+    DsTg: "2f4f4f",
+    Dtrq: "-ced1",
+    Dvt: "94-d3",
+    ppnk: "1493",
+    pskb: "-bfff",
+    mgr: "696969",
+    grb: "1e90ff",
+    rbrc: "b22222",
+    rwht: "af0",
+    stg: "228b22",
+    chs: "-ff",
+    gnsb: "dcdcdc",
+    st: "8f8ff",
+    g: "d7-",
+    gnr: "daa520",
+    gr: "808080",
+    grn: "-8-0",
+    grnw: "adff2f",
+    hnw: "0fff0",
+    htpn: "69b4",
+    nnr: "cd5c5c",
+    ng: "4b-82",
+    vr: "0",
+    khk: "0e68c",
+    vnr: "e6e6fa",
+    nrb: "0f5",
+    wngr: "7cfc-",
+    mnch: "acd",
+    Lb: "add8e6",
+    Lcr: "08080",
+    Lcn: "e0ffff",
+    Lgnr: "afad2",
+    Lgr: "d3d3d3",
+    Lgrn: "90ee90",
+    Lpnk: "b6c1",
+    Lsmn: "a07a",
+    Lsgr: "20b2aa",
+    Lskb: "87cefa",
+    LsTg: "778899",
+    Lstb: "b0c4de",
+    Lw: "e0",
+    m: "-ff-",
+    mgrn: "32cd32",
+    nn: "af0e6",
+    mgnt: "-ff",
+    mrn: "8--0",
+    mqm: "66cdaa",
+    mmb: "--cd",
+    mmrc: "ba55d3",
+    mmpr: "9370db",
+    msg: "3cb371",
+    mmsT: "7b68ee",
+    "": "-fa9a",
+    mtr: "48d1cc",
+    mmvt: "c71585",
+    mnLb: "191970",
+    ntc: "5fffa",
+    mstr: "e4e1",
+    mccs: "e4b5",
+    vjw: "dead",
+    nv: "--80",
+    c: "df5e6",
+    v: "808-0",
+    vrb: "6b8e23",
+    rng: "a5-",
+    rngr: "45-",
+    rch: "da70d6",
+    pgnr: "eee8aa",
+    pgrn: "98fb98",
+    ptrq: "afeeee",
+    pvtr: "db7093",
+    ppwh: "efd5",
+    pchp: "dab9",
+    pr: "cd853f",
+    pnk: "c0cb",
+    pm: "dda0dd",
+    pwrb: "b0e0e6",
+    prp: "8-080",
+    cc: "663399",
+    r: "--",
+    sbr: "bc8f8f",
+    rb: "4169e1",
+    sbrw: "8b4513",
+    smn: "a8072",
+    nbr: "4a460",
+    sgrn: "2e8b57",
+    ssh: "5ee",
+    snn: "a0522d",
+    svr: "c0c0c0",
+    skb: "87ceeb",
+    sTb: "6a5acd",
+    sTgr: "708090",
+    snw: "afa",
+    n: "-ff7f",
+    stb: "4682b4",
+    tn: "d2b48c",
+    t: "-8080",
+    thst: "d8bfd8",
+    tmT: "6347",
+    trqs: "40e0d0",
+    vt: "ee82ee",
+    whT: "5deb3",
+    wht: "",
+    hts: "5f5f5",
+    w: "-",
+    wgrn: "9acd32"
 };
 function printNum(num) {
     var decs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-    var str = decs > 0 ? num.toFixed(decs).replace(/0+$/, '').replace(/\.$/, '') : num.toString();
-    return str || '0';
+    var str = decs > 0 ? num.toFixed(decs).replace(/0+$/, "").replace(/\.$/, "") : num.toString();
+    return str || "0";
 }
 var Color = function() {
     function Color(r, g, b, a) {
         classCallCheck(this, Color);
         var that = this;
         function parseString(input) {
-            if (input.startsWith('hsl')) {
+            if (input.startsWith("hsl")) {
                 var _input$match$map = input.match(/([\-\d\.e]+)/g).map(Number), _input$match$map2 = slicedToArray(_input$match$map, 4), h = _input$match$map2[0], s = _input$match$map2[1], l = _input$match$map2[2], _a = _input$match$map2[3];
                 if (_a === undefined) {
                     _a = 1;
@@ -242,7 +242,7 @@ var Color = function() {
                     l,
                     _a
                 ];
-            } else if (input.startsWith('rgb')) {
+            } else if (input.startsWith("rgb")) {
                 var _input$match$map3 = input.match(/([\-\d\.e]+)/g).map(Number), _input$match$map4 = slicedToArray(_input$match$map3, 4), _r = _input$match$map4[0], _g = _input$match$map4[1], _b = _input$match$map4[2], _a2 = _input$match$map4[3];
                 if (_a2 === undefined) {
                     _a2 = 1;
@@ -254,7 +254,7 @@ var Color = function() {
                     _a2
                 ];
             } else {
-                if (input.startsWith('#')) {
+                if (input.startsWith("#")) {
                     that.rgba = Color.hexToRgb(input);
                 } else {
                     that.rgba = Color.nameToRgb(input) || Color.hexToRgb(input);
@@ -265,7 +265,7 @@ var Color = function() {
         else if (Array.isArray(r)) {
             this.rgba = r;
         } else if (b === undefined) {
-            var color = r && '' + r;
+            var color = r && "" + r;
             if (color) {
                 parseString(color.toLowerCase());
             }
@@ -280,16 +280,16 @@ var Color = function() {
     }
     createClass(Color, [
         {
-            key: 'printRGB',
+            key: "printRGB",
             value: function printRGB(alpha) {
                 var rgb = alpha ? this.rgba : this.rgba.slice(0, 3), vals = rgb.map(function(x, i) {
                     return printNum(x, i === 3 ? 3 : 0);
                 });
-                return alpha ? 'rgba(' + vals + ')' : 'rgb(' + vals + ')';
+                return alpha ? "rgba(" + vals + ")" : "rgb(" + vals + ")";
             }
         },
         {
-            key: 'printHSL',
+            key: "printHSL",
             value: function printHSL(alpha) {
                 var mults = [
                     360,
@@ -297,32 +297,32 @@ var Color = function() {
                     100,
                     1
                 ], suff = [
-                    '',
-                    '%',
-                    '%',
-                    ''
+                    "",
+                    "%",
+                    "%",
+                    ""
                 ];
                 var hsl = alpha ? this.hsla : this.hsla.slice(0, 3), vals = hsl.map(function(x, i) {
                     return printNum(x * mults[i], i === 3 ? 3 : 1) + suff[i];
                 });
-                return alpha ? 'hsla(' + vals + ')' : 'hsl(' + vals + ')';
+                return alpha ? "hsla(" + vals + ")" : "hsl(" + vals + ")";
             }
         },
         {
-            key: 'printHex',
+            key: "printHex",
             value: function printHex(alpha) {
                 var hex = this.hex;
                 return alpha ? hex : hex.substring(0, 7);
             }
         },
         {
-            key: 'rgba',
+            key: "rgba",
             get: function get() {
                 if (this._rgba) {
                     return this._rgba;
                 }
                 if (!this._hsla) {
-                    throw new Error('No color is set');
+                    throw new Error("No color is set");
                 }
                 return this._rgba = Color.hslToRgb(this._hsla);
             },
@@ -335,25 +335,25 @@ var Color = function() {
             }
         },
         {
-            key: 'rgbString',
+            key: "rgbString",
             get: function get() {
                 return this.printRGB();
             }
         },
         {
-            key: 'rgbaString',
+            key: "rgbaString",
             get: function get() {
                 return this.printRGB(true);
             }
         },
         {
-            key: 'hsla',
+            key: "hsla",
             get: function get() {
                 if (this._hsla) {
                     return this._hsla;
                 }
                 if (!this._rgba) {
-                    throw new Error('No color is set');
+                    throw new Error("No color is set");
                 }
                 return this._hsla = Color.rgbToHsl(this._rgba);
             },
@@ -366,26 +366,26 @@ var Color = function() {
             }
         },
         {
-            key: 'hslString',
+            key: "hslString",
             get: function get() {
                 return this.printHSL();
             }
         },
         {
-            key: 'hslaString',
+            key: "hslaString",
             get: function get() {
                 return this.printHSL(true);
             }
         },
         {
-            key: 'hex',
+            key: "hex",
             get: function get() {
                 var rgb = this.rgba, hex = rgb.map(function(x, i) {
                     return i < 3 ? x.toString(16) : Math.round(x * 255).toString(16);
                 });
-                return '#' + hex.map(function(x) {
-                    return x.padStart(2, '0');
-                }).join('');
+                return "#" + hex.map(function(x) {
+                    return x.padStart(2, "0");
+                }).join("");
             },
             set: function set(hex) {
                 this.rgba = Color.hexToRgb(hex);
@@ -393,11 +393,11 @@ var Color = function() {
         }
     ], [
         {
-            key: 'hexToRgb',
+            key: "hexToRgb",
             value: function hexToRgb(input) {
-                var hex = (input.startsWith('#') ? input.slice(1) : input).replace(/^(\w{3})$/, '$1F').replace(/^(\w)(\w)(\w)(\w)$/, '$1$1$2$2$3$3$4$4').replace(/^(\w{6})$/, '$1FF');
+                var hex = (input.startsWith("#") ? input.slice(1) : input).replace(/^(\w{3})$/, "$1F").replace(/^(\w)(\w)(\w)(\w)$/, "$1$1$2$2$3$3$4$4").replace(/^(\w{6})$/, "$1FF");
                 if (!hex.match(/^([0-9a-fA-F]{8})$/)) {
-                    throw new Error('Unknown hex color; ' + input);
+                    throw new Error("Unknown hex color; " + input);
                 }
                 var rgba = hex.match(/^(\w\w)(\w\w)(\w\w)(\w\w)$/).slice(1).map(function(x) {
                     return parseInt(x, 16);
@@ -407,14 +407,14 @@ var Color = function() {
             }
         },
         {
-            key: 'nameToRgb',
+            key: "nameToRgb",
             value: function nameToRgb(input) {
-                var hash = input.toLowerCase().replace('at', 'T').replace(/[aeiouyldf]/g, '').replace('ght', 'L').replace('rk', 'D').slice(-5, 4), hex = colorNames[hash];
-                return hex === undefined ? hex : Color.hexToRgb(hex.replace(/\-/g, '00').padStart(6, 'f'));
+                var hash = input.toLowerCase().replace("at", "T").replace(/[aeiouyldf]/g, "").replace("ght", "L").replace("rk", "D").slice(-5, 4), hex = colorNames[hash];
+                return hex === undefined ? hex : Color.hexToRgb(hex.replace(/\-/g, "00").padStart(6, "f"));
             }
         },
         {
-            key: 'rgbToHsl',
+            key: "rgbToHsl",
             value: function rgbToHsl(_ref) {
                 var _ref2 = slicedToArray(_ref, 4), r = _ref2[0], g = _ref2[1], b = _ref2[2], a = _ref2[3];
                 r /= 255;
@@ -449,7 +449,7 @@ var Color = function() {
             }
         },
         {
-            key: 'hslToRgb',
+            key: "hslToRgb",
             value: function hslToRgb(_ref3) {
                 var _ref4 = slicedToArray(_ref3, 4), h = _ref4[0], s = _ref4[1], l = _ref4[2], a = _ref4[3];
                 var r = void 0, g = void 0, b = void 0;
@@ -488,7 +488,7 @@ var EventBucket = function() {
     }
     createClass(EventBucket, [
         {
-            key: 'add',
+            key: "add",
             value: function add(target, type, handler) {
                 target.addEventListener(type, handler, false);
                 this._events.push({
@@ -499,7 +499,7 @@ var EventBucket = function() {
             }
         },
         {
-            key: 'remove',
+            key: "remove",
             value: function remove(target, type, handler) {
                 this._events = this._events.filter(function(e) {
                     var isMatch = true;
@@ -520,7 +520,7 @@ var EventBucket = function() {
             }
         },
         {
-            key: 'destroy',
+            key: "destroy",
             value: function destroy() {
                 this._events.forEach(function(e) {
                     return EventBucket._doRemove(e.target, e.type, e.handler);
@@ -530,7 +530,7 @@ var EventBucket = function() {
         }
     ], [
         {
-            key: '_doRemove',
+            key: "_doRemove",
             value: function _doRemove(target, type, handler) {
                 target.removeEventListener(type, handler, false);
             }
@@ -539,7 +539,7 @@ var EventBucket = function() {
     return EventBucket;
 }();
 function parseHTML(htmlString) {
-    var div = document.createElement('div');
+    var div = document.createElement("div");
     div.innerHTML = htmlString;
     return div.firstElementChild;
 }
@@ -575,27 +575,27 @@ function dragTrack(eventBucket, area, callback) {
             dragging = false;
         }
     }
-    eventBucket.add(area, 'mousedown', function(e) {
+    eventBucket.add(area, "mousedown", function(e) {
         onMouse(e, true);
     });
-    eventBucket.add(area, 'touchstart', function(e) {
+    eventBucket.add(area, "touchstart", function(e) {
         onTouch(e, true);
     });
-    eventBucket.add(window, 'mousemove', onMouse);
-    eventBucket.add(area, 'touchmove', onTouch);
-    eventBucket.add(window, 'mouseup', function(e) {
+    eventBucket.add(window, "mousemove", onMouse);
+    eventBucket.add(area, "touchmove", onTouch);
+    eventBucket.add(window, "mouseup", function(e) {
         dragging = false;
     });
-    eventBucket.add(area, 'touchend', function(e) {
+    eventBucket.add(area, "touchend", function(e) {
         dragging = false;
     });
-    eventBucket.add(area, 'touchcancel', function(e) {
+    eventBucket.add(area, "touchcancel", function(e) {
         dragging = false;
     });
 }
-var BG_TRANSP = 'linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0 / 2em 2em,\n                   linear-gradient(45deg, lightgrey 25%,       white 25%,       white 75%, lightgrey 75%) 1em 1em / 2em 2em';
+var BG_TRANSP = "linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0 / 2em 2em,\n                   linear-gradient(45deg, lightgrey 25%,       white 25%,       white 75%, lightgrey 75%) 1em 1em / 2em 2em";
 var HUES = 360;
-var EVENT_KEY = 'keydown', EVENT_CLICK_OUTSIDE = 'mousedown', EVENT_TAB_MOVE = 'focusin';
+var EVENT_KEY = "keydown", EVENT_CLICK_OUTSIDE = "mousedown", EVENT_TAB_MOVE = "focusin";
 function $(selector, context) {
     return (context || document).querySelector(selector);
 }
@@ -606,6 +606,9 @@ function stopEvent(e) {
 function onKey(bucket, target, keys, handler, stop) {
     bucket.add(target, EVENT_KEY, function(e) {
         if (keys.indexOf(e.key) >= 0) {
+            if (stop) {
+                stopEvent(e);
+            }
             handler(e);
         }
     });
@@ -614,13 +617,13 @@ var Picker = function() {
     function Picker(options) {
         classCallCheck(this, Picker);
         this.settings = {
-            popup: 'right',
-            layout: 'default',
+            popup: "right",
+            layout: "default",
             alpha: true,
             editor: true,
-            editorFormat: 'hex',
+            editorFormat: "hex",
             cancelButton: false,
-            defaultColor: '#0cf'
+            defaultColor: "#0cf"
         };
         this._events = new EventBucket();
         this.onChange = null;
@@ -631,7 +634,7 @@ var Picker = function() {
     }
     createClass(Picker, [
         {
-            key: 'setOptions',
+            key: "setOptions",
             value: function setOptions(options) {
                 var _this = this;
                 if (!options) {
@@ -640,6 +643,9 @@ var Picker = function() {
                 var settings = this.settings;
                 function transfer(source, target, skipKeys) {
                     for(var key in source){
+                        if (skipKeys && skipKeys.indexOf(key) >= 0) {
+                            continue;
+                        }
                         target[key] = source[key];
                     }
                 }
@@ -673,11 +679,11 @@ var Picker = function() {
                     var openProxy = function openProxy(e) {
                         return _this.openHandler(e);
                     };
-                    this._events.add(parent, 'click', openProxy);
+                    this._events.add(parent, "click", openProxy);
                     onKey(this._events, parent, [
-                        ' ',
-                        'Spacebar',
-                        'Enter'
+                        " ",
+                        "Spacebar",
+                        "Enter"
                     ], openProxy);
                     this._popupInited = true;
                 } else if (options.parent && !settings.popup) {
@@ -686,11 +692,11 @@ var Picker = function() {
             }
         },
         {
-            key: 'openHandler',
+            key: "openHandler",
             value: function openHandler(e) {
                 if (this.show()) {
                     e && e.preventDefault();
-                    this.settings.parent.style.pointerEvents = 'none';
+                    this.settings.parent.style.pointerEvents = "none";
                     var toFocus = e && e.type === EVENT_KEY ? this._domEdit : this.domElement;
                     setTimeout(function() {
                         return toFocus.focus();
@@ -702,7 +708,7 @@ var Picker = function() {
             }
         },
         {
-            key: 'closeHandler',
+            key: "closeHandler",
             value: function closeHandler(e) {
                 var event = e && e.type;
                 var doHide = false;
@@ -718,7 +724,7 @@ var Picker = function() {
                     doHide = true;
                 }
                 if (doHide && this.hide()) {
-                    this.settings.parent.style.pointerEvents = '';
+                    this.settings.parent.style.pointerEvents = "";
                     if (event !== EVENT_CLICK_OUTSIDE) {
                         this.settings.parent.focus();
                     }
@@ -729,7 +735,7 @@ var Picker = function() {
             }
         },
         {
-            key: 'movePopup',
+            key: "movePopup",
             value: function movePopup(options, open) {
                 this.closeHandler();
                 this.setOptions(options);
@@ -739,7 +745,7 @@ var Picker = function() {
             }
         },
         {
-            key: 'setColor',
+            key: "setColor",
             value: function setColor(color, silent) {
                 this._setColor(color, {
                     silent: silent
@@ -747,9 +753,9 @@ var Picker = function() {
             }
         },
         {
-            key: '_setColor',
+            key: "_setColor",
             value: function _setColor(color, flags) {
-                if (typeof color === 'string') {
+                if (typeof color === "string") {
                     color = color.trim();
                 }
                 if (!color) {
@@ -775,13 +781,13 @@ var Picker = function() {
             }
         },
         {
-            key: 'setColour',
+            key: "setColour",
             value: function setColour(colour, silent) {
                 this.setColor(colour, silent);
             }
         },
         {
-            key: 'show',
+            key: "show",
             value: function show() {
                 var parent = this.settings.parent;
                 if (!parent) {
@@ -795,25 +801,25 @@ var Picker = function() {
                 var html = this.settings.template || '<div class="picker_wrapper" tabindex="-1"><div class="picker_arrow"></div><div class="picker_hue picker_slider"><div class="picker_selector"></div></div><div class="picker_sl"><div class="picker_selector"></div></div><div class="picker_alpha picker_slider"><div class="picker_selector"></div></div><div class="picker_editor"><input aria-label="Type a color name or hex value"/></div><div class="picker_sample"></div><div class="picker_done"><button>Ok</button></div><div class="picker_cancel"><button>Cancel</button></div></div>';
                 var wrapper = parseHTML(html);
                 this.domElement = wrapper;
-                this._domH = $('.picker_hue', wrapper);
-                this._domSL = $('.picker_sl', wrapper);
-                this._domA = $('.picker_alpha', wrapper);
-                this._domEdit = $('.picker_editor input', wrapper);
-                this._domSample = $('.picker_sample', wrapper);
-                this._domOkay = $('.picker_done button', wrapper);
-                this._domCancel = $('.picker_cancel button', wrapper);
-                wrapper.classList.add('layout_' + this.settings.layout);
+                this._domH = $(".picker_hue", wrapper);
+                this._domSL = $(".picker_sl", wrapper);
+                this._domA = $(".picker_alpha", wrapper);
+                this._domEdit = $(".picker_editor input", wrapper);
+                this._domSample = $(".picker_sample", wrapper);
+                this._domOkay = $(".picker_done button", wrapper);
+                this._domCancel = $(".picker_cancel button", wrapper);
+                wrapper.classList.add("layout_" + this.settings.layout);
                 if (!this.settings.alpha) {
-                    wrapper.classList.add('no_alpha');
+                    wrapper.classList.add("no_alpha");
                 }
                 if (!this.settings.editor) {
-                    wrapper.classList.add('no_editor');
+                    wrapper.classList.add("no_editor");
                 }
                 if (!this.settings.cancelButton) {
-                    wrapper.classList.add('no_cancel');
+                    wrapper.classList.add("no_cancel");
                 }
                 this._ifPopup(function() {
-                    return wrapper.classList.add('popup');
+                    return wrapper.classList.add("popup");
                 });
                 this._setPosition();
                 if (this.colour) {
@@ -826,13 +832,13 @@ var Picker = function() {
             }
         },
         {
-            key: 'hide',
+            key: "hide",
             value: function hide() {
                 return this._toggleDOM(false);
             }
         },
         {
-            key: 'destroy',
+            key: "destroy",
             value: function destroy() {
                 this._events.destroy();
                 if (this.domElement) {
@@ -841,14 +847,14 @@ var Picker = function() {
             }
         },
         {
-            key: '_bindEvents',
+            key: "_bindEvents",
             value: function _bindEvents() {
                 var _this2 = this;
                 var that = this, dom = this.domElement, events = this._events;
                 function addEvent(target, type, handler) {
                     events.add(target, type, handler);
                 }
-                addEvent(dom, 'click', function(e) {
+                addEvent(dom, "click", function(e) {
                     return e.preventDefault();
                 });
                 dragTrack(events, this._domH, function(x, y) {
@@ -864,13 +870,13 @@ var Picker = function() {
                 }
                 var editInput = this._domEdit;
                 {
-                    addEvent(editInput, 'input', function(e) {
+                    addEvent(editInput, "input", function(e) {
                         that._setColor(this.value, {
                             fromEditor: true,
                             failSilently: true
                         });
                     });
-                    addEvent(editInput, 'focus', function(e) {
+                    addEvent(editInput, "focus", function(e) {
                         var input = this;
                         if (input.selectionStart === input.selectionEnd) {
                             input.select();
@@ -884,15 +890,15 @@ var Picker = function() {
                     addEvent(window, EVENT_CLICK_OUTSIDE, popupCloseProxy);
                     addEvent(window, EVENT_TAB_MOVE, popupCloseProxy);
                     onKey(events, dom, [
-                        'Esc',
-                        'Escape'
+                        "Esc",
+                        "Escape"
                     ], popupCloseProxy);
                     var timeKeeper = function timeKeeper(e) {
                         _this2.__containedEvent = e.timeStamp;
                     };
                     addEvent(dom, EVENT_CLICK_OUTSIDE, timeKeeper);
                     addEvent(dom, EVENT_TAB_MOVE, timeKeeper);
-                    addEvent(_this2._domCancel, 'click', popupCloseProxy);
+                    addEvent(_this2._domCancel, "click", popupCloseProxy);
                 });
                 var onDoneProxy = function onDoneProxy(e) {
                     _this2._ifPopup(function() {
@@ -902,29 +908,29 @@ var Picker = function() {
                         _this2.onDone(_this2.colour);
                     }
                 };
-                addEvent(this._domOkay, 'click', onDoneProxy);
+                addEvent(this._domOkay, "click", onDoneProxy);
                 onKey(events, dom, [
-                    'Enter'
+                    "Enter"
                 ], onDoneProxy);
             }
         },
         {
-            key: '_setPosition',
+            key: "_setPosition",
             value: function _setPosition() {
                 var parent = this.settings.parent, elm = this.domElement;
                 if (parent !== elm.parentNode) {
                     parent.appendChild(elm);
                 }
                 this._ifPopup(function(popup) {
-                    if (getComputedStyle(parent).position === 'static') {
-                        parent.style.position = 'relative';
+                    if (getComputedStyle(parent).position === "static") {
+                        parent.style.position = "relative";
                     }
-                    var cssClass = popup === true ? 'popup_right' : 'popup_' + popup;
+                    var cssClass = popup === true ? "popup_right" : "popup_" + popup;
                     [
-                        'popup_top',
-                        'popup_bottom',
-                        'popup_left',
-                        'popup_right'
+                        "popup_top",
+                        "popup_bottom",
+                        "popup_left",
+                        "popup_right"
                     ].forEach(function(c) {
                         if (c === cssClass) {
                             elm.classList.add(c);
@@ -937,7 +943,7 @@ var Picker = function() {
             }
         },
         {
-            key: '_setHSLA',
+            key: "_setHSLA",
             value: function _setHSLA(h, s, l, a, flags) {
                 flags = flags || {};
                 var col = this.colour, hsla = col.hsla;
@@ -959,19 +965,19 @@ var Picker = function() {
             }
         },
         {
-            key: '_updateUI',
+            key: "_updateUI",
             value: function _updateUI(flags) {
                 if (!this.domElement) {
                     return;
                 }
                 flags = flags || {};
-                var col = this.colour, hsl = col.hsla, cssHue = 'hsl(' + hsl[0] * HUES + ', 100%, 50%)', cssHSL = col.hslString, cssHSLA = col.hslaString;
-                var uiH = this._domH, uiSL = this._domSL, uiA = this._domA, thumbH = $('.picker_selector', uiH), thumbSL = $('.picker_selector', uiSL), thumbA = $('.picker_selector', uiA);
+                var col = this.colour, hsl = col.hsla, cssHue = "hsl(" + hsl[0] * HUES + ", 100%, 50%)", cssHSL = col.hslString, cssHSLA = col.hslaString;
+                var uiH = this._domH, uiSL = this._domSL, uiA = this._domA, thumbH = $(".picker_selector", uiH), thumbSL = $(".picker_selector", uiSL), thumbA = $(".picker_selector", uiA);
                 function posX(parent, child, relX) {
-                    child.style.left = relX * 100 + '%';
+                    child.style.left = relX * 100 + "%";
                 }
                 function posY(parent, child, relY) {
-                    child.style.top = relY * 100 + '%';
+                    child.style.top = relY * 100 + "%";
                 }
                 posX(uiH, thumbH, hsl[0]);
                 this._domSL.style.backgroundColor = this._domH.style.color = cssHue;
@@ -979,19 +985,19 @@ var Picker = function() {
                 posY(uiSL, thumbSL, 1 - hsl[2]);
                 uiSL.style.color = cssHSL;
                 posY(uiA, thumbA, 1 - hsl[3]);
-                var opaque = cssHSL, transp = opaque.replace('hsl', 'hsla').replace(')', ', 0)'), bg = 'linear-gradient(' + [
+                var opaque = cssHSL, transp = opaque.replace("hsl", "hsla").replace(")", ", 0)"), bg = "linear-gradient(" + [
                     opaque,
                     transp
-                ] + ')';
-                this._domA.style.background = bg + ', ' + BG_TRANSP;
+                ] + ")";
+                this._domA.style.background = bg + ", " + BG_TRANSP;
                 if (!flags.fromEditor) {
                     var format = this.settings.editorFormat, alpha = this.settings.alpha;
                     var value = void 0;
                     switch(format){
-                        case 'rgb':
+                        case "rgb":
                             value = col.printRGB(alpha);
                             break;
-                        case 'hsl':
+                        case "hsl":
                             value = col.printHSL(alpha);
                             break;
                         default:
@@ -1003,7 +1009,7 @@ var Picker = function() {
             }
         },
         {
-            key: '_ifPopup',
+            key: "_ifPopup",
             value: function _ifPopup(actionIf, actionElse) {
                 if (this.settings.parent && this.settings.popup) {
                     actionIf && actionIf(this.settings.popup);
@@ -1013,13 +1019,13 @@ var Picker = function() {
             }
         },
         {
-            key: '_toggleDOM',
+            key: "_toggleDOM",
             value: function _toggleDOM(toVisible) {
                 var dom = this.domElement;
                 if (!dom) {
                     return false;
                 }
-                var displayStyle = toVisible ? '' : 'none', toggle = dom.style.display !== displayStyle;
+                var displayStyle = toVisible ? "" : "none", toggle = dom.style.display !== displayStyle;
                 if (toggle) {
                     dom.style.display = displayStyle;
                 }
@@ -1030,7 +1036,7 @@ var Picker = function() {
     return Picker;
 }();
 {
-    var style = document.createElement('style');
+    var style = document.createElement("style");
     style.textContent = '.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_wrapper.no_editor .picker_editor{position:absolute;z-index:-1;opacity:0}.picker_wrapper.no_cancel .picker_cancel{display:none}.layout_default.picker_wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size:10px;width:25em;padding:.5em}.layout_default.picker_wrapper input,.layout_default.picker_wrapper button{font-size:1rem}.layout_default.picker_wrapper>*{margin:.5em}.layout_default.picker_wrapper::before{content:"";display:block;width:100%;height:0;order:1}.layout_default .picker_slider,.layout_default .picker_selector{padding:1em}.layout_default .picker_hue{width:100%}.layout_default .picker_sl{flex:1 1 auto}.layout_default .picker_sl::before{content:"";display:block;padding-bottom:100%}.layout_default .picker_editor{order:1;width:6.5rem}.layout_default .picker_editor input{width:100%;height:100%}.layout_default .picker_sample{order:1;flex:1 1 auto}.layout_default .picker_done,.layout_default .picker_cancel{order:1}.picker_wrapper{box-sizing:border-box;background:#f2f2f2;box-shadow:0 0 0 1px silver;cursor:default;font-family:sans-serif;color:#444;pointer-events:auto}.picker_wrapper:focus{outline:none}.picker_wrapper button,.picker_wrapper input{box-sizing:border-box;border:none;box-shadow:0 0 0 1px silver;outline:none}.picker_wrapper button:focus,.picker_wrapper button:active,.picker_wrapper input:focus,.picker_wrapper input:active{box-shadow:0 0 2px 1px #1e90ff}.picker_wrapper button{padding:.4em .6em;cursor:pointer;background-color:#f5f5f5;background-image:linear-gradient(0deg, gainsboro, transparent)}.picker_wrapper button:active{background-image:linear-gradient(0deg, transparent, gainsboro)}.picker_wrapper button:hover{background-color:#fff}.picker_selector{position:absolute;z-index:1;display:block;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border:2px solid #fff;border-radius:100%;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.picker_slider .picker_selector{border-radius:2px}.picker_hue{position:relative;background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);box-shadow:0 0 0 1px silver}.picker_sl{position:relative;box-shadow:0 0 0 1px silver;background-image:linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%),linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%),linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))}.picker_alpha,.picker_sample{position:relative;background:linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/2em 2em,linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em/2em 2em;box-shadow:0 0 0 1px silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:none}.picker_editor input{font-family:monospace;padding:.2em .4em}.picker_sample::before{content:"";position:absolute;display:block;width:100%;height:100%;background:currentColor}.picker_arrow{position:absolute;z-index:-1}.picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{background:#f2f2f2;box-shadow:0 0 10px 1px rgba(0,0,0,.4)}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{content:"";display:block;position:absolute;top:0;left:0;z-index:-99}.picker_wrapper.popup .picker_arrow::before{width:100%;height:100%;-webkit-transform:skew(45deg);transform:skew(45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.picker_wrapper.popup .picker_arrow::after{width:150%;height:150%;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;-webkit-transform:rotate(90deg) scale(1, -1);transform:rotate(90deg) scale(1, -1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;-webkit-transform:scale(-1, 1);transform:scale(-1, 1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}';
     document.documentElement.firstElementChild.appendChild(style);
     Picker.StyleElement = style;