├── .editorconfig
├── .gitignore
├── LICENSE
├── README.md
├── demo_page
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── bundle.css
    │   ├── bundle.css.map
    │   ├── bundle.js
    │   ├── bundle.js.map
    │   ├── favicon.png
    │   ├── global.css
    │   └── index.html
    ├── rollup.config.js
    └── src
    │   ├── App.svelte
    │   └── main.js
├── docs
    ├── bundle.css
    ├── bundle.css.map
    ├── bundle.js
    ├── bundle.js.map
    ├── favicon.png
    ├── global.css
    └── index.html
├── package-lock.json
├── package.json
├── rollup.config.js
└── src
    ├── HsvPicker.svelte
    ├── index.js
    └── main.js


/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | tab_size = 2
7 | max_line_length = 120
8 | charset = utf-8
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /public
3 | /demo_page/node_modules
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 qintarp
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Svelte Color Picker [\[Demo Page\]](https://efeskucuk.github.io/svelte-color-picker/)
 2 |  [![svelte-v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)
 3 | ## Installation
 4 | 
 5 | With npm
 6 | ```sh
 7 | $ cd yourSvelteProject
 8 | $ npm i svelte-color-picker
 9 | ```
10 | 
11 | ## Usage
12 | In your component :
13 | ```jsx
14 | <script>
15 | import {HsvPicker} from 'svelte-color-picker';
16 | 
17 | function colorCallback(rgba) {
18 | 	console.log(rgba.detail)
19 | }
20 | </script>
21 | 
22 | <HsvPicker on:colorChange={colorCallback} startColor={"#FBFBFB"}/>
23 | ```
24 | 
25 | 
26 | ## Components
27 | 
28 | Svelte Color Picker currently has one type of colorpicker.
29 | 
30 | #### \</HsvPicker>
31 | | Props | Value Type | Use |
32 | | ------ | ------ | ------ |
33 | | on:colorChange | function | Given function gets called every time color changes |
34 | | startColor | string | Initializes color picker with the value (hexadecimal without alpha). |
35 | 
36 | License
37 | ----
38 | 
39 | MIT
40 | 


--------------------------------------------------------------------------------
/demo_page/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-app",
 3 |   "version": "1.0.0",
 4 |   "devDependencies": {
 5 |     "npm-run-all": "^4.1.5",
 6 |     "rollup": "^1.10.1",
 7 |     "rollup-plugin-commonjs": "^9.3.4",
 8 |     "rollup-plugin-livereload": "^1.0.0",
 9 |     "rollup-plugin-node-resolve": "^4.2.3",
10 |     "rollup-plugin-svelte": "^5.0.3",
11 |     "rollup-plugin-terser": "^4.0.4",
12 |     "svelte": "^3.0.0"
13 |   },
14 |   "dependencies": {
15 |     "sirv-cli": "^0.4.4",
16 |     "svelte-color-picker": "^1.0.6",
17 |     "ws": "^7.0.1"
18 |   },
19 |   "scripts": {
20 |     "build": "rollup -c",
21 |     "autobuild": "rollup -c -w",
22 |     "dev": "run-p start:dev autobuild",
23 |     "start": "sirv public --single",
24 |     "start:dev": "sirv public --single --dev"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/demo_page/public/bundle.css:
--------------------------------------------------------------------------------
1 | h3.svelte-1ceuvkr{padding:0;margin:0;font-family:sans-serif}p.svelte-1ceuvkr{margin:10px 5px}.main.svelte-1ceuvkr{border-radius:20px;width:600px;padding:20px;margin:0 auto}.container.svelte-1ceuvkr{display:inline-block;vertical-align:top}
2 | .main-container.svelte-8esefu{width:240px;height:265px;background:#f2f2f2;border-radius:1px;-webkit-box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.51);-moz-box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.51);box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.51);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.saturation-gradient.svelte-8esefu{background:linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));width:240px;height:160px}.value-gradient.svelte-8esefu{background:linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));overflow:hidden;width:240px;height:160px}.hue-selector.svelte-8esefu{background:linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);margin:15px 10px 10px 10px;border-radius:10px;height:10px}#hue-picker.svelte-8esefu{background:#FFF;width:12px;height:12px;border-radius:50%;left:0%;position:relative;cursor:default;transform:translate(-5px, -1px);-webkit-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.67);-moz-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.67);box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.67)}#hue-event.svelte-8esefu{width:236px;height:14px;transform:translate(-8px, -14px);cursor:default;touch-action:none}.alpha-selector.svelte-8esefu{background-image:linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);background-size:10px 10px;background-position:0 0, 0 5px, 5px -5px, -5px 0px;margin:10px 10px;border-radius:10px;height:10px;position:relative}#alpha-picker.svelte-8esefu{background:#FFF;width:12px;height:12px;border-radius:50%;left:100%;position:relative;cursor:default;transform:translate(-5px, -11px);-webkit-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.67);-moz-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.67);box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.67)}#alpha-event.svelte-8esefu{width:236px;height:14px;transform:translate(-8px, -24px);cursor:default;touch-action:none}.alpha-value.svelte-8esefu{background:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));width:100%;height:100%;border-radius:10px}.colorsquare.svelte-8esefu{background:rgb(255, 0, 0)}#colorsquare-picker.svelte-8esefu{margin:0;padding:0;width:12px;height:12px;border-radius:50%;border:2px solid #FFFB;position:relative;transform:translate(-9px, -9px);left:100%}#colorsquare-event.svelte-8esefu{width:100%;height:100%;position:relative;transform:translate(0, -16px);touch-action:none}.color-info-box.svelte-8esefu{margin:10px;width:100%;height:22px;vertical-align:middle;position:relative}.color-picked.svelte-8esefu{width:18px;height:18px;border-radius:2px;background:rgba(255, 0, 0, 1);display:inline-block}.color-picked-bg.svelte-8esefu{background-image:linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);background-size:10px 10px;background-position:0 0, 0 5px, 5px -5px, -5px 0px;border:2px solid #FFF;border-radius:4px;width:18px;height:18px;color:#fff;display:inline-block}.hex-text-block.svelte-8esefu{display:inline-block;background:white;border-radius:2px;padding:2px;border:1px solid #e3e3e3;height:16px;width:54px;vertical-align:top;text-align:center}.rgb-text-block.svelte-8esefu{display:inline-block;background:white;border-radius:2px;padding:2px;margin:0 1px;border:1px solid #dcdcdc;height:16px;width:23px;vertical-align:top;text-align:center}.rgb-text-div.svelte-8esefu{right:10%;display:inline-block;vertical-align:top;position:absolute}.text-label.svelte-8esefu{position:relative;top:-12px;font-family:sans-serif;font-size:small;color:#888}.text.svelte-8esefu{display:inline;font-family:sans-serif;margin:0;display:inline-block;font-size:12px;font-size-adjust:0.50;position:relative;top:-1px;vertical-align:middle;-webkit-touch-callout:all;-webkit-user-select:all;-khtml-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
3 | 
4 | /*# sourceMappingURL=bundle.css.map */


--------------------------------------------------------------------------------
/demo_page/public/bundle.css.map:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 3,
 3 |   "file": "bundle.css",
 4 |   "sources": [
 5 |     "../src/App.svelte",
 6 |     "../node_modules/svelte-color-picker/src/HsvPicker.svelte"
 7 |   ],
 8 |   "sourcesContent": [
 9 |     "<head>\n<script async defer src=\"https://buttons.github.io/buttons.js\"></script>\n</head>\n\n<script>\n\timport {HsvPicker} from 'svelte-color-picker';\n\n\n\tfunction colorCallback(rgb) {\n\t\tlet r = rgb.detail.r;\n\t\tlet g = rgb.detail.g;\n\t\tlet b = rgb.detail.b;\n\t\tlet bw = 255 - ((r + g + b) / 4);\n\n\t\tlet main = document.querySelector(\".main\");\n\t\tmain.style.background = `rgb(${r},${g},${b})`;\n\t\tlet header = document.querySelector(\"h3\");\n\t\theader.style.color = `rgb(${bw},${bw},${bw})`;\n\t\tlet p = document.querySelector(\"p\");\n\t\tp.style.color = `rgb(${bw},${bw},${bw})`;\n\t\tlet body = document.querySelector(\"body\");\n\t\tbody.style.background = `rgb(${bw},${bw},${bw})`;\n\t}\n</script>\n\n<style>\n\n\th3 {\n\t\tpadding:0;\n\t\tmargin:0;\n\t\tfont-family: sans-serif;\n\t}\n\n\tp {\n\t\tmargin:10px 5px;\n\t}\n\n\t.main {\n\t\tborder-radius:20px;\n\t\twidth:600px;\n\t\tpadding:20px;\n\t\tmargin:0 auto;\n\t}\n\t.container{\n\t\tdisplay:inline-block;\n\t\tvertical-align: top;\n\t}\n\n</style>\n\n<div class=\"main\">\n\t<div class=\"container\">\n\t\t<h3>Svelte Color Picker</h3>\n\t\t<p>A color picker component for svelte.</p>\n\t\t<a class=\"github-button\" href=\"https://github.com/qintarp/svelte-color-picker\" data-icon=\"octicon-star\" data-size=\"large\" data-show-count=\"true\" aria-label=\"Star qintarp/svelte-color-picker on GitHub\">Star</a>\n\t</div>\n\t<div class=\"container\">\n\t\t<HsvPicker on:colorChange={colorCallback} startColor={\"#82EAEA\"}/>\n\t</div>\n</div>\n",
10 |     "<script>\nimport {onMount,createEventDispatcher} from 'svelte';\n\nexport let startColor =\"#FF0000\";\n\nonMount(() => {\n document.addEventListener(\"mouseup\", mouseUp);\n document.addEventListener(\"touchend\", mouseUp);\n document.addEventListener(\"mousemove\", mouseMove);\n document.addEventListener(\"touchmove\", touchMove);\n document.addEventListener(\"touchstart\", killMouseEvents);\n document.addEventListener(\"mousedown\", killTouchEvents);\n setStartColor()\n});\n\nNumber.prototype.mod = function(n) {\n    return ((this%n)+n)%n;\n};\nconst dispatch = createEventDispatcher();\nlet tracked;\nlet h = 1;\nlet s = 1;\nlet v = 1;\nlet a = 1;\nlet r = 255;\nlet g = 0;\nlet b = 0;\nlet hexValue = '#FF0000';\n\n\nfunction setStartColor() {\n  let hex = startColor.replace('#','');\n  if (hex.length !== 6 && hex.length !== 3 && !hex.match(/([^A-F0-9])/gi)) {\n    alert('Invalid property value (startColor)');\n    return;\n  }\n  let hexFiltered='';\n  if (hex.length === 3)\n    hex.split('').forEach( c => {hexFiltered += c+c;});\n  else\n    hexFiltered=hex;\n  hexValue = hexFiltered;\n  r = parseInt(hexFiltered.substring(0,2), 16);\n  g = parseInt(hexFiltered.substring(2,4), 16);\n  b = parseInt(hexFiltered.substring(4,6), 16);\n  rgbToHSV(r,g,b,true);\n  updateCsPicker();\n  updateHuePicker();\n}\n\nfunction killMouseEvents() {\n  document.querySelector(\"#alpha-event\").removeEventListener(\"mousedown\",alphaDown);\n  document.querySelector(\"#colorsquare-event\").removeEventListener(\"mousedown\",csDown);\n  document.querySelector(\"#hue-event\").removeEventListener(\"mousedown\",hueDown);\n  document.removeEventListener(\"mouseup\",mouseUp);\n  document.removeEventListener(\"mousemove\",mouseMove);\n  document.removeEventListener(\"touchstart\",killMouseEvents);\n  document.removeEventListener(\"mousedown\",killTouchEvents);\n}\n\nfunction killTouchEvents() {\n  document.querySelector(\"#alpha-event\").removeEventListener(\"touchstart\",alphaDownTouch);\n  document.querySelector(\"#colorsquare-event\").removeEventListener(\"touchstart\",csDownTouch);\n  document.querySelector(\"#hue-event\").removeEventListener(\"touchstart\",hueDownTouch);\n  document.removeEventListener(\"touchend\",mouseUp);\n  document.removeEventListener(\"touchmove\",touchMove);\n  document.removeEventListener(\"touchstart\",killMouseEvents);\n  document.removeEventListener(\"mousedown\",killTouchEvents);\n}\n\nfunction updateCsPicker() {\n  let csPicker = document.querySelector(\"#colorsquare-picker\");\n  let xPercentage = s * 100;\n  let yPercentage = (1 - v) * 100;\n  csPicker.style.top = yPercentage + \"%\";\n  csPicker.style.left = xPercentage + \"%\";\n}\n\nfunction updateHuePicker() {\n  let huePicker = document.querySelector(\"#hue-picker\");\n  let xPercentage = h * 100;\n  huePicker.style.left = xPercentage + \"%\";\n}\n\nfunction colorChangeCallback() {\n  dispatch('colorChange', {\n  \t\t\tr: r,\n        g: g,\n        b: b,\n        a: a\n  \t\t});\n}\n\nfunction mouseMove(event) {\n if (tracked) {\n  let mouseX = event.clientX;\n  let mouseY = event.clientY;\n  let trackedPos = tracked.getBoundingClientRect();\n  let xPercentage, yPercentage, picker;\n  switch (tracked.id) {\n   case \"colorsquare-event\":\n    xPercentage = (mouseX - trackedPos.x) / 240 * 100;\n    yPercentage = (mouseY - trackedPos.y) / 160 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    (yPercentage > 100) ? yPercentage = 100: (yPercentage < 0) ? yPercentage = 0 : null;\n    picker = document.querySelector(\"#colorsquare-picker\");\n    yPercentage = yPercentage.toFixed(2);\n    xPercentage = xPercentage.toFixed(2);\n    picker.style.top = yPercentage + \"%\";\n    picker.style.left = xPercentage + \"%\";\n    s = xPercentage / 100;\n    v = 1 - yPercentage / 100;\n    colorChange();\n    break;\n   case \"hue-event\":\n    xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    xPercentage = xPercentage.toFixed(2);\n    picker = document.querySelector(\"#hue-picker\");\n    picker.style.left = xPercentage + \"%\";\n    h = xPercentage / 100;\n    hueChange();\n    break;\n   case \"alpha-event\":\n    xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    xPercentage = xPercentage.toFixed(2);\n    picker = document.querySelector(\"#alpha-picker\");\n    picker.style.left = xPercentage + \"%\";\n    a = xPercentage / 100;\n    colorChange();\n    break;\n  }\n\n }\n\n}\n\nfunction touchMove(event) {\n if (tracked) {\n  let mouseX = event.touches[0].clientX;\n  let mouseY = event.touches[0].clientY;\n  let trackedPos = tracked.getBoundingClientRect();\n  let xPercentage, yPercentage, picker;\n  switch (tracked.id) {\n   case \"colorsquare-event\":\n    xPercentage = (mouseX - trackedPos.x) / 240 * 100;\n    yPercentage = (mouseY - trackedPos.y) / 160 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    (yPercentage > 100) ? yPercentage = 100: (yPercentage < 0) ? yPercentage = 0 : null;\n    picker = document.querySelector(\"#colorsquare-picker\");\n    yPercentage = yPercentage.toFixed(2);\n    xPercentage = xPercentage.toFixed(2);\n    picker.style.top = yPercentage + \"%\";\n    picker.style.left = xPercentage + \"%\";\n    s = xPercentage / 100;\n    v = 1 - yPercentage / 100;\n    colorChange();\n    break;\n   case \"hue-event\":\n    xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    xPercentage = xPercentage.toFixed(2);\n    picker = document.querySelector(\"#hue-picker\");\n    picker.style.left = xPercentage + \"%\";\n    h = xPercentage / 100;\n    hueChange();\n    break;\n   case \"alpha-event\":\n    xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    xPercentage = xPercentage.toFixed(2);\n    picker = document.querySelector(\"#alpha-picker\");\n    picker.style.left = xPercentage + \"%\";\n    a = xPercentage / 100;\n    colorChange();\n    break;\n  }\n\n }\n\n}\n\nfunction csDown(event) {\n tracked = event.currentTarget;\n let xPercentage = ((event.offsetX + 1) / 240) * 100;\n let yPercentage = ((event.offsetY + 1) / 160) * 100;\n yPercentage = yPercentage.toFixed(2);\n xPercentage = xPercentage.toFixed(2)\n let picker = document.querySelector(\"#colorsquare-picker\");\n picker.style.top = yPercentage + \"%\";\n picker.style.left = xPercentage + \"%\";\n s = xPercentage / 100;\n v = 1 - yPercentage / 100;\n colorChange();\n}\n\nfunction csDownTouch(event) {\n tracked = event.currentTarget;\n let rect = event.target.getBoundingClientRect();\n let offsetX = event.targetTouches[0].clientX - rect.left;\n let offsetY = event.targetTouches[0].clientY - rect.top;\n let xPercentage = ((offsetX + 1) / 240) * 100;\n let yPercentage = ((offsetY + 1) / 160) * 100;\n yPercentage = yPercentage.toFixed(2);\n xPercentage = xPercentage.toFixed(2)\n let picker = document.querySelector(\"#colorsquare-picker\");\n picker.style.top = yPercentage + \"%\";\n picker.style.left = xPercentage + \"%\";\n s = xPercentage / 100;\n v = 1 - yPercentage / 100;\n colorChange();\n}\n\nfunction mouseUp(event) {\n tracked = null;\n}\n\nfunction hueDown(event) {\n tracked = event.currentTarget;\n let xPercentage = ((event.offsetX - 9) / 220) * 100;\n xPercentage = xPercentage.toFixed(2);\n let picker = document.querySelector(\"#hue-picker\");\n picker.style.left = xPercentage + \"%\";\n h = xPercentage / 100;\n hueChange();\n}\n\nfunction hueDownTouch(event) {\n tracked = event.currentTarget;\n let rect = event.target.getBoundingClientRect();\n let offsetX = event.targetTouches[0].clientX - rect.left;\n let xPercentage = ((offsetX - 9) / 220) * 100;\n xPercentage = xPercentage.toFixed(2);\n let picker = document.querySelector(\"#hue-picker\");\n picker.style.left = xPercentage + \"%\";\n h = xPercentage / 100;\n hueChange();\n}\n\nfunction hueChange() {\n let rgb = hsvToRgb(h, 1, 1)\n let colorsquare = document.querySelector(\".colorsquare\")\n colorsquare.style.background = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},1)`;\n colorChange();\n}\n\nfunction colorChange() {\n let rgb = hsvToRgb(h, s, v);\n r = rgb[0];\n g = rgb[1];\n b = rgb[2];\n hexValue = RGBAToHex();\n let pickedColor = document.querySelector(\".color-picked\");\n pickedColor.style.background = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`;\n colorChangeCallback();\n}\n\nfunction alphaDown(event) {\n tracked = event.currentTarget;\n let xPercentage = ((event.offsetX - 9) / 220) * 100;\n xPercentage = xPercentage.toFixed(2);\n let picker = document.querySelector(\"#alpha-picker\");\n picker.style.left = xPercentage + \"%\";\n a = xPercentage / 100;\n colorChange();\n}\n\nfunction alphaDownTouch(event) {\n tracked = event.currentTarget;\n let rect = event.target.getBoundingClientRect();\n let offsetX = event.targetTouches[0].clientX - rect.left;\n let xPercentage = ((offsetX - 9) / 220) * 100;\n xPercentage = xPercentage.toFixed(2);\n let picker = document.querySelector(\"#alpha-picker\");\n picker.style.left = xPercentage + \"%\";\n a = xPercentage / 100;\n colorChange();\n}\n\n//Math algorithms\nfunction hsvToRgb(h, s, v) {\n var r, g, b;\n\n var i = Math.floor(h * 6);\n var f = h * 6 - i;\n var p = v * (1 - s);\n var q = v * (1 - f * s);\n var t = v * (1 - (1 - f) * s);\n\n switch (i % 6) {\n  case 0:\n   r = v, g = t, b = p;\n   break;\n  case 1:\n   r = q, g = v, b = p;\n   break;\n  case 2:\n   r = p, g = v, b = t;\n   break;\n  case 3:\n   r = p, g = q, b = v;\n   break;\n  case 4:\n   r = t, g = p, b = v;\n   break;\n  case 5:\n   r = v, g = p, b = q;\n   break;\n }\n\n return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n}\n\nfunction RGBAToHex() {\n let rHex = r.toString(16);\n let gHex = g.toString(16);\n let bHex = b.toString(16);\n\n if (rHex.length == 1)\n  rHex = \"0\" + rHex;\n if (gHex.length == 1)\n  gHex = \"0\" + gHex;\n if (bHex.length == 1)\n  bHex = \"0\" + bHex;\n\n\n return (\"#\" + rHex + gHex + bHex).toUpperCase();\n}\n\nfunction rgbToHSV(r, g, b, update) {\n    let rperc, gperc, bperc,max,min,diff,pr,hnew,snew,vnew;\n    rperc = r / 255;\n    gperc = g / 255;\n    bperc = b / 255;\n    max = Math.max(rperc, gperc, bperc);\n    min = Math.min(rperc, gperc, bperc);\n    diff = max - min;\n\n    vnew = max;\n    (vnew == 0) ? snew = 0 : snew = diff / max ;\n\n    for (let i=0;i<3;i++) {\n      if ([rperc,gperc,bperc][i] === max) {\n        pr=i;\n        break;\n      }\n    }\n    if (diff==0) {\n      hnew = 0;\n      if (update) {\n        h=hnew;\n        s=snew;\n        v=vnew;\n        hueChange();\n        return;\n      }\n      else {\n        return {h:hnew,s:snew,v:vnew};\n      }\n    }\n    else {\n      switch (pr) {\n        case 0:\n          hnew=60*(((gperc-bperc)/diff)%6)/360\n          break;\n        case 1:\n          hnew=60*(((bperc-rperc)/diff)+2)/360\n          break;\n        case 2:\n          hnew=60*(((rperc-gperc)/diff)+4)/360\n          break;\n      }\n      if (hnew < 0) hnew+=6;\n    }\n\n    if (update) {\n      h=hnew;\n      s=snew;\n      v=vnew;\n      hueChange();\n    }\n    else {\n      return {h:hnew,s:snew,v:vnew};\n    }\n}\n</script>\n\n<style>\n.main-container {\n\twidth: 240px;\n\theight: 265px;\n\tbackground: #f2f2f2;\n\tborder-radius: 1px;\n\t-webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);\n\t-moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);\n\tbox-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);\n  -webkit-touch-callout: none;\n    -webkit-user-select: none;\n     -khtml-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n\n.saturation-gradient {\n\tbackground: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));\n\twidth: 240px;\n\theight: 160px;\n}\n\n.value-gradient {\n\tbackground: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));\n\toverflow: hidden;\n\twidth: 240px;\n\theight: 160px;\n}\n\n.hue-selector {\n\tbackground: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);\n\tmargin: 15px 10px 10px 10px;\n\tborder-radius: 10px;\n\theight: 10px;\n}\n\n#hue-picker {\n\tbackground: #FFF;\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n\tleft: 0%;\n\tposition: relative;\n\tcursor: default;\n\ttransform: translate(-5px, -1px);\n\t-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n\t-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n\tbox-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n}\n\n#hue-event {\n\twidth: 236px;\n\theight: 14px;\n\ttransform: translate(-8px, -14px);\n\tcursor: default;\n  touch-action: none;\n}\n\n.alpha-selector {\n\tbackground-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);\n\tbackground-size: 10px 10px;\n\tbackground-position: 0 0, 0 5px, 5px -5px, -5px 0px;\n\tmargin: 10px 10px;\n\tborder-radius: 10px;\n\theight: 10px;\n\tposition: relative;\n}\n\n#alpha-picker {\n\tbackground: #FFF;\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n\tleft: 100%;\n\tposition: relative;\n\tcursor: default;\n\ttransform: translate(-5px, -11px);\n\t-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n\t-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n\tbox-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n}\n\n#alpha-event {\n\twidth: 236px;\n\theight: 14px;\n\ttransform: translate(-8px, -24px);\n\tcursor: default;\n  touch-action: none;\n}\n\n.alpha-value {\n\tbackground: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 10px;\n}\n\n.colorsquare {\n\tbackground: rgb(255, 0, 0);\n}\n\n#colorsquare-picker {\n\tmargin: 0;\n\tpadding: 0;\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n\tborder: 2px solid #FFFB;\n\tposition: relative;\n\ttransform: translate(-9px, -9px);\n\tleft: 100%;\n}\n\n#colorsquare-event {\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n\ttransform: translate(0, -16px);\n  touch-action: none;\n}\n\n.color-info-box {\n\tmargin: 10px;\n\twidth: 100%;\n\theight: 22px;\n\tvertical-align: middle;\n\tposition: relative;\n}\n\n.color-picked {\n\twidth: 18px;\n\theight: 18px;\n\tborder-radius: 2px;\n\tbackground: rgba(255, 0, 0, 1);\n\tdisplay: inline-block;\n}\n\n.color-picked-bg {\n\tbackground-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);\n\tbackground-size: 10px 10px;\n\tbackground-position: 0 0, 0 5px, 5px -5px, -5px 0px;\n\tborder: 2px solid #FFF;\n\tborder-radius: 4px;\n\twidth: 18px;\n\theight: 18px;\n\tcolor: #fff;\n\tdisplay: inline-block;\n}\n\n.hex-text-block {\n\tdisplay: inline-block;\n\tbackground: white;\n\tborder-radius: 2px;\n\tpadding: 2px;\n\tborder: 1px solid #e3e3e3;\n\theight: 16px;\n\twidth: 54px;\n\tvertical-align: top;\n\ttext-align: center;\n}\n\n.rgb-text-block {\n\tdisplay: inline-block;\n\tbackground: white;\n\tborder-radius: 2px;\n\tpadding: 2px;\n\tmargin: 0 1px;\n\tborder: 1px solid #dcdcdc;\n\theight: 16px;\n\twidth: 23px;\n\tvertical-align: top;\n\ttext-align: center;\n}\n\n.rgb-text-div {\n\tright: 10%;\n\tdisplay: inline-block;\n\tvertical-align: top;\n\tposition: absolute;\n}\n\n.text-label {\n\tposition: relative;\n\ttop: -12px;\n\tfont-family: sans-serif;\n\tfont-size: small;\n  color:#888;\n}\n\n.text {\n\tdisplay: inline;\n\tfont-family: sans-serif;\n\tmargin: 0;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tfont-size-adjust: 0.50;\n\tposition: relative;\n\ttop: -1px;\n  vertical-align: middle;\n  -webkit-touch-callout: all;\n    -webkit-user-select: all;\n     -khtml-user-select: all;\n       -moz-user-select: all;\n        -ms-user-select: all;\n            user-select: all;\n}\n</style>\n\n<div class=\"main-container\">\n\n  <div class=\"colorsquare size\">\n      <div class=\"saturation-gradient\">\n          <div class=\"value-gradient\">\n              <div id=\"colorsquare-picker\"></div>\n              <div id=\"colorsquare-event\" on:mousedown={csDown} on:touchstart={csDownTouch}></div>\n          </div>\n      </div>\n  </div>\n\n  <div class=\"hue-selector\">\n      <div id=\"hue-picker\"></div>\n      <div id=\"hue-event\" on:mousedown={hueDown} on:touchstart={hueDownTouch}></div>\n  </div>\n\n  <div class=\"alpha-selector\">\n      <div class=\"alpha-value\"></div>\n      <div id=\"alpha-picker\"></div>\n      <div id=\"alpha-event\" on:mousedown={alphaDown} on:touchstart={alphaDownTouch}></div>\n  </div>\n\n  <div class=\"color-info-box\">\n    <div class=\"color-picked-bg\">\n      <div class=\"color-picked\"></div>\n    </div>\n\n    <div class=\"hex-text-block\">\n      <p class=\"text\">{hexValue}</p>\n    </div>\n\n    <div class=\"rgb-text-div\">\n      <div class=\"rgb-text-block\">\n        <p class=\"text\">{r}</p>\n        <p class=\"text-label\">R</p>\n      </div>\n\n      <div class=\"rgb-text-block\">\n        <p class=\"text\">{g}</p>\n        <p class=\"text-label\">G</p>\n      </div>\n\n      <div class=\"rgb-text-block\">\n        <p class=\"text\">{b}</p>\n        <p class=\"text-label\">B</p>\n      </div>\n    </div>\n  </div>\n\n</div>\n"
11 |   ],
12 |   "names": [],
13 |   "mappings": "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"
14 | }


--------------------------------------------------------------------------------
/demo_page/public/bundle.js:
--------------------------------------------------------------------------------
1 | var app=function(){"use strict";function e(){}function t(e){return e()}function n(){return Object.create(null)}function o(e){e.forEach(t)}function r(e){return"function"==typeof e}function c(e,t){return e!=e?t==t:e!==t||e&&"object"==typeof e||"function"==typeof e}function s(e,t){e.appendChild(t)}function u(e,t,n){e.insertBefore(t,n||null)}function l(e){e.parentNode.removeChild(e)}function a(e){return document.createElement(e)}function i(e){return document.createTextNode(e)}function d(){return i(" ")}function f(e,t,n,o){return e.addEventListener(t,n,o),()=>e.removeEventListener(t,n,o)}function v(e,t,n){null==n?e.removeAttribute(t):e.setAttribute(t,n)}function h(e,t){t=""+t,e.data!==t&&(e.data=t)}let p;function m(e){p=e}function g(e){(function(){if(!p)throw new Error("Function called outside component initialization");return p})().$$.on_mount.push(e)}function y(){const e=p;return(t,n)=>{const o=e.$$.callbacks[t];if(o){const r=function(e,t){const n=document.createEvent("CustomEvent");return n.initCustomEvent(e,!1,!1,t),n}(t,n);o.slice().forEach(t=>{t.call(e,r)})}}}const b=[],$=[],x=[],k=[],q=Promise.resolve();let w=!1;function E(e){x.push(e)}function S(){const e=new Set;do{for(;b.length;){const e=b.shift();m(e),L(e.$$)}for(;$.length;)$.pop()();for(let t=0;t<x.length;t+=1){const n=x[t];e.has(n)||(n(),e.add(n))}x.length=0}while(b.length);for(;k.length;)k.pop()();w=!1}function L(e){e.fragment&&(e.update(e.dirty),o(e.before_update),e.fragment.p(e.dirty,e.ctx),e.dirty=null,e.after_update.forEach(E))}const C=new Set;let F;function T(e,t){e&&e.i&&(C.delete(e),e.i(t))}function _(e,n,c){const{fragment:s,on_mount:u,on_destroy:l,after_update:a}=e.$$;s.m(n,c),E(()=>{const n=u.map(t).filter(r);l?l.push(...n):o(n),e.$$.on_mount=[]}),a.forEach(E)}function D(e,t){e.$$.fragment&&(o(e.$$.on_destroy),e.$$.fragment.d(t),e.$$.on_destroy=e.$$.fragment=null,e.$$.ctx={})}function M(e,t){e.$$.dirty||(b.push(e),w||(w=!0,q.then(S)),e.$$.dirty=n()),e.$$.dirty[t]=!0}function X(t,r,c,s,u,l){const a=p;m(t);const i=r.props||{},d=t.$$={fragment:null,ctx:null,props:l,update:e,not_equal:u,bound:n(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map(a?a.$$.context:[]),callbacks:n(),dirty:null};let f=!1;var v;d.ctx=c?c(t,i,(e,n)=>{d.ctx&&u(d.ctx[e],d.ctx[e]=n)&&(d.bound[e]&&d.bound[e](n),f&&M(t,e))}):i,d.update(),f=!0,o(d.before_update),d.fragment=s(d.ctx),r.target&&(r.hydrate?d.fragment.l((v=r.target,Array.from(v.childNodes))):d.fragment.c(),r.intro&&T(t.$$.fragment),_(t,r.target,r.anchor),S()),m(a)}class A{$destroy(){D(this,1),this.$destroy=e}$on(e,t){const n=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return n.push(t),()=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1)}}$set(){}}function B(t){var n,r,c,p,m,g,y,b,$,x,k,q,w,E,S,L,C,F,T,_,D,M,X,A,B,R,V,H,I,N,Y,j,z,G,O,P,U,J,K,Q,W,Z,ee,te,ne,oe;return{c(){n=a("div"),r=a("div"),c=a("div"),p=a("div"),m=a("div"),g=d(),y=a("div"),b=d(),$=a("div"),x=a("div"),k=d(),q=a("div"),w=d(),E=a("div"),S=a("div"),L=d(),C=a("div"),F=d(),T=a("div"),_=d(),D=a("div"),(M=a("div")).innerHTML='<div class="color-picked svelte-8esefu"></div>',X=d(),A=a("div"),B=a("p"),R=i(t.hexValue),V=d(),H=a("div"),I=a("div"),N=a("p"),Y=i(t.r),j=d(),(z=a("p")).textContent="R",G=d(),O=a("div"),P=a("p"),U=i(t.g),J=d(),(K=a("p")).textContent="G",Q=d(),W=a("div"),Z=a("p"),ee=i(t.b),te=d(),(ne=a("p")).textContent="B",v(m,"id","colorsquare-picker"),v(m,"class","svelte-8esefu"),v(y,"id","colorsquare-event"),v(y,"class","svelte-8esefu"),v(p,"class","value-gradient svelte-8esefu"),v(c,"class","saturation-gradient svelte-8esefu"),v(r,"class","colorsquare size svelte-8esefu"),v(x,"id","hue-picker"),v(x,"class","svelte-8esefu"),v(q,"id","hue-event"),v(q,"class","svelte-8esefu"),v($,"class","hue-selector svelte-8esefu"),v(S,"class","alpha-value svelte-8esefu"),v(C,"id","alpha-picker"),v(C,"class","svelte-8esefu"),v(T,"id","alpha-event"),v(T,"class","svelte-8esefu"),v(E,"class","alpha-selector svelte-8esefu"),v(M,"class","color-picked-bg svelte-8esefu"),v(B,"class","text svelte-8esefu"),v(A,"class","hex-text-block svelte-8esefu"),v(N,"class","text svelte-8esefu"),v(z,"class","text-label svelte-8esefu"),v(I,"class","rgb-text-block svelte-8esefu"),v(P,"class","text svelte-8esefu"),v(K,"class","text-label svelte-8esefu"),v(O,"class","rgb-text-block svelte-8esefu"),v(Z,"class","text svelte-8esefu"),v(ne,"class","text-label svelte-8esefu"),v(W,"class","rgb-text-block svelte-8esefu"),v(H,"class","rgb-text-div svelte-8esefu"),v(D,"class","color-info-box svelte-8esefu"),v(n,"class","main-container svelte-8esefu"),oe=[f(y,"mousedown",t.csDown),f(y,"touchstart",t.csDownTouch),f(q,"mousedown",t.hueDown),f(q,"touchstart",t.hueDownTouch),f(T,"mousedown",t.alphaDown),f(T,"touchstart",t.alphaDownTouch)]},m(e,t){u(e,n,t),s(n,r),s(r,c),s(c,p),s(p,m),s(p,g),s(p,y),s(n,b),s(n,$),s($,x),s($,k),s($,q),s(n,w),s(n,E),s(E,S),s(E,L),s(E,C),s(E,F),s(E,T),s(n,_),s(n,D),s(D,M),s(D,X),s(D,A),s(A,B),s(B,R),s(D,V),s(D,H),s(H,I),s(I,N),s(N,Y),s(I,j),s(I,z),s(H,G),s(H,O),s(O,P),s(P,U),s(O,J),s(O,K),s(H,Q),s(H,W),s(W,Z),s(Z,ee),s(W,te),s(W,ne)},p(e,t){e.hexValue&&h(R,t.hexValue),e.r&&h(Y,t.r),e.g&&h(U,t.g),e.b&&h(ee,t.b)},i:e,o:e,d(e){e&&l(n),o(oe)}}}function R(e,t,n){var o,r,c,s=Math.floor(6*e),u=6*e-s,l=n*(1-t),a=n*(1-u*t),i=n*(1-(1-u)*t);switch(s%6){case 0:o=n,r=i,c=l;break;case 1:o=a,r=n,c=l;break;case 2:o=l,r=n,c=i;break;case 3:o=l,r=a,c=n;break;case 4:o=i,r=l,c=n;break;case 5:o=n,r=l,c=a}return[Math.round(255*o),Math.round(255*r),Math.round(255*c)]}function V(e,t,n){let{startColor:o="#FF0000"}=t;g(()=>{document.addEventListener("mouseup",k),document.addEventListener("touchend",k),document.addEventListener("mousemove",m),document.addEventListener("touchmove",b),document.addEventListener("touchstart",h),document.addEventListener("mousedown",p),function(){let e=o.replace("#","");if(6!==e.length&&3!==e.length&&!e.match(/([^A-F0-9])/gi))return void alert("Invalid property value (startColor)");let t="";3===e.length?e.split("").forEach(e=>{t+=e+e}):t=e;n("hexValue",v=t),n("r",i=parseInt(t.substring(0,2),16)),n("g",d=parseInt(t.substring(2,4),16)),n("b",f=parseInt(t.substring(4,6),16)),function(e,t,n,o){let r,c,a,i,d,f,v,h,p,m;r=e/255,c=t/255,a=n/255,i=Math.max(r,c,a),d=Math.min(r,c,a),f=i-d,p=0==(m=i)?0:f/i;for(let e=0;e<3;e++)if([r,c,a][e]===i){v=e;break}if(0==f)return h=0,o?(s=h,u=p,l=m,void E()):{h:h,s:p,v:m};switch(v){case 0:h=(c-a)/f%6*60/360;break;case 1:h=60*((a-r)/f+2)/360;break;case 2:h=60*((r-c)/f+4)/360}h<0&&(h+=6);if(!o)return{h:h,s:p,v:m};s=h,u=p,l=m,E()}(i,d,f,!0),function(){let e=document.querySelector("#colorsquare-picker"),t=100*u,n=100*(1-l);e.style.top=n+"%",e.style.left=t+"%"}(),function(){let e=document.querySelector("#hue-picker"),t=100*s;e.style.left=t+"%"}()}()}),Number.prototype.mod=function(e){return(this%e+e)%e};const r=y();let c,s=1,u=1,l=1,a=1,i=255,d=0,f=0,v="#FF0000";function h(){document.querySelector("#alpha-event").removeEventListener("mousedown",L),document.querySelector("#colorsquare-event").removeEventListener("mousedown",$),document.querySelector("#hue-event").removeEventListener("mousedown",q),document.removeEventListener("mouseup",k),document.removeEventListener("mousemove",m),document.removeEventListener("touchstart",h),document.removeEventListener("mousedown",p)}function p(){document.querySelector("#alpha-event").removeEventListener("touchstart",C),document.querySelector("#colorsquare-event").removeEventListener("touchstart",x),document.querySelector("#hue-event").removeEventListener("touchstart",w),document.removeEventListener("touchend",k),document.removeEventListener("touchmove",b),document.removeEventListener("touchstart",h),document.removeEventListener("mousedown",p)}function m(e){if(c){let t,n,o,r=e.clientX,i=e.clientY,d=c.getBoundingClientRect();switch(c.id){case"colorsquare-event":t=(r-d.x)/240*100,n=(i-d.y)/160*100,t>100?t=100:t<0&&(t=0),n>100?n=100:n<0&&(n=0),o=document.querySelector("#colorsquare-picker"),n=n.toFixed(2),t=t.toFixed(2),o.style.top=n+"%",o.style.left=t+"%",u=t/100,l=1-n/100,S();break;case"hue-event":(t=(r-10-d.x)/220*100)>100?t=100:t<0&&(t=0),t=t.toFixed(2),(o=document.querySelector("#hue-picker")).style.left=t+"%",s=t/100,E();break;case"alpha-event":(t=(r-10-d.x)/220*100)>100?t=100:t<0&&(t=0),t=t.toFixed(2),(o=document.querySelector("#alpha-picker")).style.left=t+"%",a=t/100,S()}}}function b(e){if(c){let t,n,o,r=e.touches[0].clientX,i=e.touches[0].clientY,d=c.getBoundingClientRect();switch(c.id){case"colorsquare-event":t=(r-d.x)/240*100,n=(i-d.y)/160*100,t>100?t=100:t<0&&(t=0),n>100?n=100:n<0&&(n=0),o=document.querySelector("#colorsquare-picker"),n=n.toFixed(2),t=t.toFixed(2),o.style.top=n+"%",o.style.left=t+"%",u=t/100,l=1-n/100,S();break;case"hue-event":(t=(r-10-d.x)/220*100)>100?t=100:t<0&&(t=0),t=t.toFixed(2),(o=document.querySelector("#hue-picker")).style.left=t+"%",s=t/100,E();break;case"alpha-event":(t=(r-10-d.x)/220*100)>100?t=100:t<0&&(t=0),t=t.toFixed(2),(o=document.querySelector("#alpha-picker")).style.left=t+"%",a=t/100,S()}}}function $(e){c=e.currentTarget;let t=(e.offsetX+1)/240*100,n=(e.offsetY+1)/160*100;n=n.toFixed(2),t=t.toFixed(2);let o=document.querySelector("#colorsquare-picker");o.style.top=n+"%",o.style.left=t+"%",u=t/100,l=1-n/100,S()}function x(e){c=e.currentTarget;let t=e.target.getBoundingClientRect(),n=(e.targetTouches[0].clientX-t.left+1)/240*100,o=(e.targetTouches[0].clientY-t.top+1)/160*100;o=o.toFixed(2),n=n.toFixed(2);let r=document.querySelector("#colorsquare-picker");r.style.top=o+"%",r.style.left=n+"%",u=n/100,l=1-o/100,S()}function k(e){c=null}function q(e){c=e.currentTarget;let t=(e.offsetX-9)/220*100;t=t.toFixed(2),document.querySelector("#hue-picker").style.left=t+"%",s=t/100,E()}function w(e){c=e.currentTarget;let t=e.target.getBoundingClientRect(),n=(e.targetTouches[0].clientX-t.left-9)/220*100;n=n.toFixed(2),document.querySelector("#hue-picker").style.left=n+"%",s=n/100,E()}function E(){let e=R(s,1,1);document.querySelector(".colorsquare").style.background=`rgba(${e[0]},${e[1]},${e[2]},1)`,S()}function S(){let e=R(s,u,l);n("r",i=e[0]),n("g",d=e[1]),n("b",f=e[2]),n("hexValue",v=function(){let e=i.toString(16),t=d.toString(16),n=f.toString(16);1==e.length&&(e="0"+e);1==t.length&&(t="0"+t);1==n.length&&(n="0"+n);return("#"+e+t+n).toUpperCase()}()),document.querySelector(".color-picked").style.background=`rgba(${e[0]},${e[1]},${e[2]},${a})`,r("colorChange",{r:i,g:d,b:f,a:a})}function L(e){c=e.currentTarget;let t=(e.offsetX-9)/220*100;t=t.toFixed(2),document.querySelector("#alpha-picker").style.left=t+"%",a=t/100,S()}function C(e){c=e.currentTarget;let t=e.target.getBoundingClientRect(),n=(e.targetTouches[0].clientX-t.left-9)/220*100;n=n.toFixed(2),document.querySelector("#alpha-picker").style.left=n+"%",a=n/100,S()}return e.$set=(e=>{"startColor"in e&&n("startColor",o=e.startColor)}),{startColor:o,r:i,g:d,b:f,hexValue:v,csDown:$,csDownTouch:x,hueDown:q,hueDownTouch:w,alphaDown:L,alphaDownTouch:C}}class H extends A{constructor(e){super(),X(this,e,V,B,c,["startColor"])}}function I(t){var n,o,r,c,i,f,h,p=new H({props:{startColor:"#82EAEA"}});return p.$on("colorChange",N),{c(){(n=a("head")).innerHTML='<script async defer src="https://buttons.github.io/buttons.js"><\/script>',o=d(),r=a("div"),(c=a("div")).innerHTML='<h3 class="svelte-1ceuvkr">Svelte Color Picker</h3> <p class="svelte-1ceuvkr">A color picker component for svelte.</p> <a class="github-button" href="https://github.com/qintarp/svelte-color-picker" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star qintarp/svelte-color-picker on GitHub">Star</a>',i=d(),f=a("div"),p.$$.fragment.c(),v(c,"class","container svelte-1ceuvkr"),v(f,"class","container svelte-1ceuvkr"),v(r,"class","main svelte-1ceuvkr")},m(e,t){u(e,n,t),u(e,o,t),u(e,r,t),s(r,c),s(r,i),s(r,f),_(p,f,null),h=!0},p:e,i(e){h||(T(p.$$.fragment,e),h=!0)},o(e){!function(e,t,n){if(e&&e.o){if(C.has(e))return;C.add(e),F.callbacks.push(()=>{C.delete(e),n&&(e.d(1),n())}),e.o(t)}}(p.$$.fragment,e),h=!1},d(e){e&&(l(n),l(o),l(r)),D(p)}}}function N(e){let t=e.detail.r,n=e.detail.g,o=e.detail.b,r=255-(t+n+o)/4;document.querySelector(".main").style.background=`rgb(${t},${n},${o})`,document.querySelector("h3").style.color=`rgb(${r},${r},${r})`,document.querySelector("p").style.color=`rgb(${r},${r},${r})`,document.querySelector("body").style.background=`rgb(${r},${r},${r})`}return new class extends A{constructor(e){super(),X(this,e,null,I,c,[])}}({target:document.body,props:{name:"world"}})}();
2 | //# sourceMappingURL=bundle.js.map
3 | 


--------------------------------------------------------------------------------
/demo_page/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/efeskucuk/svelte-color-picker/45f56e2e8477f82007685730933d4da0f2a43681/demo_page/public/favicon.png


--------------------------------------------------------------------------------
/demo_page/public/global.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 | 	position: relative;
 3 | 	width: 100%;
 4 | 	height: 100%;
 5 | }
 6 | 
 7 | body {
 8 | 	color: #333;
 9 | 	margin: 0;
10 | 	padding: 8px;
11 | 	box-sizing: border-box;
12 | 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 | }
14 | 
15 | a {
16 | 	color: rgb(0,100,200);
17 | 	text-decoration: none;
18 | }
19 | 
20 | a:hover {
21 | 	text-decoration: underline;
22 | }
23 | 
24 | a:visited {
25 | 	color: rgb(0,80,160);
26 | }
27 | 
28 | label {
29 | 	display: block;
30 | }
31 | 
32 | input, button, select, textarea {
33 | 	font-family: inherit;
34 | 	font-size: inherit;
35 | 	padding: 0.4em;
36 | 	margin: 0 0 0.5em 0;
37 | 	box-sizing: border-box;
38 | 	border: 1px solid #ccc;
39 | 	border-radius: 2px;
40 | }
41 | 
42 | input:disabled {
43 | 	color: #ccc;
44 | }
45 | 
46 | input[type="range"] {
47 | 	height: 0;
48 | }
49 | 
50 | button {
51 | 	color: #333;
52 | 	background-color: #f4f4f4;
53 | 	outline: none;
54 | }
55 | 
56 | button:active {
57 | 	background-color: #ddd;
58 | }
59 | 
60 | button:focus {
61 | 	border-color: #666;
62 | }
63 | 


--------------------------------------------------------------------------------
/demo_page/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset='utf8'>
 5 | 	<meta name='viewport' content='width=device-width'>
 6 | 
 7 | 	<title>Svelte app</title>
 8 | 
 9 | 	<link rel='icon' type='image/png' href='/favicon.png'>
10 | 	<link rel='stylesheet' href='/global.css'>
11 | 	<link rel='stylesheet' href='/bundle.css'>
12 | </head>
13 | 
14 | <body>
15 | 	<script src='/bundle.js'></script>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/demo_page/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from 'rollup-plugin-svelte';
 2 | import resolve from 'rollup-plugin-node-resolve';
 3 | import commonjs from 'rollup-plugin-commonjs';
 4 | import livereload from 'rollup-plugin-livereload';
 5 | import { terser } from 'rollup-plugin-terser';
 6 | 
 7 | const production = !process.env.ROLLUP_WATCH;
 8 | 
 9 | export default {
10 | 	input: 'src/main.js',
11 | 	output: {
12 | 		sourcemap: true,
13 | 		format: 'iife',
14 | 		name: 'app',
15 | 		file: 'public/bundle.js'
16 | 	},
17 | 	plugins: [
18 | 		svelte({
19 | 			// enable run-time checks when not in production
20 | 			dev: !production,
21 | 			// we'll extract any component CSS out into
22 | 			// a separate file — better for performance
23 | 			css: css => {
24 | 				css.write('public/bundle.css');
25 | 			}
26 | 		}),
27 | 
28 | 		// If you have external dependencies installed from
29 | 		// npm, you'll most likely need these plugins. In
30 | 		// some cases you'll need additional configuration —
31 | 		// consult the documentation for details:
32 | 		// https://github.com/rollup/rollup-plugin-commonjs
33 | 		resolve({ browser: true }),
34 | 		commonjs(),
35 | 
36 | 		// Watch the `public` directory and refresh the
37 | 		// browser on changes when not in production
38 | 		!production && livereload('public'),
39 | 
40 | 		// If we're building for production (npm run build
41 | 		// instead of npm run dev), minify
42 | 		production && terser()
43 | 	],
44 | 	watch: {
45 | 		clearScreen: false
46 | 	}
47 | };
48 | 


--------------------------------------------------------------------------------
/demo_page/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <head>
 2 | <script async defer src="https://buttons.github.io/buttons.js"></script>
 3 | </head>
 4 | 
 5 | <script>
 6 | 	import {HsvPicker} from 'svelte-color-picker';
 7 | 
 8 | 
 9 | 	function colorCallback(rgb) {
10 | 		let r = rgb.detail.r;
11 | 		let g = rgb.detail.g;
12 | 		let b = rgb.detail.b;
13 | 		let bw = 255 - ((r + g + b) / 4);
14 | 
15 | 		let main = document.querySelector(".main");
16 | 		main.style.background = `rgb(${r},${g},${b})`;
17 | 		let header = document.querySelector("h3");
18 | 		header.style.color = `rgb(${bw},${bw},${bw})`;
19 | 		let p = document.querySelector("p");
20 | 		p.style.color = `rgb(${bw},${bw},${bw})`;
21 | 		let body = document.querySelector("body");
22 | 		body.style.background = `rgb(${bw},${bw},${bw})`;
23 | 	}
24 | </script>
25 | 
26 | <style>
27 | 
28 | 	h3 {
29 | 		padding:0;
30 | 		margin:0;
31 | 		font-family: sans-serif;
32 | 	}
33 | 
34 | 	p {
35 | 		margin:10px 5px;
36 | 	}
37 | 
38 | 	.main {
39 | 		border-radius:20px;
40 | 		width:600px;
41 | 		padding:20px;
42 | 		margin:0 auto;
43 | 	}
44 | 	.container{
45 | 		display:inline-block;
46 | 		vertical-align: top;
47 | 	}
48 | 
49 | </style>
50 | 
51 | <div class="main">
52 | 	<div class="container">
53 | 		<h3>Svelte Color Picker</h3>
54 | 		<p>A color picker component for svelte.</p>
55 | 		<a class="github-button" href="https://github.com/qintarp/svelte-color-picker" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star qintarp/svelte-color-picker on GitHub">Star</a>
56 | 	</div>
57 | 	<div class="container">
58 | 		<HsvPicker on:colorChange={colorCallback} startColor={"#82EAEA"}/>
59 | 	</div>
60 | </div>
61 | 


--------------------------------------------------------------------------------
/demo_page/src/main.js:
--------------------------------------------------------------------------------
 1 | import App from './App.svelte';
 2 | 
 3 | const app = new App({
 4 | 	target: document.body,
 5 | 	props: {
 6 | 		name: 'world'
 7 | 	}
 8 | });
 9 | 
10 | export default app;


--------------------------------------------------------------------------------
/docs/bundle.css:
--------------------------------------------------------------------------------
1 | h3.svelte-1ceuvkr{padding:0;margin:0;font-family:sans-serif}p.svelte-1ceuvkr{margin:10px 5px}.main.svelte-1ceuvkr{border-radius:20px;width:600px;padding:20px;margin:0 auto}.container.svelte-1ceuvkr{display:inline-block;vertical-align:top}
2 | .main-container.svelte-8esefu{width:240px;height:265px;background:#f2f2f2;border-radius:1px;-webkit-box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.51);-moz-box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.51);box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.51);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.saturation-gradient.svelte-8esefu{background:linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));width:240px;height:160px}.value-gradient.svelte-8esefu{background:linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));overflow:hidden;width:240px;height:160px}.hue-selector.svelte-8esefu{background:linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);margin:15px 10px 10px 10px;border-radius:10px;height:10px}#hue-picker.svelte-8esefu{background:#FFF;width:12px;height:12px;border-radius:50%;left:0%;position:relative;cursor:default;transform:translate(-5px, -1px);-webkit-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.67);-moz-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.67);box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.67)}#hue-event.svelte-8esefu{width:236px;height:14px;transform:translate(-8px, -14px);cursor:default;touch-action:none}.alpha-selector.svelte-8esefu{background-image:linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);background-size:10px 10px;background-position:0 0, 0 5px, 5px -5px, -5px 0px;margin:10px 10px;border-radius:10px;height:10px;position:relative}#alpha-picker.svelte-8esefu{background:#FFF;width:12px;height:12px;border-radius:50%;left:100%;position:relative;cursor:default;transform:translate(-5px, -11px);-webkit-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.67);-moz-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.67);box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.67)}#alpha-event.svelte-8esefu{width:236px;height:14px;transform:translate(-8px, -24px);cursor:default;touch-action:none}.alpha-value.svelte-8esefu{background:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));width:100%;height:100%;border-radius:10px}.colorsquare.svelte-8esefu{background:rgb(255, 0, 0)}#colorsquare-picker.svelte-8esefu{margin:0;padding:0;width:12px;height:12px;border-radius:50%;border:2px solid #FFFB;position:relative;transform:translate(-9px, -9px);left:100%}#colorsquare-event.svelte-8esefu{width:100%;height:100%;position:relative;transform:translate(0, -16px);touch-action:none}.color-info-box.svelte-8esefu{margin:10px;width:100%;height:22px;vertical-align:middle;position:relative}.color-picked.svelte-8esefu{width:18px;height:18px;border-radius:2px;background:rgba(255, 0, 0, 1);display:inline-block}.color-picked-bg.svelte-8esefu{background-image:linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);background-size:10px 10px;background-position:0 0, 0 5px, 5px -5px, -5px 0px;border:2px solid #FFF;border-radius:4px;width:18px;height:18px;color:#fff;display:inline-block}.hex-text-block.svelte-8esefu{display:inline-block;background:white;border-radius:2px;padding:2px;border:1px solid #e3e3e3;height:16px;width:54px;vertical-align:top;text-align:center}.rgb-text-block.svelte-8esefu{display:inline-block;background:white;border-radius:2px;padding:2px;margin:0 1px;border:1px solid #dcdcdc;height:16px;width:23px;vertical-align:top;text-align:center}.rgb-text-div.svelte-8esefu{right:10%;display:inline-block;vertical-align:top;position:absolute}.text-label.svelte-8esefu{position:relative;top:-12px;font-family:sans-serif;font-size:small;color:#888}.text.svelte-8esefu{display:inline;font-family:sans-serif;margin:0;display:inline-block;font-size:12px;font-size-adjust:0.50;position:relative;top:-1px;vertical-align:middle;-webkit-touch-callout:all;-webkit-user-select:all;-khtml-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
3 | 
4 | /*# sourceMappingURL=bundle.css.map */


--------------------------------------------------------------------------------
/docs/bundle.css.map:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 3,
 3 |   "file": "bundle.css",
 4 |   "sources": [
 5 |     "../src/App.svelte",
 6 |     "../node_modules/svelte-color-picker/src/HsvPicker.svelte"
 7 |   ],
 8 |   "sourcesContent": [
 9 |     "<head>\n<script async defer src=\"https://buttons.github.io/buttons.js\"></script>\n</head>\n\n<script>\n\timport {HsvPicker} from 'svelte-color-picker';\n\n\n\tfunction colorCallback(rgb) {\n\t\tlet r = rgb.detail.r;\n\t\tlet g = rgb.detail.g;\n\t\tlet b = rgb.detail.b;\n\t\tlet bw = 255 - ((r + g + b) / 4);\n\n\t\tlet main = document.querySelector(\".main\");\n\t\tmain.style.background = `rgb(${r},${g},${b})`;\n\t\tlet header = document.querySelector(\"h3\");\n\t\theader.style.color = `rgb(${bw},${bw},${bw})`;\n\t\tlet p = document.querySelector(\"p\");\n\t\tp.style.color = `rgb(${bw},${bw},${bw})`;\n\t\tlet body = document.querySelector(\"body\");\n\t\tbody.style.background = `rgb(${bw},${bw},${bw})`;\n\t}\n</script>\n\n<style>\n\n\th3 {\n\t\tpadding:0;\n\t\tmargin:0;\n\t\tfont-family: sans-serif;\n\t}\n\n\tp {\n\t\tmargin:10px 5px;\n\t}\n\n\t.main {\n\t\tborder-radius:20px;\n\t\twidth:600px;\n\t\tpadding:20px;\n\t\tmargin:0 auto;\n\t}\n\t.container{\n\t\tdisplay:inline-block;\n\t\tvertical-align: top;\n\t}\n\n</style>\n\n<div class=\"main\">\n\t<div class=\"container\">\n\t\t<h3>Svelte Color Picker</h3>\n\t\t<p>A color picker component for svelte.</p>\n\t\t<a class=\"github-button\" href=\"https://github.com/qintarp/svelte-color-picker\" data-icon=\"octicon-star\" data-size=\"large\" data-show-count=\"true\" aria-label=\"Star qintarp/svelte-color-picker on GitHub\">Star</a>\n\t</div>\n\t<div class=\"container\">\n\t\t<HsvPicker on:colorChange={colorCallback} startColor={\"#82EAEA\"}/>\n\t</div>\n</div>\n",
10 |     "<script>\nimport {onMount,createEventDispatcher} from 'svelte';\n\nexport let startColor =\"#FF0000\";\n\nonMount(() => {\n document.addEventListener(\"mouseup\", mouseUp);\n document.addEventListener(\"touchend\", mouseUp);\n document.addEventListener(\"mousemove\", mouseMove);\n document.addEventListener(\"touchmove\", touchMove);\n document.addEventListener(\"touchstart\", killMouseEvents);\n document.addEventListener(\"mousedown\", killTouchEvents);\n setStartColor()\n});\n\nNumber.prototype.mod = function(n) {\n    return ((this%n)+n)%n;\n};\nconst dispatch = createEventDispatcher();\nlet tracked;\nlet h = 1;\nlet s = 1;\nlet v = 1;\nlet a = 1;\nlet r = 255;\nlet g = 0;\nlet b = 0;\nlet hexValue = '#FF0000';\n\n\nfunction setStartColor() {\n  let hex = startColor.replace('#','');\n  if (hex.length !== 6 && hex.length !== 3 && !hex.match(/([^A-F0-9])/gi)) {\n    alert('Invalid property value (startColor)');\n    return;\n  }\n  let hexFiltered='';\n  if (hex.length === 3)\n    hex.split('').forEach( c => {hexFiltered += c+c;});\n  else\n    hexFiltered=hex;\n  hexValue = hexFiltered;\n  r = parseInt(hexFiltered.substring(0,2), 16);\n  g = parseInt(hexFiltered.substring(2,4), 16);\n  b = parseInt(hexFiltered.substring(4,6), 16);\n  rgbToHSV(r,g,b,true);\n  updateCsPicker();\n  updateHuePicker();\n}\n\nfunction killMouseEvents() {\n  document.querySelector(\"#alpha-event\").removeEventListener(\"mousedown\",alphaDown);\n  document.querySelector(\"#colorsquare-event\").removeEventListener(\"mousedown\",csDown);\n  document.querySelector(\"#hue-event\").removeEventListener(\"mousedown\",hueDown);\n  document.removeEventListener(\"mouseup\",mouseUp);\n  document.removeEventListener(\"mousemove\",mouseMove);\n  document.removeEventListener(\"touchstart\",killMouseEvents);\n  document.removeEventListener(\"mousedown\",killTouchEvents);\n}\n\nfunction killTouchEvents() {\n  document.querySelector(\"#alpha-event\").removeEventListener(\"touchstart\",alphaDownTouch);\n  document.querySelector(\"#colorsquare-event\").removeEventListener(\"touchstart\",csDownTouch);\n  document.querySelector(\"#hue-event\").removeEventListener(\"touchstart\",hueDownTouch);\n  document.removeEventListener(\"touchend\",mouseUp);\n  document.removeEventListener(\"touchmove\",touchMove);\n  document.removeEventListener(\"touchstart\",killMouseEvents);\n  document.removeEventListener(\"mousedown\",killTouchEvents);\n}\n\nfunction updateCsPicker() {\n  let csPicker = document.querySelector(\"#colorsquare-picker\");\n  let xPercentage = s * 100;\n  let yPercentage = (1 - v) * 100;\n  csPicker.style.top = yPercentage + \"%\";\n  csPicker.style.left = xPercentage + \"%\";\n}\n\nfunction updateHuePicker() {\n  let huePicker = document.querySelector(\"#hue-picker\");\n  let xPercentage = h * 100;\n  huePicker.style.left = xPercentage + \"%\";\n}\n\nfunction colorChangeCallback() {\n  dispatch('colorChange', {\n  \t\t\tr: r,\n        g: g,\n        b: b,\n        a: a\n  \t\t});\n}\n\nfunction mouseMove(event) {\n if (tracked) {\n  let mouseX = event.clientX;\n  let mouseY = event.clientY;\n  let trackedPos = tracked.getBoundingClientRect();\n  let xPercentage, yPercentage, picker;\n  switch (tracked.id) {\n   case \"colorsquare-event\":\n    xPercentage = (mouseX - trackedPos.x) / 240 * 100;\n    yPercentage = (mouseY - trackedPos.y) / 160 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    (yPercentage > 100) ? yPercentage = 100: (yPercentage < 0) ? yPercentage = 0 : null;\n    picker = document.querySelector(\"#colorsquare-picker\");\n    yPercentage = yPercentage.toFixed(2);\n    xPercentage = xPercentage.toFixed(2);\n    picker.style.top = yPercentage + \"%\";\n    picker.style.left = xPercentage + \"%\";\n    s = xPercentage / 100;\n    v = 1 - yPercentage / 100;\n    colorChange();\n    break;\n   case \"hue-event\":\n    xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    xPercentage = xPercentage.toFixed(2);\n    picker = document.querySelector(\"#hue-picker\");\n    picker.style.left = xPercentage + \"%\";\n    h = xPercentage / 100;\n    hueChange();\n    break;\n   case \"alpha-event\":\n    xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    xPercentage = xPercentage.toFixed(2);\n    picker = document.querySelector(\"#alpha-picker\");\n    picker.style.left = xPercentage + \"%\";\n    a = xPercentage / 100;\n    colorChange();\n    break;\n  }\n\n }\n\n}\n\nfunction touchMove(event) {\n if (tracked) {\n  let mouseX = event.touches[0].clientX;\n  let mouseY = event.touches[0].clientY;\n  let trackedPos = tracked.getBoundingClientRect();\n  let xPercentage, yPercentage, picker;\n  switch (tracked.id) {\n   case \"colorsquare-event\":\n    xPercentage = (mouseX - trackedPos.x) / 240 * 100;\n    yPercentage = (mouseY - trackedPos.y) / 160 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    (yPercentage > 100) ? yPercentage = 100: (yPercentage < 0) ? yPercentage = 0 : null;\n    picker = document.querySelector(\"#colorsquare-picker\");\n    yPercentage = yPercentage.toFixed(2);\n    xPercentage = xPercentage.toFixed(2);\n    picker.style.top = yPercentage + \"%\";\n    picker.style.left = xPercentage + \"%\";\n    s = xPercentage / 100;\n    v = 1 - yPercentage / 100;\n    colorChange();\n    break;\n   case \"hue-event\":\n    xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    xPercentage = xPercentage.toFixed(2);\n    picker = document.querySelector(\"#hue-picker\");\n    picker.style.left = xPercentage + \"%\";\n    h = xPercentage / 100;\n    hueChange();\n    break;\n   case \"alpha-event\":\n    xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    xPercentage = xPercentage.toFixed(2);\n    picker = document.querySelector(\"#alpha-picker\");\n    picker.style.left = xPercentage + \"%\";\n    a = xPercentage / 100;\n    colorChange();\n    break;\n  }\n\n }\n\n}\n\nfunction csDown(event) {\n tracked = event.currentTarget;\n let xPercentage = ((event.offsetX + 1) / 240) * 100;\n let yPercentage = ((event.offsetY + 1) / 160) * 100;\n yPercentage = yPercentage.toFixed(2);\n xPercentage = xPercentage.toFixed(2)\n let picker = document.querySelector(\"#colorsquare-picker\");\n picker.style.top = yPercentage + \"%\";\n picker.style.left = xPercentage + \"%\";\n s = xPercentage / 100;\n v = 1 - yPercentage / 100;\n colorChange();\n}\n\nfunction csDownTouch(event) {\n tracked = event.currentTarget;\n let rect = event.target.getBoundingClientRect();\n let offsetX = event.targetTouches[0].clientX - rect.left;\n let offsetY = event.targetTouches[0].clientY - rect.top;\n let xPercentage = ((offsetX + 1) / 240) * 100;\n let yPercentage = ((offsetY + 1) / 160) * 100;\n yPercentage = yPercentage.toFixed(2);\n xPercentage = xPercentage.toFixed(2)\n let picker = document.querySelector(\"#colorsquare-picker\");\n picker.style.top = yPercentage + \"%\";\n picker.style.left = xPercentage + \"%\";\n s = xPercentage / 100;\n v = 1 - yPercentage / 100;\n colorChange();\n}\n\nfunction mouseUp(event) {\n tracked = null;\n}\n\nfunction hueDown(event) {\n tracked = event.currentTarget;\n let xPercentage = ((event.offsetX - 9) / 220) * 100;\n xPercentage = xPercentage.toFixed(2);\n let picker = document.querySelector(\"#hue-picker\");\n picker.style.left = xPercentage + \"%\";\n h = xPercentage / 100;\n hueChange();\n}\n\nfunction hueDownTouch(event) {\n tracked = event.currentTarget;\n let rect = event.target.getBoundingClientRect();\n let offsetX = event.targetTouches[0].clientX - rect.left;\n let xPercentage = ((offsetX - 9) / 220) * 100;\n xPercentage = xPercentage.toFixed(2);\n let picker = document.querySelector(\"#hue-picker\");\n picker.style.left = xPercentage + \"%\";\n h = xPercentage / 100;\n hueChange();\n}\n\nfunction hueChange() {\n let rgb = hsvToRgb(h, 1, 1)\n let colorsquare = document.querySelector(\".colorsquare\")\n colorsquare.style.background = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},1)`;\n colorChange();\n}\n\nfunction colorChange() {\n let rgb = hsvToRgb(h, s, v);\n r = rgb[0];\n g = rgb[1];\n b = rgb[2];\n hexValue = RGBAToHex();\n let pickedColor = document.querySelector(\".color-picked\");\n pickedColor.style.background = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`;\n colorChangeCallback();\n}\n\nfunction alphaDown(event) {\n tracked = event.currentTarget;\n let xPercentage = ((event.offsetX - 9) / 220) * 100;\n xPercentage = xPercentage.toFixed(2);\n let picker = document.querySelector(\"#alpha-picker\");\n picker.style.left = xPercentage + \"%\";\n a = xPercentage / 100;\n colorChange();\n}\n\nfunction alphaDownTouch(event) {\n tracked = event.currentTarget;\n let rect = event.target.getBoundingClientRect();\n let offsetX = event.targetTouches[0].clientX - rect.left;\n let xPercentage = ((offsetX - 9) / 220) * 100;\n xPercentage = xPercentage.toFixed(2);\n let picker = document.querySelector(\"#alpha-picker\");\n picker.style.left = xPercentage + \"%\";\n a = xPercentage / 100;\n colorChange();\n}\n\n//Math algorithms\nfunction hsvToRgb(h, s, v) {\n var r, g, b;\n\n var i = Math.floor(h * 6);\n var f = h * 6 - i;\n var p = v * (1 - s);\n var q = v * (1 - f * s);\n var t = v * (1 - (1 - f) * s);\n\n switch (i % 6) {\n  case 0:\n   r = v, g = t, b = p;\n   break;\n  case 1:\n   r = q, g = v, b = p;\n   break;\n  case 2:\n   r = p, g = v, b = t;\n   break;\n  case 3:\n   r = p, g = q, b = v;\n   break;\n  case 4:\n   r = t, g = p, b = v;\n   break;\n  case 5:\n   r = v, g = p, b = q;\n   break;\n }\n\n return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n}\n\nfunction RGBAToHex() {\n let rHex = r.toString(16);\n let gHex = g.toString(16);\n let bHex = b.toString(16);\n\n if (rHex.length == 1)\n  rHex = \"0\" + rHex;\n if (gHex.length == 1)\n  gHex = \"0\" + gHex;\n if (bHex.length == 1)\n  bHex = \"0\" + bHex;\n\n\n return (\"#\" + rHex + gHex + bHex).toUpperCase();\n}\n\nfunction rgbToHSV(r, g, b, update) {\n    let rperc, gperc, bperc,max,min,diff,pr,hnew,snew,vnew;\n    rperc = r / 255;\n    gperc = g / 255;\n    bperc = b / 255;\n    max = Math.max(rperc, gperc, bperc);\n    min = Math.min(rperc, gperc, bperc);\n    diff = max - min;\n\n    vnew = max;\n    (vnew == 0) ? snew = 0 : snew = diff / max ;\n\n    for (let i=0;i<3;i++) {\n      if ([rperc,gperc,bperc][i] === max) {\n        pr=i;\n        break;\n      }\n    }\n    if (diff==0) {\n      hnew = 0;\n      if (update) {\n        h=hnew;\n        s=snew;\n        v=vnew;\n        hueChange();\n        return;\n      }\n      else {\n        return {h:hnew,s:snew,v:vnew};\n      }\n    }\n    else {\n      switch (pr) {\n        case 0:\n          hnew=60*(((gperc-bperc)/diff)%6)/360\n          break;\n        case 1:\n          hnew=60*(((bperc-rperc)/diff)+2)/360\n          break;\n        case 2:\n          hnew=60*(((rperc-gperc)/diff)+4)/360\n          break;\n      }\n      if (hnew < 0) hnew+=6;\n    }\n\n    if (update) {\n      h=hnew;\n      s=snew;\n      v=vnew;\n      hueChange();\n    }\n    else {\n      return {h:hnew,s:snew,v:vnew};\n    }\n}\n</script>\n\n<style>\n.main-container {\n\twidth: 240px;\n\theight: 265px;\n\tbackground: #f2f2f2;\n\tborder-radius: 1px;\n\t-webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);\n\t-moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);\n\tbox-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);\n  -webkit-touch-callout: none;\n    -webkit-user-select: none;\n     -khtml-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n\n.saturation-gradient {\n\tbackground: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));\n\twidth: 240px;\n\theight: 160px;\n}\n\n.value-gradient {\n\tbackground: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));\n\toverflow: hidden;\n\twidth: 240px;\n\theight: 160px;\n}\n\n.hue-selector {\n\tbackground: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);\n\tmargin: 15px 10px 10px 10px;\n\tborder-radius: 10px;\n\theight: 10px;\n}\n\n#hue-picker {\n\tbackground: #FFF;\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n\tleft: 0%;\n\tposition: relative;\n\tcursor: default;\n\ttransform: translate(-5px, -1px);\n\t-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n\t-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n\tbox-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n}\n\n#hue-event {\n\twidth: 236px;\n\theight: 14px;\n\ttransform: translate(-8px, -14px);\n\tcursor: default;\n  touch-action: none;\n}\n\n.alpha-selector {\n\tbackground-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);\n\tbackground-size: 10px 10px;\n\tbackground-position: 0 0, 0 5px, 5px -5px, -5px 0px;\n\tmargin: 10px 10px;\n\tborder-radius: 10px;\n\theight: 10px;\n\tposition: relative;\n}\n\n#alpha-picker {\n\tbackground: #FFF;\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n\tleft: 100%;\n\tposition: relative;\n\tcursor: default;\n\ttransform: translate(-5px, -11px);\n\t-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n\t-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n\tbox-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n}\n\n#alpha-event {\n\twidth: 236px;\n\theight: 14px;\n\ttransform: translate(-8px, -24px);\n\tcursor: default;\n  touch-action: none;\n}\n\n.alpha-value {\n\tbackground: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 10px;\n}\n\n.colorsquare {\n\tbackground: rgb(255, 0, 0);\n}\n\n#colorsquare-picker {\n\tmargin: 0;\n\tpadding: 0;\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n\tborder: 2px solid #FFFB;\n\tposition: relative;\n\ttransform: translate(-9px, -9px);\n\tleft: 100%;\n}\n\n#colorsquare-event {\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n\ttransform: translate(0, -16px);\n  touch-action: none;\n}\n\n.color-info-box {\n\tmargin: 10px;\n\twidth: 100%;\n\theight: 22px;\n\tvertical-align: middle;\n\tposition: relative;\n}\n\n.color-picked {\n\twidth: 18px;\n\theight: 18px;\n\tborder-radius: 2px;\n\tbackground: rgba(255, 0, 0, 1);\n\tdisplay: inline-block;\n}\n\n.color-picked-bg {\n\tbackground-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);\n\tbackground-size: 10px 10px;\n\tbackground-position: 0 0, 0 5px, 5px -5px, -5px 0px;\n\tborder: 2px solid #FFF;\n\tborder-radius: 4px;\n\twidth: 18px;\n\theight: 18px;\n\tcolor: #fff;\n\tdisplay: inline-block;\n}\n\n.hex-text-block {\n\tdisplay: inline-block;\n\tbackground: white;\n\tborder-radius: 2px;\n\tpadding: 2px;\n\tborder: 1px solid #e3e3e3;\n\theight: 16px;\n\twidth: 54px;\n\tvertical-align: top;\n\ttext-align: center;\n}\n\n.rgb-text-block {\n\tdisplay: inline-block;\n\tbackground: white;\n\tborder-radius: 2px;\n\tpadding: 2px;\n\tmargin: 0 1px;\n\tborder: 1px solid #dcdcdc;\n\theight: 16px;\n\twidth: 23px;\n\tvertical-align: top;\n\ttext-align: center;\n}\n\n.rgb-text-div {\n\tright: 10%;\n\tdisplay: inline-block;\n\tvertical-align: top;\n\tposition: absolute;\n}\n\n.text-label {\n\tposition: relative;\n\ttop: -12px;\n\tfont-family: sans-serif;\n\tfont-size: small;\n  color:#888;\n}\n\n.text {\n\tdisplay: inline;\n\tfont-family: sans-serif;\n\tmargin: 0;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tfont-size-adjust: 0.50;\n\tposition: relative;\n\ttop: -1px;\n  vertical-align: middle;\n  -webkit-touch-callout: all;\n    -webkit-user-select: all;\n     -khtml-user-select: all;\n       -moz-user-select: all;\n        -ms-user-select: all;\n            user-select: all;\n}\n</style>\n\n<div class=\"main-container\">\n\n  <div class=\"colorsquare size\">\n      <div class=\"saturation-gradient\">\n          <div class=\"value-gradient\">\n              <div id=\"colorsquare-picker\"></div>\n              <div id=\"colorsquare-event\" on:mousedown={csDown} on:touchstart={csDownTouch}></div>\n          </div>\n      </div>\n  </div>\n\n  <div class=\"hue-selector\">\n      <div id=\"hue-picker\"></div>\n      <div id=\"hue-event\" on:mousedown={hueDown} on:touchstart={hueDownTouch}></div>\n  </div>\n\n  <div class=\"alpha-selector\">\n      <div class=\"alpha-value\"></div>\n      <div id=\"alpha-picker\"></div>\n      <div id=\"alpha-event\" on:mousedown={alphaDown} on:touchstart={alphaDownTouch}></div>\n  </div>\n\n  <div class=\"color-info-box\">\n    <div class=\"color-picked-bg\">\n      <div class=\"color-picked\"></div>\n    </div>\n\n    <div class=\"hex-text-block\">\n      <p class=\"text\">{hexValue}</p>\n    </div>\n\n    <div class=\"rgb-text-div\">\n      <div class=\"rgb-text-block\">\n        <p class=\"text\">{r}</p>\n        <p class=\"text-label\">R</p>\n      </div>\n\n      <div class=\"rgb-text-block\">\n        <p class=\"text\">{g}</p>\n        <p class=\"text-label\">G</p>\n      </div>\n\n      <div class=\"rgb-text-block\">\n        <p class=\"text\">{b}</p>\n        <p class=\"text-label\">B</p>\n      </div>\n    </div>\n  </div>\n\n</div>\n"
11 |   ],
12 |   "names": [],
13 |   "mappings": "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"
14 | }


--------------------------------------------------------------------------------
/docs/bundle.js:
--------------------------------------------------------------------------------
1 | var app=function(){"use strict";function e(){}function t(e){return e()}function n(){return Object.create(null)}function o(e){e.forEach(t)}function r(e){return"function"==typeof e}function c(e,t){return e!=e?t==t:e!==t||e&&"object"==typeof e||"function"==typeof e}function s(e,t){e.appendChild(t)}function u(e,t,n){e.insertBefore(t,n||null)}function l(e){e.parentNode.removeChild(e)}function a(e){return document.createElement(e)}function i(e){return document.createTextNode(e)}function d(){return i(" ")}function f(e,t,n,o){return e.addEventListener(t,n,o),()=>e.removeEventListener(t,n,o)}function v(e,t,n){null==n?e.removeAttribute(t):e.setAttribute(t,n)}function h(e,t){t=""+t,e.data!==t&&(e.data=t)}let p;function m(e){p=e}function g(e){(function(){if(!p)throw new Error("Function called outside component initialization");return p})().$$.on_mount.push(e)}function y(){const e=p;return(t,n)=>{const o=e.$$.callbacks[t];if(o){const r=function(e,t){const n=document.createEvent("CustomEvent");return n.initCustomEvent(e,!1,!1,t),n}(t,n);o.slice().forEach(t=>{t.call(e,r)})}}}const b=[],$=[],x=[],k=[],q=Promise.resolve();let w=!1;function E(e){x.push(e)}function S(){const e=new Set;do{for(;b.length;){const e=b.shift();m(e),L(e.$$)}for(;$.length;)$.pop()();for(let t=0;t<x.length;t+=1){const n=x[t];e.has(n)||(n(),e.add(n))}x.length=0}while(b.length);for(;k.length;)k.pop()();w=!1}function L(e){e.fragment&&(e.update(e.dirty),o(e.before_update),e.fragment.p(e.dirty,e.ctx),e.dirty=null,e.after_update.forEach(E))}const C=new Set;let F;function T(e,t){e&&e.i&&(C.delete(e),e.i(t))}function _(e,n,c){const{fragment:s,on_mount:u,on_destroy:l,after_update:a}=e.$$;s.m(n,c),E(()=>{const n=u.map(t).filter(r);l?l.push(...n):o(n),e.$$.on_mount=[]}),a.forEach(E)}function D(e,t){e.$$.fragment&&(o(e.$$.on_destroy),e.$$.fragment.d(t),e.$$.on_destroy=e.$$.fragment=null,e.$$.ctx={})}function M(e,t){e.$$.dirty||(b.push(e),w||(w=!0,q.then(S)),e.$$.dirty=n()),e.$$.dirty[t]=!0}function X(t,r,c,s,u,l){const a=p;m(t);const i=r.props||{},d=t.$$={fragment:null,ctx:null,props:l,update:e,not_equal:u,bound:n(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map(a?a.$$.context:[]),callbacks:n(),dirty:null};let f=!1;var v;d.ctx=c?c(t,i,(e,n)=>{d.ctx&&u(d.ctx[e],d.ctx[e]=n)&&(d.bound[e]&&d.bound[e](n),f&&M(t,e))}):i,d.update(),f=!0,o(d.before_update),d.fragment=s(d.ctx),r.target&&(r.hydrate?d.fragment.l((v=r.target,Array.from(v.childNodes))):d.fragment.c(),r.intro&&T(t.$$.fragment),_(t,r.target,r.anchor),S()),m(a)}class A{$destroy(){D(this,1),this.$destroy=e}$on(e,t){const n=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return n.push(t),()=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1)}}$set(){}}function B(t){var n,r,c,p,m,g,y,b,$,x,k,q,w,E,S,L,C,F,T,_,D,M,X,A,B,R,V,H,I,N,Y,j,z,G,O,P,U,J,K,Q,W,Z,ee,te,ne,oe;return{c(){n=a("div"),r=a("div"),c=a("div"),p=a("div"),m=a("div"),g=d(),y=a("div"),b=d(),$=a("div"),x=a("div"),k=d(),q=a("div"),w=d(),E=a("div"),S=a("div"),L=d(),C=a("div"),F=d(),T=a("div"),_=d(),D=a("div"),(M=a("div")).innerHTML='<div class="color-picked svelte-8esefu"></div>',X=d(),A=a("div"),B=a("p"),R=i(t.hexValue),V=d(),H=a("div"),I=a("div"),N=a("p"),Y=i(t.r),j=d(),(z=a("p")).textContent="R",G=d(),O=a("div"),P=a("p"),U=i(t.g),J=d(),(K=a("p")).textContent="G",Q=d(),W=a("div"),Z=a("p"),ee=i(t.b),te=d(),(ne=a("p")).textContent="B",v(m,"id","colorsquare-picker"),v(m,"class","svelte-8esefu"),v(y,"id","colorsquare-event"),v(y,"class","svelte-8esefu"),v(p,"class","value-gradient svelte-8esefu"),v(c,"class","saturation-gradient svelte-8esefu"),v(r,"class","colorsquare size svelte-8esefu"),v(x,"id","hue-picker"),v(x,"class","svelte-8esefu"),v(q,"id","hue-event"),v(q,"class","svelte-8esefu"),v($,"class","hue-selector svelte-8esefu"),v(S,"class","alpha-value svelte-8esefu"),v(C,"id","alpha-picker"),v(C,"class","svelte-8esefu"),v(T,"id","alpha-event"),v(T,"class","svelte-8esefu"),v(E,"class","alpha-selector svelte-8esefu"),v(M,"class","color-picked-bg svelte-8esefu"),v(B,"class","text svelte-8esefu"),v(A,"class","hex-text-block svelte-8esefu"),v(N,"class","text svelte-8esefu"),v(z,"class","text-label svelte-8esefu"),v(I,"class","rgb-text-block svelte-8esefu"),v(P,"class","text svelte-8esefu"),v(K,"class","text-label svelte-8esefu"),v(O,"class","rgb-text-block svelte-8esefu"),v(Z,"class","text svelte-8esefu"),v(ne,"class","text-label svelte-8esefu"),v(W,"class","rgb-text-block svelte-8esefu"),v(H,"class","rgb-text-div svelte-8esefu"),v(D,"class","color-info-box svelte-8esefu"),v(n,"class","main-container svelte-8esefu"),oe=[f(y,"mousedown",t.csDown),f(y,"touchstart",t.csDownTouch),f(q,"mousedown",t.hueDown),f(q,"touchstart",t.hueDownTouch),f(T,"mousedown",t.alphaDown),f(T,"touchstart",t.alphaDownTouch)]},m(e,t){u(e,n,t),s(n,r),s(r,c),s(c,p),s(p,m),s(p,g),s(p,y),s(n,b),s(n,$),s($,x),s($,k),s($,q),s(n,w),s(n,E),s(E,S),s(E,L),s(E,C),s(E,F),s(E,T),s(n,_),s(n,D),s(D,M),s(D,X),s(D,A),s(A,B),s(B,R),s(D,V),s(D,H),s(H,I),s(I,N),s(N,Y),s(I,j),s(I,z),s(H,G),s(H,O),s(O,P),s(P,U),s(O,J),s(O,K),s(H,Q),s(H,W),s(W,Z),s(Z,ee),s(W,te),s(W,ne)},p(e,t){e.hexValue&&h(R,t.hexValue),e.r&&h(Y,t.r),e.g&&h(U,t.g),e.b&&h(ee,t.b)},i:e,o:e,d(e){e&&l(n),o(oe)}}}function R(e,t,n){var o,r,c,s=Math.floor(6*e),u=6*e-s,l=n*(1-t),a=n*(1-u*t),i=n*(1-(1-u)*t);switch(s%6){case 0:o=n,r=i,c=l;break;case 1:o=a,r=n,c=l;break;case 2:o=l,r=n,c=i;break;case 3:o=l,r=a,c=n;break;case 4:o=i,r=l,c=n;break;case 5:o=n,r=l,c=a}return[Math.round(255*o),Math.round(255*r),Math.round(255*c)]}function V(e,t,n){let{startColor:o="#FF0000"}=t;g(()=>{document.addEventListener("mouseup",k),document.addEventListener("touchend",k),document.addEventListener("mousemove",m),document.addEventListener("touchmove",b),document.addEventListener("touchstart",h),document.addEventListener("mousedown",p),function(){let e=o.replace("#","");if(6!==e.length&&3!==e.length&&!e.match(/([^A-F0-9])/gi))return void alert("Invalid property value (startColor)");let t="";3===e.length?e.split("").forEach(e=>{t+=e+e}):t=e;n("hexValue",v=t),n("r",i=parseInt(t.substring(0,2),16)),n("g",d=parseInt(t.substring(2,4),16)),n("b",f=parseInt(t.substring(4,6),16)),function(e,t,n,o){let r,c,a,i,d,f,v,h,p,m;r=e/255,c=t/255,a=n/255,i=Math.max(r,c,a),d=Math.min(r,c,a),f=i-d,p=0==(m=i)?0:f/i;for(let e=0;e<3;e++)if([r,c,a][e]===i){v=e;break}if(0==f)return h=0,o?(s=h,u=p,l=m,void E()):{h:h,s:p,v:m};switch(v){case 0:h=(c-a)/f%6*60/360;break;case 1:h=60*((a-r)/f+2)/360;break;case 2:h=60*((r-c)/f+4)/360}h<0&&(h+=6);if(!o)return{h:h,s:p,v:m};s=h,u=p,l=m,E()}(i,d,f,!0),function(){let e=document.querySelector("#colorsquare-picker"),t=100*u,n=100*(1-l);e.style.top=n+"%",e.style.left=t+"%"}(),function(){let e=document.querySelector("#hue-picker"),t=100*s;e.style.left=t+"%"}()}()}),Number.prototype.mod=function(e){return(this%e+e)%e};const r=y();let c,s=1,u=1,l=1,a=1,i=255,d=0,f=0,v="#FF0000";function h(){document.querySelector("#alpha-event").removeEventListener("mousedown",L),document.querySelector("#colorsquare-event").removeEventListener("mousedown",$),document.querySelector("#hue-event").removeEventListener("mousedown",q),document.removeEventListener("mouseup",k),document.removeEventListener("mousemove",m),document.removeEventListener("touchstart",h),document.removeEventListener("mousedown",p)}function p(){document.querySelector("#alpha-event").removeEventListener("touchstart",C),document.querySelector("#colorsquare-event").removeEventListener("touchstart",x),document.querySelector("#hue-event").removeEventListener("touchstart",w),document.removeEventListener("touchend",k),document.removeEventListener("touchmove",b),document.removeEventListener("touchstart",h),document.removeEventListener("mousedown",p)}function m(e){if(c){let t,n,o,r=e.clientX,i=e.clientY,d=c.getBoundingClientRect();switch(c.id){case"colorsquare-event":t=(r-d.x)/240*100,n=(i-d.y)/160*100,t>100?t=100:t<0&&(t=0),n>100?n=100:n<0&&(n=0),o=document.querySelector("#colorsquare-picker"),n=n.toFixed(2),t=t.toFixed(2),o.style.top=n+"%",o.style.left=t+"%",u=t/100,l=1-n/100,S();break;case"hue-event":(t=(r-10-d.x)/220*100)>100?t=100:t<0&&(t=0),t=t.toFixed(2),(o=document.querySelector("#hue-picker")).style.left=t+"%",s=t/100,E();break;case"alpha-event":(t=(r-10-d.x)/220*100)>100?t=100:t<0&&(t=0),t=t.toFixed(2),(o=document.querySelector("#alpha-picker")).style.left=t+"%",a=t/100,S()}}}function b(e){if(c){let t,n,o,r=e.touches[0].clientX,i=e.touches[0].clientY,d=c.getBoundingClientRect();switch(c.id){case"colorsquare-event":t=(r-d.x)/240*100,n=(i-d.y)/160*100,t>100?t=100:t<0&&(t=0),n>100?n=100:n<0&&(n=0),o=document.querySelector("#colorsquare-picker"),n=n.toFixed(2),t=t.toFixed(2),o.style.top=n+"%",o.style.left=t+"%",u=t/100,l=1-n/100,S();break;case"hue-event":(t=(r-10-d.x)/220*100)>100?t=100:t<0&&(t=0),t=t.toFixed(2),(o=document.querySelector("#hue-picker")).style.left=t+"%",s=t/100,E();break;case"alpha-event":(t=(r-10-d.x)/220*100)>100?t=100:t<0&&(t=0),t=t.toFixed(2),(o=document.querySelector("#alpha-picker")).style.left=t+"%",a=t/100,S()}}}function $(e){c=e.currentTarget;let t=(e.offsetX+1)/240*100,n=(e.offsetY+1)/160*100;n=n.toFixed(2),t=t.toFixed(2);let o=document.querySelector("#colorsquare-picker");o.style.top=n+"%",o.style.left=t+"%",u=t/100,l=1-n/100,S()}function x(e){c=e.currentTarget;let t=e.target.getBoundingClientRect(),n=(e.targetTouches[0].clientX-t.left+1)/240*100,o=(e.targetTouches[0].clientY-t.top+1)/160*100;o=o.toFixed(2),n=n.toFixed(2);let r=document.querySelector("#colorsquare-picker");r.style.top=o+"%",r.style.left=n+"%",u=n/100,l=1-o/100,S()}function k(e){c=null}function q(e){c=e.currentTarget;let t=(e.offsetX-9)/220*100;t=t.toFixed(2),document.querySelector("#hue-picker").style.left=t+"%",s=t/100,E()}function w(e){c=e.currentTarget;let t=e.target.getBoundingClientRect(),n=(e.targetTouches[0].clientX-t.left-9)/220*100;n=n.toFixed(2),document.querySelector("#hue-picker").style.left=n+"%",s=n/100,E()}function E(){let e=R(s,1,1);document.querySelector(".colorsquare").style.background=`rgba(${e[0]},${e[1]},${e[2]},1)`,S()}function S(){let e=R(s,u,l);n("r",i=e[0]),n("g",d=e[1]),n("b",f=e[2]),n("hexValue",v=function(){let e=i.toString(16),t=d.toString(16),n=f.toString(16);1==e.length&&(e="0"+e);1==t.length&&(t="0"+t);1==n.length&&(n="0"+n);return("#"+e+t+n).toUpperCase()}()),document.querySelector(".color-picked").style.background=`rgba(${e[0]},${e[1]},${e[2]},${a})`,r("colorChange",{r:i,g:d,b:f,a:a})}function L(e){c=e.currentTarget;let t=(e.offsetX-9)/220*100;t=t.toFixed(2),document.querySelector("#alpha-picker").style.left=t+"%",a=t/100,S()}function C(e){c=e.currentTarget;let t=e.target.getBoundingClientRect(),n=(e.targetTouches[0].clientX-t.left-9)/220*100;n=n.toFixed(2),document.querySelector("#alpha-picker").style.left=n+"%",a=n/100,S()}return e.$set=(e=>{"startColor"in e&&n("startColor",o=e.startColor)}),{startColor:o,r:i,g:d,b:f,hexValue:v,csDown:$,csDownTouch:x,hueDown:q,hueDownTouch:w,alphaDown:L,alphaDownTouch:C}}class H extends A{constructor(e){super(),X(this,e,V,B,c,["startColor"])}}function I(t){var n,o,r,c,i,f,h,p=new H({props:{startColor:"#82EAEA"}});return p.$on("colorChange",N),{c(){(n=a("head")).innerHTML='<script async defer src="https://buttons.github.io/buttons.js"><\/script>',o=d(),r=a("div"),(c=a("div")).innerHTML='<h3 class="svelte-1ceuvkr">Svelte Color Picker</h3> <p class="svelte-1ceuvkr">A color picker component for svelte.</p> <a class="github-button" href="https://github.com/qintarp/svelte-color-picker" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star qintarp/svelte-color-picker on GitHub">Star</a>',i=d(),f=a("div"),p.$$.fragment.c(),v(c,"class","container svelte-1ceuvkr"),v(f,"class","container svelte-1ceuvkr"),v(r,"class","main svelte-1ceuvkr")},m(e,t){u(e,n,t),u(e,o,t),u(e,r,t),s(r,c),s(r,i),s(r,f),_(p,f,null),h=!0},p:e,i(e){h||(T(p.$$.fragment,e),h=!0)},o(e){!function(e,t,n){if(e&&e.o){if(C.has(e))return;C.add(e),F.callbacks.push(()=>{C.delete(e),n&&(e.d(1),n())}),e.o(t)}}(p.$$.fragment,e),h=!1},d(e){e&&(l(n),l(o),l(r)),D(p)}}}function N(e){let t=e.detail.r,n=e.detail.g,o=e.detail.b,r=255-(t+n+o)/4;document.querySelector(".main").style.background=`rgb(${t},${n},${o})`,document.querySelector("h3").style.color=`rgb(${r},${r},${r})`,document.querySelector("p").style.color=`rgb(${r},${r},${r})`,document.querySelector("body").style.background=`rgb(${r},${r},${r})`}return new class extends A{constructor(e){super(),X(this,e,null,I,c,[])}}({target:document.body,props:{name:"world"}})}();
2 | //# sourceMappingURL=bundle.js.map
3 | 


--------------------------------------------------------------------------------
/docs/bundle.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"bundle.js","sources":["../node_modules/svelte/internal/index.mjs","../node_modules/svelte-color-picker/src/HsvPicker.svelte","../src/App.svelte","../src/main.js"],"sourcesContent":["function noop() { }\nconst identity = x => x;\nfunction assign(tar, src) {\n    // @ts-ignore\n    for (const k in src)\n        tar[k] = src[k];\n    return tar;\n}\nfunction is_promise(value) {\n    return value && typeof value === 'object' && typeof value.then === 'function';\n}\nfunction add_location(element, file, line, column, char) {\n    element.__svelte_meta = {\n        loc: { file, line, column, char }\n    };\n}\nfunction run(fn) {\n    return fn();\n}\nfunction blank_object() {\n    return Object.create(null);\n}\nfunction run_all(fns) {\n    fns.forEach(run);\n}\nfunction is_function(thing) {\n    return typeof thing === 'function';\n}\nfunction safe_not_equal(a, b) {\n    return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');\n}\nfunction not_equal(a, b) {\n    return a != a ? b == b : a !== b;\n}\nfunction validate_store(store, name) {\n    if (!store || typeof store.subscribe !== 'function') {\n        throw new Error(`'${name}' is not a store with a 'subscribe' method`);\n    }\n}\nfunction subscribe(component, store, callback) {\n    const unsub = store.subscribe(callback);\n    component.$$.on_destroy.push(unsub.unsubscribe\n        ? () => unsub.unsubscribe()\n        : unsub);\n}\nfunction create_slot(definition, ctx, fn) {\n    if (definition) {\n        const slot_ctx = get_slot_context(definition, ctx, fn);\n        return definition[0](slot_ctx);\n    }\n}\nfunction get_slot_context(definition, ctx, fn) {\n    return definition[1]\n        ? assign({}, assign(ctx.$$scope.ctx, definition[1](fn ? fn(ctx) : {})))\n        : ctx.$$scope.ctx;\n}\nfunction get_slot_changes(definition, ctx, changed, fn) {\n    return definition[1]\n        ? assign({}, assign(ctx.$$scope.changed || {}, definition[1](fn ? fn(changed) : {})))\n        : ctx.$$scope.changed || {};\n}\nfunction exclude_internal_props(props) {\n    const result = {};\n    for (const k in props)\n        if (k[0] !== '$')\n            result[k] = props[k];\n    return result;\n}\nfunction once(fn) {\n    let ran = false;\n    return function (...args) {\n        if (ran)\n            return;\n        ran = true;\n        fn.call(this, ...args);\n    };\n}\n\nconst is_client = typeof window !== 'undefined';\nlet now = is_client\n    ? () => window.performance.now()\n    : () => Date.now();\nlet raf = cb => requestAnimationFrame(cb);\n// used internally for testing\nfunction set_now(fn) {\n    now = fn;\n}\nfunction set_raf(fn) {\n    raf = fn;\n}\n\nconst tasks = new Set();\nlet running = false;\nfunction run_tasks() {\n    tasks.forEach(task => {\n        if (!task[0](now())) {\n            tasks.delete(task);\n            task[1]();\n        }\n    });\n    running = tasks.size > 0;\n    if (running)\n        raf(run_tasks);\n}\nfunction clear_loops() {\n    // for testing...\n    tasks.forEach(task => tasks.delete(task));\n    running = false;\n}\nfunction loop(fn) {\n    let task;\n    if (!running) {\n        running = true;\n        raf(run_tasks);\n    }\n    return {\n        promise: new Promise(fulfil => {\n            tasks.add(task = [fn, fulfil]);\n        }),\n        abort() {\n            tasks.delete(task);\n        }\n    };\n}\n\nfunction append(target, node) {\n    target.appendChild(node);\n}\nfunction insert(target, node, anchor) {\n    target.insertBefore(node, anchor || null);\n}\nfunction detach(node) {\n    node.parentNode.removeChild(node);\n}\nfunction detach_between(before, after) {\n    while (before.nextSibling && before.nextSibling !== after) {\n        before.parentNode.removeChild(before.nextSibling);\n    }\n}\nfunction detach_before(after) {\n    while (after.previousSibling) {\n        after.parentNode.removeChild(after.previousSibling);\n    }\n}\nfunction detach_after(before) {\n    while (before.nextSibling) {\n        before.parentNode.removeChild(before.nextSibling);\n    }\n}\nfunction destroy_each(iterations, detaching) {\n    for (let i = 0; i < iterations.length; i += 1) {\n        if (iterations[i])\n            iterations[i].d(detaching);\n    }\n}\nfunction element(name) {\n    return document.createElement(name);\n}\nfunction object_without_properties(obj, exclude) {\n    // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion\n    const target = {};\n    for (const k in obj) {\n        if (Object.prototype.hasOwnProperty.call(obj, k)\n            // @ts-ignore\n            && exclude.indexOf(k) === -1) {\n            // @ts-ignore\n            target[k] = obj[k];\n        }\n    }\n    return target;\n}\nfunction svg_element(name) {\n    return document.createElementNS('http://www.w3.org/2000/svg', name);\n}\nfunction text(data) {\n    return document.createTextNode(data);\n}\nfunction space() {\n    return text(' ');\n}\nfunction empty() {\n    return text('');\n}\nfunction listen(node, event, handler, options) {\n    node.addEventListener(event, handler, options);\n    return () => node.removeEventListener(event, handler, options);\n}\nfunction prevent_default(fn) {\n    return function (event) {\n        event.preventDefault();\n        // @ts-ignore\n        return fn.call(this, event);\n    };\n}\nfunction stop_propagation(fn) {\n    return function (event) {\n        event.stopPropagation();\n        // @ts-ignore\n        return fn.call(this, event);\n    };\n}\nfunction attr(node, attribute, value) {\n    if (value == null)\n        node.removeAttribute(attribute);\n    else\n        node.setAttribute(attribute, value);\n}\nfunction set_attributes(node, attributes) {\n    for (const key in attributes) {\n        if (key === 'style') {\n            node.style.cssText = attributes[key];\n        }\n        else if (key in node) {\n            node[key] = attributes[key];\n        }\n        else {\n            attr(node, key, attributes[key]);\n        }\n    }\n}\nfunction set_custom_element_data(node, prop, value) {\n    if (prop in node) {\n        node[prop] = value;\n    }\n    else {\n        attr(node, prop, value);\n    }\n}\nfunction xlink_attr(node, attribute, value) {\n    node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);\n}\nfunction get_binding_group_value(group) {\n    const value = [];\n    for (let i = 0; i < group.length; i += 1) {\n        if (group[i].checked)\n            value.push(group[i].__value);\n    }\n    return value;\n}\nfunction to_number(value) {\n    return value === '' ? undefined : +value;\n}\nfunction time_ranges_to_array(ranges) {\n    const array = [];\n    for (let i = 0; i < ranges.length; i += 1) {\n        array.push({ start: ranges.start(i), end: ranges.end(i) });\n    }\n    return array;\n}\nfunction children(element) {\n    return Array.from(element.childNodes);\n}\nfunction claim_element(nodes, name, attributes, svg) {\n    for (let i = 0; i < nodes.length; i += 1) {\n        const node = nodes[i];\n        if (node.nodeName === name) {\n            for (let j = 0; j < node.attributes.length; j += 1) {\n                const attribute = node.attributes[j];\n                if (!attributes[attribute.name])\n                    node.removeAttribute(attribute.name);\n            }\n            return nodes.splice(i, 1)[0]; // TODO strip unwanted attributes\n        }\n    }\n    return svg ? svg_element(name) : element(name);\n}\nfunction claim_text(nodes, data) {\n    for (let i = 0; i < nodes.length; i += 1) {\n        const node = nodes[i];\n        if (node.nodeType === 3) {\n            node.data = data;\n            return nodes.splice(i, 1)[0];\n        }\n    }\n    return text(data);\n}\nfunction set_data(text, data) {\n    data = '' + data;\n    if (text.data !== data)\n        text.data = data;\n}\nfunction set_input_type(input, type) {\n    try {\n        input.type = type;\n    }\n    catch (e) {\n        // do nothing\n    }\n}\nfunction set_style(node, key, value) {\n    node.style.setProperty(key, value);\n}\nfunction select_option(select, value) {\n    for (let i = 0; i < select.options.length; i += 1) {\n        const option = select.options[i];\n        if (option.__value === value) {\n            option.selected = true;\n            return;\n        }\n    }\n}\nfunction select_options(select, value) {\n    for (let i = 0; i < select.options.length; i += 1) {\n        const option = select.options[i];\n        option.selected = ~value.indexOf(option.__value);\n    }\n}\nfunction select_value(select) {\n    const selected_option = select.querySelector(':checked') || select.options[0];\n    return selected_option && selected_option.__value;\n}\nfunction select_multiple_value(select) {\n    return [].map.call(select.querySelectorAll(':checked'), option => option.__value);\n}\nfunction add_resize_listener(element, fn) {\n    if (getComputedStyle(element).position === 'static') {\n        element.style.position = 'relative';\n    }\n    const object = document.createElement('object');\n    object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');\n    object.type = 'text/html';\n    let win;\n    object.onload = () => {\n        win = object.contentDocument.defaultView;\n        win.addEventListener('resize', fn);\n    };\n    if (/Trident/.test(navigator.userAgent)) {\n        element.appendChild(object);\n        object.data = 'about:blank';\n    }\n    else {\n        object.data = 'about:blank';\n        element.appendChild(object);\n    }\n    return {\n        cancel: () => {\n            win && win.removeEventListener && win.removeEventListener('resize', fn);\n            element.removeChild(object);\n        }\n    };\n}\nfunction toggle_class(element, name, toggle) {\n    element.classList[toggle ? 'add' : 'remove'](name);\n}\nfunction custom_event(type, detail) {\n    const e = document.createEvent('CustomEvent');\n    e.initCustomEvent(type, false, false, detail);\n    return e;\n}\n\nlet stylesheet;\nlet active = 0;\nlet current_rules = {};\n// https://github.com/darkskyapp/string-hash/blob/master/index.js\nfunction hash(str) {\n    let hash = 5381;\n    let i = str.length;\n    while (i--)\n        hash = ((hash << 5) - hash) ^ str.charCodeAt(i);\n    return hash >>> 0;\n}\nfunction create_rule(node, a, b, duration, delay, ease, fn, uid = 0) {\n    const step = 16.666 / duration;\n    let keyframes = '{\\n';\n    for (let p = 0; p <= 1; p += step) {\n        const t = a + (b - a) * ease(p);\n        keyframes += p * 100 + `%{${fn(t, 1 - t)}}\\n`;\n    }\n    const rule = keyframes + `100% {${fn(b, 1 - b)}}\\n}`;\n    const name = `__svelte_${hash(rule)}_${uid}`;\n    if (!current_rules[name]) {\n        if (!stylesheet) {\n            const style = element('style');\n            document.head.appendChild(style);\n            stylesheet = style.sheet;\n        }\n        current_rules[name] = true;\n        stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);\n    }\n    const animation = node.style.animation || '';\n    node.style.animation = `${animation ? `${animation}, ` : ``}${name} ${duration}ms linear ${delay}ms 1 both`;\n    active += 1;\n    return name;\n}\nfunction delete_rule(node, name) {\n    node.style.animation = (node.style.animation || '')\n        .split(', ')\n        .filter(name\n        ? anim => anim.indexOf(name) < 0 // remove specific animation\n        : anim => anim.indexOf('__svelte') === -1 // remove all Svelte animations\n    )\n        .join(', ');\n    if (name && !--active)\n        clear_rules();\n}\nfunction clear_rules() {\n    raf(() => {\n        if (active)\n            return;\n        let i = stylesheet.cssRules.length;\n        while (i--)\n            stylesheet.deleteRule(i);\n        current_rules = {};\n    });\n}\n\nfunction create_animation(node, from, fn, params) {\n    if (!from)\n        return noop;\n    const to = node.getBoundingClientRect();\n    if (from.left === to.left && from.right === to.right && from.top === to.top && from.bottom === to.bottom)\n        return noop;\n    const { delay = 0, duration = 300, easing = identity, \n    // @ts-ignore todo: should this be separated from destructuring? Or start/end added to public api and documentation?\n    start: start_time = now() + delay, \n    // @ts-ignore todo:\n    end = start_time + duration, tick = noop, css } = fn(node, { from, to }, params);\n    let running = true;\n    let started = false;\n    let name;\n    function start() {\n        if (css) {\n            name = create_rule(node, 0, 1, duration, delay, easing, css);\n        }\n        if (!delay) {\n            started = true;\n        }\n    }\n    function stop() {\n        if (css)\n            delete_rule(node, name);\n        running = false;\n    }\n    loop(now$$1 => {\n        if (!started && now$$1 >= start_time) {\n            started = true;\n        }\n        if (started && now$$1 >= end) {\n            tick(1, 0);\n            stop();\n        }\n        if (!running) {\n            return false;\n        }\n        if (started) {\n            const p = now$$1 - start_time;\n            const t = 0 + 1 * easing(p / duration);\n            tick(t, 1 - t);\n        }\n        return true;\n    });\n    start();\n    tick(0, 1);\n    return stop;\n}\nfunction fix_position(node) {\n    const style = getComputedStyle(node);\n    if (style.position !== 'absolute' && style.position !== 'fixed') {\n        const { width, height } = style;\n        const a = node.getBoundingClientRect();\n        node.style.position = 'absolute';\n        node.style.width = width;\n        node.style.height = height;\n        add_transform(node, a);\n    }\n}\nfunction add_transform(node, a) {\n    const b = node.getBoundingClientRect();\n    if (a.left !== b.left || a.top !== b.top) {\n        const style = getComputedStyle(node);\n        const transform = style.transform === 'none' ? '' : style.transform;\n        node.style.transform = `${transform} translate(${a.left - b.left}px, ${a.top - b.top}px)`;\n    }\n}\n\nlet current_component;\nfunction set_current_component(component) {\n    current_component = component;\n}\nfunction get_current_component() {\n    if (!current_component)\n        throw new Error(`Function called outside component initialization`);\n    return current_component;\n}\nfunction beforeUpdate(fn) {\n    get_current_component().$$.before_update.push(fn);\n}\nfunction onMount(fn) {\n    get_current_component().$$.on_mount.push(fn);\n}\nfunction afterUpdate(fn) {\n    get_current_component().$$.after_update.push(fn);\n}\nfunction onDestroy(fn) {\n    get_current_component().$$.on_destroy.push(fn);\n}\nfunction createEventDispatcher() {\n    const component = current_component;\n    return (type, detail) => {\n        const callbacks = component.$$.callbacks[type];\n        if (callbacks) {\n            // TODO are there situations where events could be dispatched\n            // in a server (non-DOM) environment?\n            const event = custom_event(type, detail);\n            callbacks.slice().forEach(fn => {\n                fn.call(component, event);\n            });\n        }\n    };\n}\nfunction setContext(key, context) {\n    get_current_component().$$.context.set(key, context);\n}\nfunction getContext(key) {\n    return get_current_component().$$.context.get(key);\n}\n// TODO figure out if we still want to support\n// shorthand events, or if we want to implement\n// a real bubbling mechanism\nfunction bubble(component, event) {\n    const callbacks = component.$$.callbacks[event.type];\n    if (callbacks) {\n        callbacks.slice().forEach(fn => fn(event));\n    }\n}\n\nconst dirty_components = [];\nconst intros = { enabled: false };\nconst binding_callbacks = [];\nconst render_callbacks = [];\nconst flush_callbacks = [];\nconst resolved_promise = Promise.resolve();\nlet update_scheduled = false;\nfunction schedule_update() {\n    if (!update_scheduled) {\n        update_scheduled = true;\n        resolved_promise.then(flush);\n    }\n}\nfunction tick() {\n    schedule_update();\n    return resolved_promise;\n}\nfunction add_render_callback(fn) {\n    render_callbacks.push(fn);\n}\nfunction add_flush_callback(fn) {\n    flush_callbacks.push(fn);\n}\nfunction flush() {\n    const seen_callbacks = new Set();\n    do {\n        // first, call beforeUpdate functions\n        // and update components\n        while (dirty_components.length) {\n            const component = dirty_components.shift();\n            set_current_component(component);\n            update(component.$$);\n        }\n        while (binding_callbacks.length)\n            binding_callbacks.pop()();\n        // then, once components are updated, call\n        // afterUpdate functions. This may cause\n        // subsequent updates...\n        for (let i = 0; i < render_callbacks.length; i += 1) {\n            const callback = render_callbacks[i];\n            if (!seen_callbacks.has(callback)) {\n                callback();\n                // ...so guard against infinite loops\n                seen_callbacks.add(callback);\n            }\n        }\n        render_callbacks.length = 0;\n    } while (dirty_components.length);\n    while (flush_callbacks.length) {\n        flush_callbacks.pop()();\n    }\n    update_scheduled = false;\n}\nfunction update($$) {\n    if ($$.fragment) {\n        $$.update($$.dirty);\n        run_all($$.before_update);\n        $$.fragment.p($$.dirty, $$.ctx);\n        $$.dirty = null;\n        $$.after_update.forEach(add_render_callback);\n    }\n}\n\nlet promise;\nfunction wait() {\n    if (!promise) {\n        promise = Promise.resolve();\n        promise.then(() => {\n            promise = null;\n        });\n    }\n    return promise;\n}\nfunction dispatch(node, direction, kind) {\n    node.dispatchEvent(custom_event(`${direction ? 'intro' : 'outro'}${kind}`));\n}\nconst outroing = new Set();\nlet outros;\nfunction group_outros() {\n    outros = {\n        remaining: 0,\n        callbacks: []\n    };\n}\nfunction check_outros() {\n    if (!outros.remaining) {\n        run_all(outros.callbacks);\n    }\n}\nfunction transition_in(block, local) {\n    if (block && block.i) {\n        outroing.delete(block);\n        block.i(local);\n    }\n}\nfunction transition_out(block, local, callback) {\n    if (block && block.o) {\n        if (outroing.has(block))\n            return;\n        outroing.add(block);\n        outros.callbacks.push(() => {\n            outroing.delete(block);\n            if (callback) {\n                block.d(1);\n                callback();\n            }\n        });\n        block.o(local);\n    }\n}\nfunction create_in_transition(node, fn, params) {\n    let config = fn(node, params);\n    let running = false;\n    let animation_name;\n    let task;\n    let uid = 0;\n    function cleanup() {\n        if (animation_name)\n            delete_rule(node, animation_name);\n    }\n    function go() {\n        const { delay = 0, duration = 300, easing = identity, tick: tick$$1 = noop, css } = config;\n        if (css)\n            animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);\n        tick$$1(0, 1);\n        const start_time = now() + delay;\n        const end_time = start_time + duration;\n        if (task)\n            task.abort();\n        running = true;\n        add_render_callback(() => dispatch(node, true, 'start'));\n        task = loop(now$$1 => {\n            if (running) {\n                if (now$$1 >= end_time) {\n                    tick$$1(1, 0);\n                    dispatch(node, true, 'end');\n                    cleanup();\n                    return running = false;\n                }\n                if (now$$1 >= start_time) {\n                    const t = easing((now$$1 - start_time) / duration);\n                    tick$$1(t, 1 - t);\n                }\n            }\n            return running;\n        });\n    }\n    let started = false;\n    return {\n        start() {\n            if (started)\n                return;\n            delete_rule(node);\n            if (is_function(config)) {\n                config = config();\n                wait().then(go);\n            }\n            else {\n                go();\n            }\n        },\n        invalidate() {\n            started = false;\n        },\n        end() {\n            if (running) {\n                cleanup();\n                running = false;\n            }\n        }\n    };\n}\nfunction create_out_transition(node, fn, params) {\n    let config = fn(node, params);\n    let running = true;\n    let animation_name;\n    const group = outros;\n    group.remaining += 1;\n    function go() {\n        const { delay = 0, duration = 300, easing = identity, tick: tick$$1 = noop, css } = config;\n        if (css)\n            animation_name = create_rule(node, 1, 0, duration, delay, easing, css);\n        const start_time = now() + delay;\n        const end_time = start_time + duration;\n        add_render_callback(() => dispatch(node, false, 'start'));\n        loop(now$$1 => {\n            if (running) {\n                if (now$$1 >= end_time) {\n                    tick$$1(0, 1);\n                    dispatch(node, false, 'end');\n                    if (!--group.remaining) {\n                        // this will result in `end()` being called,\n                        // so we don't need to clean up here\n                        run_all(group.callbacks);\n                    }\n                    return false;\n                }\n                if (now$$1 >= start_time) {\n                    const t = easing((now$$1 - start_time) / duration);\n                    tick$$1(1 - t, t);\n                }\n            }\n            return running;\n        });\n    }\n    if (is_function(config)) {\n        wait().then(() => {\n            // @ts-ignore\n            config = config();\n            go();\n        });\n    }\n    else {\n        go();\n    }\n    return {\n        end(reset) {\n            if (reset && config.tick) {\n                config.tick(1, 0);\n            }\n            if (running) {\n                if (animation_name)\n                    delete_rule(node, animation_name);\n                running = false;\n            }\n        }\n    };\n}\nfunction create_bidirectional_transition(node, fn, params, intro) {\n    let config = fn(node, params);\n    let t = intro ? 0 : 1;\n    let running_program = null;\n    let pending_program = null;\n    let animation_name = null;\n    function clear_animation() {\n        if (animation_name)\n            delete_rule(node, animation_name);\n    }\n    function init(program, duration) {\n        const d = program.b - t;\n        duration *= Math.abs(d);\n        return {\n            a: t,\n            b: program.b,\n            d,\n            duration,\n            start: program.start,\n            end: program.start + duration,\n            group: program.group\n        };\n    }\n    function go(b) {\n        const { delay = 0, duration = 300, easing = identity, tick: tick$$1 = noop, css } = config;\n        const program = {\n            start: now() + delay,\n            b\n        };\n        if (!b) {\n            // @ts-ignore todo: improve typings\n            program.group = outros;\n            outros.remaining += 1;\n        }\n        if (running_program) {\n            pending_program = program;\n        }\n        else {\n            // if this is an intro, and there's a delay, we need to do\n            // an initial tick and/or apply CSS animation immediately\n            if (css) {\n                clear_animation();\n                animation_name = create_rule(node, t, b, duration, delay, easing, css);\n            }\n            if (b)\n                tick$$1(0, 1);\n            running_program = init(program, duration);\n            add_render_callback(() => dispatch(node, b, 'start'));\n            loop(now$$1 => {\n                if (pending_program && now$$1 > pending_program.start) {\n                    running_program = init(pending_program, duration);\n                    pending_program = null;\n                    dispatch(node, running_program.b, 'start');\n                    if (css) {\n                        clear_animation();\n                        animation_name = create_rule(node, t, running_program.b, running_program.duration, 0, easing, config.css);\n                    }\n                }\n                if (running_program) {\n                    if (now$$1 >= running_program.end) {\n                        tick$$1(t = running_program.b, 1 - t);\n                        dispatch(node, running_program.b, 'end');\n                        if (!pending_program) {\n                            // we're done\n                            if (running_program.b) {\n                                // intro — we can tidy up immediately\n                                clear_animation();\n                            }\n                            else {\n                                // outro — needs to be coordinated\n                                if (!--running_program.group.remaining)\n                                    run_all(running_program.group.callbacks);\n                            }\n                        }\n                        running_program = null;\n                    }\n                    else if (now$$1 >= running_program.start) {\n                        const p = now$$1 - running_program.start;\n                        t = running_program.a + running_program.d * easing(p / running_program.duration);\n                        tick$$1(t, 1 - t);\n                    }\n                }\n                return !!(running_program || pending_program);\n            });\n        }\n    }\n    return {\n        run(b) {\n            if (is_function(config)) {\n                wait().then(() => {\n                    // @ts-ignore\n                    config = config();\n                    go(b);\n                });\n            }\n            else {\n                go(b);\n            }\n        },\n        end() {\n            clear_animation();\n            running_program = pending_program = null;\n        }\n    };\n}\n\nfunction handle_promise(promise, info) {\n    const token = info.token = {};\n    function update(type, index, key, value) {\n        if (info.token !== token)\n            return;\n        info.resolved = key && { [key]: value };\n        const child_ctx = assign(assign({}, info.ctx), info.resolved);\n        const block = type && (info.current = type)(child_ctx);\n        if (info.block) {\n            if (info.blocks) {\n                info.blocks.forEach((block, i) => {\n                    if (i !== index && block) {\n                        group_outros();\n                        transition_out(block, 1, () => {\n                            info.blocks[i] = null;\n                        });\n                        check_outros();\n                    }\n                });\n            }\n            else {\n                info.block.d(1);\n            }\n            block.c();\n            transition_in(block, 1);\n            block.m(info.mount(), info.anchor);\n            flush();\n        }\n        info.block = block;\n        if (info.blocks)\n            info.blocks[index] = block;\n    }\n    if (is_promise(promise)) {\n        promise.then(value => {\n            update(info.then, 1, info.value, value);\n        }, error => {\n            update(info.catch, 2, info.error, error);\n        });\n        // if we previously had a then/catch block, destroy it\n        if (info.current !== info.pending) {\n            update(info.pending, 0);\n            return true;\n        }\n    }\n    else {\n        if (info.current !== info.then) {\n            update(info.then, 1, info.value, promise);\n            return true;\n        }\n        info.resolved = { [info.value]: promise };\n    }\n}\n\nconst globals = (typeof window !== 'undefined' ? window : global);\n\nfunction destroy_block(block, lookup) {\n    block.d(1);\n    lookup.delete(block.key);\n}\nfunction outro_and_destroy_block(block, lookup) {\n    transition_out(block, 1, () => {\n        lookup.delete(block.key);\n    });\n}\nfunction fix_and_destroy_block(block, lookup) {\n    block.f();\n    destroy_block(block, lookup);\n}\nfunction fix_and_outro_and_destroy_block(block, lookup) {\n    block.f();\n    outro_and_destroy_block(block, lookup);\n}\nfunction update_keyed_each(old_blocks, changed, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) {\n    let o = old_blocks.length;\n    let n = list.length;\n    let i = o;\n    const old_indexes = {};\n    while (i--)\n        old_indexes[old_blocks[i].key] = i;\n    const new_blocks = [];\n    const new_lookup = new Map();\n    const deltas = new Map();\n    i = n;\n    while (i--) {\n        const child_ctx = get_context(ctx, list, i);\n        const key = get_key(child_ctx);\n        let block = lookup.get(key);\n        if (!block) {\n            block = create_each_block(key, child_ctx);\n            block.c();\n        }\n        else if (dynamic) {\n            block.p(changed, child_ctx);\n        }\n        new_lookup.set(key, new_blocks[i] = block);\n        if (key in old_indexes)\n            deltas.set(key, Math.abs(i - old_indexes[key]));\n    }\n    const will_move = new Set();\n    const did_move = new Set();\n    function insert(block) {\n        transition_in(block, 1);\n        block.m(node, next);\n        lookup.set(block.key, block);\n        next = block.first;\n        n--;\n    }\n    while (o && n) {\n        const new_block = new_blocks[n - 1];\n        const old_block = old_blocks[o - 1];\n        const new_key = new_block.key;\n        const old_key = old_block.key;\n        if (new_block === old_block) {\n            // do nothing\n            next = new_block.first;\n            o--;\n            n--;\n        }\n        else if (!new_lookup.has(old_key)) {\n            // remove old block\n            destroy(old_block, lookup);\n            o--;\n        }\n        else if (!lookup.has(new_key) || will_move.has(new_key)) {\n            insert(new_block);\n        }\n        else if (did_move.has(old_key)) {\n            o--;\n        }\n        else if (deltas.get(new_key) > deltas.get(old_key)) {\n            did_move.add(new_key);\n            insert(new_block);\n        }\n        else {\n            will_move.add(old_key);\n            o--;\n        }\n    }\n    while (o--) {\n        const old_block = old_blocks[o];\n        if (!new_lookup.has(old_block.key))\n            destroy(old_block, lookup);\n    }\n    while (n)\n        insert(new_blocks[n - 1]);\n    return new_blocks;\n}\nfunction measure(blocks) {\n    const rects = {};\n    let i = blocks.length;\n    while (i--)\n        rects[blocks[i].key] = blocks[i].node.getBoundingClientRect();\n    return rects;\n}\n\nfunction get_spread_update(levels, updates) {\n    const update = {};\n    const to_null_out = {};\n    const accounted_for = { $$scope: 1 };\n    let i = levels.length;\n    while (i--) {\n        const o = levels[i];\n        const n = updates[i];\n        if (n) {\n            for (const key in o) {\n                if (!(key in n))\n                    to_null_out[key] = 1;\n            }\n            for (const key in n) {\n                if (!accounted_for[key]) {\n                    update[key] = n[key];\n                    accounted_for[key] = 1;\n                }\n            }\n            levels[i] = n;\n        }\n        else {\n            for (const key in o) {\n                accounted_for[key] = 1;\n            }\n        }\n    }\n    for (const key in to_null_out) {\n        if (!(key in update))\n            update[key] = undefined;\n    }\n    return update;\n}\n\nconst invalid_attribute_name_character = /[\\s'\">/=\\u{FDD0}-\\u{FDEF}\\u{FFFE}\\u{FFFF}\\u{1FFFE}\\u{1FFFF}\\u{2FFFE}\\u{2FFFF}\\u{3FFFE}\\u{3FFFF}\\u{4FFFE}\\u{4FFFF}\\u{5FFFE}\\u{5FFFF}\\u{6FFFE}\\u{6FFFF}\\u{7FFFE}\\u{7FFFF}\\u{8FFFE}\\u{8FFFF}\\u{9FFFE}\\u{9FFFF}\\u{AFFFE}\\u{AFFFF}\\u{BFFFE}\\u{BFFFF}\\u{CFFFE}\\u{CFFFF}\\u{DFFFE}\\u{DFFFF}\\u{EFFFE}\\u{EFFFF}\\u{FFFFE}\\u{FFFFF}\\u{10FFFE}\\u{10FFFF}]/u;\n// https://html.spec.whatwg.org/multipage/syntax.html#attributes-2\n// https://infra.spec.whatwg.org/#noncharacter\nfunction spread(args) {\n    const attributes = Object.assign({}, ...args);\n    let str = '';\n    Object.keys(attributes).forEach(name => {\n        if (invalid_attribute_name_character.test(name))\n            return;\n        const value = attributes[name];\n        if (value === undefined)\n            return;\n        if (value === true)\n            str += \" \" + name;\n        const escaped = String(value)\n            .replace(/\"/g, '&#34;')\n            .replace(/'/g, '&#39;');\n        str += \" \" + name + \"=\" + JSON.stringify(escaped);\n    });\n    return str;\n}\nconst escaped = {\n    '\"': '&quot;',\n    \"'\": '&#39;',\n    '&': '&amp;',\n    '<': '&lt;',\n    '>': '&gt;'\n};\nfunction escape(html) {\n    return String(html).replace(/[\"'&<>]/g, match => escaped[match]);\n}\nfunction each(items, fn) {\n    let str = '';\n    for (let i = 0; i < items.length; i += 1) {\n        str += fn(items[i], i);\n    }\n    return str;\n}\nconst missing_component = {\n    $$render: () => ''\n};\nfunction validate_component(component, name) {\n    if (!component || !component.$$render) {\n        if (name === 'svelte:component')\n            name += ' this={...}';\n        throw new Error(`<${name}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules`);\n    }\n    return component;\n}\nfunction debug(file, line, column, values) {\n    console.log(`{@debug} ${file ? file + ' ' : ''}(${line}:${column})`); // eslint-disable-line no-console\n    console.log(values); // eslint-disable-line no-console\n    return '';\n}\nlet on_destroy;\nfunction create_ssr_component(fn) {\n    function $$render(result, props, bindings, slots) {\n        const parent_component = current_component;\n        const $$ = {\n            on_destroy,\n            context: new Map(parent_component ? parent_component.$$.context : []),\n            // these will be immediately discarded\n            on_mount: [],\n            before_update: [],\n            after_update: [],\n            callbacks: blank_object()\n        };\n        set_current_component({ $$ });\n        const html = fn(result, props, bindings, slots);\n        set_current_component(parent_component);\n        return html;\n    }\n    return {\n        render: (props = {}, options = {}) => {\n            on_destroy = [];\n            const result = { head: '', css: new Set() };\n            const html = $$render(result, props, {}, options);\n            run_all(on_destroy);\n            return {\n                html,\n                css: {\n                    code: Array.from(result.css).map(css => css.code).join('\\n'),\n                    map: null // TODO\n                },\n                head: result.head\n            };\n        },\n        $$render\n    };\n}\nfunction get_store_value(store) {\n    let value;\n    store.subscribe(_ => value = _)();\n    return value;\n}\nfunction add_attribute(name, value) {\n    if (!value)\n        return '';\n    return ` ${name}${value === true ? '' : `=${typeof value === 'string' ? JSON.stringify(value) : `\"${value}\"`}`}`;\n}\nfunction add_classes(classes) {\n    return classes ? ` class=\"${classes}\"` : ``;\n}\n\nfunction bind(component, name, callback) {\n    if (component.$$.props.indexOf(name) === -1)\n        return;\n    component.$$.bound[name] = callback;\n    callback(component.$$.ctx[name]);\n}\nfunction mount_component(component, target, anchor) {\n    const { fragment, on_mount, on_destroy, after_update } = component.$$;\n    fragment.m(target, anchor);\n    // onMount happens before the initial afterUpdate\n    add_render_callback(() => {\n        const new_on_destroy = on_mount.map(run).filter(is_function);\n        if (on_destroy) {\n            on_destroy.push(...new_on_destroy);\n        }\n        else {\n            // Edge case - component was destroyed immediately,\n            // most likely as a result of a binding initialising\n            run_all(new_on_destroy);\n        }\n        component.$$.on_mount = [];\n    });\n    after_update.forEach(add_render_callback);\n}\nfunction destroy_component(component, detaching) {\n    if (component.$$.fragment) {\n        run_all(component.$$.on_destroy);\n        component.$$.fragment.d(detaching);\n        // TODO null out other refs, including component.$$ (but need to\n        // preserve final state?)\n        component.$$.on_destroy = component.$$.fragment = null;\n        component.$$.ctx = {};\n    }\n}\nfunction make_dirty(component, key) {\n    if (!component.$$.dirty) {\n        dirty_components.push(component);\n        schedule_update();\n        component.$$.dirty = blank_object();\n    }\n    component.$$.dirty[key] = true;\n}\nfunction init(component, options, instance, create_fragment, not_equal$$1, prop_names) {\n    const parent_component = current_component;\n    set_current_component(component);\n    const props = options.props || {};\n    const $$ = component.$$ = {\n        fragment: null,\n        ctx: null,\n        // state\n        props: prop_names,\n        update: noop,\n        not_equal: not_equal$$1,\n        bound: blank_object(),\n        // lifecycle\n        on_mount: [],\n        on_destroy: [],\n        before_update: [],\n        after_update: [],\n        context: new Map(parent_component ? parent_component.$$.context : []),\n        // everything else\n        callbacks: blank_object(),\n        dirty: null\n    };\n    let ready = false;\n    $$.ctx = instance\n        ? instance(component, props, (key, value) => {\n            if ($$.ctx && not_equal$$1($$.ctx[key], $$.ctx[key] = value)) {\n                if ($$.bound[key])\n                    $$.bound[key](value);\n                if (ready)\n                    make_dirty(component, key);\n            }\n        })\n        : props;\n    $$.update();\n    ready = true;\n    run_all($$.before_update);\n    $$.fragment = create_fragment($$.ctx);\n    if (options.target) {\n        if (options.hydrate) {\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            $$.fragment.l(children(options.target));\n        }\n        else {\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            $$.fragment.c();\n        }\n        if (options.intro)\n            transition_in(component.$$.fragment);\n        mount_component(component, options.target, options.anchor);\n        flush();\n    }\n    set_current_component(parent_component);\n}\nlet SvelteElement;\nif (typeof HTMLElement !== 'undefined') {\n    SvelteElement = class extends HTMLElement {\n        constructor() {\n            super();\n            this.attachShadow({ mode: 'open' });\n        }\n        connectedCallback() {\n            // @ts-ignore todo: improve typings\n            for (const key in this.$$.slotted) {\n                // @ts-ignore todo: improve typings\n                this.appendChild(this.$$.slotted[key]);\n            }\n        }\n        attributeChangedCallback(attr$$1, _oldValue, newValue) {\n            this[attr$$1] = newValue;\n        }\n        $destroy() {\n            destroy_component(this, 1);\n            this.$destroy = noop;\n        }\n        $on(type, callback) {\n            // TODO should this delegate to addEventListener?\n            const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));\n            callbacks.push(callback);\n            return () => {\n                const index = callbacks.indexOf(callback);\n                if (index !== -1)\n                    callbacks.splice(index, 1);\n            };\n        }\n        $set() {\n            // overridden by instance, if it has props\n        }\n    };\n}\nclass SvelteComponent {\n    $destroy() {\n        destroy_component(this, 1);\n        this.$destroy = noop;\n    }\n    $on(type, callback) {\n        const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));\n        callbacks.push(callback);\n        return () => {\n            const index = callbacks.indexOf(callback);\n            if (index !== -1)\n                callbacks.splice(index, 1);\n        };\n    }\n    $set() {\n        // overridden by instance, if it has props\n    }\n}\nclass SvelteComponentDev extends SvelteComponent {\n    constructor(options) {\n        if (!options || (!options.target && !options.$$inline)) {\n            throw new Error(`'target' is a required option`);\n        }\n        super();\n    }\n    $destroy() {\n        super.$destroy();\n        this.$destroy = () => {\n            console.warn(`Component was already destroyed`); // eslint-disable-line no-console\n        };\n    }\n}\n\nexport { create_animation, fix_position, add_transform, handle_promise, append, insert, detach, detach_between, detach_before, detach_after, destroy_each, element, object_without_properties, svg_element, text, space, empty, listen, prevent_default, stop_propagation, attr, set_attributes, set_custom_element_data, xlink_attr, get_binding_group_value, to_number, time_ranges_to_array, children, claim_element, claim_text, set_data, set_input_type, set_style, select_option, select_options, select_value, select_multiple_value, add_resize_listener, toggle_class, custom_event, is_client, now, raf, set_now, set_raf, globals, destroy_block, outro_and_destroy_block, fix_and_destroy_block, fix_and_outro_and_destroy_block, update_keyed_each, measure, current_component, set_current_component, beforeUpdate, onMount, afterUpdate, onDestroy, createEventDispatcher, setContext, getContext, bubble, clear_loops, loop, dirty_components, intros, binding_callbacks, schedule_update, tick, add_render_callback, add_flush_callback, flush, get_spread_update, invalid_attribute_name_character, spread, escaped, escape, each, missing_component, validate_component, debug, create_ssr_component, get_store_value, add_attribute, add_classes, group_outros, check_outros, transition_in, transition_out, create_in_transition, create_out_transition, create_bidirectional_transition, noop, identity, assign, is_promise, add_location, run, blank_object, run_all, is_function, safe_not_equal, not_equal, validate_store, subscribe, create_slot, get_slot_context, get_slot_changes, exclude_internal_props, once, bind, mount_component, destroy_component, init, SvelteElement, SvelteComponent, SvelteComponentDev };\n","<script>\nimport {onMount,createEventDispatcher} from 'svelte';\n\nexport let startColor =\"#FF0000\";\n\nonMount(() => {\n document.addEventListener(\"mouseup\", mouseUp);\n document.addEventListener(\"touchend\", mouseUp);\n document.addEventListener(\"mousemove\", mouseMove);\n document.addEventListener(\"touchmove\", touchMove);\n document.addEventListener(\"touchstart\", killMouseEvents);\n document.addEventListener(\"mousedown\", killTouchEvents);\n setStartColor()\n});\n\nNumber.prototype.mod = function(n) {\n    return ((this%n)+n)%n;\n};\nconst dispatch = createEventDispatcher();\nlet tracked;\nlet h = 1;\nlet s = 1;\nlet v = 1;\nlet a = 1;\nlet r = 255;\nlet g = 0;\nlet b = 0;\nlet hexValue = '#FF0000';\n\n\nfunction setStartColor() {\n  let hex = startColor.replace('#','');\n  if (hex.length !== 6 && hex.length !== 3 && !hex.match(/([^A-F0-9])/gi)) {\n    alert('Invalid property value (startColor)');\n    return;\n  }\n  let hexFiltered='';\n  if (hex.length === 3)\n    hex.split('').forEach( c => {hexFiltered += c+c;});\n  else\n    hexFiltered=hex;\n  hexValue = hexFiltered;\n  r = parseInt(hexFiltered.substring(0,2), 16);\n  g = parseInt(hexFiltered.substring(2,4), 16);\n  b = parseInt(hexFiltered.substring(4,6), 16);\n  rgbToHSV(r,g,b,true);\n  updateCsPicker();\n  updateHuePicker();\n}\n\nfunction killMouseEvents() {\n  document.querySelector(\"#alpha-event\").removeEventListener(\"mousedown\",alphaDown);\n  document.querySelector(\"#colorsquare-event\").removeEventListener(\"mousedown\",csDown);\n  document.querySelector(\"#hue-event\").removeEventListener(\"mousedown\",hueDown);\n  document.removeEventListener(\"mouseup\",mouseUp);\n  document.removeEventListener(\"mousemove\",mouseMove);\n  document.removeEventListener(\"touchstart\",killMouseEvents);\n  document.removeEventListener(\"mousedown\",killTouchEvents);\n}\n\nfunction killTouchEvents() {\n  document.querySelector(\"#alpha-event\").removeEventListener(\"touchstart\",alphaDownTouch);\n  document.querySelector(\"#colorsquare-event\").removeEventListener(\"touchstart\",csDownTouch);\n  document.querySelector(\"#hue-event\").removeEventListener(\"touchstart\",hueDownTouch);\n  document.removeEventListener(\"touchend\",mouseUp);\n  document.removeEventListener(\"touchmove\",touchMove);\n  document.removeEventListener(\"touchstart\",killMouseEvents);\n  document.removeEventListener(\"mousedown\",killTouchEvents);\n}\n\nfunction updateCsPicker() {\n  let csPicker = document.querySelector(\"#colorsquare-picker\");\n  let xPercentage = s * 100;\n  let yPercentage = (1 - v) * 100;\n  csPicker.style.top = yPercentage + \"%\";\n  csPicker.style.left = xPercentage + \"%\";\n}\n\nfunction updateHuePicker() {\n  let huePicker = document.querySelector(\"#hue-picker\");\n  let xPercentage = h * 100;\n  huePicker.style.left = xPercentage + \"%\";\n}\n\nfunction colorChangeCallback() {\n  dispatch('colorChange', {\n  \t\t\tr: r,\n        g: g,\n        b: b,\n        a: a\n  \t\t});\n}\n\nfunction mouseMove(event) {\n if (tracked) {\n  let mouseX = event.clientX;\n  let mouseY = event.clientY;\n  let trackedPos = tracked.getBoundingClientRect();\n  let xPercentage, yPercentage, picker;\n  switch (tracked.id) {\n   case \"colorsquare-event\":\n    xPercentage = (mouseX - trackedPos.x) / 240 * 100;\n    yPercentage = (mouseY - trackedPos.y) / 160 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    (yPercentage > 100) ? yPercentage = 100: (yPercentage < 0) ? yPercentage = 0 : null;\n    picker = document.querySelector(\"#colorsquare-picker\");\n    yPercentage = yPercentage.toFixed(2);\n    xPercentage = xPercentage.toFixed(2);\n    picker.style.top = yPercentage + \"%\";\n    picker.style.left = xPercentage + \"%\";\n    s = xPercentage / 100;\n    v = 1 - yPercentage / 100;\n    colorChange();\n    break;\n   case \"hue-event\":\n    xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    xPercentage = xPercentage.toFixed(2);\n    picker = document.querySelector(\"#hue-picker\");\n    picker.style.left = xPercentage + \"%\";\n    h = xPercentage / 100;\n    hueChange();\n    break;\n   case \"alpha-event\":\n    xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    xPercentage = xPercentage.toFixed(2);\n    picker = document.querySelector(\"#alpha-picker\");\n    picker.style.left = xPercentage + \"%\";\n    a = xPercentage / 100;\n    colorChange();\n    break;\n  }\n\n }\n\n}\n\nfunction touchMove(event) {\n if (tracked) {\n  let mouseX = event.touches[0].clientX;\n  let mouseY = event.touches[0].clientY;\n  let trackedPos = tracked.getBoundingClientRect();\n  let xPercentage, yPercentage, picker;\n  switch (tracked.id) {\n   case \"colorsquare-event\":\n    xPercentage = (mouseX - trackedPos.x) / 240 * 100;\n    yPercentage = (mouseY - trackedPos.y) / 160 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    (yPercentage > 100) ? yPercentage = 100: (yPercentage < 0) ? yPercentage = 0 : null;\n    picker = document.querySelector(\"#colorsquare-picker\");\n    yPercentage = yPercentage.toFixed(2);\n    xPercentage = xPercentage.toFixed(2);\n    picker.style.top = yPercentage + \"%\";\n    picker.style.left = xPercentage + \"%\";\n    s = xPercentage / 100;\n    v = 1 - yPercentage / 100;\n    colorChange();\n    break;\n   case \"hue-event\":\n    xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    xPercentage = xPercentage.toFixed(2);\n    picker = document.querySelector(\"#hue-picker\");\n    picker.style.left = xPercentage + \"%\";\n    h = xPercentage / 100;\n    hueChange();\n    break;\n   case \"alpha-event\":\n    xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;\n    (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;\n    xPercentage = xPercentage.toFixed(2);\n    picker = document.querySelector(\"#alpha-picker\");\n    picker.style.left = xPercentage + \"%\";\n    a = xPercentage / 100;\n    colorChange();\n    break;\n  }\n\n }\n\n}\n\nfunction csDown(event) {\n tracked = event.currentTarget;\n let xPercentage = ((event.offsetX + 1) / 240) * 100;\n let yPercentage = ((event.offsetY + 1) / 160) * 100;\n yPercentage = yPercentage.toFixed(2);\n xPercentage = xPercentage.toFixed(2)\n let picker = document.querySelector(\"#colorsquare-picker\");\n picker.style.top = yPercentage + \"%\";\n picker.style.left = xPercentage + \"%\";\n s = xPercentage / 100;\n v = 1 - yPercentage / 100;\n colorChange();\n}\n\nfunction csDownTouch(event) {\n tracked = event.currentTarget;\n let rect = event.target.getBoundingClientRect();\n let offsetX = event.targetTouches[0].clientX - rect.left;\n let offsetY = event.targetTouches[0].clientY - rect.top;\n let xPercentage = ((offsetX + 1) / 240) * 100;\n let yPercentage = ((offsetY + 1) / 160) * 100;\n yPercentage = yPercentage.toFixed(2);\n xPercentage = xPercentage.toFixed(2)\n let picker = document.querySelector(\"#colorsquare-picker\");\n picker.style.top = yPercentage + \"%\";\n picker.style.left = xPercentage + \"%\";\n s = xPercentage / 100;\n v = 1 - yPercentage / 100;\n colorChange();\n}\n\nfunction mouseUp(event) {\n tracked = null;\n}\n\nfunction hueDown(event) {\n tracked = event.currentTarget;\n let xPercentage = ((event.offsetX - 9) / 220) * 100;\n xPercentage = xPercentage.toFixed(2);\n let picker = document.querySelector(\"#hue-picker\");\n picker.style.left = xPercentage + \"%\";\n h = xPercentage / 100;\n hueChange();\n}\n\nfunction hueDownTouch(event) {\n tracked = event.currentTarget;\n let rect = event.target.getBoundingClientRect();\n let offsetX = event.targetTouches[0].clientX - rect.left;\n let xPercentage = ((offsetX - 9) / 220) * 100;\n xPercentage = xPercentage.toFixed(2);\n let picker = document.querySelector(\"#hue-picker\");\n picker.style.left = xPercentage + \"%\";\n h = xPercentage / 100;\n hueChange();\n}\n\nfunction hueChange() {\n let rgb = hsvToRgb(h, 1, 1)\n let colorsquare = document.querySelector(\".colorsquare\")\n colorsquare.style.background = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},1)`;\n colorChange();\n}\n\nfunction colorChange() {\n let rgb = hsvToRgb(h, s, v);\n r = rgb[0];\n g = rgb[1];\n b = rgb[2];\n hexValue = RGBAToHex();\n let pickedColor = document.querySelector(\".color-picked\");\n pickedColor.style.background = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`;\n colorChangeCallback();\n}\n\nfunction alphaDown(event) {\n tracked = event.currentTarget;\n let xPercentage = ((event.offsetX - 9) / 220) * 100;\n xPercentage = xPercentage.toFixed(2);\n let picker = document.querySelector(\"#alpha-picker\");\n picker.style.left = xPercentage + \"%\";\n a = xPercentage / 100;\n colorChange();\n}\n\nfunction alphaDownTouch(event) {\n tracked = event.currentTarget;\n let rect = event.target.getBoundingClientRect();\n let offsetX = event.targetTouches[0].clientX - rect.left;\n let xPercentage = ((offsetX - 9) / 220) * 100;\n xPercentage = xPercentage.toFixed(2);\n let picker = document.querySelector(\"#alpha-picker\");\n picker.style.left = xPercentage + \"%\";\n a = xPercentage / 100;\n colorChange();\n}\n\n//Math algorithms\nfunction hsvToRgb(h, s, v) {\n var r, g, b;\n\n var i = Math.floor(h * 6);\n var f = h * 6 - i;\n var p = v * (1 - s);\n var q = v * (1 - f * s);\n var t = v * (1 - (1 - f) * s);\n\n switch (i % 6) {\n  case 0:\n   r = v, g = t, b = p;\n   break;\n  case 1:\n   r = q, g = v, b = p;\n   break;\n  case 2:\n   r = p, g = v, b = t;\n   break;\n  case 3:\n   r = p, g = q, b = v;\n   break;\n  case 4:\n   r = t, g = p, b = v;\n   break;\n  case 5:\n   r = v, g = p, b = q;\n   break;\n }\n\n return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n}\n\nfunction RGBAToHex() {\n let rHex = r.toString(16);\n let gHex = g.toString(16);\n let bHex = b.toString(16);\n\n if (rHex.length == 1)\n  rHex = \"0\" + rHex;\n if (gHex.length == 1)\n  gHex = \"0\" + gHex;\n if (bHex.length == 1)\n  bHex = \"0\" + bHex;\n\n\n return (\"#\" + rHex + gHex + bHex).toUpperCase();\n}\n\nfunction rgbToHSV(r, g, b, update) {\n    let rperc, gperc, bperc,max,min,diff,pr,hnew,snew,vnew;\n    rperc = r / 255;\n    gperc = g / 255;\n    bperc = b / 255;\n    max = Math.max(rperc, gperc, bperc);\n    min = Math.min(rperc, gperc, bperc);\n    diff = max - min;\n\n    vnew = max;\n    (vnew == 0) ? snew = 0 : snew = diff / max ;\n\n    for (let i=0;i<3;i++) {\n      if ([rperc,gperc,bperc][i] === max) {\n        pr=i;\n        break;\n      }\n    }\n    if (diff==0) {\n      hnew = 0;\n      if (update) {\n        h=hnew;\n        s=snew;\n        v=vnew;\n        hueChange();\n        return;\n      }\n      else {\n        return {h:hnew,s:snew,v:vnew};\n      }\n    }\n    else {\n      switch (pr) {\n        case 0:\n          hnew=60*(((gperc-bperc)/diff)%6)/360\n          break;\n        case 1:\n          hnew=60*(((bperc-rperc)/diff)+2)/360\n          break;\n        case 2:\n          hnew=60*(((rperc-gperc)/diff)+4)/360\n          break;\n      }\n      if (hnew < 0) hnew+=6;\n    }\n\n    if (update) {\n      h=hnew;\n      s=snew;\n      v=vnew;\n      hueChange();\n    }\n    else {\n      return {h:hnew,s:snew,v:vnew};\n    }\n}\n</script>\n\n<style>\n.main-container {\n\twidth: 240px;\n\theight: 265px;\n\tbackground: #f2f2f2;\n\tborder-radius: 1px;\n\t-webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);\n\t-moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);\n\tbox-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);\n  -webkit-touch-callout: none;\n    -webkit-user-select: none;\n     -khtml-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n\n.saturation-gradient {\n\tbackground: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));\n\twidth: 240px;\n\theight: 160px;\n}\n\n.value-gradient {\n\tbackground: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));\n\toverflow: hidden;\n\twidth: 240px;\n\theight: 160px;\n}\n\n.hue-selector {\n\tbackground: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);\n\tmargin: 15px 10px 10px 10px;\n\tborder-radius: 10px;\n\theight: 10px;\n}\n\n#hue-picker {\n\tbackground: #FFF;\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n\tleft: 0%;\n\tposition: relative;\n\tcursor: default;\n\ttransform: translate(-5px, -1px);\n\t-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n\t-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n\tbox-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n}\n\n#hue-event {\n\twidth: 236px;\n\theight: 14px;\n\ttransform: translate(-8px, -14px);\n\tcursor: default;\n  touch-action: none;\n}\n\n.alpha-selector {\n\tbackground-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);\n\tbackground-size: 10px 10px;\n\tbackground-position: 0 0, 0 5px, 5px -5px, -5px 0px;\n\tmargin: 10px 10px;\n\tborder-radius: 10px;\n\theight: 10px;\n\tposition: relative;\n}\n\n#alpha-picker {\n\tbackground: #FFF;\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n\tleft: 100%;\n\tposition: relative;\n\tcursor: default;\n\ttransform: translate(-5px, -11px);\n\t-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n\t-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n\tbox-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);\n}\n\n#alpha-event {\n\twidth: 236px;\n\theight: 14px;\n\ttransform: translate(-8px, -24px);\n\tcursor: default;\n  touch-action: none;\n}\n\n.alpha-value {\n\tbackground: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 10px;\n}\n\n.colorsquare {\n\tbackground: rgb(255, 0, 0);\n}\n\n#colorsquare-picker {\n\tmargin: 0;\n\tpadding: 0;\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n\tborder: 2px solid #FFFB;\n\tposition: relative;\n\ttransform: translate(-9px, -9px);\n\tleft: 100%;\n}\n\n#colorsquare-event {\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n\ttransform: translate(0, -16px);\n  touch-action: none;\n}\n\n.color-info-box {\n\tmargin: 10px;\n\twidth: 100%;\n\theight: 22px;\n\tvertical-align: middle;\n\tposition: relative;\n}\n\n.color-picked {\n\twidth: 18px;\n\theight: 18px;\n\tborder-radius: 2px;\n\tbackground: rgba(255, 0, 0, 1);\n\tdisplay: inline-block;\n}\n\n.color-picked-bg {\n\tbackground-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);\n\tbackground-size: 10px 10px;\n\tbackground-position: 0 0, 0 5px, 5px -5px, -5px 0px;\n\tborder: 2px solid #FFF;\n\tborder-radius: 4px;\n\twidth: 18px;\n\theight: 18px;\n\tcolor: #fff;\n\tdisplay: inline-block;\n}\n\n.hex-text-block {\n\tdisplay: inline-block;\n\tbackground: white;\n\tborder-radius: 2px;\n\tpadding: 2px;\n\tborder: 1px solid #e3e3e3;\n\theight: 16px;\n\twidth: 54px;\n\tvertical-align: top;\n\ttext-align: center;\n}\n\n.rgb-text-block {\n\tdisplay: inline-block;\n\tbackground: white;\n\tborder-radius: 2px;\n\tpadding: 2px;\n\tmargin: 0 1px;\n\tborder: 1px solid #dcdcdc;\n\theight: 16px;\n\twidth: 23px;\n\tvertical-align: top;\n\ttext-align: center;\n}\n\n.rgb-text-div {\n\tright: 10%;\n\tdisplay: inline-block;\n\tvertical-align: top;\n\tposition: absolute;\n}\n\n.text-label {\n\tposition: relative;\n\ttop: -12px;\n\tfont-family: sans-serif;\n\tfont-size: small;\n  color:#888;\n}\n\n.text {\n\tdisplay: inline;\n\tfont-family: sans-serif;\n\tmargin: 0;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tfont-size-adjust: 0.50;\n\tposition: relative;\n\ttop: -1px;\n  vertical-align: middle;\n  -webkit-touch-callout: all;\n    -webkit-user-select: all;\n     -khtml-user-select: all;\n       -moz-user-select: all;\n        -ms-user-select: all;\n            user-select: all;\n}\n</style>\n\n<div class=\"main-container\">\n\n  <div class=\"colorsquare size\">\n      <div class=\"saturation-gradient\">\n          <div class=\"value-gradient\">\n              <div id=\"colorsquare-picker\"></div>\n              <div id=\"colorsquare-event\" on:mousedown={csDown} on:touchstart={csDownTouch}></div>\n          </div>\n      </div>\n  </div>\n\n  <div class=\"hue-selector\">\n      <div id=\"hue-picker\"></div>\n      <div id=\"hue-event\" on:mousedown={hueDown} on:touchstart={hueDownTouch}></div>\n  </div>\n\n  <div class=\"alpha-selector\">\n      <div class=\"alpha-value\"></div>\n      <div id=\"alpha-picker\"></div>\n      <div id=\"alpha-event\" on:mousedown={alphaDown} on:touchstart={alphaDownTouch}></div>\n  </div>\n\n  <div class=\"color-info-box\">\n    <div class=\"color-picked-bg\">\n      <div class=\"color-picked\"></div>\n    </div>\n\n    <div class=\"hex-text-block\">\n      <p class=\"text\">{hexValue}</p>\n    </div>\n\n    <div class=\"rgb-text-div\">\n      <div class=\"rgb-text-block\">\n        <p class=\"text\">{r}</p>\n        <p class=\"text-label\">R</p>\n      </div>\n\n      <div class=\"rgb-text-block\">\n        <p class=\"text\">{g}</p>\n        <p class=\"text-label\">G</p>\n      </div>\n\n      <div class=\"rgb-text-block\">\n        <p class=\"text\">{b}</p>\n        <p class=\"text-label\">B</p>\n      </div>\n    </div>\n  </div>\n\n</div>\n","<head>\n<script async defer src=\"https://buttons.github.io/buttons.js\"></script>\n</head>\n\n<script>\n\timport {HsvPicker} from 'svelte-color-picker';\n\n\n\tfunction colorCallback(rgb) {\n\t\tlet r = rgb.detail.r;\n\t\tlet g = rgb.detail.g;\n\t\tlet b = rgb.detail.b;\n\t\tlet bw = 255 - ((r + g + b) / 4);\n\n\t\tlet main = document.querySelector(\".main\");\n\t\tmain.style.background = `rgb(${r},${g},${b})`;\n\t\tlet header = document.querySelector(\"h3\");\n\t\theader.style.color = `rgb(${bw},${bw},${bw})`;\n\t\tlet p = document.querySelector(\"p\");\n\t\tp.style.color = `rgb(${bw},${bw},${bw})`;\n\t\tlet body = document.querySelector(\"body\");\n\t\tbody.style.background = `rgb(${bw},${bw},${bw})`;\n\t}\n</script>\n\n<style>\n\n\th3 {\n\t\tpadding:0;\n\t\tmargin:0;\n\t\tfont-family: sans-serif;\n\t}\n\n\tp {\n\t\tmargin:10px 5px;\n\t}\n\n\t.main {\n\t\tborder-radius:20px;\n\t\twidth:600px;\n\t\tpadding:20px;\n\t\tmargin:0 auto;\n\t}\n\t.container{\n\t\tdisplay:inline-block;\n\t\tvertical-align: top;\n\t}\n\n</style>\n\n<div class=\"main\">\n\t<div class=\"container\">\n\t\t<h3>Svelte Color Picker</h3>\n\t\t<p>A color picker component for svelte.</p>\n\t\t<a class=\"github-button\" href=\"https://github.com/qintarp/svelte-color-picker\" data-icon=\"octicon-star\" data-size=\"large\" data-show-count=\"true\" aria-label=\"Star qintarp/svelte-color-picker on GitHub\">Star</a>\n\t</div>\n\t<div class=\"container\">\n\t\t<HsvPicker on:colorChange={colorCallback} startColor={\"#82EAEA\"}/>\n\t</div>\n</div>\n","import App from './App.svelte';\n\nconst app = new App({\n\ttarget: document.body,\n\tprops: {\n\t\tname: 'world'\n\t}\n});\n\nexport default app;"],"names":["noop","run","fn","blank_object","Object","create","run_all","fns","forEach","is_function","thing","safe_not_equal","a","b","append","target","node","appendChild","insert","anchor","insertBefore","detach","parentNode","removeChild","element","name","document","createElement","text","data","createTextNode","space","listen","event","handler","options","addEventListener","removeEventListener","attr","attribute","value","removeAttribute","setAttribute","set_data","current_component","set_current_component","component","onMount","Error","get_current_component","$$","on_mount","push","createEventDispatcher","type","detail","callbacks","e","createEvent","initCustomEvent","custom_event","slice","call","dirty_components","binding_callbacks","render_callbacks","flush_callbacks","resolved_promise","Promise","resolve","update_scheduled","add_render_callback","flush","seen_callbacks","Set","length","shift","update","pop","i","callback","has","add","fragment","dirty","before_update","p","ctx","after_update","outroing","outros","transition_in","block","local","delete","mount_component","on_destroy","m","new_on_destroy","map","filter","destroy_component","detaching","d","make_dirty","key","then","init","instance","create_fragment","not_equal$$1","prop_names","parent_component","props","not_equal","bound","context","Map","ready","hydrate","l","Array","from","childNodes","c","intro","SvelteComponent","[object Object]","this","$destroy","index","indexOf","splice","hexValue","r","g","csDown","csDownTouch","hueDown","hueDownTouch","alphaDown","alphaDownTouch","hsvToRgb","h","s","v","Math","floor","f","q","t","round","startColor","mouseUp","mouseMove","touchMove","killMouseEvents","killTouchEvents","hex","replace","match","alert","hexFiltered","split","parseInt","substring","rperc","gperc","bperc","max","min","diff","pr","hnew","snew","vnew","hueChange","rgbToHSV","csPicker","querySelector","xPercentage","yPercentage","style","top","left","updateCsPicker","huePicker","updateHuePicker","setStartColor","Number","prototype","mod","n","dispatch","tracked","picker","mouseX","clientX","mouseY","clientY","trackedPos","getBoundingClientRect","id","x","y","toFixed","colorChange","touches","currentTarget","offsetX","offsetY","rect","targetTouches","rgb","background","rHex","toString","gHex","bHex","toUpperCase","RGBAToHex","colorCallback","o","bw","color","body"],"mappings":"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"}


--------------------------------------------------------------------------------
/docs/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/efeskucuk/svelte-color-picker/45f56e2e8477f82007685730933d4da0f2a43681/docs/favicon.png


--------------------------------------------------------------------------------
/docs/global.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 | 	position: relative;
 3 | 	width: 100%;
 4 | 	height: 100%;
 5 | }
 6 | 
 7 | body {
 8 | 	color: #333;
 9 | 	margin: 0;
10 | 	padding: 8px;
11 | 	box-sizing: border-box;
12 | 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 | }
14 | 
15 | a {
16 | 	color: rgb(0,100,200);
17 | 	text-decoration: none;
18 | }
19 | 
20 | a:hover {
21 | 	text-decoration: underline;
22 | }
23 | 
24 | a:visited {
25 | 	color: rgb(0,80,160);
26 | }
27 | 
28 | label {
29 | 	display: block;
30 | }
31 | 
32 | input, button, select, textarea {
33 | 	font-family: inherit;
34 | 	font-size: inherit;
35 | 	padding: 0.4em;
36 | 	margin: 0 0 0.5em 0;
37 | 	box-sizing: border-box;
38 | 	border: 1px solid #ccc;
39 | 	border-radius: 2px;
40 | }
41 | 
42 | input:disabled {
43 | 	color: #ccc;
44 | }
45 | 
46 | input[type="range"] {
47 | 	height: 0;
48 | }
49 | 
50 | button {
51 | 	color: #333;
52 | 	background-color: #f4f4f4;
53 | 	outline: none;
54 | }
55 | 
56 | button:active {
57 | 	background-color: #ddd;
58 | }
59 | 
60 | button:focus {
61 | 	border-color: #666;
62 | }
63 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset='utf8'>
 5 | 	<meta name='viewport' content='width=device-width'>
 6 | 
 7 | 	<title>Svelte app</title>
 8 | 
 9 | 	<link rel='icon' type='image/png' href='/svelte-color-picker/favicon.png'>
10 | 	<link rel='stylesheet' href='/svelte-color-picker/global.css'>
11 | 	<link rel='stylesheet' href='/svelte-color-picker/bundle.css'>
12 | 	<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
13 | </head>
14 | 
15 | <body>
16 | 	<script src='/svelte-color-picker/bundle.js'></script>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-color-picker",
 3 |   "version": "1.0.7",
 4 |   "svelte": "src/index.js",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/qintarp/svelte-color-picker.git"
 8 |   },
 9 |   "homepage": "https://qintarp.github.io/svelte-color-picker",
10 |   "devDependencies": {
11 |     "npm-run-all": "^4.1.5",
12 |     "rollup": "^1.10.1",
13 |     "rollup-plugin-commonjs": "^9.3.4",
14 |     "rollup-plugin-livereload": "^1.0.0",
15 |     "rollup-plugin-node-resolve": "^4.2.3",
16 |     "rollup-plugin-svelte": "^5.0.3",
17 |     "rollup-plugin-terser": "^4.0.4",
18 |     "svelte": "^3.0.0"
19 |   },
20 |   "dependencies": {
21 |     "sirv-cli": "^0.4.4"
22 |   },
23 |   "files": [
24 |     "src"
25 |   ],
26 |   "scripts": {
27 |     "build": "rollup -c",
28 |     "autobuild": "rollup -c -w",
29 |     "dev": "run-p start:dev autobuild",
30 |     "start": "sirv public --single",
31 |     "start:dev": "sirv public --single --dev"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from 'rollup-plugin-svelte';
 2 | import resolve from 'rollup-plugin-node-resolve';
 3 | import commonjs from 'rollup-plugin-commonjs';
 4 | import livereload from 'rollup-plugin-livereload';
 5 | import { terser } from 'rollup-plugin-terser';
 6 | 
 7 | const production = !process.env.ROLLUP_WATCH;
 8 | 
 9 | export default {
10 | 	input: 'src/main.js',
11 | 	output: {
12 | 		sourcemap: true,
13 | 		format: 'iife',
14 | 		name: 'app',
15 | 		file: 'public/bundle.js'
16 | 	},
17 | 	plugins: [
18 | 		svelte({
19 | 			// enable run-time checks when not in production
20 | 			dev: !production,
21 | 			// we'll extract any component CSS out into
22 | 			// a separate file — better for performance
23 | 			css: css => {
24 | 				css.write('public/bundle.css');
25 | 			}
26 | 		}),
27 | 
28 | 		// If you have external dependencies installed from
29 | 		// npm, you'll most likely need these plugins. In
30 | 		// some cases you'll need additional configuration —
31 | 		// consult the documentation for details:
32 | 		// https://github.com/rollup/rollup-plugin-commonjs
33 | 		resolve({ browser: true }),
34 | 		commonjs(),
35 | 
36 | 		// Watch the `public` directory and refresh the
37 | 		// browser on changes when not in production
38 | 		!production && livereload('public'),
39 | 
40 | 		// If we're building for production (npm run build
41 | 		// instead of npm run dev), minify
42 | 		production && terser()
43 | 	],
44 | 	watch: {
45 | 		clearScreen: false
46 | 	}
47 | };
48 | 


--------------------------------------------------------------------------------
/src/HsvPicker.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import {onMount,createEventDispatcher} from 'svelte';
  3 | 
  4 | export let startColor ="#FF0000";
  5 | 
  6 | onMount(() => {
  7 |  document.addEventListener("mouseup", mouseUp);
  8 |  document.addEventListener("touchend", mouseUp);
  9 |  document.addEventListener("mousemove", mouseMove);
 10 |  document.addEventListener("touchmove", touchMove);
 11 |  document.addEventListener("touchstart", killMouseEvents);
 12 |  document.addEventListener("mousedown", killTouchEvents);
 13 |  setStartColor()
 14 | });
 15 | 
 16 | Number.prototype.mod = function(n) {
 17 |     return ((this%n)+n)%n;
 18 | };
 19 | const dispatch = createEventDispatcher();
 20 | let tracked;
 21 | let h = 1;
 22 | let s = 1;
 23 | let v = 1;
 24 | let a = 1;
 25 | let r = 255;
 26 | let g = 0;
 27 | let b = 0;
 28 | let hexValue = '#FF0000';
 29 | 
 30 | 
 31 | function setStartColor() {
 32 |   let hex = startColor.replace('#','');
 33 |   if (hex.length !== 6 && hex.length !== 3 && !hex.match(/([^A-F0-9])/gi)) {
 34 |     alert('Invalid property value (startColor)');
 35 |     return;
 36 |   }
 37 |   let hexFiltered='';
 38 |   if (hex.length === 3)
 39 |     hex.split('').forEach( c => {hexFiltered += c+c;});
 40 |   else
 41 |     hexFiltered=hex;
 42 |   hexValue = hexFiltered;
 43 |   r = parseInt(hexFiltered.substring(0,2), 16);
 44 |   g = parseInt(hexFiltered.substring(2,4), 16);
 45 |   b = parseInt(hexFiltered.substring(4,6), 16);
 46 |   rgbToHSV(r,g,b,true);
 47 |   updateCsPicker();
 48 |   updateHuePicker();
 49 | }
 50 | 
 51 | function removeEventListenerFromElement(elementId, eventName, listenerCallback) {
 52 |   let element = document.querySelector(elementId);
 53 |   if (element) element.removeEventListener(eventName, listenerCallback);
 54 | }
 55 | 
 56 | function killMouseEvents() {
 57 |   removeEventListenerFromElement("#alpha-event", "mousedown", alphaDown);
 58 |   removeEventListenerFromElement("#colorsquare-event", "mousedown", csDown);
 59 |   removeEventListenerFromElement("#hue-event", "mousedown", hueDown);
 60 |   document.removeEventListener("mouseup",mouseUp);
 61 |   document.removeEventListener("mousemove",mouseMove);
 62 |   document.removeEventListener("touchstart",killMouseEvents);
 63 |   document.removeEventListener("mousedown",killTouchEvents);
 64 | }
 65 | 
 66 | function killTouchEvents() {
 67 |   removeEventListenerFromElement("#alpha-event", "touchstart", alphaDownTouch);
 68 |   removeEventListenerFromElement("#colorsquare-event", "touchstart", csDownTouch);
 69 |   removeEventListenerFromElement("#hue-event", "touchstart", hueDownTouch);
 70 |   document.removeEventListener("touchend",mouseUp);
 71 |   document.removeEventListener("touchmove",touchMove);
 72 |   document.removeEventListener("touchstart",killMouseEvents);
 73 |   document.removeEventListener("mousedown",killTouchEvents);
 74 | }
 75 | 
 76 | function updateCsPicker() {
 77 |   let csPicker = document.querySelector("#colorsquare-picker");
 78 |   let xPercentage = s * 100;
 79 |   let yPercentage = (1 - v) * 100;
 80 |   csPicker.style.top = yPercentage + "%";
 81 |   csPicker.style.left = xPercentage + "%";
 82 | }
 83 | 
 84 | function updateHuePicker() {
 85 |   let huePicker = document.querySelector("#hue-picker");
 86 |   let xPercentage = h * 100;
 87 |   huePicker.style.left = xPercentage + "%";
 88 | }
 89 | 
 90 | function colorChangeCallback() {
 91 |   dispatch('colorChange', {
 92 |   			r: r,
 93 |         g: g,
 94 |         b: b,
 95 |         a: a
 96 |   		});
 97 | }
 98 | 
 99 | function mouseMove(event) {
100 |  if (tracked) {
101 |   let mouseX = event.clientX;
102 |   let mouseY = event.clientY;
103 |   let trackedPos = tracked.getBoundingClientRect();
104 |   let xPercentage, yPercentage, picker;
105 |   switch (tracked.id) {
106 |    case "colorsquare-event":
107 |     xPercentage = (mouseX - trackedPos.x) / 240 * 100;
108 |     yPercentage = (mouseY - trackedPos.y) / 160 * 100;
109 |     (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;
110 |     (yPercentage > 100) ? yPercentage = 100: (yPercentage < 0) ? yPercentage = 0 : null;
111 |     picker = document.querySelector("#colorsquare-picker");
112 |     yPercentage = yPercentage.toFixed(2);
113 |     xPercentage = xPercentage.toFixed(2);
114 |     picker.style.top = yPercentage + "%";
115 |     picker.style.left = xPercentage + "%";
116 |     s = xPercentage / 100;
117 |     v = 1 - yPercentage / 100;
118 |     colorChange();
119 |     break;
120 |    case "hue-event":
121 |     xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;
122 |     (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;
123 |     xPercentage = xPercentage.toFixed(2);
124 |     picker = document.querySelector("#hue-picker");
125 |     picker.style.left = xPercentage + "%";
126 |     h = xPercentage / 100;
127 |     hueChange();
128 |     break;
129 |    case "alpha-event":
130 |     xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;
131 |     (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;
132 |     xPercentage = xPercentage.toFixed(2);
133 |     picker = document.querySelector("#alpha-picker");
134 |     picker.style.left = xPercentage + "%";
135 |     a = xPercentage / 100;
136 |     colorChange();
137 |     break;
138 |   }
139 | 
140 |  }
141 | 
142 | }
143 | 
144 | function touchMove(event) {
145 |  if (tracked) {
146 |   let mouseX = event.touches[0].clientX;
147 |   let mouseY = event.touches[0].clientY;
148 |   let trackedPos = tracked.getBoundingClientRect();
149 |   let xPercentage, yPercentage, picker;
150 |   switch (tracked.id) {
151 |    case "colorsquare-event":
152 |     xPercentage = (mouseX - trackedPos.x) / 240 * 100;
153 |     yPercentage = (mouseY - trackedPos.y) / 160 * 100;
154 |     (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;
155 |     (yPercentage > 100) ? yPercentage = 100: (yPercentage < 0) ? yPercentage = 0 : null;
156 |     picker = document.querySelector("#colorsquare-picker");
157 |     yPercentage = yPercentage.toFixed(2);
158 |     xPercentage = xPercentage.toFixed(2);
159 |     picker.style.top = yPercentage + "%";
160 |     picker.style.left = xPercentage + "%";
161 |     s = xPercentage / 100;
162 |     v = 1 - yPercentage / 100;
163 |     colorChange();
164 |     break;
165 |    case "hue-event":
166 |     xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;
167 |     (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;
168 |     xPercentage = xPercentage.toFixed(2);
169 |     picker = document.querySelector("#hue-picker");
170 |     picker.style.left = xPercentage + "%";
171 |     h = xPercentage / 100;
172 |     hueChange();
173 |     break;
174 |    case "alpha-event":
175 |     xPercentage = (mouseX - 10 - trackedPos.x) / 220 * 100;
176 |     (xPercentage > 100) ? xPercentage = 100: (xPercentage < 0) ? xPercentage = 0 : null;
177 |     xPercentage = xPercentage.toFixed(2);
178 |     picker = document.querySelector("#alpha-picker");
179 |     picker.style.left = xPercentage + "%";
180 |     a = xPercentage / 100;
181 |     colorChange();
182 |     break;
183 |   }
184 | 
185 |  }
186 | 
187 | }
188 | 
189 | function csDown(event) {
190 |  tracked = event.currentTarget;
191 |  let xPercentage = ((event.offsetX + 1) / 240) * 100;
192 |  let yPercentage = ((event.offsetY + 1) / 160) * 100;
193 |  yPercentage = yPercentage.toFixed(2);
194 |  xPercentage = xPercentage.toFixed(2)
195 |  let picker = document.querySelector("#colorsquare-picker");
196 |  picker.style.top = yPercentage + "%";
197 |  picker.style.left = xPercentage + "%";
198 |  s = xPercentage / 100;
199 |  v = 1 - yPercentage / 100;
200 |  colorChange();
201 | }
202 | 
203 | function csDownTouch(event) {
204 |  tracked = event.currentTarget;
205 |  let rect = event.target.getBoundingClientRect();
206 |  let offsetX = event.targetTouches[0].clientX - rect.left;
207 |  let offsetY = event.targetTouches[0].clientY - rect.top;
208 |  let xPercentage = ((offsetX + 1) / 240) * 100;
209 |  let yPercentage = ((offsetY + 1) / 160) * 100;
210 |  yPercentage = yPercentage.toFixed(2);
211 |  xPercentage = xPercentage.toFixed(2)
212 |  let picker = document.querySelector("#colorsquare-picker");
213 |  picker.style.top = yPercentage + "%";
214 |  picker.style.left = xPercentage + "%";
215 |  s = xPercentage / 100;
216 |  v = 1 - yPercentage / 100;
217 |  colorChange();
218 | }
219 | 
220 | function mouseUp(event) {
221 |  tracked = null;
222 | }
223 | 
224 | function hueDown(event) {
225 |  tracked = event.currentTarget;
226 |  let xPercentage = ((event.offsetX - 9) / 220) * 100;
227 |  xPercentage = xPercentage.toFixed(2);
228 |  let picker = document.querySelector("#hue-picker");
229 |  picker.style.left = xPercentage + "%";
230 |  h = xPercentage / 100;
231 |  hueChange();
232 | }
233 | 
234 | function hueDownTouch(event) {
235 |  tracked = event.currentTarget;
236 |  let rect = event.target.getBoundingClientRect();
237 |  let offsetX = event.targetTouches[0].clientX - rect.left;
238 |  let xPercentage = ((offsetX - 9) / 220) * 100;
239 |  xPercentage = xPercentage.toFixed(2);
240 |  let picker = document.querySelector("#hue-picker");
241 |  picker.style.left = xPercentage + "%";
242 |  h = xPercentage / 100;
243 |  hueChange();
244 | }
245 | 
246 | function hueChange() {
247 |  let rgb = hsvToRgb(h, 1, 1)
248 |  let colorsquare = document.querySelector(".colorsquare")
249 |  colorsquare.style.background = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},1)`;
250 |  colorChange();
251 | }
252 | 
253 | function colorChange() {
254 |  let rgb = hsvToRgb(h, s, v);
255 |  r = rgb[0];
256 |  g = rgb[1];
257 |  b = rgb[2];
258 |  hexValue = RGBAToHex();
259 |  let pickedColor = document.querySelector(".color-picked");
260 |  pickedColor.style.background = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`;
261 |  colorChangeCallback();
262 | }
263 | 
264 | function alphaDown(event) {
265 |  tracked = event.currentTarget;
266 |  let xPercentage = ((event.offsetX - 9) / 220) * 100;
267 |  xPercentage = xPercentage.toFixed(2);
268 |  let picker = document.querySelector("#alpha-picker");
269 |  picker.style.left = xPercentage + "%";
270 |  a = xPercentage / 100;
271 |  colorChange();
272 | }
273 | 
274 | function alphaDownTouch(event) {
275 |  tracked = event.currentTarget;
276 |  let rect = event.target.getBoundingClientRect();
277 |  let offsetX = event.targetTouches[0].clientX - rect.left;
278 |  let xPercentage = ((offsetX - 9) / 220) * 100;
279 |  xPercentage = xPercentage.toFixed(2);
280 |  let picker = document.querySelector("#alpha-picker");
281 |  picker.style.left = xPercentage + "%";
282 |  a = xPercentage / 100;
283 |  colorChange();
284 | }
285 | 
286 | //Math algorithms
287 | function hsvToRgb(h, s, v) {
288 |  var r, g, b;
289 | 
290 |  var i = Math.floor(h * 6);
291 |  var f = h * 6 - i;
292 |  var p = v * (1 - s);
293 |  var q = v * (1 - f * s);
294 |  var t = v * (1 - (1 - f) * s);
295 | 
296 |  switch (i % 6) {
297 |   case 0:
298 |    r = v, g = t, b = p;
299 |    break;
300 |   case 1:
301 |    r = q, g = v, b = p;
302 |    break;
303 |   case 2:
304 |    r = p, g = v, b = t;
305 |    break;
306 |   case 3:
307 |    r = p, g = q, b = v;
308 |    break;
309 |   case 4:
310 |    r = t, g = p, b = v;
311 |    break;
312 |   case 5:
313 |    r = v, g = p, b = q;
314 |    break;
315 |  }
316 | 
317 |  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
318 | }
319 | 
320 | function RGBAToHex() {
321 |  let rHex = r.toString(16);
322 |  let gHex = g.toString(16);
323 |  let bHex = b.toString(16);
324 | 
325 |  if (rHex.length == 1)
326 |   rHex = "0" + rHex;
327 |  if (gHex.length == 1)
328 |   gHex = "0" + gHex;
329 |  if (bHex.length == 1)
330 |   bHex = "0" + bHex;
331 | 
332 | 
333 |  return ("#" + rHex + gHex + bHex).toUpperCase();
334 | }
335 | 
336 | function rgbToHSV(r, g, b, update) {
337 |     let rperc, gperc, bperc,max,min,diff,pr,hnew,snew,vnew;
338 |     rperc = r / 255;
339 |     gperc = g / 255;
340 |     bperc = b / 255;
341 |     max = Math.max(rperc, gperc, bperc);
342 |     min = Math.min(rperc, gperc, bperc);
343 |     diff = max - min;
344 | 
345 |     vnew = max;
346 |     (vnew == 0) ? snew = 0 : snew = diff / max ;
347 | 
348 |     for (let i=0;i<3;i++) {
349 |       if ([rperc,gperc,bperc][i] === max) {
350 |         pr=i;
351 |         break;
352 |       }
353 |     }
354 |     if (diff==0) {
355 |       hnew = 0;
356 |       if (update) {
357 |         h=hnew;
358 |         s=snew;
359 |         v=vnew;
360 |         hueChange();
361 |         return;
362 |       }
363 |       else {
364 |         return {h:hnew,s:snew,v:vnew};
365 |       }
366 |     }
367 |     else {
368 |       switch (pr) {
369 |         case 0:
370 |           hnew=60*(((gperc-bperc)/diff)%6)/360
371 |           break;
372 |         case 1:
373 |           hnew=60*(((bperc-rperc)/diff)+2)/360
374 |           break;
375 |         case 2:
376 |           hnew=60*(((rperc-gperc)/diff)+4)/360
377 |           break;
378 |       }
379 |       if (hnew < 0) hnew+=6;
380 |     }
381 | 
382 |     if (update) {
383 |       h=hnew;
384 |       s=snew;
385 |       v=vnew;
386 |       hueChange();
387 |     }
388 |     else {
389 |       return {h:hnew,s:snew,v:vnew};
390 |     }
391 | }
392 | </script>
393 | 
394 | <style>
395 | .main-container {
396 | 	width: 240px;
397 | 	height: 265px;
398 | 	background: #f2f2f2;
399 | 	border-radius: 1px;
400 | 	-webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);
401 | 	-moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);
402 | 	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);
403 |   -webkit-touch-callout: none;
404 |     -webkit-user-select: none;
405 |      -khtml-user-select: none;
406 |        -moz-user-select: none;
407 |         -ms-user-select: none;
408 |             user-select: none;
409 | }
410 | 
411 | .saturation-gradient {
412 | 	background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
413 | 	width: 240px;
414 | 	height: 160px;
415 | }
416 | 
417 | .value-gradient {
418 | 	background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
419 | 	overflow: hidden;
420 | 	width: 240px;
421 | 	height: 160px;
422 | }
423 | 
424 | .hue-selector {
425 | 	background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
426 | 	margin: 15px 10px 10px 10px;
427 | 	border-radius: 10px;
428 | 	height: 10px;
429 | }
430 | 
431 | #hue-picker {
432 | 	background: #FFF;
433 | 	width: 12px;
434 | 	height: 12px;
435 | 	border-radius: 50%;
436 | 	left: 0%;
437 | 	position: relative;
438 | 	cursor: default;
439 | 	transform: translate(-5px, -1px);
440 | 	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);
441 | 	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);
442 | 	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);
443 | }
444 | 
445 | #hue-event {
446 | 	width: 236px;
447 | 	height: 14px;
448 | 	transform: translate(-8px, -14px);
449 | 	cursor: default;
450 |   touch-action: none;
451 | }
452 | 
453 | .alpha-selector {
454 | 	background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
455 | 	background-size: 10px 10px;
456 | 	background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
457 | 	margin: 10px 10px;
458 | 	border-radius: 10px;
459 | 	height: 10px;
460 | 	position: relative;
461 | }
462 | 
463 | #alpha-picker {
464 | 	background: #FFF;
465 | 	width: 12px;
466 | 	height: 12px;
467 | 	border-radius: 50%;
468 | 	left: 100%;
469 | 	position: relative;
470 | 	cursor: default;
471 | 	transform: translate(-5px, -11px);
472 | 	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);
473 | 	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);
474 | 	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);
475 | }
476 | 
477 | #alpha-event {
478 | 	width: 236px;
479 | 	height: 14px;
480 | 	transform: translate(-8px, -24px);
481 | 	cursor: default;
482 |   touch-action: none;
483 | }
484 | 
485 | .alpha-value {
486 | 	background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
487 | 	width: 100%;
488 | 	height: 100%;
489 | 	border-radius: 10px;
490 | }
491 | 
492 | .colorsquare {
493 | 	background: rgb(255, 0, 0);
494 | }
495 | 
496 | #colorsquare-picker {
497 | 	margin: 0;
498 | 	padding: 0;
499 | 	width: 12px;
500 | 	height: 12px;
501 | 	border-radius: 50%;
502 | 	border: 2px solid #FFFB;
503 | 	position: relative;
504 | 	transform: translate(-9px, -9px);
505 | 	left: 100%;
506 | }
507 | 
508 | #colorsquare-event {
509 | 	width: 100%;
510 | 	height: 100%;
511 | 	position: relative;
512 | 	transform: translate(0, -16px);
513 |   touch-action: none;
514 | }
515 | 
516 | .color-info-box {
517 | 	margin: 10px;
518 | 	width: 100%;
519 | 	height: 22px;
520 | 	vertical-align: middle;
521 | 	position: relative;
522 | }
523 | 
524 | .color-picked {
525 | 	width: 18px;
526 | 	height: 18px;
527 | 	border-radius: 2px;
528 | 	background: rgba(255, 0, 0, 1);
529 | 	display: inline-block;
530 | }
531 | 
532 | .color-picked-bg {
533 | 	background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
534 | 	background-size: 10px 10px;
535 | 	background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
536 | 	border: 2px solid #FFF;
537 | 	border-radius: 4px;
538 | 	width: 18px;
539 | 	height: 18px;
540 | 	color: #fff;
541 | 	display: inline-block;
542 | }
543 | 
544 | .hex-text-block {
545 | 	display: inline-block;
546 | 	background: white;
547 | 	border-radius: 2px;
548 | 	padding: 2px;
549 | 	border: 1px solid #e3e3e3;
550 | 	height: 16px;
551 | 	width: 54px;
552 | 	vertical-align: top;
553 | 	text-align: center;
554 | }
555 | 
556 | .rgb-text-block {
557 | 	display: inline-block;
558 | 	background: white;
559 | 	border-radius: 2px;
560 | 	padding: 2px;
561 | 	margin: 0 1px;
562 | 	border: 1px solid #dcdcdc;
563 | 	height: 16px;
564 | 	width: 23px;
565 | 	vertical-align: top;
566 | 	text-align: center;
567 | }
568 | 
569 | .rgb-text-div {
570 | 	right: 10%;
571 | 	display: inline-block;
572 | 	vertical-align: top;
573 | 	position: absolute;
574 | }
575 | 
576 | .text-label {
577 | 	position: relative;
578 | 	top: -12px;
579 | 	font-family: sans-serif;
580 | 	font-size: small;
581 |   color:#888;
582 | }
583 | 
584 | .text {
585 | 	display: inline;
586 | 	font-family: sans-serif;
587 | 	margin: 0;
588 | 	display: inline-block;
589 | 	font-size: 12px;
590 | 	font-size-adjust: 0.50;
591 | 	position: relative;
592 | 	top: -1px;
593 |   vertical-align: middle;
594 |   -webkit-touch-callout: all;
595 |     -webkit-user-select: all;
596 |      -khtml-user-select: all;
597 |        -moz-user-select: all;
598 |         -ms-user-select: all;
599 |             user-select: all;
600 | }
601 | </style>
602 | 
603 | <div class="main-container">
604 | 
605 |   <div class="colorsquare size">
606 |       <div class="saturation-gradient">
607 |           <div class="value-gradient">
608 |               <div id="colorsquare-picker"></div>
609 |               <div id="colorsquare-event" on:mousedown={csDown} on:touchstart={csDownTouch}></div>
610 |           </div>
611 |       </div>
612 |   </div>
613 | 
614 |   <div class="hue-selector">
615 |       <div id="hue-picker"></div>
616 |       <div id="hue-event" on:mousedown={hueDown} on:touchstart={hueDownTouch}></div>
617 |   </div>
618 | 
619 |   <div class="alpha-selector">
620 |       <div class="alpha-value"></div>
621 |       <div id="alpha-picker"></div>
622 |       <div id="alpha-event" on:mousedown={alphaDown} on:touchstart={alphaDownTouch}></div>
623 |   </div>
624 | 
625 |   <div class="color-info-box">
626 |     <div class="color-picked-bg">
627 |       <div class="color-picked"></div>
628 |     </div>
629 | 
630 |     <div class="hex-text-block">
631 |       <p class="text">{hexValue}</p>
632 |     </div>
633 | 
634 |     <div class="rgb-text-div">
635 |       <div class="rgb-text-block">
636 |         <p class="text">{r}</p>
637 |         <p class="text-label">R</p>
638 |       </div>
639 | 
640 |       <div class="rgb-text-block">
641 |         <p class="text">{g}</p>
642 |         <p class="text-label">G</p>
643 |       </div>
644 | 
645 |       <div class="rgb-text-block">
646 |         <p class="text">{b}</p>
647 |         <p class="text-label">B</p>
648 |       </div>
649 |     </div>
650 |   </div>
651 | 
652 | </div>
653 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import HsvPicker from './HsvPicker.svelte'
2 | 
3 | 
4 | export {
5 |   HsvPicker
6 | }
7 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import App from './App.svelte';
 2 | 
 3 | const app = new App({
 4 | 	target: document.body,
 5 | 	props: {
 6 | 		name: 'world'
 7 | 	}
 8 | });
 9 | 
10 | export default app;
11 | 


--------------------------------------------------------------------------------