diff --git a/scripts/vendor-dependencies.mjs b/scripts/vendor-dependencies.mjs
index 8995474..f5bae2c 100644
--- a/scripts/vendor-dependencies.mjs
+++ b/scripts/vendor-dependencies.mjs
@@ -13,8 +13,10 @@ const dependencies = {
   "htm.min.js": "https://unpkg.com/htm@3.1.1/mini/index.js",
   "twind.min.js": "https://unpkg.com/@twind/cdn@1.0.7/cdn.global.js",
   "lucide.min.js": "https://unpkg.com/lucide@0.104.0/dist/umd/lucide.min.js",
-  "jscolor.min.js":
-    "https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.5.1/jscolor.min.js",
+  "coloris.min.js":
+    "https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js",
+  "coloris.min.css":
+    "https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css",
 };
 
 const output = fileURLToPath(new URL("../src/vendor", import.meta.url)),
diff --git a/src/api/events.js b/src/api/events.js
index cb8141a..81e21d1 100644
--- a/src/api/events.js
+++ b/src/api/events.js
@@ -77,7 +77,11 @@ const modifierAliases = [
                 return true;
               }
             }
-            if (key === "plus") key = "+";
+            if (key === "space") key = " ";
+            if (key === "plus") key = "equal";
+            if (key === "minus") key = "-";
+            if (key === ",") key = "comma";
+            if (key === ".") key = "period";
             const keyPressed = [
               event.key.toLowerCase(),
               event.code.toLowerCase(),
diff --git a/src/api/interface.js b/src/api/interface.js
index 6d1782f..1504f55 100644
--- a/src/api/interface.js
+++ b/src/api/interface.js
@@ -543,7 +543,7 @@ const h = (type, props, ...children) => {
       ? document.createElementNS("http://www.w3.org/2000/svg", type)
       : document.createElement(type);
     for (const prop in props ?? {}) {
-      if (htmlAttributes.includes(prop)) {
+      if (htmlAttributes.includes(prop) || prop.startsWith("data-")) {
         elem.setAttribute(prop, props[prop]);
       } else elem[prop] = props[prop];
     }
diff --git a/src/core/menu/components.mjs b/src/core/menu/components.mjs
index 2af0a7b..be6c77e 100644
--- a/src/core/menu/components.mjs
+++ b/src/core/menu/components.mjs
@@ -6,7 +6,7 @@
 
 import { setState, useState } from "./state.mjs";
 
-const Sidebar = ({}, ...children) => {
+function Sidebar({}, ...children) {
   const { html } = globalThis.__enhancerApi;
   return html`<aside
     class="notion-enhancer--menu-sidebar min-w-[224.14px] max-w-[250px]
@@ -14,20 +14,20 @@ const Sidebar = ({}, ...children) => {
   >
     ${children}
   </aside>`;
-};
+}
 
-const SidebarSection = ({}, ...children) => {
+function SidebarSection({}, ...children) {
   const { html } = globalThis.__enhancerApi;
-  return html`<div
+  return html`<h2
     class="text-([11px] [color:var(--theme--fg-secondary)])
     py-[5px] px-[15px] mb-px mt-[18px] first:mt-[10px]
     uppercase font-medium tracking-[0.03em] leading-none"
   >
     ${children}
-  </div>`;
-};
+  </h2>`;
+}
 
-const SidebarButton = ({ icon, ...props }, ...children) => {
+function SidebarButton({ icon, ...props }, ...children) {
   const { html } = globalThis.__enhancerApi,
     iconSize =
       icon === "notion-enhancer"
@@ -52,9 +52,9 @@ const SidebarButton = ({ icon, ...props }, ...children) => {
     });
   }
   return $el;
-};
+}
 
-const View = ({ id }, ...children) => {
+function View({ id }, ...children) {
   const { html } = globalThis.__enhancerApi,
     $el = html`<article
       id=${id}
@@ -68,23 +68,215 @@ const View = ({ id }, ...children) => {
     $el.style.display = active ? "" : "none";
   });
   return $el;
-};
+}
 
-const TextInput = ({}, ...children) => {};
+function Option({ mod, type, ...props }) {
+  const { html } = globalThis.__enhancerApi,
+    camelToSentenceCase = (string) =>
+      string[0].toUpperCase() +
+      string.replace(/[A-Z]/g, (match) => ` ${match.toLowerCase()}`).slice(1);
 
-const NumberInput = ({}, ...children) => {};
+  const label = props.label ?? camelToSentenceCase(props.key),
+    description = props.description;
+  if (type === "heading") {
+    return html`<h3
+      class="notion-enhancer--menu-heading font-semibold
+      mb-[16px] mt-[48px] first:mt-0 pb-[12px] text-[16px]
+      border-b border-b-[color:var(--theme--fg-border)]"
+    >
+      ${label}
+    </h3>`;
+  }
 
-const HotkeyInput = ({}, ...children) => {};
+  let $input;
+  switch (type) {
+    case "text":
+      $input = html`<${TextInput} value=${props.value} />`;
+      break;
+    case "number":
+      $input = html`<${NumberInput} value=${props.value} />`;
+      break;
+    case "hotkey":
+      $input = html`<${HotkeyInput} value=${props.value} />`;
+      break;
+    case "color":
+      $input = html`<${ColorInput} value=${props.value} />`;
+      break;
+    case "file":
+      $input = html`<${FileInput} extensions=${props.extensions} />`;
+      break;
+    case "select":
+      $input = html`<${Select} values=${props.values} />`;
+      break;
+    case "toggle":
+      $input = html`<${Toggle} />`;
+  }
+  return html`<${type === "toggle" ? "label" : "div"}
+    class="notion-enhancer--menu-option flex items-center justify-between
+    mb-[18px] ${type === "toggle" ? "cursor-pointer" : ""}"
+    ><div class="flex flex-col ${type === "text" ? "w-full" : "mr-[10%]"}">
+      <h4 class="text-[14px] mb-[2px] mt-0">${label}</h4>
+      ${type === "text" ? $input : ""}
+      <p
+        class="text-[12px] leading-[16px]
+        text-[color:var(--theme--fg-secondary)]"
+        innerHTML=${description}
+      ></p>
+    </div>
+    ${type === "text" ? "" : $input}
+  <//>`;
+}
 
-const ColorInput = ({}, ...children) => {};
+function TextInput({ value, ...props }) {
+  const { html } = globalThis.__enhancerApi;
+  return html`<label
+    class="notion-enhancer--menu-text-input
+    relative block w-full mt-[4px] mb-[8px]"
+  >
+    <input
+      type="text"
+      class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
+      h-[28px] w-full pl-[8px] pr-[30px] bg-[color:var(--theme--bg-hover)]"
+      value=${value}
+      ...${props}
+    />
+    <i
+      class="i-text-cursor pointer-events-none
+      absolute right-[8px] top-[6px] w-[16px] h-[16px]
+      text-[color:var(--theme--fg-secondary)]"
+    ></i>
+  </label>`;
+}
 
-const FileInput = ({ extensions, ...props }, ..._children) => {
+function NumberInput({ value, ...props }) {
+  const { html } = globalThis.__enhancerApi;
+  return html`<label
+    class="notion-enhancer--menu-number-input
+    relative shrink-0 w-[192px]"
+  >
+    <input
+      type="number"
+      class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
+      h-[28px] w-full pl-[8px] pr-[32px] bg-[color:var(--theme--bg-hover)]"
+      value=${value}
+      ...${props}
+    />
+    <i
+      class="i-hash pointer-events-none
+      absolute right-[8px] top-[6px] w-[16px] h-[16px]
+      text-[color:var(--theme--fg-secondary)]"
+    ></i>
+  </label>`;
+}
+
+function HotkeyInput({ value, onkeydown, ...props }) {
+  const { html } = globalThis.__enhancerApi,
+    updateHotkey = (event) => {
+      event.preventDefault();
+      const keys = [];
+      for (const modifier of ["metaKey", "ctrlKey", "altKey", "shiftKey"]) {
+        if (!event[modifier]) continue;
+        const alias = modifier[0].toUpperCase() + modifier.slice(1, -3);
+        keys.push(alias);
+      }
+      if (!keys.length && ["Backspace", "Delete"].includes(event.key)) {
+        event.target.value = "";
+      } else if (event.key) {
+        let key = event.key;
+        if (key === " ") key = "Space";
+        if (["+", "="].includes(key)) key = "Plus";
+        if (key === "-") key = "Minus";
+        if (event.code === "Comma") key = ",";
+        if (event.code === "Period") key = ".";
+        if (key === "Control") key = "Ctrl";
+        // avoid e.g. Shift+Shift, force inclusion of non-modifier
+        if (keys.includes(event.key)) return;
+        keys.push(key.length === 1 ? key.toUpperCase() : key);
+        event.target.value = keys.join("+");
+      }
+    };
+  props.onkeydown = (event) => {
+    updateHotkey(event);
+    onkeydown?.(event);
+  };
+
+  return html`<label
+    class="notion-enhancer--menu-hotkey-input
+    relative shrink-0 w-[192px]"
+  >
+    <input
+      type="text"
+      class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
+      h-[28px] w-full pl-[8px] pr-[32px] bg-[color:var(--theme--bg-hover)]"
+      value=${value}
+      ...${props}
+    />
+    <i
+      class="i-command pointer-events-none
+      absolute right-[8px] top-[6px] w-[16px] h-[16px]
+      text-[color:var(--theme--fg-secondary)]"
+    ></i>
+  </label>`;
+}
+
+function ColorInput({ value, ...props }) {
+  const { html } = globalThis.__enhancerApi,
+    updateContrast = ($input, $icon) => {
+      $input.style.background = $input.value;
+      const [r, g, b, a = 1] = $input.value
+        .replace(/^rgba?\(/, "")
+        .replace(/\)$/, "")
+        .split(",")
+        .map((n) => parseFloat(n));
+      if (a > 0.5) {
+        // pick a contrasting foreground for an rgb background
+        // using the percieved brightness constants from http://alienryderflex.com/hsp.html
+        const brightness = 0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b);
+        $input.style.color = Math.sqrt(brightness) > 165.75 ? "#000" : "#fff";
+      } else $input.style.color = "#000";
+      $icon.style.color = $input.style.color;
+    };
+
+  const $input = html`<input
+      type="text"
+      class="appearance-none text-[14px] leading-[1.2]
+      h-[28px] w-full pl-[8px] pr-[32px] pb-px"
+      style="background: ${value}"
+      value=${value}
+      data-coloris
+      ...${props}
+    />`,
+    $icon = html`<i
+      class="i-pipette pointer-events-none absolute opacity-70
+      right-[8px] top-[6px] w-[16px] h-[16px] text-current"
+    ></i>`,
+    { oninput } = $input;
+  $input.oninput = (event) => {
+    oninput?.(event);
+    updateContrast($input, $icon);
+  };
+  updateContrast($input, $icon);
+  Coloris({ format: "rgb" });
+
+  return html`<label
+    class="notion-enhancer--menu-color-input shrink-0
+    relative overflow-hidden rounded-[4px] w-[192px] bg-(
+      [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)]
+      [position:0_0,4px_4px]
+      [size:8px_8px]
+    )"
+  >
+    ${$input}${$icon}
+  </label>`;
+}
+
+function FileInput({ extensions, ...props }) {
   // todo: show uploaded file name, clear prev upload
   const { html } = globalThis.__enhancerApi;
   return html`<label
     tabindex="0"
-    class="flex items-center h-[28px] max-w-[256px]
-    leading-[1.2] px-[8px] rounded-[4px] cursor-pointer select-none
+    class="notion-enhancer--menu-file-input flex shrink-0 items-center
+    h-[28px] leading-[1.2] px-[8px] rounded-[4px] cursor-pointer select-none
     text-[14px] text-[color:var(--theme--fg-secondary)] transition duration-[20ms]
     bg-[color:var(--theme--bg-secondary)] hover:bg-[color:var(--theme--bg-hover)]"
   >
@@ -99,13 +291,13 @@ const FileInput = ({ extensions, ...props }, ..._children) => {
     <i class="i-file-up w-[16px] h-[16px] mr-[8px]"></i>
     <span>Upload a file</span>
   </label>`;
-};
+}
 
-const Select = ({ values, onchange, ...props }, ..._children) => {
+function Select({ values, onchange, ...props }) {
   const { html } = globalThis.__enhancerApi,
     updateWidth = ($select) => {
       const $tmp = html`<span
-        class="text-[14px] pl-[8px] pr-[32px]
+        class="text-[14px] pl-[8px] pr-[28px]
         absolute top-[-9999px] left-[-9999px]"
         >${$select.value}</span
       >`;
@@ -121,8 +313,8 @@ const Select = ({ values, onchange, ...props }, ..._children) => {
   };
 
   const $select = html`<select
-    class="appearance-none bg-transparent rounded-[4px] max-w-[256px]
-    text-[14px] leading-[1.2] h-[28px] pl-[8px] pr-[32px] cursor-pointer
+    class="appearance-none bg-transparent rounded-[4px] cursor-pointer
+    text-[14px] leading-[1.2] pl-[8px] pr-[28px] h-[28px] max-w-[256px]
     transition duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]"
     ...${props}
   >
@@ -142,13 +334,13 @@ const Select = ({ values, onchange, ...props }, ..._children) => {
     ${$select}
     <i
       class="i-chevron-down pointer-events-none
-      absolute right-[8px] top-[6px] w-[16px] h-[16px]
+      absolute right-[6px] top-[6px] w-[16px] h-[16px]
       text-[color:var(--theme--fg-secondary)]"
     ></i>
   </div>`;
-};
+}
 
-const Toggle = (props, ..._children) => {
+function Toggle(props) {
   const { html } = globalThis.__enhancerApi;
   return html`<div class="notion-enhancer--menu-toggle shrink-0">
     <input
@@ -174,67 +366,19 @@ const Toggle = (props, ..._children) => {
       ></div>
     </div>
   </div>`;
-};
-
-const Option = ({ mod, type, ...props }, ..._children) => {
-  const { html } = globalThis.__enhancerApi,
-    camelToSentenceCase = (string) =>
-      string[0].toUpperCase() +
-      string.replace(/[A-Z]/g, (match) => ` ${match.toLowerCase()}`).slice(1);
-
-  const label = props.label ?? camelToSentenceCase(props.key),
-    description = props.description;
-  if (type === "heading") {
-    return html`<h2
-      class="notion-enhancer--menu-heading font-semibold
-      mb-[16px] mt-[48px] first:mt-0 pb-[12px] text-[16px]
-      border-b border-b-[color:var(--theme--fg-border)]"
-    >
-      ${label}
-    </h2>`;
-  }
-
-  let $input;
-  switch (type) {
-    // case "text":
-    //   break;
-    // case "number":
-    //   break;
-    // case "hotkey":
-    //   break;
-    // case "color":
-    //   break;
-    case "file":
-      $input = html`<${FileInput} extensions=${props.extensions} />`;
-      break;
-    case "select":
-      $input = html`<${Select} values=${props.values} />`;
-      break;
-    case "toggle":
-      $input = html`<${Toggle} />`;
-  }
-  return html`<${type === "toggle" ? "label" : "div"}
-    class="notion-enhancer--menu-option flex items-center justify-between
-    mb-[18px] ${type === "toggle" ? "cursor-pointer" : ""}"
-    ><div class="flex flex-col mr-[10%]">
-      <h3 class="text-[14px] mb-[2px] mt-0">${label}</h3>
-      <p
-        class="text-[12px] leading-[16px]
-        text-[color:var(--theme--fg-secondary)]"
-        innerHTML=${description}
-      ></p>
-    </div>
-    ${$input}
-  <//>`;
-};
+}
 
 export {
   Sidebar,
   SidebarSection,
   SidebarButton,
   View,
+  Option,
+  TextInput,
+  NumberInput,
+  HotkeyInput,
+  ColorInput,
   FileInput,
   Select,
   Toggle,
-  Option,
 };
diff --git a/src/core/menu/index.html b/src/core/menu/index.html
index e9e97eb..a808aba 100644
--- a/src/core/menu/index.html
+++ b/src/core/menu/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>notion-enhancer menu</title>
     <link rel="stylesheet" href="./menu.css" />
+    <link rel="stylesheet" href="../../vendor/coloris.min.css" />
+    <script src="../../vendor/coloris.min.js" type="module"></script>
     <script src="./menu.mjs" type="module" defer></script>
   </head>
   <body
diff --git a/src/core/menu/menu.css b/src/core/menu/menu.css
index d094398..1bc4c4b 100644
--- a/src/core/menu/menu.css
+++ b/src/core/menu/menu.css
@@ -18,13 +18,13 @@
 }
 ::-webkit-scrollbar-track,
 ::-webkit-scrollbar-corner {
-  background: var(--theme--scrollbar-track) !important;
+  background: var(--theme--scrollbar-track);
 }
 ::-webkit-scrollbar-thumb {
-  background: var(--theme--scrollbar-thumb) !important;
+  background: var(--theme--scrollbar-thumb);
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--theme--scrollbar-thumb_hover) !important;
+  background: var(--theme--scrollbar-thumb_hover);
 }
 
 .notion-enhancer--menu-option a {
@@ -34,3 +34,17 @@
 .notion-enhancer--menu-option a:hover {
   color: var(--theme--accent-secondary);
 }
+
+/* coloris theming */
+.clr-picker {
+  background-color: var(--theme--bg-secondary) !important;
+}
+.clr-color {
+  background-color: var(--theme--bg-hover) !important;
+  border-color: var(--theme--fg-border) !important;
+  color: var(--theme--fg-primary) !important;
+}
+.clr-preview:after,
+.clr-preview:before {
+  border-color: var(--theme--fg-border) !important;
+}
diff --git a/src/core/mod.json b/src/core/mod.json
index 11c6ef1..b17e324 100644
--- a/src/core/mod.json
+++ b/src/core/mod.json
@@ -20,7 +20,7 @@
       "type": "hotkey",
       "key": "openMenuHotkey",
       "description": "Opens the notion-enhancer menu from within Notion.",
-      "value": "Ctrl+Shift+Comma"
+      "value": "Ctrl+Shift+,"
     },
     {
       "type": "heading",
diff --git a/src/vendor/coloris.min.css b/src/vendor/coloris.min.css
new file mode 100644
index 0000000..9f78627
--- /dev/null
+++ b/src/vendor/coloris.min.css
@@ -0,0 +1 @@
+.clr-picker{display:none;flex-wrap:wrap;position:absolute;width:200px;z-index:1000;border-radius:10px;background-color:#fff;justify-content:space-between;box-shadow:0 0 5px rgba(0,0,0,.05),0 5px 20px rgba(0,0,0,.1);-moz-user-select:none;-webkit-user-select:none;user-select:none}.clr-picker.clr-open,.clr-picker[data-inline=true]{display:flex}.clr-picker[data-inline=true]{position:relative}.clr-gradient{position:relative;width:100%;height:100px;margin-bottom:15px;border-radius:3px 3px 0 0;background-image:linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,currentColor);cursor:pointer}.clr-marker{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid #fff;border-radius:50%;background-color:currentColor;cursor:pointer}.clr-picker input[type=range]::-webkit-slider-runnable-track{width:100%;height:8px}.clr-picker input[type=range]::-webkit-slider-thumb{width:8px;height:8px;-webkit-appearance:none}.clr-picker input[type=range]::-moz-range-track{width:100%;height:8px;border:0}.clr-picker input[type=range]::-moz-range-thumb{width:8px;height:8px;border:0}.clr-hue{background-image:linear-gradient(to right,red 0,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%)}.clr-alpha,.clr-hue{position:relative;width:calc(100% - 40px);height:8px;margin:5px 20px;border-radius:4px}.clr-alpha span{display:block;height:100%;width:100%;border-radius:inherit;background-image:linear-gradient(90deg,rgba(0,0,0,0),currentColor)}.clr-alpha input,.clr-hue input{position:absolute;width:calc(100% + 16px);height:16px;left:-8px;top:-4px;margin:0;background-color:transparent;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}.clr-alpha div,.clr-hue div{position:absolute;width:16px;height:16px;left:0;top:50%;margin-left:-8px;transform:translateY(-50%);border:2px solid #fff;border-radius:50%;background-color:currentColor;box-shadow:0 0 1px #888;pointer-events:none}.clr-alpha div:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border-radius:50%;background-color:currentColor}.clr-format{display:none;order:1;width:calc(100% - 40px);margin:0 20px 20px}.clr-segmented{display:flex;position:relative;width:100%;margin:0;padding:0;border:1px solid #ddd;border-radius:15px;box-sizing:border-box;color:#999;font-size:12px}.clr-segmented input,.clr-segmented legend{position:absolute;width:100%;height:100%;margin:0;padding:0;border:0;left:0;top:0;opacity:0;pointer-events:none}.clr-segmented label{flex-grow:1;padding:4px 0;text-align:center;cursor:pointer}.clr-segmented label:first-of-type{border-radius:10px 0 0 10px}.clr-segmented label:last-of-type{border-radius:0 10px 10px 0}.clr-segmented input:checked+label{color:#fff;background-color:#666}.clr-swatches{order:2;width:calc(100% - 32px);margin:0 16px}.clr-swatches div{display:flex;flex-wrap:wrap;padding-bottom:12px;justify-content:center}.clr-swatches button{position:relative;width:20px;height:20px;margin:0 4px 6px 4px;border:0;border-radius:50%;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;cursor:pointer}.clr-swatches button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}input.clr-color{order:1;width:calc(100% - 80px);height:32px;margin:15px 20px 20px 0;padding:0 10px;border:1px solid #ddd;border-radius:16px;color:#444;background-color:#fff;font-family:sans-serif;font-size:14px;text-align:center;box-shadow:none}input.clr-color:focus{outline:0;border:1px solid #1e90ff}.clr-clear{display:none;order:2;height:24px;margin:0 20px 20px auto;padding:0 20px;border:0;border-radius:12px;color:#fff;background-color:#666;font-family:inherit;font-size:12px;font-weight:400;cursor:pointer}.clr-preview{position:relative;width:32px;height:32px;margin:15px 0 20px 20px;border:0;border-radius:50%;overflow:hidden;cursor:pointer}.clr-preview:after,.clr-preview:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border:1px solid #fff;border-radius:50%}.clr-preview:after{border:0;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.clr-alpha div,.clr-color,.clr-hue div,.clr-marker{box-sizing:border-box}.clr-field{display:inline-block;position:relative;color:transparent}.clr-field button{position:absolute;width:30px;height:100%;right:0;top:50%;transform:translateY(-50%);border:0;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;pointer-events:none}.clr-field button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 1px rgba(0,0,0,.5)}.clr-alpha,.clr-alpha div,.clr-field button,.clr-preview:before,.clr-swatches button{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}.clr-marker:focus{outline:0}.clr-keyboard-nav .clr-alpha input:focus+div,.clr-keyboard-nav .clr-hue input:focus+div,.clr-keyboard-nav .clr-marker:focus,.clr-keyboard-nav .clr-segmented input:focus+label{outline:0;box-shadow:0 0 0 2px #1e90ff,0 0 2px 2px #fff}.clr-picker[data-alpha=false] .clr-alpha{display:none}.clr-picker[data-minimal=true]{padding-top:16px}.clr-picker[data-minimal=true] .clr-alpha,.clr-picker[data-minimal=true] .clr-color,.clr-picker[data-minimal=true] .clr-gradient,.clr-picker[data-minimal=true] .clr-hue,.clr-picker[data-minimal=true] .clr-preview{display:none}.clr-dark{background-color:#444}.clr-dark .clr-segmented{border-color:#777}.clr-dark .clr-swatches button:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.clr-dark input.clr-color{color:#fff;border-color:#777;background-color:#555}.clr-dark input.clr-color:focus{border-color:#1e90ff}.clr-dark .clr-preview:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.clr-dark .clr-alpha,.clr-dark .clr-alpha div,.clr-dark .clr-preview:before,.clr-dark .clr-swatches button{background-image:repeating-linear-gradient(45deg,#666 25%,transparent 25%,transparent 75%,#888 75%,#888),repeating-linear-gradient(45deg,#888 25%,#444 25%,#444 75%,#888 75%,#888)}.clr-picker.clr-polaroid{border-radius:6px;box-shadow:0 0 5px rgba(0,0,0,.1),0 5px 30px rgba(0,0,0,.2)}.clr-picker.clr-polaroid:before{content:'';display:block;position:absolute;width:16px;height:10px;left:20px;top:-10px;border:solid transparent;border-width:0 8px 10px 8px;border-bottom-color:currentColor;box-sizing:border-box;color:#fff;filter:drop-shadow(0 -4px 3px rgba(0,0,0,.1));pointer-events:none}.clr-picker.clr-polaroid.clr-dark:before{color:#444}.clr-picker.clr-polaroid.clr-left:before{left:auto;right:20px}.clr-picker.clr-polaroid.clr-top:before{top:auto;bottom:-10px;transform:rotateZ(180deg)}.clr-polaroid .clr-gradient{width:calc(100% - 20px);height:120px;margin:10px;border-radius:3px}.clr-polaroid .clr-alpha,.clr-polaroid .clr-hue{width:calc(100% - 30px);height:10px;margin:6px 15px;border-radius:5px}.clr-polaroid .clr-alpha div,.clr-polaroid .clr-hue div{box-shadow:0 0 5px rgba(0,0,0,.2)}.clr-polaroid .clr-format{width:calc(100% - 20px);margin:0 10px 15px}.clr-polaroid .clr-swatches{width:calc(100% - 12px);margin:0 6px}.clr-polaroid .clr-swatches div{padding-bottom:10px}.clr-polaroid .clr-swatches button{width:22px;height:22px}.clr-polaroid input.clr-color{width:calc(100% - 60px);margin:10px 10px 15px 0}.clr-polaroid .clr-clear{margin:0 10px 15px auto}.clr-polaroid .clr-preview{margin:10px 0 15px 10px}.clr-picker.clr-large{width:275px}.clr-large .clr-gradient{height:150px}.clr-large .clr-swatches button{width:22px;height:22px}.clr-picker.clr-pill{width:380px;padding-left:180px;box-sizing:border-box}.clr-pill .clr-gradient{position:absolute;width:180px;height:100%;left:0;top:0;margin-bottom:0;border-radius:3px 0 0 3px}.clr-pill .clr-hue{margin-top:20px}
\ No newline at end of file
diff --git a/src/vendor/coloris.min.js b/src/vendor/coloris.min.js
new file mode 100644
index 0000000..81625fb
--- /dev/null
+++ b/src/vendor/coloris.min.js
@@ -0,0 +1,6 @@
+/*!
+ * Copyright (c) 2021 Momo Bassit.
+ * Licensed under the MIT License (MIT)
+ * https://github.com/mdbassit/Coloris
+ */
+!function(u,p,s){var d,f,h,b,c,v,y,i,g,l,m,w,k,x,a,r=p.createElement("canvas").getContext("2d"),L={r:0,g:0,b:0,h:0,s:0,v:0,a:1},E={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",a11y:{open:"Open color picker",close:"Close color picker",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},n={},o="",S={},A=!1;function T(e){if("object"==typeof e)for(var t in e)switch(t){case"el":H(e.el),!1!==e.wrap&&N(e.el);break;case"parent":(d=p.querySelector(e.parent))&&(d.appendChild(f),E.parent=e.parent,d===p.body&&(d=null));break;case"themeMode":E.themeMode=e.themeMode,"auto"===e.themeMode&&u.matchMedia&&u.matchMedia("(prefers-color-scheme: dark)").matches&&(E.themeMode="dark");case"theme":e.theme&&(E.theme=e.theme),f.className="clr-picker clr-"+E.theme+" clr-"+E.themeMode,E.inline&&O();break;case"margin":e.margin*=1,E.margin=(isNaN(e.margin)?E:e).margin;break;case"wrap":e.el&&e.wrap&&N(e.el);break;case"formatToggle":E.formatToggle=!!e.formatToggle,X("clr-format").style.display=E.formatToggle?"block":"none",E.formatToggle&&(E.format="auto");break;case"swatches":Array.isArray(e.swatches)&&function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),X("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",E.swatches=e.swatches.slice()}();break;case"swatchesOnly":E.swatchesOnly=!!e.swatchesOnly,f.setAttribute("data-minimal",E.swatchesOnly);break;case"alpha":E.alpha=!!e.alpha,f.setAttribute("data-alpha",E.alpha);break;case"inline":E.inline=!!e.inline,f.setAttribute("data-inline",E.inline),E.inline&&(l=e.defaultColor||E.defaultColor,x=D(l),O(),j(l));break;case"clearButton":"object"==typeof e.clearButton&&(e.clearButton.label&&(E.clearLabel=e.clearButton.label,i.innerHTML=E.clearLabel),e.clearButton=e.clearButton.show),E.clearButton=!!e.clearButton,i.style.display=E.clearButton?"block":"none";break;case"clearLabel":E.clearLabel=e.clearLabel,i.innerHTML=E.clearLabel;break;case"a11y":var a,l,r=e.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&E.a11y[o]&&(E.a11y[o]=r[o],n=!0);n&&(a=X("clr-open-label"),l=X("clr-swatch-label"),a.innerHTML=E.a11y.open,l.innerHTML=E.a11y.swatch,v.setAttribute("aria-label",E.a11y.close),g.setAttribute("aria-label",E.a11y.hueSlider),m.setAttribute("aria-label",E.a11y.alphaSlider),y.setAttribute("aria-label",E.a11y.input),h.setAttribute("aria-label",E.a11y.instruction));default:E[t]=e[t]}}function C(e,t){"string"==typeof e&&"object"==typeof t&&(n[e]=t,A=!0)}function M(e){delete n[e],0===Object.keys(n).length&&(A=!1,e===o&&B())}function t(l){if(A){var e,r=["el","wrap","inline","defaultColor","a11y"];for(e in n)if("break"===function(e){var t=n[e];if(l.matches(e)){for(var a in o=e,S={},r.forEach(function(e){return delete t[e]}),t)S[a]=Array.isArray(E[a])?E[a].slice():E[a];return T(t),"break"}}(e))break}}function B(){0<Object.keys(S).length&&(T(S),o="",S={})}function H(e){U(p,"click",e,function(e){E.inline||(t(e.target),k=e.target,a=k.value,x=D(a),f.classList.add("clr-open"),O(),j(a),(E.focusInput||E.selectInput)&&y.focus({preventScroll:!0}),E.selectInput&&y.select(),k.dispatchEvent(new Event("open",{bubbles:!0})))}),U(p,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function O(){var e,t,a,l,r=d,n=u.scrollY,o=f.offsetWidth,i=f.offsetHeight,c={left:!1,top:!1},s={x:0,y:0};r&&(a=u.getComputedStyle(r),e=parseFloat(a.marginTop),l=parseFloat(a.borderTopWidth),(s=r.getBoundingClientRect()).y+=l+n),E.inline||(a=(t=k.getBoundingClientRect()).x,l=n+t.y+t.height+E.margin,r?(a-=s.x,l-=s.y,a+o>r.clientWidth&&(a+=t.width-o,c.left=!0),l+i>r.clientHeight-e&&i+E.margin<=t.top-(s.y-n)&&(l-=t.height+i+2*E.margin,c.top=!0),l+=r.scrollTop):(a+o>p.documentElement.clientWidth&&(a+=t.width-o,c.left=!0),l+i-n>p.documentElement.clientHeight&&i+E.margin<=t.top&&(l=n+t.y-i-E.margin,c.top=!0)),f.classList.toggle("clr-left",c.left),f.classList.toggle("clr-top",c.top),f.style.left=a+"px",f.style.top=l+"px"),b={width:h.offsetWidth,height:h.offsetHeight,x:f.offsetLeft+h.offsetLeft+s.x,y:f.offsetTop+h.offsetTop+s.y}}function N(e){p.querySelectorAll(e).forEach(function(e){var t,a=e.parentNode;a.classList.contains("clr-field")||((t=p.createElement("div")).innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',a.insertBefore(t,e),t.setAttribute("class","clr-field"),t.style.color=e.value,t.appendChild(e))})}function I(e){var t;k&&!E.inline&&(t=k,e&&(k=null,a!==t.value&&(t.value=a,t.dispatchEvent(new Event("input",{bubbles:!0})))),setTimeout(function(){a!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),f.classList.remove("clr-open"),A&&B(),t.dispatchEvent(new Event("close",{bubbles:!0})),E.focusInput&&t.focus({preventScroll:!0}),k=null)}function j(e){var t=function(e){var t;r.fillStyle="#000",r.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(r.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=r.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),t={r:e[0],g:e[1],b:e[2],a:1});return t}(e),e=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=s.max(t,a,l),n=s.min(t,a,l),o=r-n,i=r,c=0,n=0;o&&(r===t&&(c=(a-l)/o),r===a&&(c=2+(l-t)/o),r===l&&(c=4+(t-a)/o),r&&(n=o/r));return{h:(c=s.floor(60*c))<0?c+360:c,s:s.round(100*n),v:s.round(100*i),a:e.a}}(t);R(e.s,e.v),q(t,e),g.value=e.h,f.style.color="hsl("+e.h+", 100%, 50%)",l.style.left=e.h/360*100+"%",c.style.left=b.width*e.s/100+"px",c.style.top=b.height-b.height*e.v/100+"px",m.value=100*e.a,w.style.left=100*e.a+"%"}function D(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function F(e){e=void 0!==e?e:y.value,k&&(k.value=e,k.dispatchEvent(new Event("input",{bubbles:!0}))),p.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e}}))}function W(e,t){e={h:+g.value,s:e/b.width*100,v:100-t/b.height*100,a:m.value/100},t=function(e){var t=e.s/100,a=e.v/100,l=t*a,r=e.h/60,n=l*(1-s.abs(r%2-1)),o=a-l;l+=o,n+=o;t=s.floor(r)%6,a=[l,n,o,o,n,l][t],r=[n,l,l,n,o,o][t],t=[o,o,n,l,l,n][t];return{r:s.round(255*a),g:s.round(255*r),b:s.round(255*t),a:e.a}}(e);R(e.s,e.v),q(t,e),F()}function R(e,t){var a=E.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),c.setAttribute("aria-label",a)}function Y(e){var t={pageX:((a=e).changedTouches?a.changedTouches[0]:a).pageX,pageY:(a.changedTouches?a.changedTouches[0]:a).pageY},a=t.pageX-b.x,t=t.pageY-b.y;d&&(t+=d.scrollTop),a=a<0?0:a>b.width?b.width:a,t=t<0?0:t>b.height?b.height:t,c.style.left=a+"px",c.style.top=t+"px",W(a,t),e.preventDefault(),e.stopPropagation()}function q(e,t){void 0===t&&(t={});var a,l,r=E.format;for(a in e=void 0===e?{}:e)L[a]=e[a];for(l in t)L[l]=t[l];var n,o=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);E.alpha&&(e.a<1||E.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(L),i=o.substring(0,7);switch(c.style.color=i,w.parentNode.style.color=i,w.style.color=o,v.style.color=o,h.style.display="none",h.offsetHeight,h.style.display="",w.nextElementSibling.style.display="none",w.nextElementSibling.offsetHeight,w.nextElementSibling.style.display="","mixed"===r?r=1===L.a?"hex":"rgb":"auto"===r&&(r=x),r){case"hex":y.value=o;break;case"rgb":y.value=(n=L,!E.alpha||1===n.a&&!E.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":y.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=s.round((a-l)/s.min(l,1-l)*100));return{h:e.h,s:t||0,l:s.round(100*l),a:e.a}}(L),!E.alpha||1===n.a&&!E.forceAlpha?"hsl("+n.h+", "+n.s+"%, "+n.l+"%)":"hsla("+n.h+", "+n.s+"%, "+n.l+"%, "+n.a+")")}p.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+g.value,t=+c.style.left.replace("px",""),a=+c.style.top.replace("px","");f.style.color="hsl("+e+", 100%, 50%)",l.style.left=e/360*100+"%",W(t,a)}function P(){var e=m.value/100;w.style.left=100*e+"%",q({a:e}),F()}function X(e){return p.getElementById(e)}function U(e,t,a,l){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof a?e.addEventListener(t,function(e){r.call(e.target,a)&&l.call(e.target,e)}):(l=a,e.addEventListener(t,l))}function G(e,t){t=void 0!==t?t:[],"loading"!==p.readyState?e.apply(void 0,t):p.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),u.Coloris=function(){var r={set:T,wrap:N,close:I,setInstance:C,removeInstance:M,updatePosition:O};function e(e){G(function(){e&&("string"==typeof e?H:T)(e)})}for(var t in r)!function(l){e[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];G(r[l],t)}}(t);return e}(),G(function(){d=null,(f=p.createElement("div")).setAttribute("id","clr-picker"),f.className="clr-picker",f.innerHTML='<input id="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="'+E.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+E.a11y.instruction+'"><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="'+E.a11y.hueSlider+'"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="'+E.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+E.a11y.format+'</legend><input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div><button type="button" id="clr-clear" class="clr-clear">'+E.clearLabel+'</button><button type="button" id="clr-color-preview" class="clr-preview" aria-label="'+E.a11y.close+'"></button><span id="clr-open-label" hidden>'+E.a11y.open+'</span><span id="clr-swatch-label" hidden>'+E.a11y.swatch+"</span>",p.body.appendChild(f),h=X("clr-color-area"),c=X("clr-color-marker"),i=X("clr-clear"),v=X("clr-color-preview"),y=X("clr-color-value"),g=X("clr-hue-slider"),l=X("clr-hue-marker"),m=X("clr-alpha-slider"),w=X("clr-alpha-marker"),H(E.el),N(E.el),U(f,"mousedown",function(e){f.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),U(h,"mousedown",function(e){U(p,"mousemove",Y)}),U(h,"touchstart",function(e){p.addEventListener("touchmove",Y,{passive:!1})}),U(c,"mousedown",function(e){U(p,"mousemove",Y)}),U(c,"touchstart",function(e){p.addEventListener("touchmove",Y,{passive:!1})}),U(y,"change",function(e){(k||E.inline)&&(j(y.value),F())}),U(i,"click",function(e){F(""),I()}),U(v,"click",function(e){F(),I()}),U(p,"click",".clr-format input",function(e){x=e.target.value,q(),F()}),U(f,"click",".clr-swatches button",function(e){j(e.target.textContent),F(),E.swatchesOnly&&I()}),U(p,"mouseup",function(e){p.removeEventListener("mousemove",Y)}),U(p,"touchend",function(e){p.removeEventListener("touchmove",Y)}),U(p,"mousedown",function(e){f.classList.remove("clr-keyboard-nav"),I()}),U(p,"keydown",function(e){"Escape"===e.key?I(!0):"Tab"===e.key&&f.classList.add("clr-keyboard-nav")}),U(p,"click",".clr-field button",function(e){A&&B(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),U(c,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};-1!==Object.keys(t).indexOf(e.key)&&(!function(e,t){e=+c.style.left.replace("px","")+e,t=+c.style.top.replace("px","")+t,c.style.left=e+"px",c.style.top=t+"px",W(e,t)}.apply(void 0,t[e.key]),e.preventDefault())}),U(h,"click",Y),U(g,"input",e),U(m,"input",P)})}(window,document,Math);
\ No newline at end of file
diff --git a/src/vendor/jscolor.min.js b/src/vendor/jscolor.min.js
deleted file mode 100644
index 7169dd8..0000000
--- a/src/vendor/jscolor.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e):function(e){if(e.document)return t(e);throw new Error("jscolor needs a window with document")}:t(e)}("undefined"!=typeof window?window:this,function(c){"use strict";(b={initialized:!1,instances:[],readyQueue:[],register:function(){void 0!==c&&c.document&&c.document.addEventListener("DOMContentLoaded",b.pub.init,!1)},installBySelector:function(e,t){if(!(t=t?b.node(t):c.document))throw new Error("Missing root node");for(var r,n=t.querySelectorAll(e),o=new RegExp("(^|\\s)("+b.pub.lookupClass+")(\\s*(\\{[^}]*\\})|\\s|$)","i"),i=0;i<n.length;i+=1)if(!(n[i].jscolor&&n[i].jscolor instanceof b.pub)&&(void 0===n[i].type||"color"!=n[i].type.toLowerCase()||!b.isColorAttrSupported)&&(null!==(l=b.getDataAttr(n[i],"jscolor"))||n[i].className&&(r=n[i].className.match(o)))){var a=n[i],s="",l=(null!==l?s=l:r&&(console.warn('Installation using class name is DEPRECATED. Use data-jscolor="" attribute instead.'+b.docsRef),r[4]&&(s=r[4])),null);if(s.trim())try{l=b.parseOptionsStr(s)}catch(e){console.warn(e+"\n"+s)}try{new b.pub(a,l)}catch(e){console.warn(e)}}},parseOptionsStr:function(t){var r=null;try{r=JSON.parse(t)}catch(e){if(!b.pub.looseJSON)throw new Error("Could not parse jscolor options as JSON: "+e);try{r=new Function("var opts = ("+t+'); return typeof opts === "object" ? opts : {};')()}catch(e){throw new Error("Could not evaluate jscolor options: "+e)}}return r},getInstances:function(){for(var e=[],t=0;t<b.instances.length;t+=1)b.instances[t]&&b.instances[t].targetElement&&e.push(b.instances[t]);return e},createEl:function(e){e=c.document.createElement(e);return b.setData(e,"gui",!0),e},node:function(e){if(!e)return null;if("string"!=typeof e)return b.isNode(e)?e:(console.warn("Invalid node of type %s: %s",typeof e,e),null);var t=null;try{t=c.document.querySelector(e)}catch(e){return console.warn(e),null}return t||console.warn("No element matches the selector: %s",e),t},isNode:function(e){return"object"==typeof Node?e instanceof Node:e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName},nodeName:function(e){return!(!e||!e.nodeName)&&e.nodeName.toLowerCase()},removeChildren:function(e){for(;e.firstChild;)e.removeChild(e.firstChild)},isTextInput:function(e){return e&&"input"===b.nodeName(e)&&"text"===e.type.toLowerCase()},isButton:function(e){if(!e)return!1;var t=b.nodeName(e);return"button"===t||"input"===t&&-1<["button","submit","reset"].indexOf(e.type.toLowerCase())},isButtonEmpty:function(e){switch(b.nodeName(e)){case"input":return!e.value||""===e.value.trim();case"button":return""===e.textContent.trim()}return null},isPassiveEventSupported:function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});c.addEventListener("testPassive",null,t),c.removeEventListener("testPassive",null,t)}catch(e){}return e}(),isColorAttrSupported:!(!(t=c.document.createElement("input")).setAttribute||(t.setAttribute("type","color"),"color"!=t.type.toLowerCase())),dataProp:"_data_jscolor",setData:function(){var e=arguments[0];if(3===arguments.length)return(r=e.hasOwnProperty(b.dataProp)?e[b.dataProp]:e[b.dataProp]={})[t=arguments[1]]=arguments[2],!0;if(2!==arguments.length||"object"!=typeof arguments[1])throw new Error("Invalid arguments");var t,r=e.hasOwnProperty(b.dataProp)?e[b.dataProp]:e[b.dataProp]={},n=arguments[1];for(t in n)n.hasOwnProperty(t)&&(r[t]=n[t]);return!0},removeData:function(){var e=arguments[0];if(!e.hasOwnProperty(b.dataProp))return!0;for(var t=1;t<arguments.length;t+=1)delete e[b.dataProp][arguments[t]];return!0},getData:function(e,t,r){if(!e.hasOwnProperty(b.dataProp)){if(void 0===r)return;e[b.dataProp]={}}e=e[b.dataProp];return e.hasOwnProperty(t)||void 0===r||(e[t]=r),e[t]},getDataAttr:function(e,t){return e.getAttribute("data-"+t)},setDataAttr:function(e,t,r){e.setAttribute("data-"+t,r)},_attachedGroupEvents:{},attachGroupEvent:function(e,t,r,n){b._attachedGroupEvents.hasOwnProperty(e)||(b._attachedGroupEvents[e]=[]),b._attachedGroupEvents[e].push([t,r,n]),t.addEventListener(r,n,!1)},detachGroupEvents:function(e){if(b._attachedGroupEvents.hasOwnProperty(e)){for(var t=0;t<b._attachedGroupEvents[e].length;t+=1){var r=b._attachedGroupEvents[e][t];r[0].removeEventListener(r[1],r[2],!1)}delete b._attachedGroupEvents[e]}},preventDefault:function(e){e.preventDefault&&e.preventDefault(),e.returnValue=!1},triggerEvent:function(e,t,r,n){var o;if(e)return o=null,"function"==typeof Event?o=new Event(t,{bubbles:r,cancelable:n}):(o=c.document.createEvent("Event")).initEvent(t,r,n),!!o&&(b.setData(o,"internal",!0),e.dispatchEvent(o),!0)},triggerInputEvent:function(e,t,r,n){e&&b.isTextInput(e)&&b.triggerEvent(e,t,r,n)},eventKey:function(e){var t={9:"Tab",13:"Enter",27:"Escape"};return"string"==typeof e.code?e.code:void 0!==e.keyCode&&t.hasOwnProperty(e.keyCode)?t[e.keyCode]:null},strList:function(e){return e?e.replace(/^\s+|\s+$/g,"").split(/\s+/):[]},hasClass:function(e,t){return!!t&&(void 0!==e.classList?e.classList.contains(t):-1!=(" "+e.className.replace(/\s+/g," ")+" ").indexOf(" "+t+" "))},addClass:function(e,t){var r=b.strList(t);if(void 0!==e.classList)for(var n=0;n<r.length;n+=1)e.classList.add(r[n]);else for(n=0;n<r.length;n+=1)b.hasClass(e,r[n])||(e.className+=(e.className?" ":"")+r[n])},removeClass:function(e,t){var r=b.strList(t);if(void 0!==e.classList)for(var n=0;n<r.length;n+=1)e.classList.remove(r[n]);else for(n=0;n<r.length;n+=1){var o=new RegExp("^\\s*"+r[n]+"\\s*|\\s*"+r[n]+"\\s*$|\\s+"+r[n]+"(\\s+)","g");e.className=e.className.replace(o,"$1")}},getCompStyle:function(e){e=c.getComputedStyle?c.getComputedStyle(e):e.currentStyle;return e||{}},setStyle:function(e,t,r,n){var o,i,a=r?"important":"",s=null;for(o in t)t.hasOwnProperty(o)&&((i=null)===t[o]?(s=s||b.getData(e,"origStyle"))&&s.hasOwnProperty(o)&&(i=s[o]):(n&&!(s=s||b.getData(e,"origStyle",{})).hasOwnProperty(o)&&(s[o]=e.style[o]),i=t[o]),null!==i&&e.style.setProperty(o,i,a))},appendCss:function(e){var t=document.querySelector("head"),r=document.createElement("style");r.innerText=e,t.appendChild(r)},appendDefaultCss:function(e){b.appendCss([".jscolor-wrap, .jscolor-wrap div, .jscolor-wrap canvas { position:static; display:block; visibility:visible; overflow:visible; margin:0; padding:0; border:none; border-radius:0; outline:none; z-index:auto; float:none; width:auto; height:auto; left:auto; right:auto; top:auto; bottom:auto; min-width:0; min-height:0; max-width:none; max-height:none; background:none; clip:auto; opacity:1; transform:none; box-shadow:none; box-sizing:content-box; }",".jscolor-wrap { clear:both; }",".jscolor-wrap .jscolor-picker { position:relative; }",".jscolor-wrap .jscolor-shadow { position:absolute; left:0; top:0; width:100%; height:100%; }",".jscolor-wrap .jscolor-border { position:relative; }",".jscolor-wrap .jscolor-palette { position:absolute; }",".jscolor-wrap .jscolor-palette-sw { position:absolute; display:block; cursor:pointer; }",".jscolor-wrap .jscolor-btn { position:absolute; overflow:hidden; white-space:nowrap; font:13px sans-serif; text-align:center; cursor:pointer; }"].join("\n"))},hexColor:function(e,t,r){return"#"+(("0"+Math.round(e).toString(16)).slice(-2)+("0"+Math.round(t).toString(16)).slice(-2)+("0"+Math.round(r).toString(16)).slice(-2)).toUpperCase()},hexaColor:function(e,t,r,n){return"#"+(("0"+Math.round(e).toString(16)).slice(-2)+("0"+Math.round(t).toString(16)).slice(-2)+("0"+Math.round(r).toString(16)).slice(-2)+("0"+Math.round(255*n).toString(16)).slice(-2)).toUpperCase()},rgbColor:function(e,t,r){return"rgb("+Math.round(e)+","+Math.round(t)+","+Math.round(r)+")"},rgbaColor:function(e,t,r,n){return"rgba("+Math.round(e)+","+Math.round(t)+","+Math.round(r)+","+Math.round(100*(null==n?1:n))/100+")"},linearGradient:(e=function(){for(var e="linear-gradient",t=["","-webkit-","-moz-","-o-","-ms-"],r=c.document.createElement("div"),n=0;n<t.length;n+=1){var o=t[n]+e;if(r.style.background=o+"(to right, rgba(0,0,0,0), rgba(0,0,0,0))",r.style.background)return o}return e}(),function(){return e+"("+Array.prototype.join.call(arguments,", ")+")"}),setBorderRadius:function(e,t){b.setStyle(e,{"border-radius":t||"0"})},setBoxShadow:function(e,t){b.setStyle(e,{"box-shadow":t||"none"})},getElementPos:function(e,t){var r=0,n=0,e=e.getBoundingClientRect(),r=e.left,n=e.top;return t||(r+=(e=b.getViewPos())[0],n+=e[1]),[r,n]},getElementSize:function(e){return[e.offsetWidth,e.offsetHeight]},getAbsPointerPos:function(e){var t=0,r=0;return void 0!==e.changedTouches&&e.changedTouches.length?(t=e.changedTouches[0].clientX,r=e.changedTouches[0].clientY):"number"==typeof e.clientX&&(t=e.clientX,r=e.clientY),{x:t,y:r}},getRelPointerPos:function(e){var t=(e.target||e.srcElement).getBoundingClientRect(),r=0,n=0;return void 0!==e.changedTouches&&e.changedTouches.length?(r=e.changedTouches[0].clientX,n=e.changedTouches[0].clientY):"number"==typeof e.clientX&&(r=e.clientX,n=e.clientY),{x:r-t.left,y:n-t.top}},getViewPos:function(){var e=c.document.documentElement;return[(c.pageXOffset||e.scrollLeft)-(e.clientLeft||0),(c.pageYOffset||e.scrollTop)-(e.clientTop||0)]},getViewSize:function(){var e=c.document.documentElement;return[c.innerWidth||e.clientWidth,c.innerHeight||e.clientHeight]},RGB_HSV:function(e,t,r){e/=255,t/=255,r/=255;var n=Math.min(Math.min(e,t),r),o=Math.max(Math.max(e,t),r),i=o-n;if(0==i)return[null,0,100*o];n=e===n?3+(r-t)/i:t===n?5+(e-r)/i:1+(t-e)/i;return[60*(6==n?0:n),i/o*100,100*o]},HSV_RGB:function(e,t,r){var n=r/100*255;if(null===e)return[n,n,n];e/=60,t/=100;var r=Math.floor(e),o=n*(1-t),i=n*(1-t*(r%2?e-r:1-(e-r)));switch(r){case 6:case 0:return[n,i,o];case 1:return[i,n,o];case 2:return[o,n,i];case 3:return[o,i,n];case 4:return[i,o,n];case 5:return[n,o,i]}},parseColorString:function(e){var t={rgba:null,format:null};if(i=e.match(/^\W*([0-9A-F]{3,8})\W*$/i)){if(8===i[1].length)t.format="hexa",t.rgba=[parseInt(i[1].slice(0,2),16),parseInt(i[1].slice(2,4),16),parseInt(i[1].slice(4,6),16),parseInt(i[1].slice(6,8),16)/255];else if(6===i[1].length)t.format="hex",t.rgba=[parseInt(i[1].slice(0,2),16),parseInt(i[1].slice(2,4),16),parseInt(i[1].slice(4,6),16),null];else{if(3!==i[1].length)return!1;t.format="hex",t.rgba=[parseInt(i[1].charAt(0)+i[1].charAt(0),16),parseInt(i[1].charAt(1)+i[1].charAt(1),16),parseInt(i[1].charAt(2)+i[1].charAt(2),16),null]}return t}if(i=e.match(/^\W*rgba?\(([^)]*)\)\W*$/i)){var r,n,o,e=i[1].split(","),i=/^\s*(\d+|\d*\.\d+|\d+\.\d*)\s*$/;if(3<=e.length&&(o=e[0].match(i))&&(r=e[1].match(i))&&(n=e[2].match(i)))return t.format="rgb",t.rgba=[parseFloat(o[1])||0,parseFloat(r[1])||0,parseFloat(n[1])||0,null],4<=e.length&&(o=e[3].match(i))&&(t.format="rgba",t.rgba[3]=parseFloat(o[1])||0),t}return!1},parsePaletteValue:function(e){for(var t=[],r=("string"==typeof e?e.replace(/#[0-9A-F]{3}\b|#[0-9A-F]{6}([0-9A-F]{2})?\b|rgba?\(([^)]*)\)/gi,function(e){t.push(e)}):Array.isArray(e)&&(t=e),[]),n=0;n<t.length;n++){var o=b.parseColorString(t[n]);o&&r.push(o)}return r},containsTranparentColor:function(e){for(var t=0;t<e.length;t++){var r=e[t].rgba[3];if(null!==r&&r<1)return!0}return!1},isAlphaFormat:function(e){switch(e.toLowerCase()){case"hexa":case"rgba":return!0}return!1},scaleCanvasForHighDPR:function(e){var t=c.devicePixelRatio||1;e.width*=t,e.height*=t,e.getContext("2d").scale(t,t)},genColorPreviewCanvas:function(e,t,r,n){var o=Math.round(b.pub.previewSeparator.length),i=b.pub.chessboardSize,a=b.pub.chessboardColor1,s=b.pub.chessboardColor2,l=r||2*i,h=2*i,r=b.createEl("canvas"),d=r.getContext("2d");r.width=l,r.height=h,n&&b.scaleCanvasForHighDPR(r),d.fillStyle=a,d.fillRect(0,0,l,h),d.fillStyle=s;for(var p=0;p<l;p+=2*i)d.fillRect(p,0,i,i),d.fillRect(p+i,i,i,i);e&&(d.fillStyle=e,d.fillRect(0,0,l,h));var c=null;switch(t){case"left":d.clearRect(c=0,0,o/2,h);break;case"right":c=l-o,d.clearRect(l-o/2,0,o/2,h)}if(null!==c){d.lineWidth=1;for(var u=0;u<b.pub.previewSeparator.length;u+=1)d.beginPath(),d.strokeStyle=b.pub.previewSeparator[u],d.moveTo(.5+c+u,0),d.lineTo(.5+c+u,h),d.stroke()}return{canvas:r,width:l,height:h}},genColorPreviewGradient:function(e,t,r){var n=[],n=t&&r?["to "+{left:"right",right:"left"}[t],e+" 0%",e+" "+r+"px","rgba(0,0,0,0) "+(r+1)+"px","rgba(0,0,0,0) 100%"]:["to right",e+" 0%",e+" 100%"];return b.linearGradient.apply(this,n)},redrawPosition:function(){if(b.picker&&b.picker.owner){var e=b.picker.owner;if(e.container!==c.document.body)b._drawPosition(e,0,0,"relative",!1);else{var t,r,n,o,i=e.fixed?(t=b.getElementPos(e.targetElement,!0),[0,0]):(t=b.getElementPos(e.targetElement),b.getViewPos()),a=b.getElementSize(e.targetElement),s=b.getViewSize(),l=b.getPickerDims(e),l=[l.borderW,l.borderH];switch(e.position.toLowerCase()){case"left":n=0,o=-(r=1);break;case"right":n=0,o=r=1;break;case"top":r=0,o=-(n=1);break;default:r=0,o=n=1}var h=(a[n]+l[n])/2,s=(i=e.smartPosition?[-i[r]+t[r]+l[r]>s[r]&&-i[r]+t[r]+a[r]/2>s[r]/2&&0<=t[r]+a[r]-l[r]?t[r]+a[r]-l[r]:t[r],-i[n]+t[n]+a[n]+l[n]-h+h*o>s[n]?-i[n]+t[n]+a[n]/2>s[n]/2&&0<=t[n]+a[n]-h-h*o?t[n]+a[n]-h-h*o:t[n]+a[n]-h+h*o:0<=t[n]+a[n]-h+h*o?t[n]+a[n]-h+h*o:t[n]+a[n]-h-h*o]:[t[r],t[n]+a[n]-h+h*o])[r],h=i[n],d=e.fixed?"fixed":"absolute",i=(i[0]+l[0]>t[0]||i[0]<t[0]+a[0])&&i[1]+l[1]<t[1]+a[1];b._drawPosition(e,s,h,d,i)}}},_drawPosition:function(e,t,r,n,o){o=o?0:e.shadowBlur;b.picker.wrap.style.position=n,Math.round(parseFloat(b.picker.wrap.style.left))===Math.round(t)&&Math.round(parseFloat(b.picker.wrap.style.top))===Math.round(r)||(b.picker.wrap.style.left=t+"px",b.picker.wrap.style.top=r+"px"),b.setBoxShadow(b.picker.boxS,e.shadow?new b.BoxShadow(0,o,e.shadowBlur,0,e.shadowColor):null)},getPickerDims:function(e){var t=2*e.controlBorderWidth+e.width,r=2*e.controlBorderWidth+e.height,n=2*e.controlBorderWidth+2*b.getControlPadding(e)+e.sliderSize,n=(b.getSliderChannel(e)&&(t+=n),e.hasAlphaChannel()&&(t+=n),b.getPaletteDims(e,t)),o=(n.height&&(r+=n.height+e.padding),e.closeButton&&(r+=2*e.controlBorderWidth+e.padding+e.buttonHeight),t+2*e.padding),i=r+2*e.padding;return{contentW:t,contentH:r,paddedW:o,paddedH:i,borderW:o+2*e.borderWidth,borderH:i+2*e.borderWidth,palette:n}},getPaletteDims:function(e,t){var r=0,n=0,o=0,i=0,a=0,s=e._palette?e._palette.length:0;return s&&(n=0<(r=e.paletteCols)?Math.ceil(s/r):0,o=Math.max(1,Math.floor((t-(r-1)*e.paletteSpacing)/r)),i=e.paletteHeight?Math.min(e.paletteHeight,o):o),{cols:r,rows:n,cellW:o,cellH:i,width:t,height:a=n?n*i+(n-1)*e.paletteSpacing:a}},getControlPadding:function(e){return Math.max(e.padding/2,2*e.pointerBorderWidth+e.pointerThickness-e.controlBorderWidth)},getPadYChannel:function(e){return"v"===e.mode.charAt(1).toLowerCase()?"v":"s"},getSliderChannel:function(e){if(2<e.mode.length)switch(e.mode.charAt(2).toLowerCase()){case"s":return"s";case"v":return"v"}return null},triggerCallback:function(e,t){if(e[t]){var r=null;if("string"==typeof e[t])try{r=new Function(e[t])}catch(e){console.error(e)}else r=e[t];r&&r.call(e)}},triggerGlobal:function(e){for(var t=b.getInstances(),r=0;r<t.length;r+=1)t[r].trigger(e)},_pointerMoveEvent:{mouse:"mousemove",touch:"touchmove"},_pointerEndEvent:{mouse:"mouseup",touch:"touchend"},_pointerOrigin:null,onDocumentKeyUp:function(e){-1!==["Tab","Escape"].indexOf(b.eventKey(e))&&b.picker&&b.picker.owner&&b.picker.owner.tryHide()},onWindowResize:function(e){b.redrawPosition()},onWindowScroll:function(e){b.redrawPosition()},onParentScroll:function(e){b.picker&&b.picker.owner&&b.picker.owner.tryHide()},onDocumentMouseDown:function(e){var t=e.target||e.srcElement;t.jscolor&&t.jscolor instanceof b.pub?t.jscolor.showOnClick&&!t.disabled&&t.jscolor.show():b.getData(t,"gui")?b.getData(t,"control")&&b.onControlPointerStart(e,t,b.getData(t,"control"),"mouse"):b.picker&&b.picker.owner&&b.picker.owner.tryHide()},onPickerTouchStart:function(e){var t=e.target||e.srcElement;b.getData(t,"control")&&b.onControlPointerStart(e,t,b.getData(t,"control"),"touch")},onControlPointerStart:function(r,n,o,i){function e(e,t){b.attachGroupEvent("drag",e,b._pointerMoveEvent[i],b.onDocumentPointerMove(r,n,o,i,t)),b.attachGroupEvent("drag",e,b._pointerEndEvent[i],b.onDocumentPointerEnd(r,n,o,i))}var t=b.getData(n,"instance"),a=(b.preventDefault(r),e(c.document,[0,0]),c.parent&&c.frameElement&&(a=[-(a=c.frameElement.getBoundingClientRect()).left,-a.top],e(c.parent.window.document,a)),b.getAbsPointerPos(r)),s=b.getRelPointerPos(r);switch(b._pointerOrigin={x:a.x-s.x,y:a.y-s.y},o){case"pad":"v"===b.getSliderChannel(t)&&0===t.channels.v&&t.fromHSVA(null,null,100,null),b.setPad(t,r,0,0);break;case"sld":b.setSld(t,r,0);break;case"asld":b.setASld(t,r,0)}t.trigger("input")},onDocumentPointerMove:function(e,r,n,t,o){return function(e){var t=b.getData(r,"instance");switch(n){case"pad":b.setPad(t,e,o[0],o[1]);break;case"sld":b.setSld(t,e,o[1]);break;case"asld":b.setASld(t,e,o[1])}t.trigger("input")}},onDocumentPointerEnd:function(e,r,t,n){return function(e){var t=b.getData(r,"instance");b.detachGroupEvents("drag"),t.trigger("input"),t.trigger("change")}},onPaletteSampleClick:function(e){var e=e.currentTarget,t=b.getData(e,"instance"),e=b.getData(e,"color");"any"===t.format.toLowerCase()&&(t._setFormat(e.format),b.isAlphaFormat(t.getFormat())||(e.rgba[3]=1)),null===e.rgba[3]&&(!0===t.paletteSetsAlpha||"auto"===t.paletteSetsAlpha&&t._paletteHasTransparency)&&(e.rgba[3]=1),t.fromRGBA.apply(t,e.rgba),t.trigger("input"),t.trigger("change"),t.hideOnPaletteClick&&t.hide()},setPad:function(e,t,r,n){var t=b.getAbsPointerPos(t),r=r+t.x-b._pointerOrigin.x-e.padding-e.controlBorderWidth,n=n+t.y-b._pointerOrigin.y-e.padding-e.controlBorderWidth,o=r*(360/(e.width-1)),i=100-n*(100/(e.height-1));switch(b.getPadYChannel(e)){case"s":e.fromHSVA(o,i,null,null);break;case"v":e.fromHSVA(o,null,i,null)}},setSld:function(e,t,r){var n=100-(r+b.getAbsPointerPos(t).y-b._pointerOrigin.y-e.padding-e.controlBorderWidth)*(100/(e.height-1));switch(b.getSliderChannel(e)){case"s":e.fromHSVA(null,n,null,null);break;case"v":e.fromHSVA(null,null,n,null)}},setASld:function(e,t,r){r=1-(r+b.getAbsPointerPos(t).y-b._pointerOrigin.y-e.padding-e.controlBorderWidth)*(1/(e.height-1));r<1&&(t=e.getFormat(),"any"!==e.format.toLowerCase()||b.isAlphaFormat(t)||e._setFormat("hex"===t?"hexa":"rgba")),e.fromHSVA(null,null,null,r)},createPadCanvas:function(){var e={elm:null,draw:null},o=b.createEl("canvas"),i=o.getContext("2d");return e.elm=o,e.draw=function(e,t,r){o.width=e,o.height=t,i.clearRect(0,0,o.width,o.height);var e=i.createLinearGradient(0,0,o.width,0),n=(e.addColorStop(0,"#F00"),e.addColorStop(1/6,"#FF0"),e.addColorStop(2/6,"#0F0"),e.addColorStop(.5,"#0FF"),e.addColorStop(4/6,"#00F"),e.addColorStop(5/6,"#F0F"),e.addColorStop(1,"#F00"),i.fillStyle=e,i.fillRect(0,0,o.width,o.height),i.createLinearGradient(0,0,0,o.height));switch(r.toLowerCase()){case"s":n.addColorStop(0,"rgba(255,255,255,0)"),n.addColorStop(1,"rgba(255,255,255,1)");break;case"v":n.addColorStop(0,"rgba(0,0,0,0)"),n.addColorStop(1,"rgba(0,0,0,1)")}i.fillStyle=n,i.fillRect(0,0,o.width,o.height)},e},createSliderGradient:function(){var e={elm:null,draw:null},o=b.createEl("canvas"),i=o.getContext("2d");return e.elm=o,e.draw=function(e,t,r,n){o.width=e,o.height=t,i.clearRect(0,0,o.width,o.height);e=i.createLinearGradient(0,0,0,o.height);e.addColorStop(0,r),e.addColorStop(1,n),i.fillStyle=e,i.fillRect(0,0,o.width,o.height)},e},createASliderGradient:function(){var e={elm:null,draw:null},a=b.createEl("canvas"),s=a.getContext("2d");return e.elm=a,e.draw=function(e,t,r){a.width=e,a.height=t,s.clearRect(0,0,a.width,a.height);var n=a.width/2,e=b.pub.chessboardColor1,o=b.pub.chessboardColor2;if(s.fillStyle=e,s.fillRect(0,0,a.width,a.height),0<n)for(var i=0;i<a.height;i+=2*n)s.fillStyle=o,s.fillRect(0,i,n,n),s.fillRect(n,i+n,n,n);t=s.createLinearGradient(0,0,0,a.height);t.addColorStop(0,r),t.addColorStop(1,"rgba(0,0,0,0)"),s.fillStyle=t,s.fillRect(0,0,a.width,a.height)},e},BoxShadow:(r.prototype.toString=function(){var e=[Math.round(this.hShadow)+"px",Math.round(this.vShadow)+"px",Math.round(this.blur)+"px",Math.round(this.spread)+"px",this.color];return this.inset&&e.push("inset"),e.join(" ")},r),flags:{leaveValue:1,leaveAlpha:2,leavePreview:4},enumOpts:{format:["auto","any","hex","hexa","rgb","rgba"],previewPosition:["left","right"],mode:["hsv","hvs","hs","hv"],position:["left","right","top","bottom"],alphaChannel:["auto",!0,!1],paletteSetsAlpha:["auto",!0,!1]},deprecatedOpts:{styleElement:"previewElement",onFineChange:"onInput",overwriteImportant:"forceStyle",closable:"closeButton",insetWidth:"controlBorderWidth",insetColor:"controlBorderColor",refine:null},docsRef:" See https://jscolor.com/docs/",pub:function(e,t){var g=this;function a(e,t){if("string"!=typeof e)throw new Error("Invalid value for option name: "+e);if(b.enumOpts.hasOwnProperty(e)&&("string"==typeof t&&(t=t.toLowerCase()),-1===b.enumOpts[e].indexOf(t)))throw new Error("Option '"+e+"' has invalid value: "+t);if(b.deprecatedOpts.hasOwnProperty(e)){var r=e,n=b.deprecatedOpts[e];if(!n)throw new Error("Option '"+e+"' is DEPRECATED");console.warn("Option '%s' is DEPRECATED, using '%s' instead."+b.docsRef,r,n),e=n}r="set__"+e;if("function"==typeof g[r])return g[r](t),1;if(e in g)return g[e]=t,1;throw new Error("Unrecognized configuration option: "+e)}function r(){g._processParentElementsInDOM(),b.picker||(b.picker={owner:null,wrap:b.createEl("div"),box:b.createEl("div"),boxS:b.createEl("div"),boxB:b.createEl("div"),pad:b.createEl("div"),padB:b.createEl("div"),padM:b.createEl("div"),padCanvas:b.createPadCanvas(),cross:b.createEl("div"),crossBY:b.createEl("div"),crossBX:b.createEl("div"),crossLY:b.createEl("div"),crossLX:b.createEl("div"),sld:b.createEl("div"),sldB:b.createEl("div"),sldM:b.createEl("div"),sldGrad:b.createSliderGradient(),sldPtrS:b.createEl("div"),sldPtrIB:b.createEl("div"),sldPtrMB:b.createEl("div"),sldPtrOB:b.createEl("div"),asld:b.createEl("div"),asldB:b.createEl("div"),asldM:b.createEl("div"),asldGrad:b.createASliderGradient(),asldPtrS:b.createEl("div"),asldPtrIB:b.createEl("div"),asldPtrMB:b.createEl("div"),asldPtrOB:b.createEl("div"),pal:b.createEl("div"),btn:b.createEl("div"),btnT:b.createEl("div")},b.picker.pad.appendChild(b.picker.padCanvas.elm),b.picker.padB.appendChild(b.picker.pad),b.picker.cross.appendChild(b.picker.crossBY),b.picker.cross.appendChild(b.picker.crossBX),b.picker.cross.appendChild(b.picker.crossLY),b.picker.cross.appendChild(b.picker.crossLX),b.picker.padB.appendChild(b.picker.cross),b.picker.box.appendChild(b.picker.padB),b.picker.box.appendChild(b.picker.padM),b.picker.sld.appendChild(b.picker.sldGrad.elm),b.picker.sldB.appendChild(b.picker.sld),b.picker.sldB.appendChild(b.picker.sldPtrOB),b.picker.sldPtrOB.appendChild(b.picker.sldPtrMB),b.picker.sldPtrMB.appendChild(b.picker.sldPtrIB),b.picker.sldPtrIB.appendChild(b.picker.sldPtrS),b.picker.box.appendChild(b.picker.sldB),b.picker.box.appendChild(b.picker.sldM),b.picker.asld.appendChild(b.picker.asldGrad.elm),b.picker.asldB.appendChild(b.picker.asld),b.picker.asldB.appendChild(b.picker.asldPtrOB),b.picker.asldPtrOB.appendChild(b.picker.asldPtrMB),b.picker.asldPtrMB.appendChild(b.picker.asldPtrIB),b.picker.asldPtrIB.appendChild(b.picker.asldPtrS),b.picker.box.appendChild(b.picker.asldB),b.picker.box.appendChild(b.picker.asldM),b.picker.box.appendChild(b.picker.pal),b.picker.btn.appendChild(b.picker.btnT),b.picker.box.appendChild(b.picker.btn),b.picker.boxB.appendChild(b.picker.box),b.picker.wrap.appendChild(b.picker.boxS),b.picker.wrap.appendChild(b.picker.boxB),b.picker.wrap.addEventListener("touchstart",b.onPickerTouchStart,!!b.isPassiveEventSupported&&{passive:!1}));for(var e=b.picker,t=!!b.getSliderChannel(g),r=g.hasAlphaChannel(),n=b.getPickerDims(g),o=2*g.pointerBorderWidth+g.pointerThickness+2*g.crossSize,i=b.getControlPadding(g),a=Math.min(g.borderRadius,Math.round(g.padding*Math.PI)),s=(e.wrap.className="jscolor-wrap",e.wrap.style.width=n.borderW+"px",e.wrap.style.height=n.borderH+"px",e.wrap.style.zIndex=g.zIndex,e.box.className="jscolor-picker",e.box.style.width=n.paddedW+"px",e.box.style.height=n.paddedH+"px",e.boxS.className="jscolor-shadow",b.setBorderRadius(e.boxS,a+"px"),e.boxB.className="jscolor-border",e.boxB.style.border=g.borderWidth+"px solid",e.boxB.style.borderColor=g.borderColor,e.boxB.style.background=g.backgroundColor,b.setBorderRadius(e.boxB,a+"px"),e.padM.style.background="rgba(255,0,0,.2)",e.sldM.style.background="rgba(0,255,0,.2)",e.asldM.style.background="rgba(0,0,255,.2)",e.padM.style.opacity=e.sldM.style.opacity=e.asldM.style.opacity="0",e.pad.style.position="relative",e.pad.style.width=g.width+"px",e.pad.style.height=g.height+"px",e.padCanvas.draw(g.width,g.height,b.getPadYChannel(g)),e.padB.style.position="absolute",e.padB.style.left=g.padding+"px",e.padB.style.top=g.padding+"px",e.padB.style.border=g.controlBorderWidth+"px solid",e.padB.style.borderColor=g.controlBorderColor,e.padM.style.position="absolute",e.padM.style.left="0px",e.padM.style.top="0px",e.padM.style.width=g.padding+2*g.controlBorderWidth+g.width+i+"px",e.padM.style.height=2*g.controlBorderWidth+2*g.padding+g.height+"px",e.padM.style.cursor="crosshair",b.setData(e.padM,{instance:g,control:"pad"}),e.cross.style.position="absolute",e.cross.style.left=e.cross.style.top="0",e.cross.style.width=e.cross.style.height=o+"px",e.crossBY.style.position=e.crossBX.style.position="absolute",e.crossBY.style.background=e.crossBX.style.background=g.pointerBorderColor,e.crossBY.style.width=e.crossBX.style.height=2*g.pointerBorderWidth+g.pointerThickness+"px",e.crossBY.style.height=e.crossBX.style.width=o+"px",e.crossBY.style.left=e.crossBX.style.top=Math.floor(o/2)-Math.floor(g.pointerThickness/2)-g.pointerBorderWidth+"px",e.crossBY.style.top=e.crossBX.style.left="0",e.crossLY.style.position=e.crossLX.style.position="absolute",e.crossLY.style.background=e.crossLX.style.background=g.pointerColor,e.crossLY.style.height=e.crossLX.style.width=o-2*g.pointerBorderWidth+"px",e.crossLY.style.width=e.crossLX.style.height=g.pointerThickness+"px",e.crossLY.style.left=e.crossLX.style.top=Math.floor(o/2)-Math.floor(g.pointerThickness/2)+"px",e.crossLY.style.top=e.crossLX.style.left=g.pointerBorderWidth+"px",e.sld.style.overflow="hidden",e.sld.style.width=g.sliderSize+"px",e.sld.style.height=g.height+"px",e.sldGrad.draw(g.sliderSize,g.height,"#000","#000"),e.sldB.style.display=t?"block":"none",e.sldB.style.position="absolute",e.sldB.style.left=g.padding+g.width+2*g.controlBorderWidth+2*i+"px",e.sldB.style.top=g.padding+"px",e.sldB.style.border=g.controlBorderWidth+"px solid",e.sldB.style.borderColor=g.controlBorderColor,e.sldM.style.display=t?"block":"none",e.sldM.style.position="absolute",e.sldM.style.left=g.padding+g.width+2*g.controlBorderWidth+i+"px",e.sldM.style.top="0px",e.sldM.style.width=g.sliderSize+2*i+2*g.controlBorderWidth+(r?0:Math.max(0,g.padding-i))+"px",e.sldM.style.height=2*g.controlBorderWidth+2*g.padding+g.height+"px",e.sldM.style.cursor="default",b.setData(e.sldM,{instance:g,control:"sld"}),e.sldPtrIB.style.border=e.sldPtrOB.style.border=g.pointerBorderWidth+"px solid "+g.pointerBorderColor,e.sldPtrOB.style.position="absolute",e.sldPtrOB.style.left=-(2*g.pointerBorderWidth+g.pointerThickness)+"px",e.sldPtrOB.style.top="0",e.sldPtrMB.style.border=g.pointerThickness+"px solid "+g.pointerColor,e.sldPtrS.style.width=g.sliderSize+"px",e.sldPtrS.style.height=b.pub.sliderInnerSpace+"px",e.asld.style.overflow="hidden",e.asld.style.width=g.sliderSize+"px",e.asld.style.height=g.height+"px",e.asldGrad.draw(g.sliderSize,g.height,"#000"),e.asldB.style.display=r?"block":"none",e.asldB.style.position="absolute",e.asldB.style.left=g.padding+g.width+2*g.controlBorderWidth+i+(t?g.sliderSize+3*i+2*g.controlBorderWidth:0)+"px",e.asldB.style.top=g.padding+"px",e.asldB.style.border=g.controlBorderWidth+"px solid",e.asldB.style.borderColor=g.controlBorderColor,e.asldM.style.display=r?"block":"none",e.asldM.style.position="absolute",e.asldM.style.left=g.padding+g.width+2*g.controlBorderWidth+i+(t?g.sliderSize+2*i+2*g.controlBorderWidth:0)+"px",e.asldM.style.top="0px",e.asldM.style.width=g.sliderSize+2*i+2*g.controlBorderWidth+Math.max(0,g.padding-i)+"px",e.asldM.style.height=2*g.controlBorderWidth+2*g.padding+g.height+"px",e.asldM.style.cursor="default",b.setData(e.asldM,{instance:g,control:"asld"}),e.asldPtrIB.style.border=e.asldPtrOB.style.border=g.pointerBorderWidth+"px solid "+g.pointerBorderColor,e.asldPtrOB.style.position="absolute",e.asldPtrOB.style.left=-(2*g.pointerBorderWidth+g.pointerThickness)+"px",e.asldPtrOB.style.top="0",e.asldPtrMB.style.border=g.pointerThickness+"px solid "+g.pointerColor,e.asldPtrS.style.width=g.sliderSize+"px",e.asldPtrS.style.height=b.pub.sliderInnerSpace+"px",e.pal.className="jscolor-palette",e.pal.style.display=n.palette.rows?"block":"none",e.pal.style.left=g.padding+"px",e.pal.style.top=2*g.controlBorderWidth+2*g.padding+g.height+"px",e.pal.innerHTML="",b.genColorPreviewCanvas("rgba(0,0,0,0)")),l=0,h=0;h<n.palette.rows;h++)for(var d=0;d<n.palette.cols&&l<g._palette.length;d++,l++){var p=g._palette[l],c=b.rgbaColor.apply(null,p.rgba),u=b.createEl("div"),c=(u.style.width=n.palette.cellW-2*g.controlBorderWidth+"px",u.style.height=n.palette.cellH-2*g.controlBorderWidth+"px",u.style.backgroundColor=c,b.createEl("div"));c.className="jscolor-palette-sw",c.style.left=(n.palette.cols<=1?0:Math.round(d*((n.contentW-n.palette.cellW)/(n.palette.cols-1))*10)/10)+"px",c.style.top=h*(n.palette.cellH+g.paletteSpacing)+"px",c.style.border=g.controlBorderWidth+"px solid",c.style.borderColor=g.controlBorderColor,null!==p.rgba[3]&&p.rgba[3]<1&&(c.style.backgroundImage="url('"+s.canvas.toDataURL()+"')",c.style.backgroundRepeat="repeat",c.style.backgroundPosition="center center"),b.setData(c,{instance:g,control:"palette-sw",color:p}),c.addEventListener("click",b.onPaletteSampleClick,!1),c.appendChild(u),e.pal.appendChild(c)}e.btn.className="jscolor-btn jscolor-btn-close",e.btn.style.display=g.closeButton?"block":"none",e.btn.style.left=g.padding+"px",e.btn.style.bottom=g.padding+"px",e.btn.style.padding="0 15px",e.btn.style.maxWidth=n.contentW-2*g.controlBorderWidth-30+"px",e.btn.style.height=g.buttonHeight+"px",e.btn.style.border=g.controlBorderWidth+"px solid",a=(a=g.controlBorderColor.split(/\s+/)).length<2?a[0]:a[1]+" "+a[0]+" "+a[0]+" "+a[1],e.btn.style.borderColor=a,e.btn.style.color=g.buttonColor,e.btn.onmousedown=function(){g.hide()},e.btnT.style.display="inline",e.btnT.style.lineHeight=g.buttonHeight+"px",e.btnT.innerText=g.closeText,f(),v(),m(),b.picker.owner&&b.picker.owner!==g&&b.removeClass(b.picker.owner.targetElement,b.pub.activeClassName),b.picker.owner=g,b.redrawPosition(),e.wrap.parentNode!==g.container&&g.container.appendChild(e.wrap),b.addClass(g.targetElement,b.pub.activeClassName)}function f(){var e=b.getPadYChannel(g),t=Math.round(g.channels.h/360*(g.width-1)),e=Math.round((1-g.channels[e]/100)*(g.height-1)),r=2*g.pointerBorderWidth+g.pointerThickness+2*g.crossSize,r=-Math.floor(r/2);switch(b.picker.cross.style.left=t+r+"px",b.picker.cross.style.top=e+r+"px",b.getSliderChannel(g)){case"s":var n=b.HSV_RGB(g.channels.h,100,g.channels.v),o=b.HSV_RGB(g.channels.h,0,g.channels.v),n="rgb("+Math.round(n[0])+","+Math.round(n[1])+","+Math.round(n[2])+")",o="rgb("+Math.round(o[0])+","+Math.round(o[1])+","+Math.round(o[2])+")";b.picker.sldGrad.draw(g.sliderSize,g.height,n,o);break;case"v":var i=b.HSV_RGB(g.channels.h,g.channels.s,100),n="rgb("+Math.round(i[0])+","+Math.round(i[1])+","+Math.round(i[2])+")",o="#000";b.picker.sldGrad.draw(g.sliderSize,g.height,n,o)}b.picker.asldGrad.draw(g.sliderSize,g.height,g.toHEXString())}function v(){var e=b.getSliderChannel(g);e&&(e=Math.round((1-g.channels[e]/100)*(g.height-1)),b.picker.sldPtrOB.style.top=e-(2*g.pointerBorderWidth+g.pointerThickness)-Math.floor(b.pub.sliderInnerSpace/2)+"px"),b.picker.asldGrad.draw(g.sliderSize,g.height,g.toHEXString())}function m(){var e=Math.round((1-g.channels.a)*(g.height-1));b.picker.asldPtrOB.style.top=e-(2*g.pointerBorderWidth+g.pointerThickness)-Math.floor(b.pub.sliderInnerSpace/2)+"px"}function n(){return b.picker&&b.picker.owner===g}if(t=t||{},this.channels={r:255,g:255,b:255,h:0,s:0,v:100,a:1},this.format="auto",this.value=void 0,this.alpha=void 0,this.random=!1,this.onChange=void 0,this.onInput=void 0,this.valueElement=void 0,this.alphaElement=void 0,this.previewElement=void 0,this.previewPosition="left",this.previewSize=32,this.previewPadding=8,this.required=!0,this.hash=!0,this.uppercase=!0,this.forceStyle=!0,this.width=181,this.height=101,this.mode="HSV",this.alphaChannel="auto",this.position="bottom",this.smartPosition=!0,this.showOnClick=!0,this.hideOnLeave=!0,this.palette=[],this.paletteCols=10,this.paletteSetsAlpha="auto",this.paletteHeight=16,this.paletteSpacing=4,this.hideOnPaletteClick=!1,this.sliderSize=16,this.crossSize=8,this.closeButton=!1,this.closeText="Close",this.buttonColor="rgba(0,0,0,1)",this.buttonHeight=18,this.padding=12,this.backgroundColor="rgba(255,255,255,1)",this.borderWidth=1,this.borderColor="rgba(187,187,187,1)",this.borderRadius=8,this.controlBorderWidth=1,this.controlBorderColor="rgba(187,187,187,1)",this.shadow=!0,this.shadowBlur=15,this.shadowColor="rgba(0,0,0,0.2)",this.pointerColor="rgba(76,76,76,1)",this.pointerBorderWidth=1,this.pointerBorderColor="rgba(255,255,255,1)",this.pointerThickness=2,this.zIndex=5e3,this.container=void 0,this.minS=0,this.maxS=100,this.minV=0,this.maxV=100,this.minA=0,this.maxA=1,this.option=function(){if(!arguments.length)throw new Error("No option specified");if(1===arguments.length&&"string"==typeof arguments[0]){try{var e=arguments[0];if("string"!=typeof e)throw new Error("Invalid value for option name: "+e);if(b.deprecatedOpts.hasOwnProperty(e)){var t=e,r=b.deprecatedOpts[e];if(!r)throw new Error("Option '"+e+"' is DEPRECATED");console.warn("Option '%s' is DEPRECATED, using '%s' instead."+b.docsRef,t,r),e=r}if("function"==typeof g[t="get__"+e])return g[t](value);if(e in g)return g[e];throw new Error("Unrecognized configuration option: "+e)}catch(e){console.warn(e)}return!1}if(2<=arguments.length&&"string"==typeof arguments[0]){try{if(!a(arguments[0],arguments[1]))return!1}catch(e){return console.warn(e),!1}return this.redraw(),this.exposeColor(),!0}if(1!==arguments.length||"object"!=typeof arguments[0])throw new Error("Invalid arguments");var n,o=arguments[0],i=!0;for(n in o)if(o.hasOwnProperty(n))try{a(n,o[n])||(i=!1)}catch(e){console.warn(e),i=!1}return this.redraw(),this.exposeColor(),i},this.channel=function(e,t){if("string"!=typeof e)throw new Error("Invalid value for channel name: "+e);if(void 0===t)return this.channels.hasOwnProperty(e.toLowerCase())?this.channels[e.toLowerCase()]:(console.warn("Getting unknown channel: "+e),!1);var r=!1;switch(e.toLowerCase()){case"r":r=this.fromRGBA(t,null,null,null);break;case"g":r=this.fromRGBA(null,t,null,null);break;case"b":r=this.fromRGBA(null,null,t,null);break;case"h":r=this.fromHSVA(t,null,null,null);break;case"s":r=this.fromHSVA(null,t,null,null);break;case"v":r=this.fromHSVA(null,null,t,null);break;case"a":r=this.fromHSVA(null,null,null,t);break;default:return console.warn("Setting unknown channel: "+e),!1}return!!r&&(this.redraw(),!0)},this.trigger=function(e){for(var t=b.strList(e),r=0;r<t.length;r+=1){var n=t[r].toLowerCase(),o=null;switch(n){case"input":o="onInput";break;case"change":o="onChange"}o&&b.triggerCallback(this,o),b.triggerInputEvent(this.valueElement,n,!0,!0)}},this.fromHSVA=function(e,t,r,n,o){if(void 0===t&&(t=null),void 0===r&&(r=null),void 0===n&&(n=null),null!==(e=void 0===e?null:e)){if(isNaN(e))return!1;this.channels.h=Math.max(0,Math.min(360,e))}if(null!==t){if(isNaN(t))return!1;this.channels.s=Math.max(0,Math.min(100,this.maxS,t),this.minS)}if(null!==r){if(isNaN(r))return!1;this.channels.v=Math.max(0,Math.min(100,this.maxV,r),this.minV)}if(null!==n){if(isNaN(n))return!1;this.channels.a=this.hasAlphaChannel()?Math.max(0,Math.min(1,this.maxA,n),this.minA):1}e=b.HSV_RGB(this.channels.h,this.channels.s,this.channels.v);return this.channels.r=e[0],this.channels.g=e[1],this.channels.b=e[2],this.exposeColor(o),!0},this.fromRGBA=function(e,t,r,n,o){if(void 0===t&&(t=null),void 0===r&&(r=null),void 0===n&&(n=null),null!==(e=void 0===e?null:e)){if(isNaN(e))return!1;e=Math.max(0,Math.min(255,e))}if(null!==t){if(isNaN(t))return!1;t=Math.max(0,Math.min(255,t))}if(null!==r){if(isNaN(r))return!1;r=Math.max(0,Math.min(255,r))}if(null!==n){if(isNaN(n))return!1;this.channels.a=this.hasAlphaChannel()?Math.max(0,Math.min(1,this.maxA,n),this.minA):1}n=b.RGB_HSV(null===e?this.channels.r:e,null===t?this.channels.g:t,null===r?this.channels.b:r),null!==n[0]&&(this.channels.h=Math.max(0,Math.min(360,n[0]))),0!==n[2]&&(this.channels.s=Math.max(0,this.minS,Math.min(100,this.maxS,n[1]))),this.channels.v=Math.max(0,this.minV,Math.min(100,this.maxV,n[2])),e=b.HSV_RGB(this.channels.h,this.channels.s,this.channels.v);return this.channels.r=e[0],this.channels.g=e[1],this.channels.b=e[2],this.exposeColor(o),!0},this.fromHSV=function(e,t,r,n){return console.warn("fromHSV() method is DEPRECATED. Using fromHSVA() instead."+b.docsRef),this.fromHSVA(e,t,r,null,n)},this.fromRGB=function(e,t,r,n){return console.warn("fromRGB() method is DEPRECATED. Using fromRGBA() instead."+b.docsRef),this.fromRGBA(e,t,r,null,n)},this.fromString=function(e,t){if(!this.required&&""===e.trim())return this.setPreviewElementBg(null),this.setValueElementValue(""),!0;e=b.parseColorString(e);return!!e&&("any"===this.format.toLowerCase()&&(this._setFormat(e.format),b.isAlphaFormat(this.getFormat())||(e.rgba[3]=1)),this.fromRGBA(e.rgba[0],e.rgba[1],e.rgba[2],e.rgba[3],t),!0)},this.randomize=function(e,t,r,n,o,i,a,s){void 0===e&&(e=0),void 0===t&&(t=100),void 0===r&&(r=0),void 0===n&&(n=100),void 0===i&&(i=359),void 0===a&&(a=1),void 0===s&&(s=1),this.fromHSVA((o=void 0===o?0:o)+Math.floor(Math.random()*(i-o+1)),r+Math.floor(Math.random()*(n-r+1)),e+Math.floor(Math.random()*(t-e+1)),(100*a+Math.floor(Math.random()*(100*(s-a)+1)))/100)},this.toString=function(e){switch((e=void 0===e?this.getFormat():e).toLowerCase()){case"hex":return this.toHEXString();case"hexa":return this.toHEXAString();case"rgb":return this.toRGBString();case"rgba":return this.toRGBAString()}return!1},this.toHEXString=function(){return b.hexColor(this.channels.r,this.channels.g,this.channels.b)},this.toHEXAString=function(){return b.hexaColor(this.channels.r,this.channels.g,this.channels.b,this.channels.a)},this.toRGBString=function(){return b.rgbColor(this.channels.r,this.channels.g,this.channels.b)},this.toRGBAString=function(){return b.rgbaColor(this.channels.r,this.channels.g,this.channels.b,this.channels.a)},this.toGrayscale=function(){return.213*this.channels.r+.715*this.channels.g+.072*this.channels.b},this.toCanvas=function(){return b.genColorPreviewCanvas(this.toRGBAString()).canvas},this.toDataURL=function(){return this.toCanvas().toDataURL()},this.toBackground=function(){return b.pub.background(this.toRGBAString())},this.isLight=function(){return 127.5<this.toGrayscale()},this.hide=function(){n()&&(b.removeClass(g.targetElement,b.pub.activeClassName),b.picker.wrap.parentNode.removeChild(b.picker.wrap),delete b.picker.owner)},this.show=function(){r()},this.redraw=function(){n()&&r()},this.getFormat=function(){return this._currentFormat},this._setFormat=function(e){this._currentFormat=e.toLowerCase()},this.hasAlphaChannel=function(){return"auto"===this.alphaChannel?"any"===this.format.toLowerCase()||b.isAlphaFormat(this.getFormat())||void 0!==this.alpha||void 0!==this.alphaElement:this.alphaChannel},this.processValueInput=function(e){this.fromString(e)||this.exposeColor()},this.processAlphaInput=function(e){this.fromHSVA(null,null,null,parseFloat(e))||this.exposeColor()},this.exposeColor=function(e){var t=this.toString(),r=this.getFormat();b.setDataAttr(this.targetElement,"current-color",t),e&b.flags.leaveValue||!this.valueElement||("hex"!==r&&"hexa"!==r||(this.uppercase||(t=t.toLowerCase()),this.hash||(t=t.replace(/^#/,""))),this.setValueElementValue(t)),e&b.flags.leaveAlpha||!this.alphaElement||(r=Math.round(100*this.channels.a)/100,this.setAlphaElementValue(r)),e&b.flags.leavePreview||!this.previewElement||((b.isTextInput(this.previewElement)||b.isButton(this.previewElement)&&!b.isButtonEmpty(this.previewElement))&&this.previewPosition,this.setPreviewElementBg(this.toRGBAString())),n()&&(f(),v(),m())},this.setPreviewElementBg=function(e){if(this.previewElement){for(var t=null,r=null,n=((b.isTextInput(this.previewElement)||b.isButton(this.previewElement)&&!b.isButtonEmpty(this.previewElement))&&(t=this.previewPosition,r=this.previewSize),[]),o=(e?(n.push({image:b.genColorPreviewGradient(e,t,r?r-b.pub.previewSeparator.length:null),position:"left top",size:"auto",repeat:t?"repeat-y":"repeat",origin:"padding-box"}),e=b.genColorPreviewCanvas("rgba(0,0,0,0)",t?{left:"right",right:"left"}[t]:null,r,!0),n.push({image:"url('"+e.canvas.toDataURL()+"')",position:(t||"left")+" top",size:e.width+"px "+e.height+"px",repeat:t?"repeat-y":"repeat",origin:"padding-box"})):n.push({image:"none",position:"left top",size:"auto",repeat:"no-repeat",origin:"padding-box"}),{image:[],position:[],size:[],repeat:[],origin:[]}),i=0;i<n.length;i+=1)o.image.push(n[i].image),o.position.push(n[i].position),o.size.push(n[i].size),o.repeat.push(n[i].repeat),o.origin.push(n[i].origin);r={"background-image":o.image.join(", "),"background-position":o.position.join(", "),"background-size":o.size.join(", "),"background-repeat":o.repeat.join(", "),"background-origin":o.origin.join(", ")},e=(b.setStyle(this.previewElement,r,this.forceStyle),{left:null,right:null}),r=(t&&(e[t]=this.previewSize+this.previewPadding+"px"),{"padding-left":e.left,"padding-right":e.right});b.setStyle(this.previewElement,r,this.forceStyle,!0)}},this.setValueElementValue=function(e){this.valueElement&&("input"===b.nodeName(this.valueElement)?this.valueElement.value=e:this.valueElement.innerHTML=e)},this.setAlphaElementValue=function(e){this.alphaElement&&("input"===b.nodeName(this.alphaElement)?this.alphaElement.value=e:this.alphaElement.innerHTML=e)},this._processParentElementsInDOM=function(){if(!this._parentElementsProcessed){this._parentElementsProcessed=!0;var e=this.targetElement;do{var t=b.getCompStyle(e)}while(t.position&&"fixed"===t.position.toLowerCase()&&(this.fixed=!0),e===this.targetElement||b.getData(e,"hasScrollListener")||(e.addEventListener("scroll",b.onParentScroll,!1),b.setData(e,"hasScrollListener",!0)),(e=e.parentNode)&&"body"!==b.nodeName(e))}},this.tryHide=function(){this.hideOnLeave&&this.hide()},this.set__palette=function(e){this.palette=e,this._palette=b.parsePaletteValue(e),this._paletteHasTransparency=b.containsTranparentColor(this._palette)},b.pub.options)for(var o in b.pub.options)if(b.pub.options.hasOwnProperty(o))try{a(o,b.pub.options[o])}catch(e){console.warn(e)}var i=[];t.preset&&("string"==typeof t.preset?i=t.preset.split(/\s+/):Array.isArray(t.preset)?i=t.preset.slice():console.warn("Unrecognized preset value")),-1===i.indexOf("default")&&i.push("default");for(var s=i.length-1;0<=s;--s){var l=i[s];if(l)if(b.pub.presets.hasOwnProperty(l)){for(var o in b.pub.presets[l])if(b.pub.presets[l].hasOwnProperty(o))try{a(o,b.pub.presets[l][o])}catch(e){console.warn(e)}}else console.warn("Unknown preset: %s",l)}var h=["preset"];for(o in t)if(t.hasOwnProperty(o)&&-1===h.indexOf(o))try{a(o,t[o])}catch(e){console.warn(e)}if(void 0===this.container?this.container=c.document.body:this.container=b.node(this.container),!this.container)throw new Error("Cannot instantiate color picker without a container element");if(this.targetElement=b.node(e),!this.targetElement){if("string"==typeof e&&/^[a-zA-Z][\w:.-]*$/.test(e))throw new Error("If '"+e+"' is supposed to be an ID, please use '#"+e+"' or any valid CSS selector.");throw new Error("Cannot instantiate color picker without a target element")}if(this.targetElement.jscolor&&this.targetElement.jscolor instanceof b.pub)throw new Error("Color picker already installed on this element");this.targetElement.jscolor=this,b.addClass(this.targetElement,b.pub.className),b.instances.push(this),b.isButton(this.targetElement)&&("button"!==this.targetElement.type.toLowerCase()&&(this.targetElement.type="button"),b.isButtonEmpty(this.targetElement)&&(b.removeChildren(this.targetElement),this.targetElement.appendChild(c.document.createTextNode(" ")),e=b.getCompStyle(this.targetElement),(parseFloat(e["min-width"])||0)<this.previewSize&&b.setStyle(this.targetElement,{"min-width":this.previewSize+"px"},this.forceStyle))),void 0===this.valueElement?b.isTextInput(this.targetElement)&&(this.valueElement=this.targetElement):null!==this.valueElement&&(this.valueElement=b.node(this.valueElement)),this.alphaElement&&(this.alphaElement=b.node(this.alphaElement)),void 0===this.previewElement?this.previewElement=this.targetElement:null!==this.previewElement&&(this.previewElement=b.node(this.previewElement)),this.valueElement&&b.isTextInput(this.valueElement)&&(e={onInput:this.valueElement.oninput},this.valueElement.oninput=null,this.valueElement.addEventListener("keydown",function(e){"Enter"===b.eventKey(e)&&(g.valueElement&&g.processValueInput(g.valueElement.value),g.tryHide())},!1),this.valueElement.addEventListener("change",function(e){b.getData(e,"internal")||(e=g.valueElement.value,g.processValueInput(g.valueElement.value),b.triggerCallback(g,"onChange"),g.valueElement.value!==e&&b.triggerInputEvent(g.valueElement,"change",!0,!0))},!1),this.valueElement.addEventListener("input",function(e){b.getData(e,"internal")||(g.valueElement&&g.fromString(g.valueElement.value,b.flags.leaveValue),b.triggerCallback(g,"onInput"))},!1),e.onInput&&this.valueElement.addEventListener("input",e.onInput,!1),this.valueElement.setAttribute("autocomplete","off"),this.valueElement.setAttribute("autocorrect","off"),this.valueElement.setAttribute("autocapitalize","off"),this.valueElement.setAttribute("spellcheck",!1)),this.alphaElement&&b.isTextInput(this.alphaElement)&&(this.alphaElement.addEventListener("keydown",function(e){"Enter"===b.eventKey(e)&&(g.alphaElement&&g.processAlphaInput(g.alphaElement.value),g.tryHide())},!1),this.alphaElement.addEventListener("change",function(e){b.getData(e,"internal")||(e=g.alphaElement.value,g.processAlphaInput(g.alphaElement.value),b.triggerCallback(g,"onChange"),b.triggerInputEvent(g.valueElement,"change",!0,!0),g.alphaElement.value!==e&&b.triggerInputEvent(g.alphaElement,"change",!0,!0))},!1),this.alphaElement.addEventListener("input",function(e){b.getData(e,"internal")||(g.alphaElement&&g.fromHSVA(null,null,null,parseFloat(g.alphaElement.value),b.flags.leaveAlpha),b.triggerCallback(g,"onInput"),b.triggerInputEvent(g.valueElement,"input",!0,!0))},!1),this.alphaElement.setAttribute("autocomplete","off"),this.alphaElement.setAttribute("autocorrect","off"),this.alphaElement.setAttribute("autocapitalize","off"),this.alphaElement.setAttribute("spellcheck",!1));var d,e="FFFFFF",p=(void 0!==this.value?e=this.value:this.valueElement&&void 0!==this.valueElement.value&&(e=this.valueElement.value),void 0);void 0!==this.alpha?p=""+this.alpha:this.alphaElement&&void 0!==this.alphaElement.value&&(p=this.alphaElement.value),this._currentFormat=null,-1<["auto","any"].indexOf(this.format.toLowerCase())?(d=b.parseColorString(e),this._currentFormat=d?d.format:"hex"):this._currentFormat=this.format.toLowerCase(),this.processValueInput(e),void 0!==p&&this.processAlphaInput(p),this.random&&this.randomize.apply(this,Array.isArray(this.random)?this.random:[])}}).pub.className="jscolor",b.pub.activeClassName="jscolor-active",b.pub.looseJSON=!0,b.pub.presets={},b.pub.presets.default={},b.pub.presets.light={backgroundColor:"rgba(255,255,255,1)",controlBorderColor:"rgba(187,187,187,1)",buttonColor:"rgba(0,0,0,1)"},b.pub.presets.dark={backgroundColor:"rgba(51,51,51,1)",controlBorderColor:"rgba(153,153,153,1)",buttonColor:"rgba(240,240,240,1)"},b.pub.presets.small={width:101,height:101,padding:10,sliderSize:14,paletteCols:8},b.pub.presets.medium={width:181,height:101,padding:12,sliderSize:16,paletteCols:10},b.pub.presets.large={width:271,height:151,padding:12,sliderSize:24,paletteCols:15},b.pub.presets.thin={borderWidth:1,controlBorderWidth:1,pointerBorderWidth:1},b.pub.presets.thick={borderWidth:2,controlBorderWidth:2,pointerBorderWidth:2},b.pub.sliderInnerSpace=3,b.pub.chessboardSize=8,b.pub.chessboardColor1="#666666",b.pub.chessboardColor2="#999999",b.pub.previewSeparator=["rgba(255,255,255,.65)","rgba(128,128,128,.65)"],b.pub.init=function(){if(!b.initialized)for(c.document.addEventListener("mousedown",b.onDocumentMouseDown,!1),c.document.addEventListener("keyup",b.onDocumentKeyUp,!1),c.addEventListener("resize",b.onWindowResize,!1),c.addEventListener("scroll",b.onWindowScroll,!1),b.appendDefaultCss(),b.pub.install(),b.initialized=!0;b.readyQueue.length;)b.readyQueue.shift()()},b.pub.install=function(e){var t=!0;try{b.installBySelector("[data-jscolor]",e)}catch(e){t=!1,console.warn(e)}if(b.pub.lookupClass)try{b.installBySelector("input."+b.pub.lookupClass+", button."+b.pub.lookupClass,e)}catch(e){}return t},b.pub.ready=function(e){return"function"!=typeof e?(console.warn("Passed value is not a function"),!1):(b.initialized?e():b.readyQueue.push(e),!0)},b.pub.trigger=function(e){function t(){b.triggerGlobal(e)}b.initialized?t():b.pub.ready(t)},b.pub.hide=function(){b.picker&&b.picker.owner&&b.picker.owner.hide()},b.pub.chessboard=function(e){return b.genColorPreviewCanvas(e=e||"rgba(0,0,0,0)").canvas.toDataURL()},b.pub.background=function(e){var t=[],e=(t.push(b.genColorPreviewGradient(e)),b.genColorPreviewCanvas());return t.push(["url('"+e.canvas.toDataURL()+"')","left top","repeat"].join(" ")),t.join(", ")},b.pub.options={},b.pub.lookupClass="jscolor",b.pub.installByClassName=function(){return console.error('jscolor.installByClassName() is DEPRECATED. Use data-jscolor="" attribute instead of a class name.'+b.docsRef),!1},b.register();var e,b,t=b.pub;function r(e,t,r,n,o,i){this.hShadow=e,this.vShadow=t,this.blur=r,this.spread=n,this.color=o,this.inset=!!i}return void 0===c.jscolor&&(c.jscolor=c.JSColor=t),t});
\ No newline at end of file