@cling-se/widget 0.17.2 → 0.18.0

package/dist/ColorPicker-BISZPQ6j.js

@@ -0,0 +1,1408 @@
+import { o as f, b as m, l as k, e as S, s as h, d as v, E as R, bW as ee, v as G, n as J, c as U, f as p, G as T, _ as te } from "./main-Bn5XkQPb.js";
+const re = "";
+function H(e, t) {
+  t === void 0 && (t = {});
+  var r = t.insertAt;
+  if (!(!e || typeof document > "u")) {
+    var n = document.head || document.getElementsByTagName("head")[0], a = document.createElement("style");
+    a.type = "text/css", r === "top" && n.firstChild ? n.insertBefore(a, n.firstChild) : n.appendChild(a), a.styleSheet ? a.styleSheet.cssText = e : a.appendChild(document.createTextNode(e));
+  }
+}
+const A = function(e, t) {
+  const { componentPrefix: r = re } = t || {};
+  e.component(`${r}${this.name}`, this);
+}, V = {};
+var E = {
+  name: "Checkboard",
+  props: {
+    size: {
+      type: [Number, String],
+      default: 8
+    },
+    white: {
+      type: String,
+      default: "#fff"
+    },
+    grey: {
+      type: String,
+      default: "#e6e6e6"
+    }
+  },
+  computed: {
+    bgStyle() {
+      return {
+        "background-image": `url(${ie(this.white, this.grey, this.size)})`
+      };
+    }
+  }
+};
+function ne(e, t, r) {
+  if (typeof document > "u")
+    return null;
+  const n = document.createElement("canvas");
+  n.width = n.height = r * 2;
+  const a = n.getContext("2d");
+  return a ? (a.fillStyle = e, a.fillRect(0, 0, n.width, n.height), a.fillStyle = t, a.fillRect(0, 0, r, r), a.translate(r, r), a.fillRect(0, 0, r, r), n.toDataURL()) : null;
+}
+function ie(e, t, r) {
+  const n = `${e},${t},${r}`;
+  if (V[n])
+    return V[n];
+  const a = ne(e, t, r);
+  return V[n] = a, a;
+}
+function ae(e, t, r, n, a, i) {
+  return f(), m(
+    "div",
+    {
+      class: "vc-checkerboard",
+      style: k(i.bgStyle)
+    },
+    null,
+    4
+    /* STYLE */
+  );
+}
+var se = ".vc-checkerboard{background-size:contain;bottom:0;left:0;position:absolute;right:0;top:0}";
+H(se);
+E.render = ae;
+E.__file = "src/components/checkboard/checkboard.vue";
+E.install = A;
+var D = {
+  name: "Alpha",
+  components: {
+    Checkboard: E
+  },
+  props: {
+    value: Object,
+    onChange: Function
+  },
+  computed: {
+    colors() {
+      return this.value;
+    },
+    gradientColor() {
+      const { rgba: e } = this.colors, t = [e.r, e.g, e.b].join(",");
+      return `linear-gradient(to right, rgba(${t}, 0) 0%, rgba(${t}, 1) 100%)`;
+    }
+  },
+  methods: {
+    handleChange(e, t) {
+      !t && e.preventDefault();
+      const { container: r } = this.$refs;
+      if (!r)
+        return;
+      const n = r.clientWidth, a = r.getBoundingClientRect().left + window.pageXOffset, s = (e.pageX || (e.touches ? e.touches[0].pageX : 0)) - a;
+      let o;
+      s < 0 ? o = 0 : s > n ? o = 1 : o = Math.round(s * 100 / n) / 100, this.colors.a !== o && this.$emit("change", {
+        h: this.colors.hsl.h,
+        s: this.colors.hsl.s,
+        l: this.colors.hsl.l,
+        a: o,
+        source: "rgba"
+      });
+    },
+    handleMouseDown(e) {
+      this.handleChange(e, !0), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
+    },
+    handleMouseUp() {
+      this.unbindEventListeners();
+    },
+    unbindEventListeners() {
+      window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
+    }
+  }
+};
+const oe = { class: "vc-alpha" }, he = { class: "vc-alpha-checkboard-wrap" }, le = /* @__PURE__ */ h(
+  "div",
+  { class: "vc-alpha-picker" },
+  null,
+  -1
+  /* HOISTED */
+), ce = [
+  le
+];
+function ue(e, t, r, n, a, i) {
+  const s = S("Checkboard");
+  return f(), m("div", oe, [
+    h("div", he, [
+      v(s)
+    ]),
+    h(
+      "div",
+      {
+        class: "vc-alpha-gradient",
+        style: k({ background: i.gradientColor })
+      },
+      null,
+      4
+      /* STYLE */
+    ),
+    h(
+      "div",
+      {
+        ref: "container",
+        class: "vc-alpha-container",
+        onMousedown: t[0] || (t[0] = (...o) => i.handleMouseDown && i.handleMouseDown(...o)),
+        onTouchmove: t[1] || (t[1] = (...o) => i.handleChange && i.handleChange(...o)),
+        onTouchstart: t[2] || (t[2] = (...o) => i.handleChange && i.handleChange(...o))
+      },
+      [
+        h(
+          "div",
+          {
+            class: "vc-alpha-pointer",
+            style: k({ left: `${i.colors.a * 100}%` })
+          },
+          ce,
+          4
+          /* STYLE */
+        )
+      ],
+      544
+      /* HYDRATE_EVENTS, NEED_PATCH */
+    )
+  ]);
+}
+var de = ".vc-alpha,.vc-alpha-checkboard-wrap{bottom:0;left:0;position:absolute;right:0;top:0}.vc-alpha-checkboard-wrap{overflow:hidden}.vc-alpha-gradient{bottom:0;left:0;position:absolute;right:0;top:0}.vc-alpha-container{cursor:pointer;height:100%;margin:0 3px;position:relative;z-index:2}.vc-alpha-pointer{position:absolute;z-index:2}.vc-alpha-picker{background:#fff;border-radius:1px;box-shadow:0 0 2px rgba(0,0,0,.6);cursor:pointer;height:8px;margin-top:1px;transform:translateX(-2px);width:4px}";
+H(de);
+D.render = ue;
+D.__file = "src/components/alpha/alpha.vue";
+D.install = A;
+function d(e, t) {
+  fe(e) && (e = "100%");
+  var r = ge(e);
+  return e = t === 360 ? e : Math.min(t, Math.max(0, parseFloat(e))), r && (e = parseInt(String(e * t), 10) / 100), Math.abs(e - t) < 1e-6 ? 1 : (t === 360 ? e = (e < 0 ? e % t + t : e % t) / parseFloat(String(t)) : e = e % t / parseFloat(String(t)), e);
+}
+function L(e) {
+  return Math.min(1, Math.max(0, e));
+}
+function fe(e) {
+  return typeof e == "string" && e.indexOf(".") !== -1 && parseFloat(e) === 1;
+}
+function ge(e) {
+  return typeof e == "string" && e.indexOf("%") !== -1;
+}
+function Q(e) {
+  return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
+}
+function I(e) {
+  return e <= 1 ? "".concat(Number(e) * 100, "%") : e;
+}
+function _(e) {
+  return e.length === 1 ? "0" + e : String(e);
+}
+function pe(e, t, r) {
+  return {
+    r: d(e, 255) * 255,
+    g: d(t, 255) * 255,
+    b: d(r, 255) * 255
+  };
+}
+function Y(e, t, r) {
+  e = d(e, 255), t = d(t, 255), r = d(r, 255);
+  var n = Math.max(e, t, r), a = Math.min(e, t, r), i = 0, s = 0, o = (n + a) / 2;
+  if (n === a)
+    s = 0, i = 0;
+  else {
+    var u = n - a;
+    switch (s = o > 0.5 ? u / (2 - n - a) : u / (n + a), n) {
+      case e:
+        i = (t - r) / u + (t < r ? 6 : 0);
+        break;
+      case t:
+        i = (r - e) / u + 2;
+        break;
+      case r:
+        i = (e - t) / u + 4;
+        break;
+    }
+    i /= 6;
+  }
+  return { h: i, s, l: o };
+}
+function z(e, t, r) {
+  return r < 0 && (r += 1), r > 1 && (r -= 1), r < 1 / 6 ? e + (t - e) * (6 * r) : r < 1 / 2 ? t : r < 2 / 3 ? e + (t - e) * (2 / 3 - r) * 6 : e;
+}
+function ve(e, t, r) {
+  var n, a, i;
+  if (e = d(e, 360), t = d(t, 100), r = d(r, 100), t === 0)
+    a = r, i = r, n = r;
+  else {
+    var s = r < 0.5 ? r * (1 + t) : r + t - r * t, o = 2 * r - s;
+    n = z(o, s, e + 1 / 3), a = z(o, s, e), i = z(o, s, e - 1 / 3);
+  }
+  return { r: n * 255, g: a * 255, b: i * 255 };
+}
+function q(e, t, r) {
+  e = d(e, 255), t = d(t, 255), r = d(r, 255);
+  var n = Math.max(e, t, r), a = Math.min(e, t, r), i = 0, s = n, o = n - a, u = n === 0 ? 0 : o / n;
+  if (n === a)
+    i = 0;
+  else {
+    switch (n) {
+      case e:
+        i = (t - r) / o + (t < r ? 6 : 0);
+        break;
+      case t:
+        i = (r - e) / o + 2;
+        break;
+      case r:
+        i = (e - t) / o + 4;
+        break;
+    }
+    i /= 6;
+  }
+  return { h: i, s: u, v: s };
+}
+function be(e, t, r) {
+  e = d(e, 360) * 6, t = d(t, 100), r = d(r, 100);
+  var n = Math.floor(e), a = e - n, i = r * (1 - t), s = r * (1 - a * t), o = r * (1 - (1 - a) * t), u = n % 6, x = [r, s, i, i, o, r][u], c = [o, r, r, s, i, i][u], l = [i, i, o, r, r, s][u];
+  return { r: x * 255, g: c * 255, b: l * 255 };
+}
+function K(e, t, r, n) {
+  var a = [
+    _(Math.round(e).toString(16)),
+    _(Math.round(t).toString(16)),
+    _(Math.round(r).toString(16))
+  ];
+  return n && a[0].startsWith(a[0].charAt(1)) && a[1].startsWith(a[1].charAt(1)) && a[2].startsWith(a[2].charAt(1)) ? a[0].charAt(0) + a[1].charAt(0) + a[2].charAt(0) : a.join("");
+}
+function me(e, t, r, n, a) {
+  var i = [
+    _(Math.round(e).toString(16)),
+    _(Math.round(t).toString(16)),
+    _(Math.round(r).toString(16)),
+    _(xe(n))
+  ];
+  return a && i[0].startsWith(i[0].charAt(1)) && i[1].startsWith(i[1].charAt(1)) && i[2].startsWith(i[2].charAt(1)) && i[3].startsWith(i[3].charAt(1)) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) + i[3].charAt(0) : i.join("");
+}
+function xe(e) {
+  return Math.round(parseFloat(e) * 255).toString(16);
+}
+function Z(e) {
+  return g(e) / 255;
+}
+function g(e) {
+  return parseInt(e, 16);
+}
+function we(e) {
+  return {
+    r: e >> 16,
+    g: (e & 65280) >> 8,
+    b: e & 255
+  };
+}
+var P = {
+  aliceblue: "#f0f8ff",
+  antiquewhite: "#faebd7",
+  aqua: "#00ffff",
+  aquamarine: "#7fffd4",
+  azure: "#f0ffff",
+  beige: "#f5f5dc",
+  bisque: "#ffe4c4",
+  black: "#000000",
+  blanchedalmond: "#ffebcd",
+  blue: "#0000ff",
+  blueviolet: "#8a2be2",
+  brown: "#a52a2a",
+  burlywood: "#deb887",
+  cadetblue: "#5f9ea0",
+  chartreuse: "#7fff00",
+  chocolate: "#d2691e",
+  coral: "#ff7f50",
+  cornflowerblue: "#6495ed",
+  cornsilk: "#fff8dc",
+  crimson: "#dc143c",
+  cyan: "#00ffff",
+  darkblue: "#00008b",
+  darkcyan: "#008b8b",
+  darkgoldenrod: "#b8860b",
+  darkgray: "#a9a9a9",
+  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: "#ff00ff",
+  gainsboro: "#dcdcdc",
+  ghostwhite: "#f8f8ff",
+  goldenrod: "#daa520",
+  gold: "#ffd700",
+  gray: "#808080",
+  green: "#008000",
+  greenyellow: "#adff2f",
+  grey: "#808080",
+  honeydew: "#f0fff0",
+  hotpink: "#ff69b4",
+  indianred: "#cd5c5c",
+  indigo: "#4b0082",
+  ivory: "#fffff0",
+  khaki: "#f0e68c",
+  lavenderblush: "#fff0f5",
+  lavender: "#e6e6fa",
+  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: "#778899",
+  lightslategrey: "#778899",
+  lightsteelblue: "#b0c4de",
+  lightyellow: "#ffffe0",
+  lime: "#00ff00",
+  limegreen: "#32cd32",
+  linen: "#faf0e6",
+  magenta: "#ff00ff",
+  maroon: "#800000",
+  mediumaquamarine: "#66cdaa",
+  mediumblue: "#0000cd",
+  mediumorchid: "#ba55d3",
+  mediumpurple: "#9370db",
+  mediumseagreen: "#3cb371",
+  mediumslateblue: "#7b68ee",
+  mediumspringgreen: "#00fa9a",
+  mediumturquoise: "#48d1cc",
+  mediumvioletred: "#c71585",
+  midnightblue: "#191970",
+  mintcream: "#f5fffa",
+  mistyrose: "#ffe4e1",
+  moccasin: "#ffe4b5",
+  navajowhite: "#ffdead",
+  navy: "#000080",
+  oldlace: "#fdf5e6",
+  olive: "#808000",
+  olivedrab: "#6b8e23",
+  orange: "#ffa500",
+  orangered: "#ff4500",
+  orchid: "#da70d6",
+  palegoldenrod: "#eee8aa",
+  palegreen: "#98fb98",
+  paleturquoise: "#afeeee",
+  palevioletred: "#db7093",
+  papayawhip: "#ffefd5",
+  peachpuff: "#ffdab9",
+  peru: "#cd853f",
+  pink: "#ffc0cb",
+  plum: "#dda0dd",
+  powderblue: "#b0e0e6",
+  purple: "#800080",
+  rebeccapurple: "#663399",
+  red: "#ff0000",
+  rosybrown: "#bc8f8f",
+  royalblue: "#4169e1",
+  saddlebrown: "#8b4513",
+  salmon: "#fa8072",
+  sandybrown: "#f4a460",
+  seagreen: "#2e8b57",
+  seashell: "#fff5ee",
+  sienna: "#a0522d",
+  silver: "#c0c0c0",
+  skyblue: "#87ceeb",
+  slateblue: "#6a5acd",
+  slategray: "#708090",
+  slategrey: "#708090",
+  snow: "#fffafa",
+  springgreen: "#00ff7f",
+  steelblue: "#4682b4",
+  tan: "#d2b48c",
+  teal: "#008080",
+  thistle: "#d8bfd8",
+  tomato: "#ff6347",
+  turquoise: "#40e0d0",
+  violet: "#ee82ee",
+  wheat: "#f5deb3",
+  white: "#ffffff",
+  whitesmoke: "#f5f5f5",
+  yellow: "#ffff00",
+  yellowgreen: "#9acd32"
+};
+function ye(e) {
+  var t = { r: 0, g: 0, b: 0 }, r = 1, n = null, a = null, i = null, s = !1, o = !1;
+  return typeof e == "string" && (e = ke(e)), typeof e == "object" && (w(e.r) && w(e.g) && w(e.b) ? (t = pe(e.r, e.g, e.b), s = !0, o = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : w(e.h) && w(e.s) && w(e.v) ? (n = I(e.s), a = I(e.v), t = be(e.h, n, a), s = !0, o = "hsv") : w(e.h) && w(e.s) && w(e.l) && (n = I(e.s), i = I(e.l), t = ve(e.h, n, i), s = !0, o = "hsl"), Object.prototype.hasOwnProperty.call(e, "a") && (r = e.a)), r = Q(r), {
+    ok: s,
+    format: e.format || o,
+    r: Math.min(255, Math.max(t.r, 0)),
+    g: Math.min(255, Math.max(t.g, 0)),
+    b: Math.min(255, Math.max(t.b, 0)),
+    a: r
+  };
+}
+var Ce = "[-\\+]?\\d+%?", _e = "[-\\+]?\\d*\\.\\d+%?", C = "(?:".concat(_e, ")|(?:").concat(Ce, ")"), $ = "[\\s|\\(]+(".concat(C, ")[,|\\s]+(").concat(C, ")[,|\\s]+(").concat(C, ")\\s*\\)?"), W = "[\\s|\\(]+(".concat(C, ")[,|\\s]+(").concat(C, ")[,|\\s]+(").concat(C, ")[,|\\s]+(").concat(C, ")\\s*\\)?"), b = {
+  CSS_UNIT: new RegExp(C),
+  rgb: new RegExp("rgb" + $),
+  rgba: new RegExp("rgba" + W),
+  hsl: new RegExp("hsl" + $),
+  hsla: new RegExp("hsla" + W),
+  hsv: new RegExp("hsv" + $),
+  hsva: new RegExp("hsva" + W),
+  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 ke(e) {
+  if (e = e.trim().toLowerCase(), e.length === 0)
+    return !1;
+  var t = !1;
+  if (P[e])
+    e = P[e], t = !0;
+  else if (e === "transparent")
+    return { r: 0, g: 0, b: 0, a: 0, format: "name" };
+  var r = b.rgb.exec(e);
+  return r ? { r: r[1], g: r[2], b: r[3] } : (r = b.rgba.exec(e), r ? { r: r[1], g: r[2], b: r[3], a: r[4] } : (r = b.hsl.exec(e), r ? { h: r[1], s: r[2], l: r[3] } : (r = b.hsla.exec(e), r ? { h: r[1], s: r[2], l: r[3], a: r[4] } : (r = b.hsv.exec(e), r ? { h: r[1], s: r[2], v: r[3] } : (r = b.hsva.exec(e), r ? { h: r[1], s: r[2], v: r[3], a: r[4] } : (r = b.hex8.exec(e), r ? {
+    r: g(r[1]),
+    g: g(r[2]),
+    b: g(r[3]),
+    a: Z(r[4]),
+    format: t ? "name" : "hex8"
+  } : (r = b.hex6.exec(e), r ? {
+    r: g(r[1]),
+    g: g(r[2]),
+    b: g(r[3]),
+    format: t ? "name" : "hex"
+  } : (r = b.hex4.exec(e), r ? {
+    r: g(r[1] + r[1]),
+    g: g(r[2] + r[2]),
+    b: g(r[3] + r[3]),
+    a: Z(r[4] + r[4]),
+    format: t ? "name" : "hex8"
+  } : (r = b.hex3.exec(e), r ? {
+    r: g(r[1] + r[1]),
+    g: g(r[2] + r[2]),
+    b: g(r[3] + r[3]),
+    format: t ? "name" : "hex"
+  } : !1)))))))));
+}
+function w(e) {
+  return !!b.CSS_UNIT.exec(String(e));
+}
+var Me = (
+  /** @class */
+  function() {
+    function e(t, r) {
+      t === void 0 && (t = ""), r === void 0 && (r = {});
+      var n;
+      if (t instanceof e)
+        return t;
+      typeof t == "number" && (t = we(t)), this.originalInput = t;
+      var a = ye(t);
+      this.originalInput = t, this.r = a.r, this.g = a.g, this.b = a.b, this.a = a.a, this.roundA = Math.round(100 * this.a) / 100, this.format = (n = r.format) !== null && n !== void 0 ? n : a.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.isValid = a.ok;
+    }
+    return e.prototype.isDark = function() {
+      return this.getBrightness() < 128;
+    }, e.prototype.isLight = function() {
+      return !this.isDark();
+    }, e.prototype.getBrightness = function() {
+      var t = this.toRgb();
+      return (t.r * 299 + t.g * 587 + t.b * 114) / 1e3;
+    }, e.prototype.getLuminance = function() {
+      var t = this.toRgb(), r, n, a, i = t.r / 255, s = t.g / 255, o = t.b / 255;
+      return i <= 0.03928 ? r = i / 12.92 : r = Math.pow((i + 0.055) / 1.055, 2.4), s <= 0.03928 ? n = s / 12.92 : n = Math.pow((s + 0.055) / 1.055, 2.4), o <= 0.03928 ? a = o / 12.92 : a = Math.pow((o + 0.055) / 1.055, 2.4), 0.2126 * r + 0.7152 * n + 0.0722 * a;
+    }, e.prototype.getAlpha = function() {
+      return this.a;
+    }, e.prototype.setAlpha = function(t) {
+      return this.a = Q(t), this.roundA = Math.round(100 * this.a) / 100, this;
+    }, e.prototype.isMonochrome = function() {
+      var t = this.toHsl().s;
+      return t === 0;
+    }, e.prototype.toHsv = function() {
+      var t = q(this.r, this.g, this.b);
+      return { h: t.h * 360, s: t.s, v: t.v, a: this.a };
+    }, e.prototype.toHsvString = function() {
+      var t = q(this.r, this.g, this.b), r = Math.round(t.h * 360), n = Math.round(t.s * 100), a = Math.round(t.v * 100);
+      return this.a === 1 ? "hsv(".concat(r, ", ").concat(n, "%, ").concat(a, "%)") : "hsva(".concat(r, ", ").concat(n, "%, ").concat(a, "%, ").concat(this.roundA, ")");
+    }, e.prototype.toHsl = function() {
+      var t = Y(this.r, this.g, this.b);
+      return { h: t.h * 360, s: t.s, l: t.l, a: this.a };
+    }, e.prototype.toHslString = function() {
+      var t = Y(this.r, this.g, this.b), r = Math.round(t.h * 360), n = Math.round(t.s * 100), a = Math.round(t.l * 100);
+      return this.a === 1 ? "hsl(".concat(r, ", ").concat(n, "%, ").concat(a, "%)") : "hsla(".concat(r, ", ").concat(n, "%, ").concat(a, "%, ").concat(this.roundA, ")");
+    }, e.prototype.toHex = function(t) {
+      return t === void 0 && (t = !1), K(this.r, this.g, this.b, t);
+    }, e.prototype.toHexString = function(t) {
+      return t === void 0 && (t = !1), "#" + this.toHex(t);
+    }, e.prototype.toHex8 = function(t) {
+      return t === void 0 && (t = !1), me(this.r, this.g, this.b, this.a, t);
+    }, e.prototype.toHex8String = function(t) {
+      return t === void 0 && (t = !1), "#" + this.toHex8(t);
+    }, e.prototype.toHexShortString = function(t) {
+      return t === void 0 && (t = !1), this.a === 1 ? this.toHexString(t) : this.toHex8String(t);
+    }, e.prototype.toRgb = function() {
+      return {
+        r: Math.round(this.r),
+        g: Math.round(this.g),
+        b: Math.round(this.b),
+        a: this.a
+      };
+    }, e.prototype.toRgbString = function() {
+      var t = Math.round(this.r), r = Math.round(this.g), n = Math.round(this.b);
+      return this.a === 1 ? "rgb(".concat(t, ", ").concat(r, ", ").concat(n, ")") : "rgba(".concat(t, ", ").concat(r, ", ").concat(n, ", ").concat(this.roundA, ")");
+    }, e.prototype.toPercentageRgb = function() {
+      var t = function(r) {
+        return "".concat(Math.round(d(r, 255) * 100), "%");
+      };
+      return {
+        r: t(this.r),
+        g: t(this.g),
+        b: t(this.b),
+        a: this.a
+      };
+    }, e.prototype.toPercentageRgbString = function() {
+      var t = function(r) {
+        return Math.round(d(r, 255) * 100);
+      };
+      return this.a === 1 ? "rgb(".concat(t(this.r), "%, ").concat(t(this.g), "%, ").concat(t(this.b), "%)") : "rgba(".concat(t(this.r), "%, ").concat(t(this.g), "%, ").concat(t(this.b), "%, ").concat(this.roundA, ")");
+    }, e.prototype.toName = function() {
+      if (this.a === 0)
+        return "transparent";
+      if (this.a < 1)
+        return !1;
+      for (var t = "#" + K(this.r, this.g, this.b, !1), r = 0, n = Object.entries(P); r < n.length; r++) {
+        var a = n[r], i = a[0], s = a[1];
+        if (t === s)
+          return i;
+      }
+      return !1;
+    }, e.prototype.toString = function(t) {
+      var r = !!t;
+      t = t ?? this.format;
+      var n = !1, a = this.a < 1 && this.a >= 0, i = !r && a && (t.startsWith("hex") || t === "name");
+      return i ? t === "name" && this.a === 0 ? this.toName() : this.toRgbString() : (t === "rgb" && (n = this.toRgbString()), t === "prgb" && (n = this.toPercentageRgbString()), (t === "hex" || t === "hex6") && (n = this.toHexString()), t === "hex3" && (n = this.toHexString(!0)), t === "hex4" && (n = this.toHex8String(!0)), t === "hex8" && (n = this.toHex8String()), t === "name" && (n = this.toName()), t === "hsl" && (n = this.toHslString()), t === "hsv" && (n = this.toHsvString()), n || this.toHexString());
+    }, e.prototype.toNumber = function() {
+      return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
+    }, e.prototype.clone = function() {
+      return new e(this.toString());
+    }, e.prototype.lighten = function(t) {
+      t === void 0 && (t = 10);
+      var r = this.toHsl();
+      return r.l += t / 100, r.l = L(r.l), new e(r);
+    }, e.prototype.brighten = function(t) {
+      t === void 0 && (t = 10);
+      var r = this.toRgb();
+      return r.r = Math.max(0, Math.min(255, r.r - Math.round(255 * -(t / 100)))), r.g = Math.max(0, Math.min(255, r.g - Math.round(255 * -(t / 100)))), r.b = Math.max(0, Math.min(255, r.b - Math.round(255 * -(t / 100)))), new e(r);
+    }, e.prototype.darken = function(t) {
+      t === void 0 && (t = 10);
+      var r = this.toHsl();
+      return r.l -= t / 100, r.l = L(r.l), new e(r);
+    }, e.prototype.tint = function(t) {
+      return t === void 0 && (t = 10), this.mix("white", t);
+    }, e.prototype.shade = function(t) {
+      return t === void 0 && (t = 10), this.mix("black", t);
+    }, e.prototype.desaturate = function(t) {
+      t === void 0 && (t = 10);
+      var r = this.toHsl();
+      return r.s -= t / 100, r.s = L(r.s), new e(r);
+    }, e.prototype.saturate = function(t) {
+      t === void 0 && (t = 10);
+      var r = this.toHsl();
+      return r.s += t / 100, r.s = L(r.s), new e(r);
+    }, e.prototype.greyscale = function() {
+      return this.desaturate(100);
+    }, e.prototype.spin = function(t) {
+      var r = this.toHsl(), n = (r.h + t) % 360;
+      return r.h = n < 0 ? 360 + n : n, new e(r);
+    }, e.prototype.mix = function(t, r) {
+      r === void 0 && (r = 50);
+      var n = this.toRgb(), a = new e(t).toRgb(), i = r / 100, s = {
+        r: (a.r - n.r) * i + n.r,
+        g: (a.g - n.g) * i + n.g,
+        b: (a.b - n.b) * i + n.b,
+        a: (a.a - n.a) * i + n.a
+      };
+      return new e(s);
+    }, e.prototype.analogous = function(t, r) {
+      t === void 0 && (t = 6), r === void 0 && (r = 30);
+      var n = this.toHsl(), a = 360 / r, i = [this];
+      for (n.h = (n.h - (a * t >> 1) + 720) % 360; --t; )
+        n.h = (n.h + a) % 360, i.push(new e(n));
+      return i;
+    }, e.prototype.complement = function() {
+      var t = this.toHsl();
+      return t.h = (t.h + 180) % 360, new e(t);
+    }, e.prototype.monochromatic = function(t) {
+      t === void 0 && (t = 6);
+      for (var r = this.toHsv(), n = r.h, a = r.s, i = r.v, s = [], o = 1 / t; t--; )
+        s.push(new e({ h: n, s: a, v: i })), i = (i + o) % 1;
+      return s;
+    }, e.prototype.splitcomplement = function() {
+      var t = this.toHsl(), r = t.h;
+      return [
+        this,
+        new e({ h: (r + 72) % 360, s: t.s, l: t.l }),
+        new e({ h: (r + 216) % 360, s: t.s, l: t.l })
+      ];
+    }, e.prototype.onBackground = function(t) {
+      var r = this.toRgb(), n = new e(t).toRgb(), a = r.a + n.a * (1 - r.a);
+      return new e({
+        r: (r.r * r.a + n.r * n.a * (1 - r.a)) / a,
+        g: (r.g * r.a + n.g * n.a * (1 - r.a)) / a,
+        b: (r.b * r.a + n.b * n.a * (1 - r.a)) / a,
+        a
+      });
+    }, e.prototype.triad = function() {
+      return this.polyad(3);
+    }, e.prototype.tetrad = function() {
+      return this.polyad(4);
+    }, e.prototype.polyad = function(t) {
+      for (var r = this.toHsl(), n = r.h, a = [this], i = 360 / t, s = 1; s < t; s++)
+        a.push(new e({ h: (n + s * i) % 360, s: r.s, l: r.l }));
+      return a;
+    }, e.prototype.equals = function(t) {
+      return this.toRgbString() === new e(t).toRgbString();
+    }, e;
+  }()
+);
+function y(...e) {
+  return new Me(...e);
+}
+function X(e, t) {
+  const r = e && e.a;
+  let n;
+  e && e.hsl ? n = y(e.hsl) : e && e.hex && e.hex.length > 0 ? n = y(e.hex) : e && e.hsv ? n = y(e.hsv) : e && e.rgba ? n = y(e.rgba) : e && e.rgb ? n = y(e.rgb) : n = y(e), n && (n._a === void 0 || n._a === null) && n.setAlpha(r || n.getAlpha());
+  const a = n.toHsl(), i = n.toHsv();
+  return a.s === 0 && (i.h = a.h = e.h || e.hsl && e.hsl.h || t || 0), i.v < 0.0164 && (i.h = e.h || e.hsv && e.hsv.h || 0, i.s = e.s || e.hsv && e.hsv.s || 0), a.l < 0.01 && (a.h = e.h || e.hsl && e.hsl.h || 0, a.s = e.s || e.hsl && e.hsl.s || 0), {
+    hsl: a,
+    hex: n.toHexString().toUpperCase(),
+    hex8: n.toHex8String().toUpperCase(),
+    rgba: n.toRgb(),
+    hsv: i,
+    oldHue: e.h || t || a.h,
+    source: e.source,
+    a: n.getAlpha()
+  };
+}
+var Se = {
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: ["modelValue"],
+  data() {
+    return {
+      val: X(this.modelValue)
+    };
+  },
+  computed: {
+    colors: {
+      get() {
+        return this.val;
+      },
+      set(e) {
+        this.val = e, this.$emit("update:modelValue", e);
+      }
+    }
+  },
+  watch: {
+    modelValue(e) {
+      this.val = X(e);
+    }
+  },
+  methods: {
+    colorChange(e, t) {
+      this.oldHue = this.colors.hsl.h, this.colors = X(e, t || this.oldHue);
+    },
+    isValidHex(e) {
+      return y(e).isValid;
+    },
+    simpleCheckForValidColor(e) {
+      const t = ["r", "g", "b", "a", "h", "s", "l", "v"];
+      let r = 0, n = 0;
+      for (let a = 0; a < t.length; a++) {
+        const i = t[a];
+        e[i] && (r++, isNaN(e[i]) || n++);
+      }
+      if (r === n)
+        return e;
+    },
+    paletteUpperCase(e) {
+      return e.map((t) => t.toUpperCase());
+    },
+    isTransparent(e) {
+      return y(e).getAlpha() === 0;
+    }
+  }
+}, F = {
+  name: "EditableInput",
+  props: {
+    label: String,
+    labelText: String,
+    desc: String,
+    value: [String, Number],
+    max: Number,
+    min: Number,
+    arrowOffset: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    val: {
+      get() {
+        return this.value;
+      },
+      set(e) {
+        if (this.max !== void 0 && +e > this.max)
+          this.$refs.input.value = this.max;
+        else
+          return e;
+      }
+    },
+    labelId() {
+      return `input__label__${this.label}__${Math.random().toString().slice(2, 5)}`;
+    },
+    labelSpanText() {
+      return this.labelText || this.label;
+    }
+  },
+  methods: {
+    update(e) {
+      this.handleChange(e.target.value);
+    },
+    handleChange(e) {
+      const t = {};
+      t[this.label] = e, t.hex === void 0 && t["#"] === void 0 ? this.$emit("change", t) : e.length > 5 && this.$emit("change", t);
+    },
+    // **** unused
+    // handleBlur (e) {
+    //   console.log(e)
+    // },
+    handleKeyDown(e) {
+      let { val: t } = this;
+      const r = Number(t);
+      if (r) {
+        const n = this.arrowOffset || 1;
+        e.keyCode === 38 && (t = r + n, this.handleChange(t), e.preventDefault()), e.keyCode === 40 && (t = r - n, this.handleChange(t), e.preventDefault());
+      }
+    }
+    // **** unused
+    // handleDrag (e) {
+    //   console.log(e)
+    // },
+    // handleMouseDown (e) {
+    //   console.log(e)
+    // }
+  }
+};
+const He = { class: "vc-editable-input" }, Ae = ["aria-labelledby"], Re = ["id", "for"], Ee = { class: "vc-input__desc" };
+function Te(e, t, r, n, a, i) {
+  return f(), m("div", He, [
+    R(h("input", {
+      ref: "input",
+      "onUpdate:modelValue": t[0] || (t[0] = (s) => i.val = s),
+      "aria-labelledby": i.labelId,
+      class: "vc-input__input",
+      onKeydown: t[1] || (t[1] = (...s) => i.handleKeyDown && i.handleKeyDown(...s)),
+      onInput: t[2] || (t[2] = (...s) => i.update && i.update(...s))
+    }, null, 40, Ae), [
+      [ee, i.val]
+    ]),
+    h("span", {
+      id: i.labelId,
+      for: r.label,
+      class: "vc-input__label"
+    }, G(i.labelSpanText), 9, Re),
+    h(
+      "span",
+      Ee,
+      G(r.desc),
+      1
+      /* TEXT */
+    )
+  ]);
+}
+var Le = ".vc-editable-input{position:relative}.vc-input__input{border:0;outline:none;padding:0}.vc-input__label{text-transform:capitalize}";
+H(Le);
+F.render = Te;
+F.__file = "src/components/editable-input/editable-input.vue";
+F.install = A;
+function j(e, t, r) {
+  return t < r ? e < t ? t : e > r ? r : e : e < r ? r : e > t ? t : e;
+}
+var B = {
+  name: "Saturation",
+  props: {
+    value: Object
+  },
+  computed: {
+    colors() {
+      return this.value;
+    },
+    bgColor() {
+      return `hsl(${this.colors.hsv.h}, 100%, 50%)`;
+    },
+    pointerTop() {
+      return `${-(this.colors.hsv.v * 100) + 1 + 100}%`;
+    },
+    pointerLeft() {
+      return `${this.colors.hsv.s * 100}%`;
+    }
+  },
+  methods: {
+    handleChange(e, t) {
+      !t && e.preventDefault();
+      const { container: r } = this.$refs;
+      if (!r)
+        return;
+      const n = r.clientWidth, a = r.clientHeight, i = r.getBoundingClientRect().left + window.pageXOffset, s = r.getBoundingClientRect().top + window.pageYOffset, o = e.pageX || (e.touches ? e.touches[0].pageX : 0), u = e.pageY || (e.touches ? e.touches[0].pageY : 0), x = j(o - i, 0, n), c = j(u - s, 0, a), l = x / n, M = j(-(c / a) + 1, 0, 1);
+      this.onChange({
+        h: this.colors.hsv.h,
+        s: l,
+        v: M,
+        a: this.colors.hsv.a,
+        source: "hsva"
+      });
+    },
+    onChange(e) {
+      this.$emit("change", e);
+    },
+    handleMouseDown(e) {
+      window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
+    },
+    handleMouseUp(e) {
+      this.unbindEventListeners();
+    },
+    unbindEventListeners() {
+      window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
+    }
+  }
+};
+const Ie = /* @__PURE__ */ h(
+  "div",
+  { class: "vc-saturation--white" },
+  null,
+  -1
+  /* HOISTED */
+), De = /* @__PURE__ */ h(
+  "div",
+  { class: "vc-saturation--black" },
+  null,
+  -1
+  /* HOISTED */
+), Fe = /* @__PURE__ */ h(
+  "div",
+  { class: "vc-saturation-circle" },
+  null,
+  -1
+  /* HOISTED */
+), Be = [
+  Fe
+];
+function Ne(e, t, r, n, a, i) {
+  return f(), m(
+    "div",
+    {
+      ref: "container",
+      class: "vc-saturation",
+      style: k({ background: i.bgColor }),
+      onMousedown: t[0] || (t[0] = (...s) => i.handleMouseDown && i.handleMouseDown(...s)),
+      onTouchmove: t[1] || (t[1] = (...s) => i.handleChange && i.handleChange(...s)),
+      onTouchstart: t[2] || (t[2] = (...s) => i.handleChange && i.handleChange(...s))
+    },
+    [
+      Ie,
+      De,
+      h(
+        "div",
+        {
+          class: "vc-saturation-pointer",
+          style: k({ top: i.pointerTop, left: i.pointerLeft })
+        },
+        Be,
+        4
+        /* STYLE */
+      )
+    ],
+    36
+    /* STYLE, HYDRATE_EVENTS */
+  );
+}
+var Oe = ".vc-saturation,.vc-saturation--black,.vc-saturation--white{bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0}.vc-saturation--white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.vc-saturation--black{background:linear-gradient(0deg,#000,transparent)}.vc-saturation-pointer{cursor:pointer;position:absolute}.vc-saturation-circle{border-radius:50%;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);cursor:head;height:4px;transform:translate(-2px,-2px);width:4px}";
+H(Oe);
+B.render = Ne;
+B.__file = "src/components/saturation/saturation.vue";
+B.install = A;
+var N = {
+  name: "Hue",
+  props: {
+    value: Object,
+    direction: {
+      type: String,
+      // [horizontal | vertical]
+      default: "horizontal"
+    }
+  },
+  data() {
+    return {
+      oldHue: 0,
+      pullDirection: ""
+    };
+  },
+  computed: {
+    colors() {
+      return this.value;
+    },
+    directionClass() {
+      return {
+        "vc-hue--horizontal": this.direction === "horizontal",
+        "vc-hue--vertical": this.direction === "vertical"
+      };
+    },
+    pointerTop() {
+      return this.direction === "vertical" ? this.colors.hsl.h === 0 && this.pullDirection === "right" ? 0 : `${-(this.colors.hsl.h * 100 / 360) + 100}%` : 0;
+    },
+    pointerLeft() {
+      return this.direction === "vertical" ? 0 : this.colors.hsl.h === 0 && this.pullDirection === "right" ? "100%" : `${this.colors.hsl.h * 100 / 360}%`;
+    }
+  },
+  watch: {
+    value: {
+      handler(e, t) {
+        const { h: r } = e.hsl;
+        r !== 0 && r - this.oldHue > 0 && (this.pullDirection = "right"), r !== 0 && r - this.oldHue < 0 && (this.pullDirection = "left"), this.oldHue = r;
+      },
+      deep: !0,
+      immediate: !0
+    }
+  },
+  methods: {
+    handleChange(e, t) {
+      !t && e.preventDefault();
+      const { container: r } = this.$refs;
+      if (!r)
+        return;
+      const n = r.clientWidth, a = r.clientHeight, i = r.getBoundingClientRect().left + window.pageXOffset, s = r.getBoundingClientRect().top + window.pageYOffset, o = e.pageX || (e.touches ? e.touches[0].pageX : 0), u = e.pageY || (e.touches ? e.touches[0].pageY : 0), x = o - i, c = u - s;
+      let l, M;
+      this.direction === "vertical" ? (c < 0 ? l = 360 : c > a ? l = 0 : (M = -(c * 100 / a) + 100, l = 360 * M / 100), this.colors.hsl.h !== l && this.$emit("change", {
+        h: l,
+        s: this.colors.hsl.s,
+        l: this.colors.hsl.l,
+        a: this.colors.hsl.a,
+        source: "hsl"
+      })) : (x < 0 ? l = 0 : x > n ? l = 360 : (M = x * 100 / n, l = 360 * M / 100), this.colors.hsl.h !== l && this.$emit("change", {
+        h: l,
+        s: this.colors.hsl.s,
+        l: this.colors.hsl.l,
+        a: this.colors.hsl.a,
+        source: "hsl"
+      }));
+    },
+    handleMouseDown(e) {
+      this.handleChange(e, !0), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
+    },
+    handleMouseUp(e) {
+      this.unbindEventListeners();
+    },
+    unbindEventListeners() {
+      window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
+    }
+  }
+};
+const Ue = ["aria-valuenow"], Ve = /* @__PURE__ */ h(
+  "div",
+  { class: "vc-hue-picker" },
+  null,
+  -1
+  /* HOISTED */
+), ze = [
+  Ve
+];
+function $e(e, t, r, n, a, i) {
+  return f(), m(
+    "div",
+    {
+      class: J(["vc-hue", [i.directionClass]])
+    },
+    [
+      h("div", {
+        ref: "container",
+        class: "vc-hue-container",
+        role: "slider",
+        "aria-valuenow": i.colors.hsl.h,
+        "aria-valuemin": "0",
+        "aria-valuemax": "360",
+        onMousedown: t[0] || (t[0] = (...s) => i.handleMouseDown && i.handleMouseDown(...s)),
+        onTouchmove: t[1] || (t[1] = (...s) => i.handleChange && i.handleChange(...s)),
+        onTouchstart: t[2] || (t[2] = (...s) => i.handleChange && i.handleChange(...s))
+      }, [
+        h(
+          "div",
+          {
+            class: "vc-hue-pointer",
+            style: k({ top: i.pointerTop, left: i.pointerLeft }),
+            role: "presentation"
+          },
+          ze,
+          4
+          /* STYLE */
+        )
+      ], 40, Ue)
+    ],
+    2
+    /* CLASS */
+  );
+}
+var We = ".vc-hue{border-radius:2px;bottom:0;left:0;position:absolute;right:0;top:0}.vc-hue--horizontal{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.vc-hue--vertical{background:linear-gradient(0deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.vc-hue-container{cursor:pointer;height:100%;margin:0 2px;position:relative}.vc-hue-pointer{position:absolute;z-index:2}.vc-hue-picker{background:#fff;border-radius:1px;box-shadow:0 0 2px rgba(0,0,0,.6);cursor:pointer;height:8px;margin-top:1px;transform:translateX(-2px);width:4px}";
+H(We);
+N.render = $e;
+N.__file = "src/components/hue/hue.vue";
+N.install = A;
+var O = {
+  name: "Chrome",
+  components: {
+    Saturation: B,
+    Hue: N,
+    Alpha: D,
+    EdIn: F,
+    Checkboard: E
+  },
+  mixins: [Se],
+  props: {
+    disableAlpha: {
+      type: Boolean,
+      default: !1
+    },
+    disableFields: {
+      type: Boolean,
+      default: !1
+    },
+    format: {
+      type: String,
+      default: "hex"
+    }
+  },
+  data() {
+    return {
+      fieldsIndex: "hex",
+      highlight: !1
+    };
+  },
+  computed: {
+    hsl() {
+      const { h: e, s: t, l: r } = this.colors.hsl;
+      return {
+        h: e.toFixed(),
+        s: `${(t * 100).toFixed()}%`,
+        l: `${(r * 100).toFixed()}%`
+      };
+    },
+    activeColor() {
+      const { rgba: e } = this.colors;
+      return `rgba(${[e.r, e.g, e.b, e.a].join(",")})`;
+    },
+    hasAlpha() {
+      return this.colors.a < 1;
+    }
+  },
+  watch: {
+    format: {
+      handler(e) {
+        this.fieldsIndex = e;
+      },
+      immediate: !0
+    }
+  },
+  methods: {
+    childChange(e) {
+      this.colorChange(e);
+    },
+    inputChange(e) {
+      if (e) {
+        if (e.hex)
+          this.isValidHex(e.hex) && this.colorChange({
+            hex: e.hex,
+            source: "hex"
+          });
+        else if (e.r || e.g || e.b || e.a)
+          this.colorChange({
+            r: e.r || this.colors.rgba.r,
+            g: e.g || this.colors.rgba.g,
+            b: e.b || this.colors.rgba.b,
+            a: e.a || this.colors.rgba.a,
+            source: "rgba"
+          });
+        else if (e.h || e.s || e.l) {
+          const t = e.s ? e.s.replace("%", "") / 100 : this.colors.hsl.s, r = e.l ? e.l.replace("%", "") / 100 : this.colors.hsl.l;
+          this.colorChange({
+            h: e.h || this.colors.hsl.h,
+            s: t,
+            l: r,
+            source: "hsl"
+          });
+        }
+      }
+    },
+    toggleViews() {
+      switch (this.fieldsIndex) {
+        case "hex":
+          this.fieldsIndex = `rgb${this.disableAlpha ? "" : "a"}`;
+          break;
+        case "rgb":
+        case "rgba":
+          this.fieldsIndex = `hsl${this.disableAlpha ? "" : "a"}`;
+          break;
+        default:
+          this.fieldsIndex = "hex";
+          break;
+      }
+      this.$emit("update:format", this.fieldsIndex);
+    },
+    showHighlight() {
+      this.highlight = !0;
+    },
+    hideHighlight() {
+      this.highlight = !1;
+    }
+  }
+};
+const Xe = { class: "vc-chrome-saturation-wrap" }, je = { class: "vc-chrome-body" }, Pe = { class: "vc-chrome-controls" }, Ge = { class: "vc-chrome-color-wrap" }, Ye = ["aria-label"], qe = { class: "vc-chrome-sliders" }, Ke = { class: "vc-chrome-hue-wrap" }, Ze = {
+  key: 0,
+  class: "vc-chrome-alpha-wrap"
+}, Je = {
+  key: 0,
+  class: "vc-chrome-fields-wrap"
+}, Qe = { class: "vc-chrome-fields" }, et = { class: "vc-chrome-field" }, tt = { class: "vc-chrome-fields" }, rt = { class: "vc-chrome-field" }, nt = { class: "vc-chrome-field" }, it = { class: "vc-chrome-field" }, at = {
+  key: 0,
+  class: "vc-chrome-field"
+}, st = { class: "vc-chrome-fields" }, ot = { class: "vc-chrome-field" }, ht = { class: "vc-chrome-field" }, lt = { class: "vc-chrome-field" }, ct = {
+  key: 0,
+  class: "vc-chrome-field"
+}, ut = { class: "vc-chrome-toggle-icon" }, dt = /* @__PURE__ */ h(
+  "path",
+  {
+    fill: "#333",
+    d: "M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
+  },
+  null,
+  -1
+  /* HOISTED */
+), ft = [
+  dt
+], gt = { class: "vc-chrome-toggle-icon-highlight" };
+function pt(e, t, r, n, a, i) {
+  const s = S("Saturation"), o = S("Checkboard"), u = S("Hue"), x = S("Alpha"), c = S("EdIn");
+  return f(), m(
+    "div",
+    {
+      role: "application",
+      "aria-label": "Chrome color picker",
+      class: J(["vc-chrome", [r.disableAlpha ? "vc-chrome__disable-alpha" : ""]])
+    },
+    [
+      h("div", Xe, [
+        v(s, {
+          value: e.colors,
+          onChange: i.childChange
+        }, null, 8, ["value", "onChange"])
+      ]),
+      h("div", je, [
+        h("div", Pe, [
+          h("div", Ge, [
+            h("div", {
+              "aria-label": `current color is ${e.colors.hex}`,
+              class: "vc-chrome-active-color",
+              style: k({ background: i.activeColor })
+            }, null, 12, Ye),
+            r.disableAlpha ? p("v-if", !0) : (f(), U(o, { key: 0 }))
+          ]),
+          h("div", qe, [
+            h("div", Ke, [
+              v(u, {
+                value: e.colors,
+                onChange: i.childChange
+              }, null, 8, ["value", "onChange"])
+            ]),
+            r.disableAlpha ? p("v-if", !0) : (f(), m("div", Ze, [
+              v(x, {
+                value: e.colors,
+                onChange: i.childChange
+              }, null, 8, ["value", "onChange"])
+            ]))
+          ])
+        ]),
+        r.disableFields ? p("v-if", !0) : (f(), m("div", Je, [
+          R(h(
+            "div",
+            Qe,
+            [
+              p(" hex "),
+              h("div", et, [
+                i.hasAlpha ? p("v-if", !0) : (f(), U(c, {
+                  key: 0,
+                  label: "hex",
+                  value: e.colors.hex,
+                  onChange: i.inputChange
+                }, null, 8, ["value", "onChange"])),
+                i.hasAlpha ? (f(), U(c, {
+                  key: 1,
+                  label: "hex",
+                  value: e.colors.hex8,
+                  onChange: i.inputChange
+                }, null, 8, ["value", "onChange"])) : p("v-if", !0)
+              ])
+            ],
+            512
+            /* NEED_PATCH */
+          ), [
+            [T, a.fieldsIndex === "hex"]
+          ]),
+          R(h(
+            "div",
+            tt,
+            [
+              p(" rgba "),
+              h("div", rt, [
+                v(c, {
+                  label: "r",
+                  value: e.colors.rgba.r,
+                  onChange: i.inputChange
+                }, null, 8, ["value", "onChange"])
+              ]),
+              h("div", nt, [
+                v(c, {
+                  label: "g",
+                  value: e.colors.rgba.g,
+                  onChange: i.inputChange
+                }, null, 8, ["value", "onChange"])
+              ]),
+              h("div", it, [
+                v(c, {
+                  label: "b",
+                  value: e.colors.rgba.b,
+                  onChange: i.inputChange
+                }, null, 8, ["value", "onChange"])
+              ]),
+              r.disableAlpha ? p("v-if", !0) : (f(), m("div", at, [
+                v(c, {
+                  label: "a",
+                  value: e.colors.a,
+                  "arrow-offset": 0.01,
+                  max: 1,
+                  onChange: i.inputChange
+                }, null, 8, ["value", "arrow-offset", "onChange"])
+              ]))
+            ],
+            512
+            /* NEED_PATCH */
+          ), [
+            [T, ["rgb", "rgba"].includes(a.fieldsIndex)]
+          ]),
+          R(h(
+            "div",
+            st,
+            [
+              p(" hsla "),
+              h("div", ot, [
+                v(c, {
+                  label: "h",
+                  value: i.hsl.h,
+                  onChange: i.inputChange
+                }, null, 8, ["value", "onChange"])
+              ]),
+              h("div", ht, [
+                v(c, {
+                  label: "s",
+                  value: i.hsl.s,
+                  onChange: i.inputChange
+                }, null, 8, ["value", "onChange"])
+              ]),
+              h("div", lt, [
+                v(c, {
+                  label: "l",
+                  value: i.hsl.l,
+                  onChange: i.inputChange
+                }, null, 8, ["value", "onChange"])
+              ]),
+              r.disableAlpha ? p("v-if", !0) : (f(), m("div", ct, [
+                v(c, {
+                  label: "a",
+                  value: e.colors.a,
+                  "arrow-offset": 0.01,
+                  max: 1,
+                  onChange: i.inputChange
+                }, null, 8, ["value", "arrow-offset", "onChange"])
+              ]))
+            ],
+            512
+            /* NEED_PATCH */
+          ), [
+            [T, ["hsl", "hsla"].includes(a.fieldsIndex)]
+          ]),
+          p(" btn "),
+          h("div", {
+            class: "vc-chrome-toggle-btn",
+            role: "button",
+            "aria-label": "Change another color definition",
+            onClick: t[3] || (t[3] = (...l) => i.toggleViews && i.toggleViews(...l))
+          }, [
+            h("div", ut, [
+              (f(), m(
+                "svg",
+                {
+                  style: { width: "24px", height: "24px" },
+                  viewBox: "0 0 24 24",
+                  onMouseover: t[0] || (t[0] = (...l) => i.showHighlight && i.showHighlight(...l)),
+                  onMouseenter: t[1] || (t[1] = (...l) => i.showHighlight && i.showHighlight(...l)),
+                  onMouseout: t[2] || (t[2] = (...l) => i.hideHighlight && i.hideHighlight(...l))
+                },
+                ft,
+                32
+                /* HYDRATE_EVENTS */
+              ))
+            ]),
+            R(h(
+              "div",
+              gt,
+              null,
+              512
+              /* NEED_PATCH */
+            ), [
+              [T, a.highlight]
+            ])
+          ]),
+          p(" btn ")
+        ]))
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+var vt = ".vc-chrome{background:#fff;background-color:#fff;border-radius:2px;box-shadow:0 0 2px rgba(0,0,0,.3),0 4px 8px rgba(0,0,0,.3);box-sizing:initial;font-family:Menlo;width:225px}.vc-chrome-controls{display:flex}.vc-chrome-color-wrap{position:relative;width:36px}.vc-chrome-active-color{border-radius:15px;height:30px;overflow:hidden;position:relative;width:30px;z-index:1}.vc-chrome-color-wrap .vc-checkerboard{background-size:auto;border-radius:15px;height:30px;width:30px}.vc-chrome-sliders{flex:1}.vc-chrome-fields-wrap{display:flex;padding-top:16px}.vc-chrome-fields{display:flex;flex:1;margin-left:-6px}.vc-chrome-field{padding-left:6px;width:100%}.vc-chrome-toggle-btn{position:relative;text-align:right;width:32px}.vc-chrome-toggle-icon{cursor:pointer;margin-right:-4px;margin-top:12px;position:relative;z-index:2}.vc-chrome-toggle-icon-highlight{background:#eee;border-radius:4px;height:28px;left:12px;position:absolute;top:10px;width:24px}.vc-chrome-hue-wrap{margin-bottom:8px}.vc-chrome-alpha-wrap,.vc-chrome-hue-wrap{height:10px;position:relative}.vc-chrome-alpha-wrap .vc-alpha-gradient,.vc-chrome-hue-wrap .vc-hue{border-radius:2px}.vc-chrome-alpha-wrap .vc-alpha-picker,.vc-chrome-hue-wrap .vc-hue-picker{background-color:#f8f8f8;border-radius:6px;box-shadow:0 1px 4px 0 rgba(0,0,0,.37);height:12px;transform:translate(-6px,-2px);width:12px}.vc-chrome-body{background-color:#fff;padding:16px 16px 12px}.vc-chrome-saturation-wrap{border-radius:2px 2px 0 0;overflow:hidden;padding-bottom:55%;position:relative;width:100%}.vc-chrome-saturation-wrap .vc-saturation-circle{height:12px;width:12px}.vc-chrome-fields .vc-input__input{border:none;border-radius:2px;box-shadow:inset 0 0 0 1px #dadada;color:#333;font-size:11px;height:21px;text-align:center;width:100%}.vc-chrome-fields .vc-input__label{color:#969696;display:block;font-size:11px;line-height:11px;margin-top:12px;text-align:center;text-transform:uppercase}.vc-chrome__disable-alpha .vc-chrome-active-color{height:18px;width:18px}.vc-chrome__disable-alpha .vc-chrome-color-wrap{width:30px}.vc-chrome__disable-alpha .vc-chrome-hue-wrap{margin-bottom:4px;margin-top:4px}";
+H(vt);
+O.render = pt;
+O.__file = "src/components/chrome/chrome.vue";
+O.install = A;
+const bt = {
+  name: "ColorPicker",
+  extends: O
+}, xt = /* @__PURE__ */ te(bt, [["__scopeId", "data-v-11d72679"]]);
+export {
+  xt as C
+};