wj-elements 0.0.3 → 0.0.4

package/dist/wj-color-picker.js

@@ -1,130 +1,94 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement from "./wj-element.js";
+var N = Object.defineProperty;
+var B = (t, r, e) => r in t ? N(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
+var v = (t, r, e) => (B(t, typeof r != "symbol" ? r + "" : r, e), e);
+import z from "./wj-element.js";
 import "./wj-store.js";
-function _typeof(obj) {
+function S(t) {
   "@babel/helpers - typeof";
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj2) {
-    return typeof obj2;
-  } : function(obj2) {
-    return obj2 && "function" == typeof Symbol && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
-  }, _typeof(obj);
-}
-var trimLeft = /^\s+/;
-var trimRight = /\s+$/;
-function tinycolor(color, opts) {
-  color = color ? color : "";
-  opts = opts || {};
-  if (color instanceof tinycolor) {
-    return color;
-  }
-  if (!(this instanceof tinycolor)) {
-    return new tinycolor(color, opts);
-  }
-  var rgb = inputToRGB(color);
-  this._originalInput = color, this._r = rgb.r, this._g = rgb.g, this._b = rgb.b, this._a = rgb.a, this._roundA = Math.round(100 * this._a) / 100, this._format = opts.format || rgb.format;
-  this._gradientType = opts.gradientType;
-  if (this._r < 1)
-    this._r = Math.round(this._r);
-  if (this._g < 1)
-    this._g = Math.round(this._g);
-  if (this._b < 1)
-    this._b = Math.round(this._b);
-  this._ok = rgb.ok;
-}
-tinycolor.prototype = {
-  isDark: function isDark() {
+  return S = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(r) {
+    return typeof r;
+  } : function(r) {
+    return r && typeof Symbol == "function" && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
+  }, S(t);
+}
+var O = /^\s+/, G = /\s+$/;
+function s(t, r) {
+  if (t = t || "", r = r || {}, t instanceof s)
+    return t;
+  if (!(this instanceof s))
+    return new s(t, r);
+  var e = $(t);
+  this._originalInput = t, this._r = e.r, this._g = e.g, this._b = e.b, this._a = e.a, this._roundA = Math.round(100 * this._a) / 100, this._format = r.format || e.format, this._gradientType = r.gradientType, this._r < 1 && (this._r = Math.round(this._r)), this._g < 1 && (this._g = Math.round(this._g)), this._b < 1 && (this._b = Math.round(this._b)), this._ok = e.ok;
+}
+s.prototype = {
+  isDark: function() {
     return this.getBrightness() < 128;
   },
-  isLight: function isLight() {
+  isLight: function() {
     return !this.isDark();
   },
-  isValid: function isValid() {
+  isValid: function() {
     return this._ok;
   },
-  getOriginalInput: function getOriginalInput() {
+  getOriginalInput: function() {
     return this._originalInput;
   },
-  getFormat: function getFormat() {
+  getFormat: function() {
     return this._format;
   },
-  getAlpha: function getAlpha() {
+  getAlpha: function() {
     return this._a;
   },
-  getBrightness: function getBrightness() {
-    var rgb = this.toRgb();
-    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
+  getBrightness: function() {
+    var r = this.toRgb();
+    return (r.r * 299 + r.g * 587 + r.b * 114) / 1e3;
   },
-  getLuminance: function getLuminance() {
-    var rgb = this.toRgb();
-    var RsRGB, GsRGB, BsRGB, R, G, B;
-    RsRGB = rgb.r / 255;
-    GsRGB = rgb.g / 255;
-    BsRGB = rgb.b / 255;
-    if (RsRGB <= 0.03928)
-      R = RsRGB / 12.92;
-    else
-      R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
-    if (GsRGB <= 0.03928)
-      G = GsRGB / 12.92;
-    else
-      G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
-    if (BsRGB <= 0.03928)
-      B = BsRGB / 12.92;
-    else
-      B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
-    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  getLuminance: function() {
+    var r = this.toRgb(), e, a, i, n, o, h;
+    return e = r.r / 255, a = r.g / 255, i = r.b / 255, e <= 0.03928 ? n = e / 12.92 : n = Math.pow((e + 0.055) / 1.055, 2.4), a <= 0.03928 ? o = a / 12.92 : o = Math.pow((a + 0.055) / 1.055, 2.4), i <= 0.03928 ? h = i / 12.92 : h = Math.pow((i + 0.055) / 1.055, 2.4), 0.2126 * n + 0.7152 * o + 0.0722 * h;
   },
-  setAlpha: function setAlpha(value) {
-    this._a = boundAlpha(value);
-    this._roundA = Math.round(100 * this._a) / 100;
-    return this;
+  setAlpha: function(r) {
+    return this._a = D(r), this._roundA = Math.round(100 * this._a) / 100, this;
   },
-  toHsv: function toHsv() {
-    var hsv = rgbToHsv(this._r, this._g, this._b);
+  toHsv: function() {
+    var r = R(this._r, this._g, this._b);
     return {
-      h: hsv.h * 360,
-      s: hsv.s,
-      v: hsv.v,
+      h: r.h * 360,
+      s: r.s,
+      v: r.v,
       a: this._a
     };
   },
-  toHsvString: function toHsvString() {
-    var hsv = rgbToHsv(this._r, this._g, this._b);
-    var h = Math.round(hsv.h * 360), s = Math.round(hsv.s * 100), v = Math.round(hsv.v * 100);
-    return this._a == 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")";
+  toHsvString: function() {
+    var r = R(this._r, this._g, this._b), e = Math.round(r.h * 360), a = Math.round(r.s * 100), i = Math.round(r.v * 100);
+    return this._a == 1 ? "hsv(" + e + ", " + a + "%, " + i + "%)" : "hsva(" + e + ", " + a + "%, " + i + "%, " + this._roundA + ")";
   },
-  toHsl: function toHsl() {
-    var hsl = rgbToHsl(this._r, this._g, this._b);
+  toHsl: function() {
+    var r = C(this._r, this._g, this._b);
     return {
-      h: hsl.h * 360,
-      s: hsl.s,
-      l: hsl.l,
+      h: r.h * 360,
+      s: r.s,
+      l: r.l,
       a: this._a
     };
   },
-  toHslString: function toHslString() {
-    var hsl = rgbToHsl(this._r, this._g, this._b);
-    var h = Math.round(hsl.h * 360), s = Math.round(hsl.s * 100), l = Math.round(hsl.l * 100);
-    return this._a == 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")";
+  toHslString: function() {
+    var r = C(this._r, this._g, this._b), e = Math.round(r.h * 360), a = Math.round(r.s * 100), i = Math.round(r.l * 100);
+    return this._a == 1 ? "hsl(" + e + ", " + a + "%, " + i + "%)" : "hsla(" + e + ", " + a + "%, " + i + "%, " + this._roundA + ")";
   },
-  toHex: function toHex(allow3Char) {
-    return rgbToHex(this._r, this._g, this._b, allow3Char);
+  toHex: function(r) {
+    return E(this._r, this._g, this._b, r);
   },
-  toHexString: function toHexString(allow3Char) {
-    return "#" + this.toHex(allow3Char);
+  toHexString: function(r) {
+    return "#" + this.toHex(r);
   },
-  toHex8: function toHex8(allow4Char) {
-    return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
+  toHex8: function(r) {
+    return X(this._r, this._g, this._b, this._a, r);
   },
-  toHex8String: function toHex8String(allow4Char) {
-    return "#" + this.toHex8(allow4Char);
+  toHex8String: function(r) {
+    return "#" + this.toHex8(r);
   },
-  toRgb: function toRgb() {
+  toRgb: function() {
     return {
       r: Math.round(this._r),
       g: Math.round(this._g),
@@ -132,513 +96,339 @@ tinycolor.prototype = {
       a: this._a
     };
   },
-  toRgbString: function toRgbString() {
+  toRgbString: function() {
     return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
   },
-  toPercentageRgb: function toPercentageRgb() {
+  toPercentageRgb: function() {
     return {
-      r: Math.round(bound01(this._r, 255) * 100) + "%",
-      g: Math.round(bound01(this._g, 255) * 100) + "%",
-      b: Math.round(bound01(this._b, 255) * 100) + "%",
+      r: Math.round(u(this._r, 255) * 100) + "%",
+      g: Math.round(u(this._g, 255) * 100) + "%",
+      b: Math.round(u(this._b, 255) * 100) + "%",
       a: this._a
     };
   },
-  toPercentageRgbString: function toPercentageRgbString() {
-    return this._a == 1 ? "rgb(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
+  toPercentageRgbString: function() {
+    return this._a == 1 ? "rgb(" + Math.round(u(this._r, 255) * 100) + "%, " + Math.round(u(this._g, 255) * 100) + "%, " + Math.round(u(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(u(this._r, 255) * 100) + "%, " + Math.round(u(this._g, 255) * 100) + "%, " + Math.round(u(this._b, 255) * 100) + "%, " + this._roundA + ")";
   },
-  toName: function toName() {
-    if (this._a === 0) {
-      return "transparent";
-    }
-    if (this._a < 1) {
-      return false;
-    }
-    return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
+  toName: function() {
+    return this._a === 0 ? "transparent" : this._a < 1 ? !1 : ne[E(this._r, this._g, this._b, !0)] || !1;
   },
-  toFilter: function toFilter(secondColor) {
-    var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a);
-    var secondHex8String = hex8String;
-    var gradientType = this._gradientType ? "GradientType = 1, " : "";
-    if (secondColor) {
-      var s = tinycolor(secondColor);
-      secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a);
+  toFilter: function(r) {
+    var e = "#" + L(this._r, this._g, this._b, this._a), a = e, i = this._gradientType ? "GradientType = 1, " : "";
+    if (r) {
+      var n = s(r);
+      a = "#" + L(n._r, n._g, n._b, n._a);
     }
-    return "progid:DXImageTransform.Microsoft.gradient(" + gradientType + "startColorstr=" + hex8String + ",endColorstr=" + secondHex8String + ")";
+    return "progid:DXImageTransform.Microsoft.gradient(" + i + "startColorstr=" + e + ",endColorstr=" + a + ")";
   },
-  toString: function toString(format) {
-    var formatSet = !!format;
-    format = format || this._format;
-    var formattedString = false;
-    var hasAlpha = this._a < 1 && this._a >= 0;
-    var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");
-    if (needsAlphaFormat) {
-      if (format === "name" && this._a === 0) {
-        return this.toName();
-      }
-      return this.toRgbString();
-    }
-    if (format === "rgb") {
-      formattedString = this.toRgbString();
-    }
-    if (format === "prgb") {
-      formattedString = this.toPercentageRgbString();
-    }
-    if (format === "hex" || format === "hex6") {
-      formattedString = this.toHexString();
-    }
-    if (format === "hex3") {
-      formattedString = this.toHexString(true);
-    }
-    if (format === "hex4") {
-      formattedString = this.toHex8String(true);
-    }
-    if (format === "hex8") {
-      formattedString = this.toHex8String();
-    }
-    if (format === "name") {
-      formattedString = this.toName();
-    }
-    if (format === "hsl") {
-      formattedString = this.toHslString();
-    }
-    if (format === "hsv") {
-      formattedString = this.toHsvString();
-    }
-    return formattedString || this.toHexString();
+  toString: function(r) {
+    var e = !!r;
+    r = r || this._format;
+    var a = !1, i = this._a < 1 && this._a >= 0, n = !e && i && (r === "hex" || r === "hex6" || r === "hex3" || r === "hex4" || r === "hex8" || r === "name");
+    return n ? r === "name" && this._a === 0 ? this.toName() : this.toRgbString() : (r === "rgb" && (a = this.toRgbString()), r === "prgb" && (a = this.toPercentageRgbString()), (r === "hex" || r === "hex6") && (a = this.toHexString()), r === "hex3" && (a = this.toHexString(!0)), r === "hex4" && (a = this.toHex8String(!0)), r === "hex8" && (a = this.toHex8String()), r === "name" && (a = this.toName()), r === "hsl" && (a = this.toHslString()), r === "hsv" && (a = this.toHsvString()), a || this.toHexString());
   },
-  clone: function clone() {
-    return tinycolor(this.toString());
+  clone: function() {
+    return s(this.toString());
   },
-  _applyModification: function _applyModification(fn, args) {
-    var color = fn.apply(null, [this].concat([].slice.call(args)));
-    this._r = color._r;
-    this._g = color._g;
-    this._b = color._b;
-    this.setAlpha(color._a);
-    return this;
+  _applyModification: function(r, e) {
+    var a = r.apply(null, [this].concat([].slice.call(e)));
+    return this._r = a._r, this._g = a._g, this._b = a._b, this.setAlpha(a._a), this;
   },
-  lighten: function lighten() {
-    return this._applyModification(_lighten, arguments);
+  lighten: function() {
+    return this._applyModification(K, arguments);
   },
-  brighten: function brighten() {
-    return this._applyModification(_brighten, arguments);
+  brighten: function() {
+    return this._applyModification(Z, arguments);
   },
-  darken: function darken() {
-    return this._applyModification(_darken, arguments);
+  darken: function() {
+    return this._applyModification(Q, arguments);
   },
-  desaturate: function desaturate() {
-    return this._applyModification(_desaturate, arguments);
+  desaturate: function() {
+    return this._applyModification(W, arguments);
   },
-  saturate: function saturate() {
-    return this._applyModification(_saturate, arguments);
+  saturate: function() {
+    return this._applyModification(Y, arguments);
   },
-  greyscale: function greyscale() {
-    return this._applyModification(_greyscale, arguments);
+  greyscale: function() {
+    return this._applyModification(J, arguments);
   },
-  spin: function spin() {
-    return this._applyModification(_spin, arguments);
+  spin: function() {
+    return this._applyModification(ee, arguments);
   },
-  _applyCombination: function _applyCombination(fn, args) {
-    return fn.apply(null, [this].concat([].slice.call(args)));
+  _applyCombination: function(r, e) {
+    return r.apply(null, [this].concat([].slice.call(e)));
   },
-  analogous: function analogous() {
-    return this._applyCombination(_analogous, arguments);
+  analogous: function() {
+    return this._applyCombination(ae, arguments);
   },
-  complement: function complement() {
-    return this._applyCombination(_complement, arguments);
+  complement: function() {
+    return this._applyCombination(te, arguments);
   },
-  monochromatic: function monochromatic() {
-    return this._applyCombination(_monochromatic, arguments);
+  monochromatic: function() {
+    return this._applyCombination(ie, arguments);
   },
-  splitcomplement: function splitcomplement() {
-    return this._applyCombination(_splitcomplement, arguments);
+  splitcomplement: function() {
+    return this._applyCombination(re, arguments);
   },
   // Disabled until https://github.com/bgrins/TinyColor/issues/254
   // polyad: function (number) {
   //   return this._applyCombination(polyad, [number]);
   // },
-  triad: function triad() {
-    return this._applyCombination(polyad, [3]);
+  triad: function() {
+    return this._applyCombination(T, [3]);
   },
-  tetrad: function tetrad() {
-    return this._applyCombination(polyad, [4]);
+  tetrad: function() {
+    return this._applyCombination(T, [4]);
   }
 };
-tinycolor.fromRatio = function(color, opts) {
-  if (_typeof(color) == "object") {
-    var newColor = {};
-    for (var i in color) {
-      if (color.hasOwnProperty(i)) {
-        if (i === "a") {
-          newColor[i] = color[i];
-        } else {
-          newColor[i] = convertToPercentage(color[i]);
-        }
-      }
-    }
-    color = newColor;
-  }
-  return tinycolor(color, opts);
+s.fromRatio = function(t, r) {
+  if (S(t) == "object") {
+    var e = {};
+    for (var a in t)
+      t.hasOwnProperty(a) && (a === "a" ? e[a] = t[a] : e[a] = y(t[a]));
+    t = e;
+  }
+  return s(t, r);
 };
-function inputToRGB(color) {
-  var rgb = {
+function $(t) {
+  var r = {
     r: 0,
     g: 0,
     b: 0
-  };
-  var a = 1;
-  var s = null;
-  var v = null;
-  var l = null;
-  var ok = false;
-  var format = false;
-  if (typeof color == "string") {
-    color = stringInputToObject(color);
-  }
-  if (_typeof(color) == "object") {
-    if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
-      rgb = rgbToRgb(color.r, color.g, color.b);
-      ok = true;
-      format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
-    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
-      s = convertToPercentage(color.s);
-      v = convertToPercentage(color.v);
-      rgb = hsvToRgb(color.h, s, v);
-      ok = true;
-      format = "hsv";
-    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
-      s = convertToPercentage(color.s);
-      l = convertToPercentage(color.l);
-      rgb = hslToRgb(color.h, s, l);
-      ok = true;
-      format = "hsl";
-    }
-    if (color.hasOwnProperty("a")) {
-      a = color.a;
-    }
-  }
-  a = boundAlpha(a);
-  return {
-    ok,
-    format: color.format || format,
-    r: Math.min(255, Math.max(rgb.r, 0)),
-    g: Math.min(255, Math.max(rgb.g, 0)),
-    b: Math.min(255, Math.max(rgb.b, 0)),
-    a
+  }, e = 1, a = null, i = null, n = null, o = !1, h = !1;
+  return typeof t == "string" && (t = le(t)), S(t) == "object" && (m(t.r) && m(t.g) && m(t.b) ? (r = U(t.r, t.g, t.b), o = !0, h = String(t.r).substr(-1) === "%" ? "prgb" : "rgb") : m(t.h) && m(t.s) && m(t.v) ? (a = y(t.s), i = y(t.v), r = q(t.h, a, i), o = !0, h = "hsv") : m(t.h) && m(t.s) && m(t.l) && (a = y(t.s), n = y(t.l), r = V(t.h, a, n), o = !0, h = "hsl"), t.hasOwnProperty("a") && (e = t.a)), e = D(e), {
+    ok: o,
+    format: t.format || h,
+    r: Math.min(255, Math.max(r.r, 0)),
+    g: Math.min(255, Math.max(r.g, 0)),
+    b: Math.min(255, Math.max(r.b, 0)),
+    a: e
   };
 }
-function rgbToRgb(r, g, b) {
+function U(t, r, e) {
   return {
-    r: bound01(r, 255) * 255,
-    g: bound01(g, 255) * 255,
-    b: bound01(b, 255) * 255
+    r: u(t, 255) * 255,
+    g: u(r, 255) * 255,
+    b: u(e, 255) * 255
   };
 }
-function rgbToHsl(r, g, b) {
-  r = bound01(r, 255);
-  g = bound01(g, 255);
-  b = bound01(b, 255);
-  var max = Math.max(r, g, b), min = Math.min(r, g, b);
-  var h, s, 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);
+function C(t, r, e) {
+  t = u(t, 255), r = u(r, 255), e = u(e, 255);
+  var a = Math.max(t, r, e), i = Math.min(t, r, e), n, o, h = (a + i) / 2;
+  if (a == i)
+    n = o = 0;
+  else {
+    var l = a - i;
+    switch (o = h > 0.5 ? l / (2 - a - i) : l / (a + i), a) {
+      case t:
+        n = (r - e) / l + (r < e ? 6 : 0);
         break;
-      case g:
-        h = (b - r) / d + 2;
+      case r:
+        n = (e - t) / l + 2;
         break;
-      case b:
-        h = (r - g) / d + 4;
+      case e:
+        n = (t - r) / l + 4;
         break;
     }
-    h /= 6;
+    n /= 6;
   }
   return {
-    h,
-    s,
-    l
+    h: n,
+    s: o,
+    l: h
   };
 }
-function hslToRgb(h, s, l) {
-  var r, g, b;
-  h = bound01(h, 360);
-  s = bound01(s, 100);
-  l = bound01(l, 100);
-  function hue2rgb(p2, q2, t) {
-    if (t < 0)
-      t += 1;
-    if (t > 1)
-      t -= 1;
-    if (t < 1 / 6)
-      return p2 + (q2 - p2) * 6 * t;
-    if (t < 1 / 2)
-      return q2;
-    if (t < 2 / 3)
-      return p2 + (q2 - p2) * (2 / 3 - t) * 6;
-    return p2;
+function V(t, r, e) {
+  var a, i, n;
+  t = u(t, 360), r = u(r, 100), e = u(e, 100);
+  function o(d, g, c) {
+    return c < 0 && (c += 1), c > 1 && (c -= 1), c < 1 / 6 ? d + (g - d) * 6 * c : c < 1 / 2 ? g : c < 2 / 3 ? d + (g - d) * (2 / 3 - c) * 6 : d;
   }
-  if (s === 0) {
-    r = g = b = l;
-  } else {
-    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    var p = 2 * l - q;
-    r = hue2rgb(p, q, h + 1 / 3);
-    g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1 / 3);
+  if (r === 0)
+    a = i = n = e;
+  else {
+    var h = e < 0.5 ? e * (1 + r) : e + r - e * r, l = 2 * e - h;
+    a = o(l, h, t + 1 / 3), i = o(l, h, t), n = o(l, h, t - 1 / 3);
   }
   return {
-    r: r * 255,
-    g: g * 255,
-    b: b * 255
+    r: a * 255,
+    g: i * 255,
+    b: n * 255
   };
 }
-function rgbToHsv(r, g, b) {
-  r = bound01(r, 255);
-  g = bound01(g, 255);
-  b = bound01(b, 255);
-  var max = Math.max(r, g, b), min = Math.min(r, g, b);
-  var h, s, v = max;
-  var d = max - min;
-  s = max === 0 ? 0 : d / max;
-  if (max == min) {
-    h = 0;
-  } else {
-    switch (max) {
-      case r:
-        h = (g - b) / d + (g < b ? 6 : 0);
+function R(t, r, e) {
+  t = u(t, 255), r = u(r, 255), e = u(e, 255);
+  var a = Math.max(t, r, e), i = Math.min(t, r, e), n, o, h = a, l = a - i;
+  if (o = a === 0 ? 0 : l / a, a == i)
+    n = 0;
+  else {
+    switch (a) {
+      case t:
+        n = (r - e) / l + (r < e ? 6 : 0);
         break;
-      case g:
-        h = (b - r) / d + 2;
+      case r:
+        n = (e - t) / l + 2;
         break;
-      case b:
-        h = (r - g) / d + 4;
+      case e:
+        n = (t - r) / l + 4;
         break;
     }
-    h /= 6;
+    n /= 6;
   }
   return {
-    h,
-    s,
-    v
+    h: n,
+    s: o,
+    v: h
   };
 }
-function hsvToRgb(h, s, v) {
-  h = bound01(h, 360) * 6;
-  s = bound01(s, 100);
-  v = bound01(v, 100);
-  var i = Math.floor(h), f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s), mod = i % 6, r = [v, q, p, p, t, v][mod], g = [t, v, v, q, p, p][mod], b = [p, p, t, v, v, q][mod];
+function q(t, r, e) {
+  t = u(t, 360) * 6, r = u(r, 100), e = u(e, 100);
+  var a = Math.floor(t), i = t - a, n = e * (1 - r), o = e * (1 - i * r), h = e * (1 - (1 - i) * r), l = a % 6, d = [e, o, n, n, h, e][l], g = [h, e, e, o, n, n][l], c = [n, n, h, e, e, o][l];
   return {
-    r: r * 255,
+    r: d * 255,
     g: g * 255,
-    b: b * 255
+    b: c * 255
   };
 }
-function rgbToHex(r, g, b, allow3Char) {
-  var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
-  if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
-    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
-  }
-  return hex.join("");
+function E(t, r, e, a) {
+  var i = [b(Math.round(t).toString(16)), b(Math.round(r).toString(16)), b(Math.round(e).toString(16))];
+  return a && i[0].charAt(0) == i[0].charAt(1) && i[1].charAt(0) == i[1].charAt(1) && i[2].charAt(0) == i[2].charAt(1) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) : i.join("");
 }
-function rgbaToHex(r, g, b, a, allow4Char) {
-  var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)), pad2(convertDecimalToHex(a))];
-  if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) {
-    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
-  }
-  return hex.join("");
+function X(t, r, e, a, i) {
+  var n = [b(Math.round(t).toString(16)), b(Math.round(r).toString(16)), b(Math.round(e).toString(16)), b(I(a))];
+  return i && n[0].charAt(0) == n[0].charAt(1) && n[1].charAt(0) == n[1].charAt(1) && n[2].charAt(0) == n[2].charAt(1) && n[3].charAt(0) == n[3].charAt(1) ? n[0].charAt(0) + n[1].charAt(0) + n[2].charAt(0) + n[3].charAt(0) : n.join("");
 }
-function rgbaToArgbHex(r, g, b, a) {
-  var hex = [pad2(convertDecimalToHex(a)), pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
-  return hex.join("");
+function L(t, r, e, a) {
+  var i = [b(I(a)), b(Math.round(t).toString(16)), b(Math.round(r).toString(16)), b(Math.round(e).toString(16))];
+  return i.join("");
 }
-tinycolor.equals = function(color1, color2) {
-  if (!color1 || !color2)
-    return false;
-  return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
+s.equals = function(t, r) {
+  return !t || !r ? !1 : s(t).toRgbString() == s(r).toRgbString();
 };
-tinycolor.random = function() {
-  return tinycolor.fromRatio({
+s.random = function() {
+  return s.fromRatio({
     r: Math.random(),
     g: Math.random(),
     b: Math.random()
   });
 };
-function _desaturate(color, amount) {
-  amount = amount === 0 ? 0 : amount || 10;
-  var hsl = tinycolor(color).toHsl();
-  hsl.s -= amount / 100;
-  hsl.s = clamp01(hsl.s);
-  return tinycolor(hsl);
-}
-function _saturate(color, amount) {
-  amount = amount === 0 ? 0 : amount || 10;
-  var hsl = tinycolor(color).toHsl();
-  hsl.s += amount / 100;
-  hsl.s = clamp01(hsl.s);
-  return tinycolor(hsl);
-}
-function _greyscale(color) {
-  return tinycolor(color).desaturate(100);
-}
-function _lighten(color, amount) {
-  amount = amount === 0 ? 0 : amount || 10;
-  var hsl = tinycolor(color).toHsl();
-  hsl.l += amount / 100;
-  hsl.l = clamp01(hsl.l);
-  return tinycolor(hsl);
-}
-function _brighten(color, amount) {
-  amount = amount === 0 ? 0 : amount || 10;
-  var rgb = tinycolor(color).toRgb();
-  rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
-  rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
-  rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
-  return tinycolor(rgb);
-}
-function _darken(color, amount) {
-  amount = amount === 0 ? 0 : amount || 10;
-  var hsl = tinycolor(color).toHsl();
-  hsl.l -= amount / 100;
-  hsl.l = clamp01(hsl.l);
-  return tinycolor(hsl);
-}
-function _spin(color, amount) {
-  var hsl = tinycolor(color).toHsl();
-  var hue = (hsl.h + amount) % 360;
-  hsl.h = hue < 0 ? 360 + hue : hue;
-  return tinycolor(hsl);
-}
-function _complement(color) {
-  var hsl = tinycolor(color).toHsl();
-  hsl.h = (hsl.h + 180) % 360;
-  return tinycolor(hsl);
-}
-function polyad(color, number) {
-  if (isNaN(number) || number <= 0) {
+function W(t, r) {
+  r = r === 0 ? 0 : r || 10;
+  var e = s(t).toHsl();
+  return e.s -= r / 100, e.s = M(e.s), s(e);
+}
+function Y(t, r) {
+  r = r === 0 ? 0 : r || 10;
+  var e = s(t).toHsl();
+  return e.s += r / 100, e.s = M(e.s), s(e);
+}
+function J(t) {
+  return s(t).desaturate(100);
+}
+function K(t, r) {
+  r = r === 0 ? 0 : r || 10;
+  var e = s(t).toHsl();
+  return e.l += r / 100, e.l = M(e.l), s(e);
+}
+function Z(t, r) {
+  r = r === 0 ? 0 : r || 10;
+  var e = s(t).toRgb();
+  return e.r = Math.max(0, Math.min(255, e.r - Math.round(255 * -(r / 100)))), e.g = Math.max(0, Math.min(255, e.g - Math.round(255 * -(r / 100)))), e.b = Math.max(0, Math.min(255, e.b - Math.round(255 * -(r / 100)))), s(e);
+}
+function Q(t, r) {
+  r = r === 0 ? 0 : r || 10;
+  var e = s(t).toHsl();
+  return e.l -= r / 100, e.l = M(e.l), s(e);
+}
+function ee(t, r) {
+  var e = s(t).toHsl(), a = (e.h + r) % 360;
+  return e.h = a < 0 ? 360 + a : a, s(e);
+}
+function te(t) {
+  var r = s(t).toHsl();
+  return r.h = (r.h + 180) % 360, s(r);
+}
+function T(t, r) {
+  if (isNaN(r) || r <= 0)
     throw new Error("Argument to polyad must be a positive number");
-  }
-  var hsl = tinycolor(color).toHsl();
-  var result = [tinycolor(color)];
-  var step = 360 / number;
-  for (var i = 1; i < number; i++) {
-    result.push(tinycolor({
-      h: (hsl.h + i * step) % 360,
-      s: hsl.s,
-      l: hsl.l
+  for (var e = s(t).toHsl(), a = [s(t)], i = 360 / r, n = 1; n < r; n++)
+    a.push(s({
+      h: (e.h + n * i) % 360,
+      s: e.s,
+      l: e.l
     }));
-  }
-  return result;
+  return a;
 }
-function _splitcomplement(color) {
-  var hsl = tinycolor(color).toHsl();
-  var h = hsl.h;
-  return [tinycolor(color), tinycolor({
-    h: (h + 72) % 360,
-    s: hsl.s,
-    l: hsl.l
-  }), tinycolor({
-    h: (h + 216) % 360,
-    s: hsl.s,
-    l: hsl.l
+function re(t) {
+  var r = s(t).toHsl(), e = r.h;
+  return [s(t), s({
+    h: (e + 72) % 360,
+    s: r.s,
+    l: r.l
+  }), s({
+    h: (e + 216) % 360,
+    s: r.s,
+    l: r.l
   })];
 }
-function _analogous(color, results, slices) {
-  results = results || 6;
-  slices = slices || 30;
-  var hsl = tinycolor(color).toHsl();
-  var part = 360 / slices;
-  var ret = [tinycolor(color)];
-  for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; ) {
-    hsl.h = (hsl.h + part) % 360;
-    ret.push(tinycolor(hsl));
-  }
-  return ret;
-}
-function _monochromatic(color, results) {
-  results = results || 6;
-  var hsv = tinycolor(color).toHsv();
-  var h = hsv.h, s = hsv.s, v = hsv.v;
-  var ret = [];
-  var modification = 1 / results;
-  while (results--) {
-    ret.push(tinycolor({
-      h,
-      s,
-      v
-    }));
-    v = (v + modification) % 1;
-  }
-  return ret;
+function ae(t, r, e) {
+  r = r || 6, e = e || 30;
+  var a = s(t).toHsl(), i = 360 / e, n = [s(t)];
+  for (a.h = (a.h - (i * r >> 1) + 720) % 360; --r; )
+    a.h = (a.h + i) % 360, n.push(s(a));
+  return n;
 }
-tinycolor.mix = function(color1, color2, amount) {
-  amount = amount === 0 ? 0 : amount || 50;
-  var rgb1 = tinycolor(color1).toRgb();
-  var rgb2 = tinycolor(color2).toRgb();
-  var p = amount / 100;
-  var rgba = {
-    r: (rgb2.r - rgb1.r) * p + rgb1.r,
-    g: (rgb2.g - rgb1.g) * p + rgb1.g,
-    b: (rgb2.b - rgb1.b) * p + rgb1.b,
-    a: (rgb2.a - rgb1.a) * p + rgb1.a
+function ie(t, r) {
+  r = r || 6;
+  for (var e = s(t).toHsv(), a = e.h, i = e.s, n = e.v, o = [], h = 1 / r; r--; )
+    o.push(s({
+      h: a,
+      s: i,
+      v: n
+    })), n = (n + h) % 1;
+  return o;
+}
+s.mix = function(t, r, e) {
+  e = e === 0 ? 0 : e || 50;
+  var a = s(t).toRgb(), i = s(r).toRgb(), n = e / 100, o = {
+    r: (i.r - a.r) * n + a.r,
+    g: (i.g - a.g) * n + a.g,
+    b: (i.b - a.b) * n + a.b,
+    a: (i.a - a.a) * n + a.a
   };
-  return tinycolor(rgba);
+  return s(o);
 };
-tinycolor.readability = function(color1, color2) {
-  var c1 = tinycolor(color1);
-  var c2 = tinycolor(color2);
-  return (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05);
+s.readability = function(t, r) {
+  var e = s(t), a = s(r);
+  return (Math.max(e.getLuminance(), a.getLuminance()) + 0.05) / (Math.min(e.getLuminance(), a.getLuminance()) + 0.05);
 };
-tinycolor.isReadable = function(color1, color2, wcag2) {
-  var readability = tinycolor.readability(color1, color2);
-  var wcag2Parms, out;
-  out = false;
-  wcag2Parms = validateWCAG2Parms(wcag2);
-  switch (wcag2Parms.level + wcag2Parms.size) {
+s.isReadable = function(t, r, e) {
+  var a = s.readability(t, r), i, n;
+  switch (n = !1, i = ue(e), i.level + i.size) {
     case "AAsmall":
     case "AAAlarge":
-      out = readability >= 4.5;
+      n = a >= 4.5;
       break;
     case "AAlarge":
-      out = readability >= 3;
+      n = a >= 3;
       break;
     case "AAAsmall":
-      out = readability >= 7;
+      n = a >= 7;
       break;
   }
-  return out;
+  return n;
 };
-tinycolor.mostReadable = function(baseColor, colorList, args) {
-  var bestColor = null;
-  var bestScore = 0;
-  var readability;
-  var includeFallbackColors, level, size;
-  args = args || {};
-  includeFallbackColors = args.includeFallbackColors;
-  level = args.level;
-  size = args.size;
-  for (var i = 0; i < colorList.length; i++) {
-    readability = tinycolor.readability(baseColor, colorList[i]);
-    if (readability > bestScore) {
-      bestScore = readability;
-      bestColor = tinycolor(colorList[i]);
-    }
-  }
-  if (tinycolor.isReadable(baseColor, bestColor, {
-    level,
-    size
-  }) || !includeFallbackColors) {
-    return bestColor;
-  } else {
-    args.includeFallbackColors = false;
-    return tinycolor.mostReadable(baseColor, ["#fff", "#000"], args);
-  }
+s.mostReadable = function(t, r, e) {
+  var a = null, i = 0, n, o, h, l;
+  e = e || {}, o = e.includeFallbackColors, h = e.level, l = e.size;
+  for (var d = 0; d < r.length; d++)
+    n = s.readability(t, r[d]), n > i && (i = n, a = s(r[d]));
+  return s.isReadable(t, a, {
+    level: h,
+    size: l
+  }) || !o ? a : (e.includeFallbackColors = !1, s.mostReadable(t, ["#fff", "#000"], e));
 };
-var names = tinycolor.names = {
+var j = s.names = {
   aliceblue: "f0f8ff",
   antiquewhite: "faebd7",
   aqua: "0ff",
@@ -788,94 +578,70 @@ var names = tinycolor.names = {
   whitesmoke: "f5f5f5",
   yellow: "ff0",
   yellowgreen: "9acd32"
-};
-var hexNames = tinycolor.hexNames = flip(names);
-function flip(o) {
-  var flipped = {};
-  for (var i in o) {
-    if (o.hasOwnProperty(i)) {
-      flipped[o[i]] = i;
-    }
-  }
-  return flipped;
+}, ne = s.hexNames = se(j);
+function se(t) {
+  var r = {};
+  for (var e in t)
+    t.hasOwnProperty(e) && (r[t[e]] = e);
+  return r;
 }
-function boundAlpha(a) {
-  a = parseFloat(a);
-  if (isNaN(a) || a < 0 || a > 1) {
-    a = 1;
-  }
-  return a;
+function D(t) {
+  return t = parseFloat(t), (isNaN(t) || t < 0 || t > 1) && (t = 1), t;
 }
-function bound01(n, max) {
-  if (isOnePointZero(n))
-    n = "100%";
-  var processPercent = isPercentage(n);
-  n = Math.min(max, Math.max(0, parseFloat(n)));
-  if (processPercent) {
-    n = parseInt(n * max, 10) / 100;
-  }
-  if (Math.abs(n - max) < 1e-6) {
-    return 1;
-  }
-  return n % max / parseFloat(max);
+function u(t, r) {
+  oe(t) && (t = "100%");
+  var e = he(t);
+  return t = Math.min(r, Math.max(0, parseFloat(t))), e && (t = parseInt(t * r, 10) / 100), Math.abs(t - r) < 1e-6 ? 1 : t % r / parseFloat(r);
 }
-function clamp01(val) {
-  return Math.min(1, Math.max(0, val));
+function M(t) {
+  return Math.min(1, Math.max(0, t));
 }
-function parseIntFromHex(val) {
-  return parseInt(val, 16);
+function f(t) {
+  return parseInt(t, 16);
 }
-function isOnePointZero(n) {
-  return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1;
+function oe(t) {
+  return typeof t == "string" && t.indexOf(".") != -1 && parseFloat(t) === 1;
 }
-function isPercentage(n) {
-  return typeof n === "string" && n.indexOf("%") != -1;
+function he(t) {
+  return typeof t == "string" && t.indexOf("%") != -1;
 }
-function pad2(c) {
-  return c.length == 1 ? "0" + c : "" + c;
+function b(t) {
+  return t.length == 1 ? "0" + t : "" + t;
 }
-function convertToPercentage(n) {
-  if (n <= 1) {
-    n = n * 100 + "%";
-  }
-  return n;
+function y(t) {
+  return t <= 1 && (t = t * 100 + "%"), t;
 }
-function convertDecimalToHex(d) {
-  return Math.round(parseFloat(d) * 255).toString(16);
+function I(t) {
+  return Math.round(parseFloat(t) * 255).toString(16);
 }
-function convertHexToDecimal(h) {
-  return parseIntFromHex(h) / 255;
+function F(t) {
+  return f(t) / 255;
 }
-var matchers = function() {
-  var CSS_INTEGER = "[-\\+]?\\d+%?";
-  var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
-  var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
-  var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
-  var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+var p = function() {
+  var t = "[-\\+]?\\d+%?", r = "[-\\+]?\\d*\\.\\d+%?", e = "(?:" + r + ")|(?:" + t + ")", a = "[\\s|\\(]+(" + e + ")[,|\\s]+(" + e + ")[,|\\s]+(" + e + ")\\s*\\)?", i = "[\\s|\\(]+(" + e + ")[,|\\s]+(" + e + ")[,|\\s]+(" + e + ")[,|\\s]+(" + e + ")\\s*\\)?";
   return {
-    CSS_UNIT: new RegExp(CSS_UNIT),
-    rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
-    rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
-    hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
-    hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
-    hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
-    hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
+    CSS_UNIT: new RegExp(e),
+    rgb: new RegExp("rgb" + a),
+    rgba: new RegExp("rgba" + i),
+    hsl: new RegExp("hsl" + a),
+    hsla: new RegExp("hsla" + i),
+    hsv: new RegExp("hsv" + a),
+    hsva: new RegExp("hsva" + i),
     hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
     hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
     hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
     hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
   };
 }();
-function isValidCSSUnit(color) {
-  return !!matchers.CSS_UNIT.exec(color);
-}
-function stringInputToObject(color) {
-  color = color.replace(trimLeft, "").replace(trimRight, "").toLowerCase();
-  var named = false;
-  if (names[color]) {
-    color = names[color];
-    named = true;
-  } else if (color == "transparent") {
+function m(t) {
+  return !!p.CSS_UNIT.exec(t);
+}
+function le(t) {
+  t = t.replace(O, "").replace(G, "").toLowerCase();
+  var r = !1;
+  if (j[t])
+    t = j[t], r = !0;
+  else if (t == "transparent")
     return {
       r: 0,
       g: 0,
@@ -883,203 +649,130 @@ function stringInputToObject(color) {
       a: 0,
       format: "name"
     };
-  }
-  var match;
-  if (match = matchers.rgb.exec(color)) {
-    return {
-      r: match[1],
-      g: match[2],
-      b: match[3]
-    };
-  }
-  if (match = matchers.rgba.exec(color)) {
-    return {
-      r: match[1],
-      g: match[2],
-      b: match[3],
-      a: match[4]
-    };
-  }
-  if (match = matchers.hsl.exec(color)) {
-    return {
-      h: match[1],
-      s: match[2],
-      l: match[3]
-    };
-  }
-  if (match = matchers.hsla.exec(color)) {
-    return {
-      h: match[1],
-      s: match[2],
-      l: match[3],
-      a: match[4]
-    };
-  }
-  if (match = matchers.hsv.exec(color)) {
-    return {
-      h: match[1],
-      s: match[2],
-      v: match[3]
-    };
-  }
-  if (match = matchers.hsva.exec(color)) {
-    return {
-      h: match[1],
-      s: match[2],
-      v: match[3],
-      a: match[4]
-    };
-  }
-  if (match = matchers.hex8.exec(color)) {
-    return {
-      r: parseIntFromHex(match[1]),
-      g: parseIntFromHex(match[2]),
-      b: parseIntFromHex(match[3]),
-      a: convertHexToDecimal(match[4]),
-      format: named ? "name" : "hex8"
-    };
-  }
-  if (match = matchers.hex6.exec(color)) {
-    return {
-      r: parseIntFromHex(match[1]),
-      g: parseIntFromHex(match[2]),
-      b: parseIntFromHex(match[3]),
-      format: named ? "name" : "hex"
-    };
-  }
-  if (match = matchers.hex4.exec(color)) {
-    return {
-      r: parseIntFromHex(match[1] + "" + match[1]),
-      g: parseIntFromHex(match[2] + "" + match[2]),
-      b: parseIntFromHex(match[3] + "" + match[3]),
-      a: convertHexToDecimal(match[4] + "" + match[4]),
-      format: named ? "name" : "hex8"
-    };
-  }
-  if (match = matchers.hex3.exec(color)) {
-    return {
-      r: parseIntFromHex(match[1] + "" + match[1]),
-      g: parseIntFromHex(match[2] + "" + match[2]),
-      b: parseIntFromHex(match[3] + "" + match[3]),
-      format: named ? "name" : "hex"
-    };
-  }
-  return false;
-}
-function validateWCAG2Parms(parms) {
-  var level, size;
-  parms = parms || {
+  var e;
+  return (e = p.rgb.exec(t)) ? {
+    r: e[1],
+    g: e[2],
+    b: e[3]
+  } : (e = p.rgba.exec(t)) ? {
+    r: e[1],
+    g: e[2],
+    b: e[3],
+    a: e[4]
+  } : (e = p.hsl.exec(t)) ? {
+    h: e[1],
+    s: e[2],
+    l: e[3]
+  } : (e = p.hsla.exec(t)) ? {
+    h: e[1],
+    s: e[2],
+    l: e[3],
+    a: e[4]
+  } : (e = p.hsv.exec(t)) ? {
+    h: e[1],
+    s: e[2],
+    v: e[3]
+  } : (e = p.hsva.exec(t)) ? {
+    h: e[1],
+    s: e[2],
+    v: e[3],
+    a: e[4]
+  } : (e = p.hex8.exec(t)) ? {
+    r: f(e[1]),
+    g: f(e[2]),
+    b: f(e[3]),
+    a: F(e[4]),
+    format: r ? "name" : "hex8"
+  } : (e = p.hex6.exec(t)) ? {
+    r: f(e[1]),
+    g: f(e[2]),
+    b: f(e[3]),
+    format: r ? "name" : "hex"
+  } : (e = p.hex4.exec(t)) ? {
+    r: f(e[1] + "" + e[1]),
+    g: f(e[2] + "" + e[2]),
+    b: f(e[3] + "" + e[3]),
+    a: F(e[4] + "" + e[4]),
+    format: r ? "name" : "hex8"
+  } : (e = p.hex3.exec(t)) ? {
+    r: f(e[1] + "" + e[1]),
+    g: f(e[2] + "" + e[2]),
+    b: f(e[3] + "" + e[3]),
+    format: r ? "name" : "hex"
+  } : !1;
+}
+function ue(t) {
+  var r, e;
+  return t = t || {
     level: "AA",
     size: "small"
-  };
-  level = (parms.level || "AA").toUpperCase();
-  size = (parms.size || "small").toLowerCase();
-  if (level !== "AA" && level !== "AAA") {
-    level = "AA";
-  }
-  if (size !== "small" && size !== "large") {
-    size = "small";
-  }
-  return {
-    level,
-    size
+  }, r = (t.level || "AA").toUpperCase(), e = (t.size || "small").toLowerCase(), r !== "AA" && r !== "AAA" && (r = "AA"), e !== "small" && e !== "large" && (e = "small"), {
+    level: r,
+    size: e
   };
 }
-const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Color Picker ]\n*/\n:host {\n  --wj-color-picker-value: #ff0000;\n  --wj-color-picker-radius: 4px;\n}\n.anchor {\n  width: 1rem;\n  height: 1rem;\n  background: var(--wj-color-picker-value);\n}\n.picker {\n  width: 200px;\n  min-height: 90px;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 0 5px 20px rgba(0, 0, 0, 0.1);\n  border-radius: var(--wj-color-picker-radius);\n}\n.color-area {\n  display: block;\n  position: relative;\n  height: 100px;\n  color: var(--wj-color-picker-area);\n  background-image: linear-gradient(rgba(0, 0, 0, 0), #000), linear-gradient(90deg, #fff, currentColor);\n  cursor: crosshair;\n  border-radius: var(--wj-color-picker-radius) var(--wj-color-picker-radius) 0 0;\n}\n.wrapper {\n  display: inline-table;\n  width: calc(100% - 2rem);\n  margin: 1rem;\n}\n.hue {\n  border-radius: 0.25rem;\n  background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);\n  width: 100%;\n  height: 8px;\n  margin: 0.75rem 0 1rem;\n}\n.hue::part(slider) {\n  --wj-slider-color: transparent;\n  --wj-slider-thumb-color: white;\n  --wj-slider-thumb-shadow: 0 0 0 1px rgba(33, 33, 33, 0.14);\n  --wj-slider-thumb-shadow-active: var(--wj-slider-thumb-shadow);\n  --wj-slider-track-color: transparent;\n}\n.alpha-wrapper {\n  border-radius: 0.25rem;\n  width: 100%;\n  height: 8px;\n  margin: 0.75rem 0 1rem;\n  background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\n  background-position: 0 0, 4px 4px;\n  background-size: 8px 8px;\n}\n.alpha {\n  color: var(--wj-color-picker-value);\n  display: block;\n  height: 100%;\n  width: 100%;\n  border-radius: inherit;\n  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), currentColor);\n}\n.alpha::part(slider) {\n  --wj-slider-color: transparent;\n  --wj-slider-thumb-color: white;\n  --wj-slider-thumb-shadow: 0 0 0 1px rgba(33, 33, 33, 0.14);\n  --wj-slider-thumb-shadow-active: var(--wj-slider-thumb-shadow);\n  --wj-slider-track-color: transparent;\n  --wj-slider-track-height: 8px;\n}\n.input-wrapper {\n  display: grid;\n  align-items: center;\n  grid-template-columns: 1fr auto;\n}\n.color-preview {\n  width: 30px !important;\n  height: 30px !important;\n  border-radius: 50%;\n  position: relative;\n  margin-right: 1rem;\n}\n.color-preview:before, .color-preview:after {\n  content: "";\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  left: 0;\n  top: 0;\n  border: 1px solid #fff;\n  border-radius: 50%;\n}\n.color-preview:before {\n  background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\n  background-position: 0 0, 4px 4px;\n  background-size: 8px 8px;\n}\n.color-preview:after {\n  background: var(--wj-color-picker-value);\n}\nwj-input {\n  --wj-input-border-radius: 1rem;\n  --wj-input-margin-bottom: 0;\n}\nwj-input::part(input) {\n  text-align: center;\n}\n.swatches {\n  margin-top: 1rem;\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n.swatch {\n  background: var(--wj-color-picker-swatch);\n  position: relative;\n  width: 20px;\n  height: 20px;\n  margin: 0 4px 6px 4px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  color: inherit;\n  white-space: nowrap;\n  overflow: hidden;\n  cursor: pointer;\n}\n.marker {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  margin: -6px 0 0 -6px;\n  border: 1px solid #fff;\n  border-radius: 50%;\n  background-color: var(--wj-color-picker-value);\n  cursor: pointer;\n}';
-class ColorPicker extends WJElement {
+const ce = `/*!
+* direction.scss
+*/:host{--wj-color-picker-value: #ff0000;--wj-color-picker-radius: 4px}.anchor{width:1rem;height:1rem;background:var(--wj-color-picker-value)}.picker{width:200px;min-height:90px;box-shadow:0 0 5px #0000000d,0 5px 20px #0000001a;border-radius:var(--wj-color-picker-radius)}.color-area{display:block;position:relative;height:100px;color:var(--wj-color-picker-area);background-image:linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,currentColor);cursor:crosshair;border-radius:var(--wj-color-picker-radius) var(--wj-color-picker-radius) 0 0}.wrapper{display:inline-table;width:calc(100% - 2rem);margin:1rem}.hue{border-radius:.25rem;background-image:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%);width:100%;height:8px;margin:.75rem 0 1rem}.hue::part(slider){--wj-slider-color: transparent;--wj-slider-thumb-color: white;--wj-slider-thumb-shadow: 0 0 0 1px rgba(33, 33, 33, .14);--wj-slider-thumb-shadow-active: var(--wj-slider-thumb-shadow);--wj-slider-track-color: transparent}.alpha-wrapper{border-radius:.25rem;width:100%;height:8px;margin:.75rem 0 1rem;background-image:repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);background-position:0 0,4px 4px;background-size:8px 8px}.alpha{color:var(--wj-color-picker-value);display:block;height:100%;width:100%;border-radius:inherit;background-image:linear-gradient(90deg,rgba(0,0,0,0),currentColor)}.alpha::part(slider){--wj-slider-color: transparent;--wj-slider-thumb-color: white;--wj-slider-thumb-shadow: 0 0 0 1px rgba(33, 33, 33, .14);--wj-slider-thumb-shadow-active: var(--wj-slider-thumb-shadow);--wj-slider-track-color: transparent;--wj-slider-track-height: 8px}.input-wrapper{display:grid;align-items:center;grid-template-columns:1fr auto}.color-preview{width:30px!important;height:30px!important;border-radius:50%;position:relative;margin-right:1rem}.color-preview:before,.color-preview:after{content:"";position:absolute;height:100%;width:100%;left:0;top:0;border:1px solid #fff;border-radius:50%}.color-preview:before{background-image:repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);background-position:0 0,4px 4px;background-size:8px 8px}.color-preview:after{background:var(--wj-color-picker-value)}wj-input{--wj-input-border-radius: 1rem;--wj-input-margin-bottom: 0}wj-input::part(input){text-align:center}.swatches{margin-top:1rem;display:flex;justify-content:center;flex-wrap:wrap}.swatch{background:var(--wj-color-picker-swatch);position:relative;width:20px;height:20px;margin:0 4px 6px;padding:0;border:0;border-radius:50%;color:inherit;white-space:nowrap;overflow:hidden;cursor:pointer}.marker{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid #fff;border-radius:50%;background-color:var(--wj-color-picker-value);cursor:pointer}
+`;
+class de extends z {
   constructor() {
     super();
-    __publicField(this, "className", "ColorPicker");
-    __publicField(this, "moveMarker", (event) => {
-      const pointer = this.getPointerPosition(event);
+    v(this, "className", "ColorPicker");
+    v(this, "moveMarker", (e) => {
+      const a = this.getPointerPosition(e);
       console.log("colorAreaDimension", this.colorAreaDimension);
-      let x = pointer.pageX - this.colorAreaDimension.x;
-      let y = pointer.pageY - this.colorAreaDimension.y;
-      this.setColor(this.setColorAtPosition(x, y), "marker");
-      this.setMarkerPosition(x, y);
+      let i = a.pageX - this.colorAreaDimension.x, n = a.pageY - this.colorAreaDimension.y;
+      this.setColor(this.setColorAtPosition(i, n), "marker"), this.setMarkerPosition(i, n);
     });
     /*
     * @desc nanstavenie pozicie markera podla farby
     * @param color
     * @returns {{x: number, y: number}}
     */
-    __publicField(this, "setMarkerPositionByColor", (color = "red") => {
-      let hsva = tinycolor(color).toHsv();
+    v(this, "setMarkerPositionByColor", (e = "red") => {
+      let a = s(e).toHsv();
       return {
-        x: this.colorAreaDimension.width * hsva.s,
-        y: this.colorAreaDimension.height - this.colorAreaDimension.height * hsva.v
+        x: this.colorAreaDimension.width * a.s,
+        y: this.colorAreaDimension.height - this.colorAreaDimension.height * a.v
       };
     });
     /*
     * Set css variable color value
     */
-    __publicField(this, "setColor", (color = null, type = "") => {
-      let currentColor = color;
-      if (currentColor === null && type === "") {
-        console.log("SOM NULL");
-        currentColor = tinycolor(this.input.value);
-        this.colorArea.style.setProperty("--wj-color-picker-area", currentColor.toHexString());
-      }
-      if (type === "marker") {
-        console.log("SOM MARKER");
-        this.alphaSlider.value = 100;
-        this.alphaSlider.style.setProperty("--wj-color-picker-value", currentColor.toHexString());
-        this.colorPreview.style.setProperty("--wj-color-picker-value", currentColor.toHex8String());
-        this.picker.style.setProperty("--wj-color-picker-value", currentColor.toHexString());
-        this.marker.style.setProperty("--wj-color-picker-value", currentColor.toHex8String());
+    v(this, "setColor", (e = null, a = "") => {
+      let i = e;
+      if (i === null && a === "" && (console.log("SOM NULL"), i = s(this.input.value), this.colorArea.style.setProperty("--wj-color-picker-area", i.toHexString())), a === "marker" && (console.log("SOM MARKER"), this.alphaSlider.value = 100, this.alphaSlider.style.setProperty("--wj-color-picker-value", i.toHexString()), this.colorPreview.style.setProperty("--wj-color-picker-value", i.toHex8String()), this.picker.style.setProperty("--wj-color-picker-value", i.toHexString()), this.marker.style.setProperty("--wj-color-picker-value", i.toHex8String())), a === "hue") {
+        let n = this.setColorAtPosition(this.markerPosition.x, this.markerPosition.y, this.alphaSlider.value);
+        i = s(this.getHSVA(this.hueSlider.value, this.alphaSlider.value)), this.colorPreview.style.setProperty("--wj-color-picker-value", n.toHex8String()), this.marker.style.setProperty("--wj-color-picker-value", n.toHexString()), this.alphaSlider.style.setProperty("--wj-color-picker-value", i.toHexString()), this.colorArea.style.setProperty("--wj-color-picker-area", i.toHexString()), this.input.value = n.toHex8String();
       }
-      if (type === "hue") {
-        let markerColorByPosition = this.setColorAtPosition(this.markerPosition.x, this.markerPosition.y, this.alphaSlider.value);
-        currentColor = tinycolor(this.getHSVA(this.hueSlider.value, this.alphaSlider.value));
-        this.colorPreview.style.setProperty("--wj-color-picker-value", markerColorByPosition.toHex8String());
-        this.marker.style.setProperty("--wj-color-picker-value", markerColorByPosition.toHexString());
-        this.alphaSlider.style.setProperty("--wj-color-picker-value", currentColor.toHexString());
-        this.colorArea.style.setProperty("--wj-color-picker-area", currentColor.toHexString());
-        this.input.value = markerColorByPosition.toHex8String();
+      if (a === "alpha") {
+        i = s(this.input.value);
+        let n = i.toHsv();
+        n.a = this.alphaSlider.value / 100, i = s(n), this.colorPreview.style.setProperty("--wj-color-picker-value", i.toHex8String());
       }
-      if (type === "alpha") {
-        currentColor = tinycolor(this.input.value);
-        let hsv = currentColor.toHsv();
-        hsv.a = this.alphaSlider.value / 100;
-        currentColor = tinycolor(hsv);
-        this.colorPreview.style.setProperty("--wj-color-picker-value", currentColor.toHex8String());
-      }
-      if (type === "swatch") {
-        this.colorPreview.style.setProperty("--wj-color-picker-value", currentColor.toHex8String());
-        this.marker.style.setProperty("--wj-color-picker-value", currentColor.toHexString());
-        this.alphaSlider.style.setProperty("--wj-color-picker-value", currentColor.toHexString());
-        this.colorArea.style.setProperty("--wj-color-picker-area", currentColor.toHex8String());
-        this.markerPosition = this.setMarkerPositionByColor(currentColor.toHex8String());
-        this.setMarkerPosition(this.markerPosition.x, this.markerPosition.y);
-      }
-      this.input.value = currentColor.toHex8String();
-      this.anchor.style.setProperty("--wj-color-picker-value", currentColor.toHexString());
+      a === "swatch" && (this.colorPreview.style.setProperty("--wj-color-picker-value", i.toHex8String()), this.marker.style.setProperty("--wj-color-picker-value", i.toHexString()), this.alphaSlider.style.setProperty("--wj-color-picker-value", i.toHexString()), this.colorArea.style.setProperty("--wj-color-picker-area", i.toHex8String()), this.markerPosition = this.setMarkerPositionByColor(i.toHex8String()), this.setMarkerPosition(this.markerPosition.x, this.markerPosition.y)), this.input.value = i.toHex8String(), this.anchor.style.setProperty("--wj-color-picker-value", i.toHexString());
     });
     /*
     * Set hue sliders
      */
-    __publicField(this, "setHue", (e) => {
-      this.hueSlider.value = e.detail.value;
-      this.setColor(null, "hue");
+    v(this, "setHue", (e) => {
+      this.hueSlider.value = e.detail.value, this.setColor(null, "hue");
     });
     /*
     * Set alpha sliders
      */
-    __publicField(this, "setAlpha", (e) => {
-      this.alphaSlider.value = e.detail.value;
-      this.setColor(null, "alpha");
+    v(this, "setAlpha", (e) => {
+      this.alphaSlider.value = e.detail.value, this.setColor(null, "alpha");
     });
     /*
     * Get HSVA color order by hue and alpha
      */
-    __publicField(this, "getHSVA", (hue, alpha) => {
-      return `hsva(${hue}, 100%, 100%, ${alpha / 100})`;
-    });
+    v(this, "getHSVA", (e, a) => `hsva(${e}, 100%, 100%, ${a / 100})`);
     this._markerPosition = {
       markerX: "0",
       markerY: "0"
-    };
-    this._swatches = [
+    }, this._swatches = [
       "#264653",
       "#2a9d8f",
       "#e9c46a",
@@ -1093,20 +786,20 @@ class ColorPicker extends WJElement {
       "rgba(0,119,182,0.8)"
     ];
   }
-  set markerPosition(value) {
-    this._markerPosition = value;
+  set markerPosition(e) {
+    this._markerPosition = e;
   }
   get markerPosition() {
     return this._markerPosition;
   }
-  set swatches(value) {
-    this.setAttribute("swatches", value.split(","));
+  set swatches(e) {
+    this.setAttribute("swatches", e.split(","));
   }
   get swatches() {
     return this._swatches;
   }
   static get cssStyleSheet() {
-    return styles;
+    return ce;
   }
   static get observedAttributes() {
     return [];
@@ -1114,120 +807,66 @@ class ColorPicker extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native-color-picker");
-    let anchor = document.createElement("div");
-    anchor.setAttribute("slot", "anchor");
-    anchor.classList.add("anchor");
-    let picker = document.createElement("div");
-    picker.classList.add("picker");
-    let marker = document.createElement("div");
-    marker.classList.add("marker");
-    let colorArea = document.createElement("div");
-    colorArea.classList.add("color-area");
-    colorArea.addEventListener("click", this.moveMarker);
-    let wrapper = document.createElement("div");
-    wrapper.classList.add("wrapper");
-    let hueSlider = document.createElement("wj-slider");
-    hueSlider.setAttribute("min", "0");
-    hueSlider.setAttribute("max", "360");
-    hueSlider.classList.add("hue");
-    hueSlider.addEventListener("wj:slider-move", this.setHue);
-    let alphaWrapper = document.createElement("div");
-    alphaWrapper.classList.add("alpha-wrapper");
-    let alphaSlider = document.createElement("wj-slider");
-    alphaSlider.setAttribute("min", "0");
-    alphaSlider.setAttribute("max", "100");
-    alphaSlider.setAttribute("value", "50");
-    alphaSlider.classList.add("alpha");
-    alphaSlider.addEventListener("wj:slider-move", this.setAlpha);
-    let inputWrapper = document.createElement("div");
-    inputWrapper.classList.add("input-wrapper");
-    let colorPreview = document.createElement("div");
-    colorPreview.classList.add("color-preview");
-    let input = document.createElement("wj-input");
-    input.classList.add("input");
-    input.setAttribute("variant", "standard");
-    input.value = "#ff0000";
-    colorArea.appendChild(marker);
-    alphaWrapper.appendChild(alphaSlider);
-    inputWrapper.appendChild(colorPreview);
-    inputWrapper.appendChild(input);
-    wrapper.appendChild(hueSlider);
-    wrapper.appendChild(alphaWrapper);
-    wrapper.appendChild(inputWrapper);
-    picker.appendChild(colorArea);
-    picker.appendChild(wrapper);
-    this.createSwatches(wrapper);
-    let popup = document.createElement("wj-popup");
-    popup.setAttribute("placement", this.placement || "bottom-start");
-    popup.setAttribute("offset", this.offset);
-    popup.setAttribute("manual", "");
-    popup.appendChild(anchor);
-    popup.appendChild(picker);
-    native.appendChild(popup);
-    fragment.appendChild(native);
-    this.popup = popup;
-    this.anchor = anchor;
-    this.picker = picker;
-    this.marker = marker;
-    this.colorArea = colorArea;
-    this.hueSlider = hueSlider;
-    this.alphaSlider = alphaSlider;
-    this.colorPreview = colorPreview;
-    this.input = input;
-    return fragment;
-  }
-  createSwatches(node) {
+  draw(e, a, i) {
+    let n = document.createDocumentFragment(), o = document.createElement("div");
+    o.classList.add("native-color-picker");
+    let h = document.createElement("div");
+    h.setAttribute("slot", "anchor"), h.classList.add("anchor");
+    let l = document.createElement("div");
+    l.classList.add("picker");
+    let d = document.createElement("div");
+    d.classList.add("marker");
+    let g = document.createElement("div");
+    g.classList.add("color-area"), g.addEventListener("click", this.moveMarker);
+    let c = document.createElement("div");
+    c.classList.add("wrapper");
+    let x = document.createElement("wj-slider");
+    x.setAttribute("min", "0"), x.setAttribute("max", "360"), x.classList.add("hue"), x.addEventListener("wj:slider-move", this.setHue);
+    let H = document.createElement("div");
+    H.classList.add("alpha-wrapper");
+    let w = document.createElement("wj-slider");
+    w.setAttribute("min", "0"), w.setAttribute("max", "100"), w.setAttribute("value", "50"), w.classList.add("alpha"), w.addEventListener("wj:slider-move", this.setAlpha);
+    let A = document.createElement("div");
+    A.classList.add("input-wrapper");
+    let P = document.createElement("div");
+    P.classList.add("color-preview");
+    let _ = document.createElement("wj-input");
+    _.classList.add("input"), _.setAttribute("variant", "standard"), _.value = "#ff0000", g.appendChild(d), H.appendChild(w), A.appendChild(P), A.appendChild(_), c.appendChild(x), c.appendChild(H), c.appendChild(A), l.appendChild(g), l.appendChild(c), this.createSwatches(c);
+    let k = document.createElement("wj-popup");
+    return k.setAttribute("placement", this.placement || "bottom-start"), k.setAttribute("offset", this.offset), k.setAttribute("manual", ""), k.appendChild(h), k.appendChild(l), o.appendChild(k), n.appendChild(o), this.popup = k, this.anchor = h, this.picker = l, this.marker = d, this.colorArea = g, this.hueSlider = x, this.alphaSlider = w, this.colorPreview = P, this.input = _, n;
+  }
+  createSwatches(e) {
     if (this.swatches.length === 0)
       return;
-    let swatches = document.createElement("div");
-    swatches.classList.add("swatches");
-    this.swatches.forEach((swatch) => {
-      let button = document.createElement("button");
-      button.classList.add("swatch");
-      button.style.setProperty("--wj-color-picker-swatch", swatch);
-      button.addEventListener("click", (e) => {
-        this.setSliders(swatch);
-        this.setColor(tinycolor(swatch), "swatch");
-      });
-      swatches.appendChild(button);
-    });
-    node.appendChild(swatches);
-  }
-  setSliders(color) {
-    let hsva = tinycolor(color).toHsv();
-    this.hueSlider.value = hsva.h;
-    this.alphaSlider.value = hsva.a * 100;
+    let a = document.createElement("div");
+    a.classList.add("swatches"), this.swatches.forEach((i) => {
+      let n = document.createElement("button");
+      n.classList.add("swatch"), n.style.setProperty("--wj-color-picker-swatch", i), n.addEventListener("click", (o) => {
+        this.setSliders(i), this.setColor(s(i), "swatch");
+      }), a.appendChild(n);
+    }), e.appendChild(a);
+  }
+  setSliders(e) {
+    let a = s(e).toHsv();
+    this.hueSlider.value = a.h, this.alphaSlider.value = a.a * 100;
   }
   afterDraw() {
-    this.init = false;
-    this.addEventListener("wj:popup-show", (e) => {
-      if (!this.init) {
-        this.colorAreaDimension = {
-          width: this.colorArea.offsetWidth,
-          height: this.colorArea.offsetHeight,
-          x: this.colorArea.offsetLeft,
-          y: this.colorArea.offsetTop
-        };
-        this.markerPosition = this.setMarkerPositionByColor(this.input.value);
-        this.setMarkerPosition(this.markerPosition.x, this.markerPosition.y);
-        if (this.input.value != "")
-          this.alphaSlider.value = 100;
-        this.setColor();
-        this.init = true;
-      }
+    this.init = !1, this.addEventListener("wj:popup-show", (e) => {
+      this.init || (this.colorAreaDimension = {
+        width: this.colorArea.offsetWidth,
+        height: this.colorArea.offsetHeight,
+        x: this.colorArea.offsetLeft,
+        y: this.colorArea.offsetTop
+      }, this.markerPosition = this.setMarkerPositionByColor(this.input.value), this.setMarkerPosition(this.markerPosition.x, this.markerPosition.y), this.input.value != "" && (this.alphaSlider.value = 100), this.setColor(), this.init = !0);
     });
   }
   disconnectedCallback() {
-    this.init = false;
+    this.init = !1;
   }
-  getPointerPosition(event) {
+  getPointerPosition(e) {
     return {
-      pageX: event.changedTouches ? event.changedTouches[0].pageX : event.pageX,
-      pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY
+      pageX: e.changedTouches ? e.changedTouches[0].pageX : e.pageX,
+      pageY: e.changedTouches ? e.changedTouches[0].pageY : e.pageY
     };
   }
   /*
@@ -1235,15 +874,11 @@ class ColorPicker extends WJElement {
   * @param x
   * @param y
   */
-  setMarkerPosition(x, y) {
-    x = x < 0 ? 0 : x > this.colorAreaDimension.width ? this.colorAreaDimension.width : x;
-    y = y < 0 ? 0 : y > this.colorAreaDimension.height ? this.colorAreaDimension.height : y;
-    this.markerPosition = {
-      x,
-      y
-    };
-    this.marker.style.left = `${x}px`;
-    this.marker.style.top = `${y}px`;
+  setMarkerPosition(e, a) {
+    e = e < 0 ? 0 : e > this.colorAreaDimension.width ? this.colorAreaDimension.width : e, a = a < 0 ? 0 : a > this.colorAreaDimension.height ? this.colorAreaDimension.height : a, this.markerPosition = {
+      x: e,
+      y: a
+    }, this.marker.style.left = `${e}px`, this.marker.style.top = `${a}px`;
   }
   /*
   * nastavenie farby podla pozicie markera
@@ -1251,18 +886,18 @@ class ColorPicker extends WJElement {
   * @param y
   * @returns {tinycolor}
   */
-  setColorAtPosition(x, y, alpha = 100) {
-    console.log("x", x, "y", y, "alpha", alpha);
-    const hsva = {
+  setColorAtPosition(e, a, i = 100) {
+    console.log("x", e, "y", a, "alpha", i);
+    const n = {
       h: this.hueSlider.value * 1,
-      s: x / this.colorAreaDimension.width * 100,
-      v: 100 - y / this.colorAreaDimension.height * 100,
-      a: alpha / 100
+      s: e / this.colorAreaDimension.width * 100,
+      v: 100 - a / this.colorAreaDimension.height * 100,
+      a: i / 100
     };
-    return tinycolor(hsva);
+    return s(n);
   }
 }
-customElements.get("wj-color-picker") || window.customElements.define("wj-color-picker", ColorPicker);
+customElements.get("wj-color-picker") || window.customElements.define("wj-color-picker", de);
 export {
-  ColorPicker
+  de as ColorPicker
 };