wj-elements 0.7.7 → 0.8.0

package/dist/wje-color-picker.js

@@ -8,1557 +8,538 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var _init;
-import WJElement from "./wje-element.js";
-import { event } from "./event.js";
-function _typeof(obj) {
-  "@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 this.getBrightness() < 128;
-  },
-  isLight: function isLight() {
-    return !this.isDark();
-  },
-  isValid: function isValid() {
-    return this._ok;
-  },
-  getOriginalInput: function getOriginalInput() {
-    return this._originalInput;
-  },
-  getFormat: function getFormat() {
-    return this._format;
-  },
-  getAlpha: function getAlpha() {
-    return this._a;
-  },
-  getBrightness: function getBrightness() {
-    var rgb = this.toRgb();
-    return (rgb.r * 299 + rgb.g * 587 + rgb.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;
-  },
-  setAlpha: function setAlpha(value) {
-    this._a = boundAlpha(value);
-    this._roundA = Math.round(100 * this._a) / 100;
-    return this;
-  },
-  toHsv: function toHsv() {
-    var hsv = rgbToHsv(this._r, this._g, this._b);
-    return {
-      h: hsv.h * 360,
-      s: hsv.s,
-      v: hsv.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 + ")";
-  },
-  toHsl: function toHsl() {
-    var hsl = rgbToHsl(this._r, this._g, this._b);
-    return {
-      h: hsl.h * 360,
-      s: hsl.s,
-      l: hsl.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 + ")";
-  },
-  toHex: function toHex(allow3Char) {
-    return rgbToHex(this._r, this._g, this._b, allow3Char);
-  },
-  toHexString: function toHexString(allow3Char) {
-    return "#" + this.toHex(allow3Char);
-  },
-  toHex8: function toHex8(allow4Char) {
-    return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
-  },
-  toHex8String: function toHex8String(allow4Char) {
-    return "#" + this.toHex8(allow4Char);
-  },
-  toRgb: function toRgb() {
-    return {
-      r: Math.round(this._r),
-      g: Math.round(this._g),
-      b: Math.round(this._b),
-      a: this._a
-    };
-  },
-  toRgbString: function toRgbString() {
-    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() {
-    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) + "%",
-      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 + ")";
-  },
-  toName: function toName() {
-    if (this._a === 0) {
-      return "transparent";
-    }
-    if (this._a < 1) {
+var _t;
+import t from "./wje-element.js";
+import { event as e } from "./event.js";
+function r(t2) {
+  return r = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(t3) {
+    return typeof t3;
+  } : function(t3) {
+    return t3 && "function" == typeof Symbol && t3.constructor === Symbol && t3 !== Symbol.prototype ? "symbol" : typeof t3;
+  }, r(t2);
+}
+var i = /^\s+/, a = /\s+$/;
+function n(t2, e2) {
+  if (e2 = e2 || {}, (t2 = t2 || "") instanceof n) return t2;
+  if (!(this instanceof n)) return new n(t2, e2);
+  var o2 = (function(t3) {
+    var e3 = { r: 0, g: 0, b: 0 }, n2 = 1, o3 = null, s2 = null, h2 = null, l2 = false, u2 = false;
+    "string" == typeof t3 && (t3 = (function(t4) {
+      t4 = t4.replace(i, "").replace(a, "").toLowerCase();
+      var e4, r2 = false;
+      if (y[t4]) t4 = y[t4], r2 = true;
+      else if ("transparent" == t4) return { r: 0, g: 0, b: 0, a: 0, format: "name" };
+      if (e4 = N.rgb.exec(t4)) return { r: e4[1], g: e4[2], b: e4[3] };
+      if (e4 = N.rgba.exec(t4)) return { r: e4[1], g: e4[2], b: e4[3], a: e4[4] };
+      if (e4 = N.hsl.exec(t4)) return { h: e4[1], s: e4[2], l: e4[3] };
+      if (e4 = N.hsla.exec(t4)) return { h: e4[1], s: e4[2], l: e4[3], a: e4[4] };
+      if (e4 = N.hsv.exec(t4)) return { h: e4[1], s: e4[2], v: e4[3] };
+      if (e4 = N.hsva.exec(t4)) return { h: e4[1], s: e4[2], v: e4[3], a: e4[4] };
+      if (e4 = N.hex8.exec(t4)) return { r: j(e4[1]), g: j(e4[2]), b: j(e4[3]), a: E(e4[4]), format: r2 ? "name" : "hex8" };
+      if (e4 = N.hex6.exec(t4)) return { r: j(e4[1]), g: j(e4[2]), b: j(e4[3]), format: r2 ? "name" : "hex" };
+      if (e4 = N.hex4.exec(t4)) return { r: j(e4[1] + "" + e4[1]), g: j(e4[2] + "" + e4[2]), b: j(e4[3] + "" + e4[3]), a: E(e4[4] + "" + e4[4]), format: r2 ? "name" : "hex8" };
+      if (e4 = N.hex3.exec(t4)) return { r: j(e4[1] + "" + e4[1]), g: j(e4[2] + "" + e4[2]), b: j(e4[3] + "" + e4[3]), format: r2 ? "name" : "hex" };
       return false;
-    }
-    return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
-  },
-  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);
-    }
-    return "progid:DXImageTransform.Microsoft.gradient(" + gradientType + "startColorstr=" + hex8String + ",endColorstr=" + secondHex8String + ")";
-  },
-  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();
+    })(t3));
+    "object" == r(t3) && (D(t3.r) && D(t3.g) && D(t3.b) ? (c2 = t3.r, d2 = t3.g, f2 = t3.b, e3 = { r: 255 * M(c2, 255), g: 255 * M(d2, 255), b: 255 * M(f2, 255) }, l2 = true, u2 = "%" === String(t3.r).substr(-1) ? "prgb" : "rgb") : D(t3.h) && D(t3.s) && D(t3.v) ? (o3 = P(t3.s), s2 = P(t3.v), e3 = (function(t4, e4, r2) {
+      t4 = 6 * M(t4, 360), e4 = M(e4, 100), r2 = M(r2, 100);
+      var i2 = Math.floor(t4), a2 = t4 - i2, n3 = r2 * (1 - e4), o4 = r2 * (1 - a2 * e4), s3 = r2 * (1 - (1 - a2) * e4), h3 = i2 % 6, l3 = [r2, o4, n3, n3, s3, r2][h3], u3 = [s3, r2, r2, o4, n3, n3][h3], c3 = [n3, n3, s3, r2, r2, o4][h3];
+      return { r: 255 * l3, g: 255 * u3, b: 255 * c3 };
+    })(t3.h, o3, s2), l2 = true, u2 = "hsv") : D(t3.h) && D(t3.s) && D(t3.l) && (o3 = P(t3.s), h2 = P(t3.l), e3 = (function(t4, e4, r2) {
+      var i2, a2, n3;
+      function o4(t5, e5, r3) {
+        return r3 < 0 && (r3 += 1), r3 > 1 && (r3 -= 1), r3 < 1 / 6 ? t5 + 6 * (e5 - t5) * r3 : r3 < 0.5 ? e5 : r3 < 2 / 3 ? t5 + (e5 - t5) * (2 / 3 - r3) * 6 : t5;
       }
-      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();
-  },
-  clone: function clone() {
-    return tinycolor(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;
-  },
-  lighten: function lighten() {
-    return this._applyModification(_lighten, arguments);
-  },
-  brighten: function brighten() {
-    return this._applyModification(_brighten, arguments);
-  },
-  darken: function darken() {
-    return this._applyModification(_darken, arguments);
-  },
-  desaturate: function desaturate() {
-    return this._applyModification(_desaturate, arguments);
-  },
-  saturate: function saturate() {
-    return this._applyModification(_saturate, arguments);
-  },
-  greyscale: function greyscale() {
-    return this._applyModification(_greyscale, arguments);
-  },
-  spin: function spin() {
-    return this._applyModification(_spin, arguments);
-  },
-  _applyCombination: function _applyCombination(fn, args) {
-    return fn.apply(null, [this].concat([].slice.call(args)));
-  },
-  analogous: function analogous() {
-    return this._applyCombination(_analogous, arguments);
-  },
-  complement: function complement() {
-    return this._applyCombination(_complement, arguments);
-  },
-  monochromatic: function monochromatic() {
-    return this._applyCombination(_monochromatic, arguments);
-  },
-  splitcomplement: function splitcomplement() {
-    return this._applyCombination(_splitcomplement, 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]);
-  },
-  tetrad: function tetrad() {
-    return this._applyCombination(polyad, [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]);
-        }
+      if (t4 = M(t4, 360), e4 = M(e4, 100), r2 = M(r2, 100), 0 === e4) i2 = a2 = n3 = r2;
+      else {
+        var s3 = r2 < 0.5 ? r2 * (1 + e4) : r2 + e4 - r2 * e4, h3 = 2 * r2 - s3;
+        i2 = o4(h3, s3, t4 + 1 / 3), a2 = o4(h3, s3, t4), n3 = o4(h3, s3, t4 - 1 / 3);
       }
-    }
-    color = newColor;
-  }
-  return tinycolor(color, opts);
-};
-function inputToRGB(color) {
-  var rgb = {
-    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
-  };
-}
-function rgbToRgb(r, g, b) {
-  return {
-    r: bound01(r, 255) * 255,
-    g: bound01(g, 255) * 255,
-    b: bound01(b, 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);
+      return { r: 255 * i2, g: 255 * a2, b: 255 * n3 };
+    })(t3.h, o3, h2), l2 = true, u2 = "hsl"), t3.hasOwnProperty("a") && (n2 = t3.a));
+    var c2, d2, f2;
+    return n2 = _(n2), { ok: l2, format: t3.format || u2, r: Math.min(255, Math.max(e3.r, 0)), g: Math.min(255, Math.max(e3.g, 0)), b: Math.min(255, Math.max(e3.b, 0)), a: n2 };
+  })(t2);
+  this._originalInput = t2, this._r = o2.r, this._g = o2.g, this._b = o2.b, this._a = o2.a, this._roundA = Math.round(100 * this._a) / 100, this._format = e2.format || o2.format, this._gradientType = e2.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 = o2.ok;
+}
+function o(t2, e2, r2) {
+  t2 = M(t2, 255), e2 = M(e2, 255), r2 = M(r2, 255);
+  var i2, a2, n2 = Math.max(t2, e2, r2), o2 = Math.min(t2, e2, r2), s2 = (n2 + o2) / 2;
+  if (n2 == o2) i2 = a2 = 0;
+  else {
+    var h2 = n2 - o2;
+    switch (a2 = s2 > 0.5 ? h2 / (2 - n2 - o2) : h2 / (n2 + o2), n2) {
+      case t2:
+        i2 = (e2 - r2) / h2 + (e2 < r2 ? 6 : 0);
         break;
-      case g:
-        h = (b - r) / d + 2;
-        break;
-      case b:
-        h = (r - g) / d + 4;
+      case e2:
+        i2 = (r2 - t2) / h2 + 2;
         break;
+      case r2:
+        i2 = (t2 - e2) / h2 + 4;
     }
-    h /= 6;
-  }
-  return {
-    h,
-    s,
-    l
-  };
-}
-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;
-  }
-  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);
-  }
-  return {
-    r: r * 255,
-    g: g * 255,
-    b: b * 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);
-        break;
-      case g:
-        h = (b - r) / d + 2;
+    i2 /= 6;
+  }
+  return { h: i2, s: a2, l: s2 };
+}
+function s(t2, e2, r2) {
+  t2 = M(t2, 255), e2 = M(e2, 255), r2 = M(r2, 255);
+  var i2, a2, n2 = Math.max(t2, e2, r2), o2 = Math.min(t2, e2, r2), s2 = n2, h2 = n2 - o2;
+  if (a2 = 0 === n2 ? 0 : h2 / n2, n2 == o2) i2 = 0;
+  else {
+    switch (n2) {
+      case t2:
+        i2 = (e2 - r2) / h2 + (e2 < r2 ? 6 : 0);
         break;
-      case b:
-        h = (r - g) / d + 4;
+      case e2:
+        i2 = (r2 - t2) / h2 + 2;
         break;
+      case r2:
+        i2 = (t2 - e2) / h2 + 4;
     }
-    h /= 6;
-  }
-  return {
-    h,
-    s,
-    v
-  };
-}
-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];
-  return {
-    r: r * 255,
-    g: g * 255,
-    b: b * 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 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 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("");
-}
-tinycolor.equals = function(color1, color2) {
-  if (!color1 || !color2) return false;
-  return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
-};
-tinycolor.random = function() {
-  return tinycolor.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) {
-    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
-    }));
-  }
-  return result;
-}
-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 _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;
-}
-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
-  };
-  return tinycolor(rgba);
-};
-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);
-};
-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) {
+    i2 /= 6;
+  }
+  return { h: i2, s: a2, v: s2 };
+}
+function h(t2, e2, r2, i2) {
+  var a2 = [H(Math.round(t2).toString(16)), H(Math.round(e2).toString(16)), H(Math.round(r2).toString(16))];
+  return i2 && a2[0].charAt(0) == a2[0].charAt(1) && a2[1].charAt(0) == a2[1].charAt(1) && a2[2].charAt(0) == a2[2].charAt(1) ? a2[0].charAt(0) + a2[1].charAt(0) + a2[2].charAt(0) : a2.join("");
+}
+function l(t2, e2, r2, i2) {
+  return [H(C(i2)), H(Math.round(t2).toString(16)), H(Math.round(e2).toString(16)), H(Math.round(r2).toString(16))].join("");
+}
+function u(t2, e2) {
+  e2 = 0 === e2 ? 0 : e2 || 10;
+  var r2 = n(t2).toHsl();
+  return r2.s -= e2 / 100, r2.s = S(r2.s), n(r2);
+}
+function c(t2, e2) {
+  e2 = 0 === e2 ? 0 : e2 || 10;
+  var r2 = n(t2).toHsl();
+  return r2.s += e2 / 100, r2.s = S(r2.s), n(r2);
+}
+function d(t2) {
+  return n(t2).desaturate(100);
+}
+function f(t2, e2) {
+  e2 = 0 === e2 ? 0 : e2 || 10;
+  var r2 = n(t2).toHsl();
+  return r2.l += e2 / 100, r2.l = S(r2.l), n(r2);
+}
+function p(t2, e2) {
+  e2 = 0 === e2 ? 0 : e2 || 10;
+  var r2 = n(t2).toRgb();
+  return r2.r = Math.max(0, Math.min(255, r2.r - Math.round(-e2 / 100 * 255))), r2.g = Math.max(0, Math.min(255, r2.g - Math.round(-e2 / 100 * 255))), r2.b = Math.max(0, Math.min(255, r2.b - Math.round(-e2 / 100 * 255))), n(r2);
+}
+function g(t2, e2) {
+  e2 = 0 === e2 ? 0 : e2 || 10;
+  var r2 = n(t2).toHsl();
+  return r2.l -= e2 / 100, r2.l = S(r2.l), n(r2);
+}
+function m(t2, e2) {
+  var r2 = n(t2).toHsl(), i2 = (r2.h + e2) % 360;
+  return r2.h = i2 < 0 ? 360 + i2 : i2, n(r2);
+}
+function b(t2) {
+  var e2 = n(t2).toHsl();
+  return e2.h = (e2.h + 180) % 360, n(e2);
+}
+function v(t2, e2) {
+  if (isNaN(e2) || e2 <= 0) throw new Error("Argument to polyad must be a positive number");
+  for (var r2 = n(t2).toHsl(), i2 = [n(t2)], a2 = 360 / e2, o2 = 1; o2 < e2; o2++) i2.push(n({ h: (r2.h + o2 * a2) % 360, s: r2.s, l: r2.l }));
+  return i2;
+}
+function w(t2) {
+  var e2 = n(t2).toHsl(), r2 = e2.h;
+  return [n(t2), n({ h: (r2 + 72) % 360, s: e2.s, l: e2.l }), n({ h: (r2 + 216) % 360, s: e2.s, l: e2.l })];
+}
+function x(t2, e2, r2) {
+  e2 = e2 || 6, r2 = r2 || 30;
+  var i2 = n(t2).toHsl(), a2 = 360 / r2, o2 = [n(t2)];
+  for (i2.h = (i2.h - (a2 * e2 >> 1) + 720) % 360; --e2; ) i2.h = (i2.h + a2) % 360, o2.push(n(i2));
+  return o2;
+}
+function k(t2, e2) {
+  e2 = e2 || 6;
+  for (var r2 = n(t2).toHsv(), i2 = r2.h, a2 = r2.s, o2 = r2.v, s2 = [], h2 = 1 / e2; e2--; ) s2.push(n({ h: i2, s: a2, v: o2 })), o2 = (o2 + h2) % 1;
+  return s2;
+}
+n.prototype = { isDark: function() {
+  return this.getBrightness() < 128;
+}, isLight: function() {
+  return !this.isDark();
+}, isValid: function() {
+  return this._ok;
+}, getOriginalInput: function() {
+  return this._originalInput;
+}, getFormat: function() {
+  return this._format;
+}, getAlpha: function() {
+  return this._a;
+}, getBrightness: function() {
+  var t2 = this.toRgb();
+  return (299 * t2.r + 587 * t2.g + 114 * t2.b) / 1e3;
+}, getLuminance: function() {
+  var t2, e2, r2, i2 = this.toRgb();
+  return t2 = i2.r / 255, e2 = i2.g / 255, r2 = i2.b / 255, 0.2126 * (t2 <= 0.03928 ? t2 / 12.92 : Math.pow((t2 + 0.055) / 1.055, 2.4)) + 0.7152 * (e2 <= 0.03928 ? e2 / 12.92 : Math.pow((e2 + 0.055) / 1.055, 2.4)) + 0.0722 * (r2 <= 0.03928 ? r2 / 12.92 : Math.pow((r2 + 0.055) / 1.055, 2.4));
+}, setAlpha: function(t2) {
+  return this._a = _(t2), this._roundA = Math.round(100 * this._a) / 100, this;
+}, toHsv: function() {
+  var t2 = s(this._r, this._g, this._b);
+  return { h: 360 * t2.h, s: t2.s, v: t2.v, a: this._a };
+}, toHsvString: function() {
+  var t2 = s(this._r, this._g, this._b), e2 = Math.round(360 * t2.h), r2 = Math.round(100 * t2.s), i2 = Math.round(100 * t2.v);
+  return 1 == this._a ? "hsv(" + e2 + ", " + r2 + "%, " + i2 + "%)" : "hsva(" + e2 + ", " + r2 + "%, " + i2 + "%, " + this._roundA + ")";
+}, toHsl: function() {
+  var t2 = o(this._r, this._g, this._b);
+  return { h: 360 * t2.h, s: t2.s, l: t2.l, a: this._a };
+}, toHslString: function() {
+  var t2 = o(this._r, this._g, this._b), e2 = Math.round(360 * t2.h), r2 = Math.round(100 * t2.s), i2 = Math.round(100 * t2.l);
+  return 1 == this._a ? "hsl(" + e2 + ", " + r2 + "%, " + i2 + "%)" : "hsla(" + e2 + ", " + r2 + "%, " + i2 + "%, " + this._roundA + ")";
+}, toHex: function(t2) {
+  return h(this._r, this._g, this._b, t2);
+}, toHexString: function(t2) {
+  return "#" + this.toHex(t2);
+}, toHex8: function(t2) {
+  return (function(t3, e2, r2, i2, a2) {
+    var n2 = [H(Math.round(t3).toString(16)), H(Math.round(e2).toString(16)), H(Math.round(r2).toString(16)), H(C(i2))];
+    if (a2 && n2[0].charAt(0) == n2[0].charAt(1) && n2[1].charAt(0) == n2[1].charAt(1) && n2[2].charAt(0) == n2[2].charAt(1) && n2[3].charAt(0) == n2[3].charAt(1)) return n2[0].charAt(0) + n2[1].charAt(0) + n2[2].charAt(0) + n2[3].charAt(0);
+    return n2.join("");
+  })(this._r, this._g, this._b, this._a, t2);
+}, toHex8String: function(t2) {
+  return "#" + this.toHex8(t2);
+}, toRgb: function() {
+  return { r: Math.round(this._r), g: Math.round(this._g), b: Math.round(this._b), a: this._a };
+}, toRgbString: function() {
+  return 1 == this._a ? "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() {
+  return { r: Math.round(100 * M(this._r, 255)) + "%", g: Math.round(100 * M(this._g, 255)) + "%", b: Math.round(100 * M(this._b, 255)) + "%", a: this._a };
+}, toPercentageRgbString: function() {
+  return 1 == this._a ? "rgb(" + Math.round(100 * M(this._r, 255)) + "%, " + Math.round(100 * M(this._g, 255)) + "%, " + Math.round(100 * M(this._b, 255)) + "%)" : "rgba(" + Math.round(100 * M(this._r, 255)) + "%, " + Math.round(100 * M(this._g, 255)) + "%, " + Math.round(100 * M(this._b, 255)) + "%, " + this._roundA + ")";
+}, toName: function() {
+  return 0 === this._a ? "transparent" : !(this._a < 1) && (A[h(this._r, this._g, this._b, true)] || false);
+}, toFilter: function(t2) {
+  var e2 = "#" + l(this._r, this._g, this._b, this._a), r2 = e2, i2 = this._gradientType ? "GradientType = 1, " : "";
+  if (t2) {
+    var a2 = n(t2);
+    r2 = "#" + l(a2._r, a2._g, a2._b, a2._a);
+  }
+  return "progid:DXImageTransform.Microsoft.gradient(" + i2 + "startColorstr=" + e2 + ",endColorstr=" + r2 + ")";
+}, toString: function(t2) {
+  var e2 = !!t2;
+  t2 = t2 || this._format;
+  var r2 = false, i2 = this._a < 1 && this._a >= 0;
+  return e2 || !i2 || "hex" !== t2 && "hex6" !== t2 && "hex3" !== t2 && "hex4" !== t2 && "hex8" !== t2 && "name" !== t2 ? ("rgb" === t2 && (r2 = this.toRgbString()), "prgb" === t2 && (r2 = this.toPercentageRgbString()), "hex" !== t2 && "hex6" !== t2 || (r2 = this.toHexString()), "hex3" === t2 && (r2 = this.toHexString(true)), "hex4" === t2 && (r2 = this.toHex8String(true)), "hex8" === t2 && (r2 = this.toHex8String()), "name" === t2 && (r2 = this.toName()), "hsl" === t2 && (r2 = this.toHslString()), "hsv" === t2 && (r2 = this.toHsvString()), r2 || this.toHexString()) : "name" === t2 && 0 === this._a ? this.toName() : this.toRgbString();
+}, clone: function() {
+  return n(this.toString());
+}, _applyModification: function(t2, e2) {
+  var r2 = t2.apply(null, [this].concat([].slice.call(e2)));
+  return this._r = r2._r, this._g = r2._g, this._b = r2._b, this.setAlpha(r2._a), this;
+}, lighten: function() {
+  return this._applyModification(f, arguments);
+}, brighten: function() {
+  return this._applyModification(p, arguments);
+}, darken: function() {
+  return this._applyModification(g, arguments);
+}, desaturate: function() {
+  return this._applyModification(u, arguments);
+}, saturate: function() {
+  return this._applyModification(c, arguments);
+}, greyscale: function() {
+  return this._applyModification(d, arguments);
+}, spin: function() {
+  return this._applyModification(m, arguments);
+}, _applyCombination: function(t2, e2) {
+  return t2.apply(null, [this].concat([].slice.call(e2)));
+}, analogous: function() {
+  return this._applyCombination(x, arguments);
+}, complement: function() {
+  return this._applyCombination(b, arguments);
+}, monochromatic: function() {
+  return this._applyCombination(k, arguments);
+}, splitcomplement: function() {
+  return this._applyCombination(w, arguments);
+}, triad: function() {
+  return this._applyCombination(v, [3]);
+}, tetrad: function() {
+  return this._applyCombination(v, [4]);
+} }, n.fromRatio = function(t2, e2) {
+  if ("object" == r(t2)) {
+    var i2 = {};
+    for (var a2 in t2) t2.hasOwnProperty(a2) && (i2[a2] = "a" === a2 ? t2[a2] : P(t2[a2]));
+    t2 = i2;
+  }
+  return n(t2, e2);
+}, n.equals = function(t2, e2) {
+  return !(!t2 || !e2) && n(t2).toRgbString() == n(e2).toRgbString();
+}, n.random = function() {
+  return n.fromRatio({ r: Math.random(), g: Math.random(), b: Math.random() });
+}, n.mix = function(t2, e2, r2) {
+  r2 = 0 === r2 ? 0 : r2 || 50;
+  var i2 = n(t2).toRgb(), a2 = n(e2).toRgb(), o2 = r2 / 100;
+  return n({ r: (a2.r - i2.r) * o2 + i2.r, g: (a2.g - i2.g) * o2 + i2.g, b: (a2.b - i2.b) * o2 + i2.b, a: (a2.a - i2.a) * o2 + i2.a });
+}, n.readability = function(t2, e2) {
+  var r2 = n(t2), i2 = n(e2);
+  return (Math.max(r2.getLuminance(), i2.getLuminance()) + 0.05) / (Math.min(r2.getLuminance(), i2.getLuminance()) + 0.05);
+}, n.isReadable = function(t2, e2, r2) {
+  var i2, a2, o2 = n.readability(t2, e2);
+  switch (a2 = false, (i2 = (function(t3) {
+    var e3, r3;
+    e3 = ((t3 = t3 || { level: "AA", size: "small" }).level || "AA").toUpperCase(), r3 = (t3.size || "small").toLowerCase(), "AA" !== e3 && "AAA" !== e3 && (e3 = "AA");
+    "small" !== r3 && "large" !== r3 && (r3 = "small");
+    return { level: e3, size: r3 };
+  })(r2)).level + i2.size) {
     case "AAsmall":
     case "AAAlarge":
-      out = readability >= 4.5;
+      a2 = o2 >= 4.5;
       break;
     case "AAlarge":
-      out = readability >= 3;
+      a2 = o2 >= 3;
       break;
     case "AAAsmall":
-      out = readability >= 7;
-      break;
-  }
-  return out;
-};
-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);
-  }
+      a2 = o2 >= 7;
+  }
+  return a2;
+}, n.mostReadable = function(t2, e2, r2) {
+  var i2, a2, o2, s2, h2 = null, l2 = 0;
+  a2 = (r2 = r2 || {}).includeFallbackColors, o2 = r2.level, s2 = r2.size;
+  for (var u2 = 0; u2 < e2.length; u2++) (i2 = n.readability(t2, e2[u2])) > l2 && (l2 = i2, h2 = n(e2[u2]));
+  return n.isReadable(t2, h2, { level: o2, size: s2 }) || !a2 ? h2 : (r2.includeFallbackColors = false, n.mostReadable(t2, ["#fff", "#000"], r2));
 };
-var names = tinycolor.names = {
-  aliceblue: "f0f8ff",
-  antiquewhite: "faebd7",
-  aqua: "0ff",
-  aquamarine: "7fffd4",
-  azure: "f0ffff",
-  beige: "f5f5dc",
-  bisque: "ffe4c4",
-  black: "000",
-  blanchedalmond: "ffebcd",
-  blue: "00f",
-  blueviolet: "8a2be2",
-  brown: "a52a2a",
-  burlywood: "deb887",
-  burntsienna: "ea7e5d",
-  cadetblue: "5f9ea0",
-  chartreuse: "7fff00",
-  chocolate: "d2691e",
-  coral: "ff7f50",
-  cornflowerblue: "6495ed",
-  cornsilk: "fff8dc",
-  crimson: "dc143c",
-  cyan: "0ff",
-  darkblue: "00008b",
-  darkcyan: "008b8b",
-  darkgoldenrod: "b8860b",
-  darkgray: "a9a9a9",
-  darkgreen: "006400",
-  darkgrey: "a9a9a9",
-  darkkhaki: "bdb76b",
-  darkmagenta: "8b008b",
-  darkolivegreen: "556b2f",
-  darkorange: "ff8c00",
-  darkorchid: "9932cc",
-  darkred: "8b0000",
-  darksalmon: "e9967a",
-  darkseagreen: "8fbc8f",
-  darkslateblue: "483d8b",
-  darkslategray: "2f4f4f",
-  darkslategrey: "2f4f4f",
-  darkturquoise: "00ced1",
-  darkviolet: "9400d3",
-  deeppink: "ff1493",
-  deepskyblue: "00bfff",
-  dimgray: "696969",
-  dimgrey: "696969",
-  dodgerblue: "1e90ff",
-  firebrick: "b22222",
-  floralwhite: "fffaf0",
-  forestgreen: "228b22",
-  fuchsia: "f0f",
-  gainsboro: "dcdcdc",
-  ghostwhite: "f8f8ff",
-  gold: "ffd700",
-  goldenrod: "daa520",
-  gray: "808080",
-  green: "008000",
-  greenyellow: "adff2f",
-  grey: "808080",
-  honeydew: "f0fff0",
-  hotpink: "ff69b4",
-  indianred: "cd5c5c",
-  indigo: "4b0082",
-  ivory: "fffff0",
-  khaki: "f0e68c",
-  lavender: "e6e6fa",
-  lavenderblush: "fff0f5",
-  lawngreen: "7cfc00",
-  lemonchiffon: "fffacd",
-  lightblue: "add8e6",
-  lightcoral: "f08080",
-  lightcyan: "e0ffff",
-  lightgoldenrodyellow: "fafad2",
-  lightgray: "d3d3d3",
-  lightgreen: "90ee90",
-  lightgrey: "d3d3d3",
-  lightpink: "ffb6c1",
-  lightsalmon: "ffa07a",
-  lightseagreen: "20b2aa",
-  lightskyblue: "87cefa",
-  lightslategray: "789",
-  lightslategrey: "789",
-  lightsteelblue: "b0c4de",
-  lightyellow: "ffffe0",
-  lime: "0f0",
-  limegreen: "32cd32",
-  linen: "faf0e6",
-  magenta: "f0f",
-  maroon: "800000",
-  mediumaquamarine: "66cdaa",
-  mediumblue: "0000cd",
-  mediumorchid: "ba55d3",
-  mediumpurple: "9370db",
-  mediumseagreen: "3cb371",
-  mediumslateblue: "7b68ee",
-  mediumspringgreen: "00fa9a",
-  mediumturquoise: "48d1cc",
-  mediumvioletred: "c71585",
-  midnightblue: "191970",
-  mintcream: "f5fffa",
-  mistyrose: "ffe4e1",
-  moccasin: "ffe4b5",
-  navajowhite: "ffdead",
-  navy: "000080",
-  oldlace: "fdf5e6",
-  olive: "808000",
-  olivedrab: "6b8e23",
-  orange: "ffa500",
-  orangered: "ff4500",
-  orchid: "da70d6",
-  palegoldenrod: "eee8aa",
-  palegreen: "98fb98",
-  paleturquoise: "afeeee",
-  palevioletred: "db7093",
-  papayawhip: "ffefd5",
-  peachpuff: "ffdab9",
-  peru: "cd853f",
-  pink: "ffc0cb",
-  plum: "dda0dd",
-  powderblue: "b0e0e6",
-  purple: "800080",
-  rebeccapurple: "663399",
-  red: "f00",
-  rosybrown: "bc8f8f",
-  royalblue: "4169e1",
-  saddlebrown: "8b4513",
-  salmon: "fa8072",
-  sandybrown: "f4a460",
-  seagreen: "2e8b57",
-  seashell: "fff5ee",
-  sienna: "a0522d",
-  silver: "c0c0c0",
-  skyblue: "87ceeb",
-  slateblue: "6a5acd",
-  slategray: "708090",
-  slategrey: "708090",
-  snow: "fffafa",
-  springgreen: "00ff7f",
-  steelblue: "4682b4",
-  tan: "d2b48c",
-  teal: "008080",
-  thistle: "d8bfd8",
-  tomato: "ff6347",
-  turquoise: "40e0d0",
-  violet: "ee82ee",
-  wheat: "f5deb3",
-  white: "fff",
-  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;
-}
-function boundAlpha(a) {
-  a = parseFloat(a);
-  if (isNaN(a) || a < 0 || a > 1) {
-    a = 1;
-  }
-  return a;
-}
-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 clamp01(val) {
-  return Math.min(1, Math.max(0, val));
-}
-function parseIntFromHex(val) {
-  return parseInt(val, 16);
-}
-function isOnePointZero(n) {
-  return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1;
-}
-function isPercentage(n) {
-  return typeof n === "string" && n.indexOf("%") != -1;
-}
-function pad2(c) {
-  return c.length == 1 ? "0" + c : "" + c;
-}
-function convertToPercentage(n) {
-  if (n <= 1) {
-    n = n * 100 + "%";
-  }
-  return n;
-}
-function convertDecimalToHex(d) {
-  return Math.round(parseFloat(d) * 255).toString(16);
-}
-function convertHexToDecimal(h) {
-  return parseIntFromHex(h) / 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*\\)?";
-  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),
-    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") {
-    return {
-      r: 0,
-      g: 0,
-      b: 0,
-      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 || {
-    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
-  };
-}
-const styles = "/*\n[ Wj Color Picker ]\n*/\n\n.anchor {\n    width: var(--wje-color-picker-size);\n    height: var(--wje-color-picker-size);\n    background: var(--wje-color-picker-value);\n}\n\n.picker {\n    width: 200px;\n    /*min-height: 90px;*/\n    box-shadow:\n        0 0 5px rgba(0, 0, 0, 0.05),\n        0 5px 20px rgba(0, 0, 0, 0.1);\n    border-radius: var(--wje-color-picker-radius);\n    border-width: 1px;\n    border-style: var(--wje-border-style);\n    border-color: var(--wje-border-color);\n    background: var(--wje-background);\n}\n\n.color-area {\n    display: block;\n    position: relative;\n    height: 100px;\n    color: var(--wje-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(--wje-color-picker-radius) var(--wje-color-picker-radius) 0 0;\n    border-bottom: 1px solid var(--wje-border-color);\n}\n\n.wrapper {\n    display: inline-table;\n    width: calc(100% - 2rem);\n    margin: 1rem;\n}\n\n.hue {\n    border-radius: 0.25rem;\n    background-image: linear-gradient(\n        to right,\n        rgb(255, 0, 0) 0%,\n        rgb(255, 255, 0) 17%,\n        rgb(0, 255, 0) 33%,\n        rgb(0, 255, 255) 50%,\n        rgb(0, 0, 255) 67%,\n        rgb(255, 0, 255) 83%,\n        rgb(255, 0, 0) 100%\n    );\n    width: 100%;\n    height: 8px;\n    margin: 0.75rem 0 1rem;\n}\n\n.hue::part(slider) {\n    --wje-slider-color: transparent;\n    --wje-slider-thumb-color: white;\n    --wje-slider-thumb-shadow: 0 0 0 1px var(--wje-border-color);\n    --wje-slider-thumb-shadow-active: var(--wje-slider-thumb-shadow);\n    --wje-slider-track-color: transparent;\n}\n\n.alpha-wrapper {\n    border-radius: 0.25rem;\n    width: 100%;\n    height: 8px;\n    margin: 0.75rem 0 1rem;\n    background-image:\n        repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa),\n        repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\n    background-position:\n        0 0,\n        4px 4px;\n    background-size: 8px 8px;\n}\n\n.alpha {\n    color: var(--wje-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\n.alpha::part(slider) {\n    --wje-slider-color: transparent;\n    --wje-slider-thumb-color: white;\n    --wje-slider-thumb-shadow: 0 0 0 1px var(--wje-border-color);\n    --wje-slider-thumb-shadow-active: var(--wje-slider-thumb-shadow);\n    --wje-slider-track-color: transparent;\n    --wje-slider-track-height: 8px;\n}\n\n.input-wrapper {\n    display: grid;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n}\n\n.color-preview {\n    width: 30px !important;\n    height: 30px !important;\n    border-radius: 50%;\n    position: relative;\n    margin-right: 1rem;\n    &:before,\n    &: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    &:before {\n        background-image:\n            repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa),\n            repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\n        background-position:\n            0 0,\n            4px 4px;\n        background-size: 8px 8px;\n    }\n    &:after {\n        background: var(--wje-color-picker-value, transparent);\n    }\n}\n\nwje-input {\n    --wje-input-border-radius: 1rem;\n    --wje-input-margin-bottom: 0;\n}\n\nwje-input::part(input) {\n    text-align: center;\n}\n\n.swatches {\n    margin-top: 1rem;\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n\n.swatch {\n    background: var(--wje-color-picker-swatch, transparent);\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\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(--wje-color-picker-value, transparent);\n    cursor: pointer;\n}\n";
-class ColorPicker extends WJElement {
-  /**
-   * ColorPicker constructor method.
-   */
+var y = n.names = { aliceblue: "f0f8ff", antiquewhite: "faebd7", aqua: "0ff", aquamarine: "7fffd4", azure: "f0ffff", beige: "f5f5dc", bisque: "ffe4c4", black: "000", blanchedalmond: "ffebcd", blue: "00f", blueviolet: "8a2be2", brown: "a52a2a", burlywood: "deb887", burntsienna: "ea7e5d", cadetblue: "5f9ea0", chartreuse: "7fff00", chocolate: "d2691e", coral: "ff7f50", cornflowerblue: "6495ed", cornsilk: "fff8dc", crimson: "dc143c", cyan: "0ff", darkblue: "00008b", darkcyan: "008b8b", darkgoldenrod: "b8860b", darkgray: "a9a9a9", darkgreen: "006400", darkgrey: "a9a9a9", darkkhaki: "bdb76b", darkmagenta: "8b008b", darkolivegreen: "556b2f", darkorange: "ff8c00", darkorchid: "9932cc", darkred: "8b0000", darksalmon: "e9967a", darkseagreen: "8fbc8f", darkslateblue: "483d8b", darkslategray: "2f4f4f", darkslategrey: "2f4f4f", darkturquoise: "00ced1", darkviolet: "9400d3", deeppink: "ff1493", deepskyblue: "00bfff", dimgray: "696969", dimgrey: "696969", dodgerblue: "1e90ff", firebrick: "b22222", floralwhite: "fffaf0", forestgreen: "228b22", fuchsia: "f0f", gainsboro: "dcdcdc", ghostwhite: "f8f8ff", gold: "ffd700", goldenrod: "daa520", gray: "808080", green: "008000", greenyellow: "adff2f", grey: "808080", honeydew: "f0fff0", hotpink: "ff69b4", indianred: "cd5c5c", indigo: "4b0082", ivory: "fffff0", khaki: "f0e68c", lavender: "e6e6fa", lavenderblush: "fff0f5", lawngreen: "7cfc00", lemonchiffon: "fffacd", lightblue: "add8e6", lightcoral: "f08080", lightcyan: "e0ffff", lightgoldenrodyellow: "fafad2", lightgray: "d3d3d3", lightgreen: "90ee90", lightgrey: "d3d3d3", lightpink: "ffb6c1", lightsalmon: "ffa07a", lightseagreen: "20b2aa", lightskyblue: "87cefa", lightslategray: "789", lightslategrey: "789", lightsteelblue: "b0c4de", lightyellow: "ffffe0", lime: "0f0", limegreen: "32cd32", linen: "faf0e6", magenta: "f0f", maroon: "800000", mediumaquamarine: "66cdaa", mediumblue: "0000cd", mediumorchid: "ba55d3", mediumpurple: "9370db", mediumseagreen: "3cb371", mediumslateblue: "7b68ee", mediumspringgreen: "00fa9a", mediumturquoise: "48d1cc", mediumvioletred: "c71585", midnightblue: "191970", mintcream: "f5fffa", mistyrose: "ffe4e1", moccasin: "ffe4b5", navajowhite: "ffdead", navy: "000080", oldlace: "fdf5e6", olive: "808000", olivedrab: "6b8e23", orange: "ffa500", orangered: "ff4500", orchid: "da70d6", palegoldenrod: "eee8aa", palegreen: "98fb98", paleturquoise: "afeeee", palevioletred: "db7093", papayawhip: "ffefd5", peachpuff: "ffdab9", peru: "cd853f", pink: "ffc0cb", plum: "dda0dd", powderblue: "b0e0e6", purple: "800080", rebeccapurple: "663399", red: "f00", rosybrown: "bc8f8f", royalblue: "4169e1", saddlebrown: "8b4513", salmon: "fa8072", sandybrown: "f4a460", seagreen: "2e8b57", seashell: "fff5ee", sienna: "a0522d", silver: "c0c0c0", skyblue: "87ceeb", slateblue: "6a5acd", slategray: "708090", slategrey: "708090", snow: "fffafa", springgreen: "00ff7f", steelblue: "4682b4", tan: "d2b48c", teal: "008080", thistle: "d8bfd8", tomato: "ff6347", turquoise: "40e0d0", violet: "ee82ee", wheat: "f5deb3", white: "fff", whitesmoke: "f5f5f5", yellow: "ff0", yellowgreen: "9acd32" }, A = n.hexNames = (function(t2) {
+  var e2 = {};
+  for (var r2 in t2) t2.hasOwnProperty(r2) && (e2[t2[r2]] = r2);
+  return e2;
+})(y);
+function _(t2) {
+  return t2 = parseFloat(t2), (isNaN(t2) || t2 < 0 || t2 > 1) && (t2 = 1), t2;
+}
+function M(t2, e2) {
+  (function(t3) {
+    return "string" == typeof t3 && -1 != t3.indexOf(".") && 1 === parseFloat(t3);
+  })(t2) && (t2 = "100%");
+  var r2 = (function(t3) {
+    return "string" == typeof t3 && -1 != t3.indexOf("%");
+  })(t2);
+  return t2 = Math.min(e2, Math.max(0, parseFloat(t2))), r2 && (t2 = parseInt(t2 * e2, 10) / 100), Math.abs(t2 - e2) < 1e-6 ? 1 : t2 % e2 / parseFloat(e2);
+}
+function S(t2) {
+  return Math.min(1, Math.max(0, t2));
+}
+function j(t2) {
+  return parseInt(t2, 16);
+}
+function H(t2) {
+  return 1 == t2.length ? "0" + t2 : "" + t2;
+}
+function P(t2) {
+  return t2 <= 1 && (t2 = 100 * t2 + "%"), t2;
+}
+function C(t2) {
+  return Math.round(255 * parseFloat(t2)).toString(16);
+}
+function E(t2) {
+  return j(t2) / 255;
+}
+var F, L, R, N = (L = "[\\s|\\(]+(" + (F = "(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)") + ")[,|\\s]+(" + F + ")[,|\\s]+(" + F + ")\\s*\\)?", R = "[\\s|\\(]+(" + F + ")[,|\\s]+(" + F + ")[,|\\s]+(" + F + ")[,|\\s]+(" + F + ")\\s*\\)?", { CSS_UNIT: new RegExp(F), rgb: new RegExp("rgb" + L), rgba: new RegExp("rgba" + R), hsl: new RegExp("hsl" + L), hsla: new RegExp("hsla" + R), hsv: new RegExp("hsv" + L), hsva: new RegExp("hsva" + R), 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 D(t2) {
+  return !!N.CSS_UNIT.exec(t2);
+}
+class I extends t {
   constructor() {
     super();
-    __privateAdd(this, _init, false);
+    __privateAdd(this, _t, false);
     __publicField(this, "className", "ColorPicker");
-    /**
-     * Updates the position of the marker based on the pointer event.
-     * This function calculates the position of the marker relative to the color area
-     * dimensions based on the given event. It adjusts the marker position and updates
-     * the color associated with the new position. It is intended to handle pointer movement
-     * events such as mouse or touch interactions.
-     * @param {Event} e The event triggering the marker movement, typically a mouse or touch event.
-     */
-    __publicField(this, "moveMarker", (e) => {
+    __publicField(this, "moveMarker", (t2) => {
       var _a;
       this.colorAreaDimension = this.dimension();
-      const pointer = this.getPointerPosition(e);
-      const x = pointer.x - this.colorAreaDimension.x;
-      const y = pointer.y - this.colorAreaDimension.y;
-      const markerPosition = this.clampMarkerPosition(x, y);
-      const alpha = Number(((_a = this.alphaSlider) == null ? void 0 : _a.value) || 100);
-      this.setColor(this.setColorAtPosition(markerPosition.x, markerPosition.y, alpha), "marker");
-      this.setMarkerPosition(markerPosition.x, markerPosition.y);
+      const e2 = this.getPointerPosition(t2), r2 = e2.x - this.colorAreaDimension.x, i2 = e2.y - this.colorAreaDimension.y, a2 = this.clampMarkerPosition(r2, i2), n2 = Number(((_a = this.alphaSlider) == null ? void 0 : _a.value) || 100);
+      this.setColor(this.setColorAtPosition(a2.x, a2.y, n2), "marker"), this.setMarkerPosition(a2.x, a2.y);
     });
-    /**
-     * Sets the marker position by color.
-     * @param color
-     * @returns {{x: number, y: number}}
-     */
-    __publicField(this, "setMarkerPositionByColor", (color = "red") => {
+    __publicField(this, "setMarkerPositionByColor", (t2 = "red") => {
       var _a, _b;
-      let hsva = tinycolor(color).toHsv();
-      const width = ((_a = this.colorAreaDimension) == null ? void 0 : _a.width) || 0;
-      const height = ((_b = this.colorAreaDimension) == null ? void 0 : _b.height) || 0;
-      const safeS = Number.isFinite(hsva.s) ? hsva.s : 0;
-      const safeV = Number.isFinite(hsva.v) ? hsva.v : 0;
-      return {
-        x: width * safeS,
-        y: height - height * safeV
-      };
+      let e2 = n(t2).toHsv();
+      const r2 = ((_a = this.colorAreaDimension) == null ? void 0 : _a.width) || 0, i2 = ((_b = this.colorAreaDimension) == null ? void 0 : _b.height) || 0;
+      return { x: r2 * (Number.isFinite(e2.s) ? e2.s : 0), y: i2 - i2 * (Number.isFinite(e2.v) ? e2.v : 0) };
     });
-    /**
-     * Updates the color picker's current color and its associated UI elements.
-     * @param {tinycolor.Instance|null} [color] The color value to set. If null, the current value from the input field is used.
-     * @param {string} [type] The type of action determining which UI element to update. Possible values: "marker", "hue", "alpha", "swatch", "input".
-     */
-    __publicField(this, "setColor", (color = null, type = "") => {
-      let currentColor = color;
-      if (currentColor === null && type === "") {
-        currentColor = tinycolor(this.input.value);
-        this.colorArea.style.setProperty("--wje-color-picker-area", currentColor.toHexString());
-      }
-      if (type === "marker") {
-        this.alphaSlider.style.setProperty("--wje-color-picker-value", currentColor.toHexString());
-        this.colorPreview.style.setProperty("--wje-color-picker-value", currentColor.toHex8String());
-        this.picker.style.setProperty("--wje-color-picker-value", currentColor.toHexString());
-        this.marker.style.setProperty("--wje-color-picker-value", currentColor.toHex8String());
-      }
-      if (type === "hue") {
-        let markerColorByPosition = this.setColorAtPosition(
-          this.markerPosition.x,
-          this.markerPosition.y,
-          this.alphaSlider.value
-        );
-        const hueColor = this.getHueAreaColor(this.getHSVA(this.hueSlider.value, 100));
-        this.colorPreview.style.setProperty("--wje-color-picker-value", markerColorByPosition.toHex8String());
-        this.marker.style.setProperty("--wje-color-picker-value", markerColorByPosition.toHexString());
-        this.alphaSlider.style.setProperty("--wje-color-picker-value", markerColorByPosition.toHexString());
-        this.colorArea.style.setProperty("--wje-color-picker-area", hueColor);
-        this.input.value = markerColorByPosition.toHex8String();
-        currentColor = markerColorByPosition;
+    __publicField(this, "setColor", (t2 = null, r2 = "") => {
+      let i2 = t2;
+      if (null === i2 && "" === r2 && (i2 = n(this.input.value), this.colorArea.style.setProperty("--wje-color-picker-area", i2.toHexString())), "marker" === r2 && (this.alphaSlider.style.setProperty("--wje-color-picker-value", i2.toHexString()), this.colorPreview.style.setProperty("--wje-color-picker-value", i2.toHex8String()), this.picker.style.setProperty("--wje-color-picker-value", i2.toHexString()), this.marker.style.setProperty("--wje-color-picker-value", i2.toHex8String())), "hue" === r2) {
+        let t3 = this.setColorAtPosition(this.markerPosition.x, this.markerPosition.y, this.alphaSlider.value);
+        const e2 = this.getHueAreaColor(this.getHSVA(this.hueSlider.value, 100));
+        this.colorPreview.style.setProperty("--wje-color-picker-value", t3.toHex8String()), this.marker.style.setProperty("--wje-color-picker-value", t3.toHexString()), this.alphaSlider.style.setProperty("--wje-color-picker-value", t3.toHexString()), this.colorArea.style.setProperty("--wje-color-picker-area", e2), this.input.value = t3.toHex8String(), i2 = t3;
       }
-      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("--wje-color-picker-value", currentColor.toHex8String());
+      if ("alpha" === r2) {
+        i2 = n(this.input.value);
+        let t3 = i2.toHsv();
+        t3.a = this.alphaSlider.value / 100, i2 = n(t3), this.colorPreview.style.setProperty("--wje-color-picker-value", i2.toHex8String());
       }
-      if (type === "swatch" || type === "init" || type === "input") {
-        this.colorPreview.style.setProperty("--wje-color-picker-value", currentColor.toHex8String());
-        this.marker.style.setProperty("--wje-color-picker-value", currentColor.toHexString());
-        this.alphaSlider.style.setProperty("--wje-color-picker-value", currentColor.toHexString());
-        this.colorArea.style.setProperty("--wje-color-picker-area", this.getHueAreaColor(currentColor.toHex8String()));
-        this.markerPosition = this.setMarkerPositionByColor(currentColor.toHex8String());
-        this.setMarkerPosition(this.markerPosition.x, this.markerPosition.y);
-      }
-      if (!(currentColor == null ? void 0 : currentColor.isValid())) return;
-      if (!this.noColorArea || !this.noControls || !this.noSwatches) {
-        if (type === "input" && this.inputEditable && typeof this._manualInputValue === "string") {
-          this.input.value = this._manualInputValue;
-        } else {
-          this.input.value = currentColor.toHex8String();
-        }
-      }
-      this.anchor.style.setProperty("--wje-color-picker-value", currentColor.toHexString());
-      this.value = {
-        hex8: currentColor.toHex8String(),
-        hex: currentColor.toHexString(),
-        rgb: currentColor.toRgbString(),
-        rgba: currentColor.toRgbString(),
-        hsl: currentColor.toHslString(),
-        hsla: currentColor.toHslString(),
-        hsv: currentColor.toHsvString(),
-        hsva: currentColor.toHsvString(),
-        name: currentColor.toName(),
-        format: currentColor.getFormat()
-      };
-      this.color = currentColor.toHex8String();
-      event.dispatchCustomEvent(this, "wje-color-picker:select", {
-        value: this.value
-      });
-    });
-    /**
-     * Sets the hue.
-     * @param {object} e The event object.
-     */
-    __publicField(this, "setHue", (e) => {
-      this.hueSlider.value = e.detail.value;
-      this.setColor(null, "hue");
+      "swatch" !== r2 && "init" !== r2 && "input" !== r2 || (this.colorPreview.style.setProperty("--wje-color-picker-value", i2.toHex8String()), this.marker.style.setProperty("--wje-color-picker-value", i2.toHexString()), this.alphaSlider.style.setProperty("--wje-color-picker-value", i2.toHexString()), this.colorArea.style.setProperty("--wje-color-picker-area", this.getHueAreaColor(i2.toHex8String())), this.markerPosition = this.setMarkerPositionByColor(i2.toHex8String()), this.setMarkerPosition(this.markerPosition.x, this.markerPosition.y)), (i2 == null ? void 0 : i2.isValid()) && (this.noColorArea && this.noControls && this.noSwatches || ("input" === r2 && this.inputEditable && "string" == typeof this._manualInputValue ? this.input.value = this._manualInputValue : this.input.value = i2.toHex8String()), this.anchor.style.setProperty("--wje-color-picker-value", i2.toHexString()), this.value = { hex8: i2.toHex8String(), hex: i2.toHexString(), rgb: i2.toRgbString(), rgba: i2.toRgbString(), hsl: i2.toHslString(), hsla: i2.toHslString(), hsv: i2.toHsvString(), hsva: i2.toHsvString(), name: i2.toName(), format: i2.getFormat() }, this.color = i2.toHex8String(), e.dispatchCustomEvent(this, "wje-color-picker:select", { value: this.value }));
     });
-    /**
-     * Sets the alpha.
-     * @param {object} e The event object.
-     */
-    __publicField(this, "setAlpha", (e) => {
-      this.alphaSlider.value = e.detail.value;
-      this.setColor(null, "alpha");
+    __publicField(this, "setHue", (t2) => {
+      this.hueSlider.value = t2.detail.value, this.setColor(null, "hue");
     });
-    /**
-     * Converts hue and alpha values into an HSVA color string.
-     * @param {number} hue The hue value, typically between 0 and 360.
-     * @param {number} alpha The alpha value, typically between 0 and 100, representing the opacity percentage.
-     * @returns {string} - The HSVA color string in the format `hsva(h, 100%, 100%, a)`.
-     */
-    __publicField(this, "getHSVA", (hue, alpha) => {
-      return `hsva(${hue}, 100%, 100%, ${alpha / 100})`;
+    __publicField(this, "setAlpha", (t2) => {
+      this.alphaSlider.value = t2.detail.value, this.setColor(null, "alpha");
     });
-    this._markerPosition = {
-      markerX: "0",
-      markerY: "0"
-    };
-    this._swatches = [
-      "#264653",
-      "#2a9d8f",
-      "#e9c46a",
-      "rgb(244,162,97)",
-      "#e76f51",
-      "#d62828",
-      "navy",
-      "#07b",
-      "#0096c7",
-      "#00b4d880",
-      "rgba(0,119,182,0.8)"
-    ];
-    this._manualInputValue = null;
+    __publicField(this, "getHSVA", (t2, e2) => `hsva(${t2}, 100%, 100%, ${e2 / 100})`);
+    this._markerPosition = { markerX: "0", markerY: "0" }, this._swatches = ["#264653", "#2a9d8f", "#e9c46a", "rgb(244,162,97)", "#e76f51", "#d62828", "navy", "#07b", "#0096c7", "#00b4d880", "rgba(0,119,182,0.8)"], this._manualInputValue = null;
   }
-  /**
-   * Sets the color attribute of the element.
-   * @param {string} value The color value to be set. It should be a valid color string such as a named color, HEX, RGB, or HSL format.
-   */
-  set color(value) {
-    this.setAttribute("color", value);
+  set color(t2) {
+    this.setAttribute("color", t2);
   }
-  /**
-   * Retrieves the color attribute of the element.
-   * @returns {string | null} The current value of the 'color' attribute, or null if the attribute is not set.
-   */
   get color() {
     return this.getAttribute("color") || "#000000";
   }
-  /**
-   * Setter for the marker position.
-   * @param {object} value The new marker position.
-   */
-  set markerPosition(value) {
-    this._markerPosition = value;
+  set markerPosition(t2) {
+    this._markerPosition = t2;
   }
-  /**
-   * Getter for the marker position.
-   * @returns {object} The current marker position.
-   */
   get markerPosition() {
     return this._markerPosition;
   }
-  /**
-   * Setter for the color swatches.
-   * @param {string} value The new color swatches.
-   */
-  set swatches(value) {
-    if (Array.isArray(value)) {
-      this.setAttribute("swatches", value.join(","));
-      return;
-    }
-    this.setAttribute("swatches", this.parseSwatches(value).join(","));
+  set swatches(t2) {
+    Array.isArray(t2) ? this.setAttribute("swatches", t2.join(",")) : this.setAttribute("swatches", this.parseSwatches(t2).join(","));
   }
-  /**
-   * Getter for the color swatches.
-   * @returns {Array} The current color swatches.
-   */
   get swatches() {
-    this._swatches = this.getAttribute("swatches") ? this.parseSwatches(this.getAttribute("swatches")) : this._swatches;
-    return this._swatches;
+    return this._swatches = this.getAttribute("swatches") ? this.parseSwatches(this.getAttribute("swatches")) : this._swatches, this._swatches;
   }
-  /**
-   * Normalizes swatch colors from a string to an array.
-   * Supports comma and semicolon separators.
-   * @param {string} value
-   * @returns {string[]}
-   */
-  parseSwatches(value = "") {
-    if (typeof value !== "string") return [];
-    return value.split(/[;,]/).map((item) => item.trim()).filter(Boolean);
+  parseSwatches(t2 = "") {
+    return "string" != typeof t2 ? [] : t2.split(/[;,]/).map((t3) => t3.trim()).filter(Boolean);
   }
-  /**
-   * Sets or removes the 'no-color-area' attribute based on the provided value.
-   * @param {boolean} value A boolean value indicating whether to set or remove the 'no-color-area' attribute. If true, the attribute is added; if false, the attribute is removed.
-   */
-  set noColorArea(value) {
-    if (value) {
-      this.setAttribute("no-color-area", "");
-    } else {
-      this.removeAttribute("no-color-area");
-    }
+  set noColorArea(t2) {
+    t2 ? this.setAttribute("no-color-area", "") : this.removeAttribute("no-color-area");
   }
-  /**
-   * Getter method to check if the 'no-color-area' attribute is applied.
-   * @returns {boolean} Returns true if the 'no-color-area' attribute is present; otherwise, false.
-   */
   get noColorArea() {
     return this.hasAttribute("no-color-area");
   }
-  /**
-   * Sets or removes the "no-controls" attribute.
-   * @param {boolean} value If true, sets the "no-controls" attribute. If false, removes the "no-controls" attribute.
-   */
-  set noControls(value) {
-    if (value) {
-      this.setAttribute("no-controls", "");
-    } else {
-      this.removeAttribute("no-controls");
-    }
+  set noControls(t2) {
+    t2 ? this.setAttribute("no-controls", "") : this.removeAttribute("no-controls");
   }
-  /**
-   * Checks if the 'no-controls' attribute is present on the element.
-   * @returns {boolean} Returns true if the 'no-controls' attribute is present; otherwise, false.
-   */
   get noControls() {
     return this.hasAttribute("no-controls");
   }
-  /**
-   * Sets or removes the 'no-swatches' attribute on the element.
-   * If the value is truthy, the 'no-swatches' attribute is added.
-   * If the value is falsy, the 'no-swatches' attribute is removed.
-   * @param {boolean} value Determines whether the 'no-swatches' attribute is set (true) or removed (false).
-   */
-  set noSwatches(value) {
-    if (value) {
-      this.setAttribute("no-swatches", "");
-    } else {
-      this.removeAttribute("no-swatches");
-    }
+  set noSwatches(t2) {
+    t2 ? this.setAttribute("no-swatches", "") : this.removeAttribute("no-swatches");
   }
-  /**
-   * Checks if the 'no-swatches' attribute is present on the element.
-   * @returns {boolean} Returns true if the 'no-swatches' attribute is present; otherwise, false.
-   */
   get noSwatches() {
     return this.hasAttribute("no-swatches");
   }
-  /**
-   * Enables/disables manual typing in the input.
-   * @param {boolean} value
-   */
-  set inputEditable(value) {
-    if (value) {
-      this.setAttribute("input-editable", "");
-    } else {
-      this.removeAttribute("input-editable");
-    }
+  set inputEditable(t2) {
+    t2 ? this.setAttribute("input-editable", "") : this.removeAttribute("input-editable");
   }
-  /**
-   * Returns true when manual input typing is enabled.
-   * @returns {boolean}
-   */
   get inputEditable() {
     return this.hasAttribute("input-editable");
   }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {object} The styles object.
-   * @static
-   */
   static get cssStyleSheet() {
-    return styles;
+    return '.anchor{width:var(--wje-color-picker-size);height:var(--wje-color-picker-size);background:var(--wje-color-picker-value)}.picker{width:200px;box-shadow:0 0 5px #0000000d,0 5px 20px #0000001a;border-radius:var(--wje-color-picker-radius);border-width:1px;border-style:var(--wje-border-style);border-color:var(--wje-border-color);background:var(--wje-background)}.color-area{display:block;position:relative;height:100px;color:var(--wje-color-picker-area);background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,currentColor);cursor:crosshair;border-radius:var(--wje-color-picker-radius) var(--wje-color-picker-radius) 0 0;border-bottom:1px solid var(--wje-border-color)}.wrapper{display:inline-table;width:calc(100% - 2rem);margin:1rem}.hue{border-radius:.25rem;background-image:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red);width:100%;height:8px;margin:.75rem 0 1rem}.hue::part(slider){--wje-slider-color: transparent;--wje-slider-thumb-color: white;--wje-slider-thumb-shadow: 0 0 0 1px var(--wje-border-color);--wje-slider-thumb-shadow-active: var(--wje-slider-thumb-shadow);--wje-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(--wje-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){--wje-slider-color: transparent;--wje-slider-thumb-color: white;--wje-slider-thumb-shadow: 0 0 0 1px var(--wje-border-color);--wje-slider-thumb-shadow-active: var(--wje-slider-thumb-shadow);--wje-slider-track-color: transparent;--wje-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(--wje-color-picker-value, transparent)}wje-input{--wje-input-border-radius: 1rem;--wje-input-margin-bottom: 0}wje-input::part(input){text-align:center}.swatches{margin-top:1rem;display:flex;justify-content:center;flex-wrap:wrap}.swatch{background:var(--wje-color-picker-swatch, transparent);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(--wje-color-picker-value, transparent);cursor:pointer}';
   }
-  /**
-   * Getter for the observed attributes.
-   * @returns {Array} An empty array.
-   * @static
-   */
   static get observedAttributes() {
     return [];
   }
-  /**
-   * Sets up the attributes for the ColorPicker.
-   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * Creates and returns a document fragment containing the structure and components of a custom color picker.
-   * The method initializes DOM elements such as divs, sliders, and inputs, with specific classes and attributes,
-   * and attaches various event listeners to handle user interactions.
-   * @returns {DocumentFragment} A DocumentFragment containing the constructed and fully initialized DOM elements for the color picker.
-   */
   draw() {
-    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.setAttribute("part", "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);
-    colorArea.addEventListener("mousedown", (e) => {
-      e.preventDefault();
-      const stopMoving = () => {
-        window.removeEventListener("mousemove", this.moveMarker);
-        window.removeEventListener("mouseup", stopMoving);
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.classList.add("native-color-picker");
+    let r2 = document.createElement("div");
+    r2.setAttribute("slot", "anchor"), r2.setAttribute("part", "anchor"), r2.classList.add("anchor");
+    let i2 = document.createElement("div");
+    i2.classList.add("picker");
+    let a2 = document.createElement("div");
+    a2.classList.add("marker");
+    let o2 = document.createElement("div");
+    o2.classList.add("color-area"), o2.addEventListener("click", this.moveMarker), o2.addEventListener("mousedown", (t3) => {
+      t3.preventDefault();
+      const e3 = () => {
+        window.removeEventListener("mousemove", this.moveMarker), window.removeEventListener("mouseup", e3);
       };
-      window.addEventListener("mousemove", this.moveMarker);
-      window.addEventListener("mouseup", stopMoving);
-      this.moveMarker(e);
+      window.addEventListener("mousemove", this.moveMarker), window.addEventListener("mouseup", e3), this.moveMarker(t3);
     });
-    let wrapper = document.createElement("div");
-    wrapper.classList.add("wrapper");
-    let hueSlider = document.createElement("wje-slider");
-    hueSlider.setAttribute("min", "0");
-    hueSlider.setAttribute("max", "360");
-    hueSlider.classList.add("hue");
-    hueSlider.addEventListener("wje-slider:move", this.setHue);
-    let alphaWrapper = document.createElement("div");
-    alphaWrapper.classList.add("alpha-wrapper");
-    let alphaSlider = document.createElement("wje-slider");
-    alphaSlider.setAttribute("min", "0");
-    alphaSlider.setAttribute("max", "100");
-    alphaSlider.setAttribute("value", "50");
-    alphaSlider.classList.add("alpha");
-    alphaSlider.addEventListener("wje-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("wje-input");
-    input.setAttribute("variant", "standard");
-    input.setAttribute("maxlength", "9");
-    if ((!this.noColorArea || !this.noControls || !this.noSwatches) && !this.inputEditable)
-      input.setAttribute("readonly", "");
-    input.classList.add("input");
-    input.addEventListener("wje-input:input", () => {
-      let rawValue = (input.value || "").trim();
-      const hasHashPrefix = rawValue.startsWith("#");
-      const maxLength = hasHashPrefix ? 9 : 8;
-      if (rawValue.length > maxLength) {
-        rawValue = rawValue.slice(0, maxLength);
-        input.value = rawValue;
-      }
-      const hexCandidate = hasHashPrefix ? rawValue.slice(1) : rawValue;
-      const isHex = /^[0-9a-fA-F]+$/.test(hexCandidate);
-      if (isHex) {
-        if (hexCandidate.length < 6) return;
-        if (![6, 8].includes(hexCandidate.length)) return;
+    let s2 = document.createElement("div");
+    s2.classList.add("wrapper");
+    let h2 = document.createElement("wje-slider");
+    h2.setAttribute("min", "0"), h2.setAttribute("max", "360"), h2.classList.add("hue"), h2.addEventListener("wje-slider:move", this.setHue);
+    let l2 = document.createElement("div");
+    l2.classList.add("alpha-wrapper");
+    let u2 = document.createElement("wje-slider");
+    u2.setAttribute("min", "0"), u2.setAttribute("max", "100"), u2.setAttribute("value", "50"), u2.classList.add("alpha"), u2.addEventListener("wje-slider:move", this.setAlpha);
+    let c2 = document.createElement("div");
+    c2.classList.add("input-wrapper");
+    let d2 = document.createElement("div");
+    d2.classList.add("color-preview");
+    let f2 = document.createElement("wje-input");
+    return f2.setAttribute("variant", "standard"), f2.setAttribute("maxlength", "9"), this.noColorArea && this.noControls && this.noSwatches || this.inputEditable || f2.setAttribute("readonly", ""), f2.classList.add("input"), f2.addEventListener("wje-input:input", () => {
+      let t3 = (f2.value || "").trim();
+      const e3 = t3.startsWith("#"), r3 = e3 ? 9 : 8;
+      t3.length > r3 && (t3 = t3.slice(0, r3), f2.value = t3);
+      const i3 = e3 ? t3.slice(1) : t3, a3 = /^[0-9a-fA-F]+$/.test(i3);
+      if (a3) {
+        if (i3.length < 6) return;
+        if (![6, 8].includes(i3.length)) return;
       }
-      const parsedColor = tinycolor(isHex ? `#${hexCandidate}` : rawValue);
-      if (!parsedColor.isValid()) return;
-      this._manualInputValue = rawValue;
-      this.setSliders(parsedColor.toHex8String());
-      this.setColor(parsedColor, "input");
-      this._manualInputValue = null;
-    });
-    colorArea.append(marker);
-    alphaWrapper.append(alphaSlider);
-    inputWrapper.append(colorPreview, input);
-    if (!this.noControls)
-      wrapper.append(hueSlider, alphaWrapper);
-    wrapper.append(inputWrapper);
-    if (!this.noColorArea)
-      picker.append(colorArea);
-    picker.append(wrapper);
-    if (!this.noSwatches)
-      this.createSwatches(wrapper);
-    native.append(picker);
-    fragment.append(native);
-    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;
+      const o3 = n(a3 ? `#${i3}` : t3);
+      o3.isValid() && (this._manualInputValue = t3, this.setSliders(o3.toHex8String()), this.setColor(o3, "input"), this._manualInputValue = null);
+    }), o2.append(a2), l2.append(u2), c2.append(d2, f2), this.noControls || s2.append(h2, l2), s2.append(c2), this.noColorArea || i2.append(o2), i2.append(s2), this.noSwatches || this.createSwatches(s2), e2.append(i2), t2.append(e2), this.anchor = r2, this.picker = i2, this.marker = a2, this.colorArea = o2, this.hueSlider = h2, this.alphaSlider = u2, this.colorPreview = d2, this.input = f2, t2;
   }
-  /**
-   * Executes after the component is drawn. Initializes some configurations if not already initialized,
-   * including updating slider values, setting marker positions, and applying initial color settings.
-   * This method ensures that all necessary visual elements and configurations are properly set up.
-   * @returns {void} Does not return a value.
-   */
   afterDraw() {
-    __privateSet(this, _init, false);
-    if (!__privateGet(this, _init)) {
-      window.setTimeout(() => {
-        if (this.color !== "") this.alphaSlider.value = 100;
-        this.colorAreaDimension = this.dimension();
-        this.markerPosition = this.setMarkerPositionByColor(this.color);
-        this.setMarkerPosition(this.markerPosition.x, this.markerPosition.y);
-        this.setSliders(this.color);
-        this.setColor(tinycolor(this.color), "init");
-      }, 0);
-      __privateSet(this, _init, true);
-    }
-  }
-  /**
-   * Sets the hue.
-   * @param node
-   */
-  createSwatches(node) {
-    if (this.swatches.length === 0) return;
-    let swatches = document.createElement("div");
-    swatches.classList.add("swatches");
-    this.swatches.forEach((swatch) => {
-      if (!tinycolor(swatch).isValid()) return;
-      let button = document.createElement("button");
-      button.setAttribute("type", "button");
-      button.classList.add("swatch");
-      button.style.setProperty("--wje-color-picker-swatch", swatch);
-      button.addEventListener("click", () => {
-        this.setSliders(swatch);
-        this.setColor(tinycolor(swatch), "swatch");
-      });
-      swatches.appendChild(button);
-    });
-    node.appendChild(swatches);
-  }
-  /**
-   * Sets the sliders to the given color.
-   * @param color
-   */
-  setSliders(color) {
-    let hsva = tinycolor(color).toHsv();
-    this.hueSlider.value = hsva.h;
-    this.alphaSlider.value = hsva.a * 100;
+    __privateSet(this, _t, false), __privateGet(this, _t) || (window.setTimeout(() => {
+      "" !== this.color && (this.alphaSlider.value = 100), this.colorAreaDimension = this.dimension(), this.markerPosition = this.setMarkerPositionByColor(this.color), this.setMarkerPosition(this.markerPosition.x, this.markerPosition.y), this.setSliders(this.color), this.setColor(n(this.color), "init");
+    }, 0), __privateSet(this, _t, true));
+  }
+  createSwatches(t2) {
+    if (0 === this.swatches.length) return;
+    let e2 = document.createElement("div");
+    e2.classList.add("swatches"), this.swatches.forEach((t3) => {
+      if (!n(t3).isValid()) return;
+      let r2 = document.createElement("button");
+      r2.setAttribute("type", "button"), r2.classList.add("swatch"), r2.style.setProperty("--wje-color-picker-swatch", t3), r2.addEventListener("click", () => {
+        this.setSliders(t3), this.setColor(n(t3), "swatch");
+      }), e2.appendChild(r2);
+    }), t2.appendChild(e2);
+  }
+  setSliders(t2) {
+    let e2 = n(t2).toHsv();
+    this.hueSlider.value = e2.h, this.alphaSlider.value = 100 * e2.a;
   }
-  /**
-   * Retrieves the dimensions and position of the color area element relative to the viewport.
-   * @returns {object} An object containing the following properties:
-   * width: The width of the element in pixels.
-   * height: The height of the element in pixels.
-   * x: The x-coordinate of the element's left edge relative to the viewport.
-   * y: The y-coordinate of the element's top edge relative to the viewport.
-   */
   dimension() {
-    const rect = this.colorArea.getBoundingClientRect();
-    return {
-      width: rect.width,
-      height: rect.height,
-      x: rect.left,
-      // viewport-relative
-      y: rect.top
-      // viewport-relative
-    };
+    const t2 = this.colorArea.getBoundingClientRect();
+    return { width: t2.width, height: t2.height, x: t2.left, y: t2.top };
   }
-  /**
-   * Method executed before disconnecting. Resets the initialization state to false.
-   * @returns {void} Does not return a value.
-   */
   beforeDisconnect() {
-    __privateSet(this, _init, true);
+    __privateSet(this, _t, true);
   }
-  /**
-   * Gets the pointer position in client coordinates (viewport-relative).
-   * @param e
-   * @returns {{x: number, y: number}}
-   */
-  getPointerPosition(e) {
-    const p = e.touches && e.touches[0] || e.changedTouches && e.changedTouches[0] || e;
-    return {
-      x: p.clientX,
-      y: p.clientY
-    };
+  getPointerPosition(t2) {
+    const e2 = t2.touches && t2.touches[0] || t2.changedTouches && t2.changedTouches[0] || t2;
+    return { x: e2.clientX, y: e2.clientY };
   }
-  /**
-   * Sets the position of the marker.
-   * @param x
-   * @param y
-   */
-  setMarkerPosition(x, y) {
-    const markerPosition = this.clampMarkerPosition(x, y);
-    this.markerPosition = {
-      x: markerPosition.x,
-      y: markerPosition.y
-    };
-    this.marker.style.left = `${markerPosition.x}px`;
-    this.marker.style.top = `${markerPosition.y}px`;
+  setMarkerPosition(t2, e2) {
+    const r2 = this.clampMarkerPosition(t2, e2);
+    this.markerPosition = { x: r2.x, y: r2.y }, this.marker.style.left = `${r2.x}px`, this.marker.style.top = `${r2.y}px`;
   }
-  /**
-   * Clamps marker coordinates to the color area boundaries.
-   * @param {number} x
-   * @param {number} y
-   * @returns {{x: number, y: number}}
-   */
-  clampMarkerPosition(x, y) {
+  clampMarkerPosition(t2, e2) {
     var _a, _b;
-    const width = ((_a = this.colorAreaDimension) == null ? void 0 : _a.width) || 0;
-    const height = ((_b = this.colorAreaDimension) == null ? void 0 : _b.height) || 0;
-    const safeX = Number.isFinite(x) ? x : 0;
-    const safeY = Number.isFinite(y) ? y : 0;
-    return {
-      x: Math.min(Math.max(safeX, 0), width),
-      y: Math.min(Math.max(safeY, 0), height)
-    };
+    const r2 = ((_a = this.colorAreaDimension) == null ? void 0 : _a.width) || 0, i2 = ((_b = this.colorAreaDimension) == null ? void 0 : _b.height) || 0, a2 = Number.isFinite(t2) ? t2 : 0, n2 = Number.isFinite(e2) ? e2 : 0;
+    return { x: Math.min(Math.max(a2, 0), r2), y: Math.min(Math.max(n2, 0), i2) };
   }
-  /**
-   * Sets the color at the given position.
-   * @param x
-   * @param y
-   * @param alpha
-   * @returns {*|tinycolor}
-   */
-  setColorAtPosition(x, y, alpha = 100) {
+  setColorAtPosition(t2, e2, r2 = 100) {
     var _a, _b, _c;
-    const markerPosition = this.clampMarkerPosition(x, y);
-    const width = ((_a = this.colorAreaDimension) == null ? void 0 : _a.width) || 0;
-    const height = ((_b = this.colorAreaDimension) == null ? void 0 : _b.height) || 0;
-    const safeAlpha = Number.isFinite(Number(alpha)) ? Number(alpha) : 100;
-    if (width <= 0 || height <= 0) {
-      const fallbackHsv = tinycolor(((_c = this.input) == null ? void 0 : _c.value) || this.color).toHsv();
-      return tinycolor({
-        h: this.hueSlider.value * 1,
-        s: fallbackHsv.s,
-        v: fallbackHsv.v,
-        a: Math.max(0, Math.min(100, safeAlpha)) / 100
-      });
+    const i2 = this.clampMarkerPosition(t2, e2), a2 = ((_a = this.colorAreaDimension) == null ? void 0 : _a.width) || 0, o2 = ((_b = this.colorAreaDimension) == null ? void 0 : _b.height) || 0, s2 = Number.isFinite(Number(r2)) ? Number(r2) : 100;
+    if (a2 <= 0 || o2 <= 0) {
+      const t3 = n(((_c = this.input) == null ? void 0 : _c.value) || this.color).toHsv();
+      return n({ h: 1 * this.hueSlider.value, s: t3.s, v: t3.v, a: Math.max(0, Math.min(100, s2)) / 100 });
     }
-    const hsva = {
-      h: this.hueSlider.value * 1,
-      s: markerPosition.x / width * 100,
-      v: 100 - markerPosition.y / height * 100,
-      a: Math.max(0, Math.min(100, safeAlpha)) / 100
-    };
-    return tinycolor(hsva);
+    return n({ h: 1 * this.hueSlider.value, s: i2.x / a2 * 100, v: 100 - i2.y / o2 * 100, a: Math.max(0, Math.min(100, s2)) / 100 });
   }
-  /**
-   * Returns fully saturated and bright color for the current hue.
-   * Used as base color for the SV area so neutral grays do not black out the palette.
-   * @param {string} color
-   * @returns {string}
-   */
-  getHueAreaColor(color = "#ff0000") {
+  getHueAreaColor(t2 = "#ff0000") {
     var _a;
-    const hsv = tinycolor(color).toHsv();
-    const hue = Number.isFinite(hsv.h) ? hsv.h : Number(((_a = this.hueSlider) == null ? void 0 : _a.value) || 0);
-    return tinycolor({
-      h: hue,
-      s: 100,
-      v: 100,
-      a: 1
-    }).toHexString();
+    const e2 = n(t2).toHsv();
+    return n({ h: Number.isFinite(e2.h) ? e2.h : Number(((_a = this.hueSlider) == null ? void 0 : _a.value) || 0), s: 100, v: 100, a: 1 }).toHexString();
   }
 }
-_init = new WeakMap();
-WJElement.define("wje-color-picker", ColorPicker);
+_t = new WeakMap();
+t.define("wje-color-picker", I);
 export {
-  ColorPicker as default
+  I as default
 };
 //# sourceMappingURL=wje-color-picker.js.map