@digipair/skill-web-jsoneditor 0.114.2 → 0.114.3

package/dist/vanilla-picker.cjs.js

@@ -1,1041 +0,0 @@
-'use strict';
-
-/*!
- * vanilla-picker v2.12.3
- * https://vanilla-picker.js.org
- *
- * Copyright 2017-2024 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate)
- * Released under the ISC license.
- */ function _instanceof(left, right) {
-    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
-        return !!right[Symbol.hasInstance](left);
-    } else {
-        return left instanceof right;
-    }
-}
-var classCallCheck = function classCallCheck(instance, Constructor) {
-    if (!_instanceof(instance, Constructor)) {
-        throw new TypeError("Cannot call a class as a function");
-    }
-};
-var createClass = function() {
-    function defineProperties(target, props) {
-        for(var i = 0; i < props.length; i++){
-            var descriptor = props[i];
-            descriptor.enumerable = descriptor.enumerable || false;
-            descriptor.configurable = true;
-            if ("value" in descriptor) descriptor.writable = true;
-            Object.defineProperty(target, descriptor.key, descriptor);
-        }
-    }
-    return function(Constructor, protoProps, staticProps) {
-        if (protoProps) defineProperties(Constructor.prototype, protoProps);
-        if (staticProps) defineProperties(Constructor, staticProps);
-        return Constructor;
-    };
-}();
-var slicedToArray = function() {
-    function sliceIterator(arr, i) {
-        var _arr = [];
-        var _n = true;
-        var _d = false;
-        var _e = undefined;
-        try {
-            for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
-                _arr.push(_s.value);
-                if (i && _arr.length === i) break;
-            }
-        } catch (err) {
-            _d = true;
-            _e = err;
-        } finally{
-            try {
-                if (!_n && _i["return"]) _i["return"]();
-            } finally{
-                if (_d) throw _e;
-            }
-        }
-        return _arr;
-    }
-    return function(arr, i) {
-        if (Array.isArray(arr)) {
-            return arr;
-        } else if (Symbol.iterator in Object(arr)) {
-            return sliceIterator(arr, i);
-        } else {
-            throw new TypeError("Invalid attempt to destructure non-iterable instance");
-        }
-    };
-}();
-String.prototype.startsWith = String.prototype.startsWith || function(needle) {
-    return this.indexOf(needle) === 0;
-};
-String.prototype.padStart = String.prototype.padStart || function(len, pad) {
-    var str = this;
-    while(str.length < len){
-        str = pad + str;
-    }
-    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'
-};
-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 Color = function() {
-    function Color(r, g, b, a) {
-        classCallCheck(this, Color);
-        var that = this;
-        function parseString(input) {
-            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;
-                }
-                h /= 360;
-                s /= 100;
-                l /= 100;
-                that.hsla = [
-                    h,
-                    s,
-                    l,
-                    _a
-                ];
-            } 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;
-                }
-                that.rgba = [
-                    _r,
-                    _g,
-                    _b,
-                    _a2
-                ];
-            } else {
-                if (input.startsWith('#')) {
-                    that.rgba = Color.hexToRgb(input);
-                } else {
-                    that.rgba = Color.nameToRgb(input) || Color.hexToRgb(input);
-                }
-            }
-        }
-        if (r === undefined) ;
-        else if (Array.isArray(r)) {
-            this.rgba = r;
-        } else if (b === undefined) {
-            var color = r && '' + r;
-            if (color) {
-                parseString(color.toLowerCase());
-            }
-        } else {
-            this.rgba = [
-                r,
-                g,
-                b,
-                a === undefined ? 1 : a
-            ];
-        }
-    }
-    createClass(Color, [
-        {
-            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 + ')';
-            }
-        },
-        {
-            key: 'printHSL',
-            value: function printHSL(alpha) {
-                var mults = [
-                    360,
-                    100,
-                    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 + ')';
-            }
-        },
-        {
-            key: 'printHex',
-            value: function printHex(alpha) {
-                var hex = this.hex;
-                return alpha ? hex : hex.substring(0, 7);
-            }
-        },
-        {
-            key: 'rgba',
-            get: function get() {
-                if (this._rgba) {
-                    return this._rgba;
-                }
-                if (!this._hsla) {
-                    throw new Error('No color is set');
-                }
-                return this._rgba = Color.hslToRgb(this._hsla);
-            },
-            set: function set(rgb) {
-                if (rgb.length === 3) {
-                    rgb[3] = 1;
-                }
-                this._rgba = rgb;
-                this._hsla = null;
-            }
-        },
-        {
-            key: 'rgbString',
-            get: function get() {
-                return this.printRGB();
-            }
-        },
-        {
-            key: 'rgbaString',
-            get: function get() {
-                return this.printRGB(true);
-            }
-        },
-        {
-            key: 'hsla',
-            get: function get() {
-                if (this._hsla) {
-                    return this._hsla;
-                }
-                if (!this._rgba) {
-                    throw new Error('No color is set');
-                }
-                return this._hsla = Color.rgbToHsl(this._rgba);
-            },
-            set: function set(hsl) {
-                if (hsl.length === 3) {
-                    hsl[3] = 1;
-                }
-                this._hsla = hsl;
-                this._rgba = null;
-            }
-        },
-        {
-            key: 'hslString',
-            get: function get() {
-                return this.printHSL();
-            }
-        },
-        {
-            key: 'hslaString',
-            get: function get() {
-                return this.printHSL(true);
-            }
-        },
-        {
-            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('');
-            },
-            set: function set(hex) {
-                this.rgba = Color.hexToRgb(hex);
-            }
-        }
-    ], [
-        {
-            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');
-                if (!hex.match(/^([0-9a-fA-F]{8})$/)) {
-                    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);
-                });
-                rgba[3] = rgba[3] / 255;
-                return rgba;
-            }
-        },
-        {
-            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'));
-            }
-        },
-        {
-            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;
-                g /= 255;
-                b /= 255;
-                var max = Math.max(r, g, b), min = Math.min(r, g, b);
-                var h = void 0, s = void 0, l = (max + min) / 2;
-                if (max === min) {
-                    h = s = 0;
-                } else {
-                    var d = max - min;
-                    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-                    switch(max){
-                        case r:
-                            h = (g - b) / d + (g < b ? 6 : 0);
-                            break;
-                        case g:
-                            h = (b - r) / d + 2;
-                            break;
-                        case b:
-                            h = (r - g) / d + 4;
-                            break;
-                    }
-                    h /= 6;
-                }
-                return [
-                    h,
-                    s,
-                    l,
-                    a
-                ];
-            }
-        },
-        {
-            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;
-                if (s === 0) {
-                    r = g = b = l;
-                } else {
-                    var hue2rgb = function hue2rgb(p, q, t) {
-                        if (t < 0) t += 1;
-                        if (t > 1) t -= 1;
-                        if (t < 1 / 6) return p + (q - p) * 6 * t;
-                        if (t < 1 / 2) return q;
-                        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-                        return p;
-                    };
-                    var q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
-                    r = hue2rgb(p, q, h + 1 / 3);
-                    g = hue2rgb(p, q, h);
-                    b = hue2rgb(p, q, h - 1 / 3);
-                }
-                var rgba = [
-                    r * 255,
-                    g * 255,
-                    b * 255
-                ].map(Math.round);
-                rgba[3] = a;
-                return rgba;
-            }
-        }
-    ]);
-    return Color;
-}();
-var EventBucket = function() {
-    function EventBucket() {
-        classCallCheck(this, EventBucket);
-        this._events = [];
-    }
-    createClass(EventBucket, [
-        {
-            key: 'add',
-            value: function add(target, type, handler) {
-                target.addEventListener(type, handler, false);
-                this._events.push({
-                    target: target,
-                    type: type,
-                    handler: handler
-                });
-            }
-        },
-        {
-            key: 'remove',
-            value: function remove(target, type, handler) {
-                this._events = this._events.filter(function(e) {
-                    var isMatch = true;
-                    if (target && target !== e.target) {
-                        isMatch = false;
-                    }
-                    if (type && type !== e.type) {
-                        isMatch = false;
-                    }
-                    if (handler && handler !== e.handler) {
-                        isMatch = false;
-                    }
-                    if (isMatch) {
-                        EventBucket._doRemove(e.target, e.type, e.handler);
-                    }
-                    return !isMatch;
-                });
-            }
-        },
-        {
-            key: 'destroy',
-            value: function destroy() {
-                this._events.forEach(function(e) {
-                    return EventBucket._doRemove(e.target, e.type, e.handler);
-                });
-                this._events = [];
-            }
-        }
-    ], [
-        {
-            key: '_doRemove',
-            value: function _doRemove(target, type, handler) {
-                target.removeEventListener(type, handler, false);
-            }
-        }
-    ]);
-    return EventBucket;
-}();
-function parseHTML(htmlString) {
-    var div = document.createElement('div');
-    div.innerHTML = htmlString;
-    return div.firstElementChild;
-}
-function dragTrack(eventBucket, area, callback) {
-    var dragging = false;
-    function clamp(val, min, max) {
-        return Math.max(min, Math.min(val, max));
-    }
-    function onMove(e, info, starting) {
-        if (starting) {
-            dragging = true;
-        }
-        if (!dragging) {
-            return;
-        }
-        e.preventDefault();
-        var bounds = area.getBoundingClientRect(), w = bounds.width, h = bounds.height, x = info.clientX, y = info.clientY;
-        var relX = clamp(x - bounds.left, 0, w), relY = clamp(y - bounds.top, 0, h);
-        callback(relX / w, relY / h);
-    }
-    function onMouse(e, starting) {
-        var button = e.buttons === undefined ? e.which : e.buttons;
-        if (button === 1) {
-            onMove(e, e, starting);
-        } else {
-            dragging = false;
-        }
-    }
-    function onTouch(e, starting) {
-        if (e.touches.length === 1) {
-            onMove(e, e.touches[0], starting);
-        } else {
-            dragging = false;
-        }
-    }
-    eventBucket.add(area, 'mousedown', function(e) {
-        onMouse(e, true);
-    });
-    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) {
-        dragging = false;
-    });
-    eventBucket.add(area, 'touchend', function(e) {
-        dragging = false;
-    });
-    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 HUES = 360;
-var EVENT_KEY = 'keydown', EVENT_CLICK_OUTSIDE = 'mousedown', EVENT_TAB_MOVE = 'focusin';
-function $(selector, context) {
-    return (context || document).querySelector(selector);
-}
-function stopEvent(e) {
-    e.preventDefault();
-    e.stopPropagation();
-}
-function onKey(bucket, target, keys, handler, stop) {
-    bucket.add(target, EVENT_KEY, function(e) {
-        if (keys.indexOf(e.key) >= 0) {
-            handler(e);
-        }
-    });
-}
-var Picker = function() {
-    function Picker(options) {
-        classCallCheck(this, Picker);
-        this.settings = {
-            popup: 'right',
-            layout: 'default',
-            alpha: true,
-            editor: true,
-            editorFormat: 'hex',
-            cancelButton: false,
-            defaultColor: '#0cf'
-        };
-        this._events = new EventBucket();
-        this.onChange = null;
-        this.onDone = null;
-        this.onOpen = null;
-        this.onClose = null;
-        this.setOptions(options);
-    }
-    createClass(Picker, [
-        {
-            key: 'setOptions',
-            value: function setOptions(options) {
-                var _this = this;
-                if (!options) {
-                    return;
-                }
-                var settings = this.settings;
-                function transfer(source, target, skipKeys) {
-                    for(var key in source){
-                        target[key] = source[key];
-                    }
-                }
-                if (_instanceof(options, HTMLElement)) {
-                    settings.parent = options;
-                } else {
-                    if (settings.parent && options.parent && settings.parent !== options.parent) {
-                        this._events.remove(settings.parent);
-                        this._popupInited = false;
-                    }
-                    transfer(options, settings);
-                    if (options.onChange) {
-                        this.onChange = options.onChange;
-                    }
-                    if (options.onDone) {
-                        this.onDone = options.onDone;
-                    }
-                    if (options.onOpen) {
-                        this.onOpen = options.onOpen;
-                    }
-                    if (options.onClose) {
-                        this.onClose = options.onClose;
-                    }
-                    var col = options.color || options.colour;
-                    if (col) {
-                        this._setColor(col);
-                    }
-                }
-                var parent = settings.parent;
-                if (parent && settings.popup && !this._popupInited) {
-                    var openProxy = function openProxy(e) {
-                        return _this.openHandler(e);
-                    };
-                    this._events.add(parent, 'click', openProxy);
-                    onKey(this._events, parent, [
-                        ' ',
-                        'Spacebar',
-                        'Enter'
-                    ], openProxy);
-                    this._popupInited = true;
-                } else if (options.parent && !settings.popup) {
-                    this.show();
-                }
-            }
-        },
-        {
-            key: 'openHandler',
-            value: function openHandler(e) {
-                if (this.show()) {
-                    e && e.preventDefault();
-                    this.settings.parent.style.pointerEvents = 'none';
-                    var toFocus = e && e.type === EVENT_KEY ? this._domEdit : this.domElement;
-                    setTimeout(function() {
-                        return toFocus.focus();
-                    }, 100);
-                    if (this.onOpen) {
-                        this.onOpen(this.colour);
-                    }
-                }
-            }
-        },
-        {
-            key: 'closeHandler',
-            value: function closeHandler(e) {
-                var event = e && e.type;
-                var doHide = false;
-                if (!e) {
-                    doHide = true;
-                } else if (event === EVENT_CLICK_OUTSIDE || event === EVENT_TAB_MOVE) {
-                    var knownTime = (this.__containedEvent || 0) + 100;
-                    if (e.timeStamp > knownTime) {
-                        doHide = true;
-                    }
-                } else {
-                    stopEvent(e);
-                    doHide = true;
-                }
-                if (doHide && this.hide()) {
-                    this.settings.parent.style.pointerEvents = '';
-                    if (event !== EVENT_CLICK_OUTSIDE) {
-                        this.settings.parent.focus();
-                    }
-                    if (this.onClose) {
-                        this.onClose(this.colour);
-                    }
-                }
-            }
-        },
-        {
-            key: 'movePopup',
-            value: function movePopup(options, open) {
-                this.closeHandler();
-                this.setOptions(options);
-                if (open) {
-                    this.openHandler();
-                }
-            }
-        },
-        {
-            key: 'setColor',
-            value: function setColor(color, silent) {
-                this._setColor(color, {
-                    silent: silent
-                });
-            }
-        },
-        {
-            key: '_setColor',
-            value: function _setColor(color, flags) {
-                if (typeof color === 'string') {
-                    color = color.trim();
-                }
-                if (!color) {
-                    return;
-                }
-                flags = flags || {};
-                var c = void 0;
-                try {
-                    c = new Color(color);
-                } catch (ex) {
-                    if (flags.failSilently) {
-                        return;
-                    }
-                    throw ex;
-                }
-                if (!this.settings.alpha) {
-                    var hsla = c.hsla;
-                    hsla[3] = 1;
-                    c.hsla = hsla;
-                }
-                this.colour = this.color = c;
-                this._setHSLA(null, null, null, null, flags);
-            }
-        },
-        {
-            key: 'setColour',
-            value: function setColour(colour, silent) {
-                this.setColor(colour, silent);
-            }
-        },
-        {
-            key: 'show',
-            value: function show() {
-                var parent = this.settings.parent;
-                if (!parent) {
-                    return false;
-                }
-                if (this.domElement) {
-                    var toggled = this._toggleDOM(true);
-                    this._setPosition();
-                    return toggled;
-                }
-                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);
-                if (!this.settings.alpha) {
-                    wrapper.classList.add('no_alpha');
-                }
-                if (!this.settings.editor) {
-                    wrapper.classList.add('no_editor');
-                }
-                if (!this.settings.cancelButton) {
-                    wrapper.classList.add('no_cancel');
-                }
-                this._ifPopup(function() {
-                    return wrapper.classList.add('popup');
-                });
-                this._setPosition();
-                if (this.colour) {
-                    this._updateUI();
-                } else {
-                    this._setColor(this.settings.defaultColor);
-                }
-                this._bindEvents();
-                return true;
-            }
-        },
-        {
-            key: 'hide',
-            value: function hide() {
-                return this._toggleDOM(false);
-            }
-        },
-        {
-            key: 'destroy',
-            value: function destroy() {
-                this._events.destroy();
-                if (this.domElement) {
-                    this.settings.parent.removeChild(this.domElement);
-                }
-            }
-        },
-        {
-            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) {
-                    return e.preventDefault();
-                });
-                dragTrack(events, this._domH, function(x, y) {
-                    return that._setHSLA(x);
-                });
-                dragTrack(events, this._domSL, function(x, y) {
-                    return that._setHSLA(null, x, 1 - y);
-                });
-                if (this.settings.alpha) {
-                    dragTrack(events, this._domA, function(x, y) {
-                        return that._setHSLA(null, null, null, 1 - y);
-                    });
-                }
-                var editInput = this._domEdit;
-                {
-                    addEvent(editInput, 'input', function(e) {
-                        that._setColor(this.value, {
-                            fromEditor: true,
-                            failSilently: true
-                        });
-                    });
-                    addEvent(editInput, 'focus', function(e) {
-                        var input = this;
-                        if (input.selectionStart === input.selectionEnd) {
-                            input.select();
-                        }
-                    });
-                }
-                this._ifPopup(function() {
-                    var popupCloseProxy = function popupCloseProxy(e) {
-                        return _this2.closeHandler(e);
-                    };
-                    addEvent(window, EVENT_CLICK_OUTSIDE, popupCloseProxy);
-                    addEvent(window, EVENT_TAB_MOVE, popupCloseProxy);
-                    onKey(events, dom, [
-                        '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);
-                });
-                var onDoneProxy = function onDoneProxy(e) {
-                    _this2._ifPopup(function() {
-                        return _this2.closeHandler(e);
-                    });
-                    if (_this2.onDone) {
-                        _this2.onDone(_this2.colour);
-                    }
-                };
-                addEvent(this._domOkay, 'click', onDoneProxy);
-                onKey(events, dom, [
-                    'Enter'
-                ], onDoneProxy);
-            }
-        },
-        {
-            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';
-                    }
-                    var cssClass = popup === true ? 'popup_right' : 'popup_' + popup;
-                    [
-                        'popup_top',
-                        'popup_bottom',
-                        'popup_left',
-                        'popup_right'
-                    ].forEach(function(c) {
-                        if (c === cssClass) {
-                            elm.classList.add(c);
-                        } else {
-                            elm.classList.remove(c);
-                        }
-                    });
-                    elm.classList.add(cssClass);
-                });
-            }
-        },
-        {
-            key: '_setHSLA',
-            value: function _setHSLA(h, s, l, a, flags) {
-                flags = flags || {};
-                var col = this.colour, hsla = col.hsla;
-                [
-                    h,
-                    s,
-                    l,
-                    a
-                ].forEach(function(x, i) {
-                    if (x || x === 0) {
-                        hsla[i] = x;
-                    }
-                });
-                col.hsla = hsla;
-                this._updateUI(flags);
-                if (this.onChange && !flags.silent) {
-                    this.onChange(col);
-                }
-            }
-        },
-        {
-            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);
-                function posX(parent, child, relX) {
-                    child.style.left = relX * 100 + '%';
-                }
-                function posY(parent, child, relY) {
-                    child.style.top = relY * 100 + '%';
-                }
-                posX(uiH, thumbH, hsl[0]);
-                this._domSL.style.backgroundColor = this._domH.style.color = cssHue;
-                posX(uiSL, thumbSL, hsl[1]);
-                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(' + [
-                    opaque,
-                    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':
-                            value = col.printRGB(alpha);
-                            break;
-                        case 'hsl':
-                            value = col.printHSL(alpha);
-                            break;
-                        default:
-                            value = col.printHex(alpha);
-                    }
-                    this._domEdit.value = value;
-                }
-                this._domSample.style.color = cssHSLA;
-            }
-        },
-        {
-            key: '_ifPopup',
-            value: function _ifPopup(actionIf, actionElse) {
-                if (this.settings.parent && this.settings.popup) {
-                    actionIf && actionIf(this.settings.popup);
-                } else {
-                    actionElse && actionElse();
-                }
-            }
-        },
-        {
-            key: '_toggleDOM',
-            value: function _toggleDOM(toVisible) {
-                var dom = this.domElement;
-                if (!dom) {
-                    return false;
-                }
-                var displayStyle = toVisible ? '' : 'none', toggle = dom.style.display !== displayStyle;
-                if (toggle) {
-                    dom.style.display = displayStyle;
-                }
-                return toggle;
-            }
-        }
-    ]);
-    return Picker;
-}();
-{
-    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;
-}
-
-exports.default = Picker;