bundle.css.map

{
  "version": 3,
  "file": "bundle.css",
  "sources": [
    "..\\src\\App.svelte",
    "..\\src\\PalettePreview.svelte",
    "..\\src\\Export.svelte",
    "..\\src\\ColorBlindCheck.svelte",
    "..\\node_modules\\fa-svelte\\src\\Icon.html",
    "..\\src\\StepChart.svelte",
    "..\\src\\Card.svelte",
    "..\\src\\ButtonGroup.svelte",
    "..\\src\\ColorList.svelte",
    "..\\src\\Color.svelte"
  ],
  "sourcesContent": [
    "<script>\r\n    import chroma from 'chroma-js';\r\n    import { beforeUpdate, onMount } from 'svelte';\r\n    import Checkbox from './Checkbox.svelte';\r\n    import InputColors from './InputColors.svelte';\r\n    import PalettePreview from './PalettePreview.svelte';\r\n    import Export from './Export.svelte';\r\n    import StepChart from './StepChart.svelte';\r\n    import Card from './Card.svelte';\r\n    import ColorBlindCheck from './ColorBlindCheck.svelte';\r\n    import ButtonGroup from './ButtonGroup.svelte';\r\n\r\n    export let name;\r\n\r\n    let steps = [];\r\n    let bezier = true;\r\n    let correctLightness = true;\r\n\r\n    let colors = '00429d,96ffea,lightyellow'.split(/\\s*,\\s*/).map(c => chroma(c));\r\n    let colors2 = 'ffffe0,ff005e,93003a'.split(/\\s*,\\s*/).map(c => chroma(c));\r\n    let numColors = 9;\r\n    let mode = 'sequential';\r\n    let simulate = 'none';\r\n\r\n    if (window.location.hash) {\r\n        readStateFromHash();\r\n    }\r\n\r\n    $: hash = [\r\n        numColors,\r\n        mode.substr(0,1),\r\n        colors.map(c=>c.hex().substr(1)).join(','),\r\n        colors2.length ? colors2.map(c=>c.hex().substr(1)).join(',') : '',\r\n        correctLightness ? 1:0,\r\n        bezier?1:0\r\n    ].join('|');\r\n\r\n    $: bezierDisabled = mode==='sequential' ? !(colors.length>1&&colors.length<=5) : !(colors2.length>1&&colors2.length<=5 || colors.length>1&&colors.length<=5);\r\n\r\n    const isMac = navigator.platform.toUpperCase().indexOf('MAC') > -1;\r\n\r\n    let _hash = '';\r\n    let _mounted = false;\r\n    let _mode = 'sequential';\r\n\r\n    beforeUpdate(() => {\r\n        if (hash !== _hash) {\r\n            _hash = hash;\r\n            window.location.hash = `#/${hash}`;\r\n        }\r\n        if (mode !== _mode) {\r\n            if (mode === 'diverging' && !colors2.length) {\r\n                colors2 = colors.slice(0).reverse();\r\n            }\r\n            _mode = mode;\r\n        }\r\n    });\r\n\r\n    // onMount(() => {\r\n    //     if (window.location.hash) {\r\n    //         console.log('initial hash', window.location.hash);\r\n    //         readStateFromHash();\r\n    //     }\r\n    //     _mounted = true;\r\n    // })\r\n\r\n    function readStateFromHash() {\r\n        const parts = window.location.hash.substr(2).split('|');\r\n        if (parts.length === 6) {\r\n            setTimeout(() => {\r\n                numColors = +parts[0];\r\n                mode = parts[1] === 's' ? 'sequential' : 'diverging';\r\n                _mode = mode;\r\n                colors = parts[2].split(',').map(c => c && chroma(c));\r\n                colors2 = parts[3] !== '' ? parts[3].split(',').map(c => c && chroma(c)) : [];\r\n                correctLightness = parts[4] === '1';\r\n                bezier = parts[5] === '1';\r\n            })\r\n        } else {\r\n            window.location.hash = '';\r\n        }\r\n    }\r\n\r\n    function hashChange() {\r\n        if (window.location.hash !== `#/${hash}`) {\r\n            // deserialize hash\r\n            readStateFromHash();\r\n        }\r\n    }\r\n</script>\r\n\r\n<style>\r\n    .head {\r\n        margin: 1em 0 1em;\r\n    }\r\n    h1 {\r\n    }\r\n    .warning {\r\n      font-size: 0.8em;\r\n      color: orange;\r\n      font-weight: bold;\r\n      display: block;\r\n    }\r\n    select.custom-select {\r\n        display: inline-block;\r\n        width: auto;\r\n        font-size: inherit;\r\n        padding: 0.4em 1.7em 0.4em 0.4em;\r\n        margin: 0px 0.7ex 5px;\r\n    }\r\n    input[type=number] {\r\n        width: 4em;\r\n        text-align: center;\r\n        margin: 0px 0.7ex 5px;\r\n    }\r\n    .foot {\r\n        margin-bottom: 1em;\r\n    }\r\n    :global(.fa-svelte) {\r\n        vertical-align: sub;\r\n    }\r\n    kbd\r\n    {\r\n        -moz-border-radius:3px;\r\n        -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;\r\n        -webkit-border-radius:3px;\r\n        -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;\r\n        background-color:#f7f7f7;\r\n        border:1px solid #ccc;\r\n        border-radius:3px;\r\n        box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;\r\n        color:#333;\r\n        display:inline-block;\r\n        /*font-family:Arial,Helvetica,sans-serif;*/\r\n        line-height:1.4;\r\n        margin:0 .1em;\r\n        padding:.1em .6em;\r\n        text-shadow:0 1px 0 #fff;\r\n    }\r\n</style>\r\n\r\n<svelte:window on:hashchange={hashChange} />\r\n\r\n<div class=\"container\">\r\n    <div class=\"head\">\r\n        <h1>Chroma.js Color Palette Helper</h1>\r\n        <p>This <a href=\"https://github.com/gka/chroma.js\" target=\"_blank\">chroma.js</a>-powered tool is here to help us  <a target=\"_blank\" href=\"http://vis4.net/blog/posts/mastering-multi-hued-color-scales/\">mastering multi-hued, multi-stops color scales</a>.</p>\r\n    </div>\r\n    <Card step=\"1\" title=\"What kind of palette do you want to create?\">\r\n        <div class=\"row\">\r\n            <div class=\"col-md\">\r\n                Palette type:\r\n                <ButtonGroup options=\"{['sequential', 'diverging']}\" bind:value={mode} />\r\n            </div>\r\n            <div class=\"col-md\">\r\n                Number of colors: <input type=\"number\" min=\"2\" bind:value={numColors} />\r\n            </div>\r\n        </div>\r\n    </Card>\r\n\r\n    <Card step=\"2\" title=\"Select and arrange input colors\">\r\n        <InputColors diverging=\"{mode==='diverging'}\" bind:colors bind:colors2 />\r\n    </Card>\r\n\r\n    <Card step=\"3\" title=\"Check and configure the resulting palette\">\r\n        <div class=\"row\" style=\"margin-bottom: 10px\">\r\n            <div class=\"col-md\">\r\n                <Checkbox bind:value={correctLightness} label=\"correct lightness\" />\r\n                <Checkbox bind:value={bezier} label=\"bezier interpolation\" disabled={bezierDisabled} />\r\n                {#if bezierDisabled}\r\n                <span class=\"warning\">* Bezier interpolation requires 2-5 input colors</span>\r\n                {/if}\r\n            </div>\r\n            <div class=\"col-md\">\r\n                <ColorBlindCheck bind:colors={steps} bind:active={simulate} />\r\n            </div>\r\n        </div>\r\n        <PalettePreview\r\n            bind:steps\r\n            bind:correctLightness\r\n            bind:bezier\r\n            bind:colors\r\n            bind:colors2\r\n            diverging=\"{mode === 'diverging'}\"\r\n            simulate={simulate}\r\n            bind:numColors />\r\n        <div class=\"row\">\r\n            <div class=\"col-md\">\r\n                <StepChart title=\"lightness\" steps={steps} mode={0} />\r\n            </div>\r\n            <div class=\"col-md\">\r\n                <StepChart title=\"saturation\" steps={steps} mode={1} />\r\n            </div>\r\n            <div class=\"col-md\">\r\n                <StepChart title=\"hue\" steps={steps} mode={2} />\r\n            </div>\r\n        </div>\r\n    </Card>\r\n\r\n    <Card step=\"4\" title=\"Export the color codes in various formats\">\r\n        <p>You can also save your palette for later by bookmarking <a href=\"#/{hash}\">this page</a> using <kbd>{isMac ? 'cmd' : 'ctrl'}</kbd>+<kbd>d</kbd>.</p>\r\n        <Export steps={steps} />\r\n    </Card>\r\n    <div class=\"foot\">\r\n        <hr>\r\n        <p>Created by <a href=\"https://vis4.net/blog\">Gregor Aisch</a> for the sake of better\r\n        use of colors in maps and data visualizations. Feel free to <a href=\"https://github.com/gka/palettes\">fork on Github</a>.</p>\r\n    </div>\r\n</div>\r\n",
    "<script>\r\n    import chroma from 'chroma-js';\r\n    import { colorBlindSim } from'./colorBlind';\r\n    import _range from 'lodash-es/range';\r\n\r\n    export let colors = ['red']\r\n    export let colors2 = [];\r\n    export let numColors = 7;\r\n    export let diverging = false;\r\n    export let bezier;\r\n    export let correctLightness;\r\n\r\n    export let simulate = 'none';\r\n    export let steps;\r\n\r\n    $: even = numColors % 2 === 0;\r\n\r\n    $: numColorsLeft = diverging ? Math.ceil(numColors/2) + (even?1:0) : numColors;\r\n    $: numColorsRight = diverging ? Math.ceil(numColors/2) + (even?1:0) : 0;\r\n\r\n    $: genColors = colors.length !== 1 ? colors : autoColors(colors[0], numColorsLeft);\r\n    $: genColors2 = colors2.length !== 1 ? colors2 : autoColors(colors2[0], numColorsRight, true);\r\n\r\n    $: stepsLeft = colors.length ? chroma.scale(bezier && genColors.length>1 && genColors.length<=5 ? chroma.bezier(genColors) : genColors)\r\n        .correctLightness(correctLightness)\r\n        .colors(numColorsLeft) : [];\r\n\r\n    $: stepsRight = diverging && colors2.length ? chroma.scale(bezier&& genColors2.length>1 &&genColors2.length<=5 ? chroma.bezier(genColors2) : genColors2)\r\n        .correctLightness(correctLightness)\r\n        .colors(numColorsRight) : [];\r\n\r\n    $: steps = (even && diverging ? stepsLeft.slice(0, stepsLeft.length-1) : stepsLeft).concat(stepsRight.slice(1));\r\n\r\n    function autoGradient(color, numColors) {\r\n        const lab = chroma(color).lab();\r\n        const lRange = 100 * (0.95 - 1/numColors);\r\n        const lStep = lRange / (numColors-1);\r\n        let lStart = (100-lRange)*0.5;\r\n        const range = _range(lStart, lStart+numColors*lStep, lStep);\r\n        let offset = 0;\r\n        if (!diverging) {\r\n            offset = 9999;\r\n            for (let i=0; i < numColors; i++) {\r\n                let diff = lab[0] - range[i];\r\n                if (Math.abs(diff) < Math.abs(offset)) {\r\n                    offset = diff;\r\n                }\r\n            }\r\n        }\r\n        return range.map(l => chroma.lab([l + offset, lab[1], lab[2]]));\r\n    }\r\n\r\n    function autoColors(color, numColors, reverse=false) {\r\n        if (diverging) {\r\n            const colors = autoGradient(color, 3).concat(chroma('#f5f5f5'));\r\n            if (reverse) colors.reverse();\r\n            return colors;\r\n        } else {\r\n            return autoGradient(color, numColors);\r\n        }\r\n    }\r\n</script>\r\n\r\n<style>\r\n    .palette {\r\n        background: #eee;\r\n        padding: 10px;\r\n        display: flex;\r\n        height: 100px;\r\n    }\r\n    .step {\r\n       height: 100%;\r\n       display: block;\r\n       flex-grow: 1;\r\n    }\r\n</style>\r\n\r\n<div class=\"palette\">\r\n    {#each steps as step}\r\n    <div class=\"step\" style=\"background: {simulate === 'none' ? step : colorBlindSim(step, simulate)}\"></div>\r\n    {/each}\r\n</div>\r\n",
    "<script>\r\n    export let steps = [];\r\n</script>\r\n\r\n<style>\r\n    pre {\r\n        padding: 1ex;\r\n        background: #eee;\r\n        white-space: pre-wrap;\r\n    }\r\n</style>\r\n\r\n<pre>{steps}</pre>\r\n<pre>'{steps.join(`', '`)}'</pre>\r\n<pre>['{steps.join(`', '`)}']</pre>\r\n<pre>{steps.join('\\n')}</pre>\r\n<pre>[{steps.map(c => '0x'+c.substr(1)).join(`,`)}]</pre>\r\n<pre>\r\nimport &#123; scaleThreshold &#125; from 'd3-scale';\r\n\r\nfunction palette(min, max) &#123;\r\n    const d = (max-min)/{steps.length};\r\n    return = scaleThreshold()\r\n        .range(['{steps.join(`', '`)}'])\r\n        .domain([{steps.slice(1).map((v,i) => `min + d*${i+1}`)}]);\r\n&#125;\r\n</pre>",
    "<script>\r\n    import Icon from 'fa-svelte';\r\n    import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';\r\n    import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';\r\n    import { colorBlindCheck } from'./colorBlind';\r\n\r\n    $: result = colorBlindCheck(colors);\r\n\r\n    export let colors = [];\r\n    export let result = [];\r\n\r\n    export let active = 'none';\r\n\r\n    const types = ['none', 'deuteranopia', 'protanopia', 'tritanopia'];\r\n</script>\r\n\r\n<style>\r\n\r\n@media (min-width: 720px) {\r\n    .colorblind-sim {\r\n        text-align: right;\r\n        position: absolute;\r\n        right: 20px;\r\n        top: -46px;\r\n    }\r\n    .res {\r\n        text-align: right;\r\n    }\r\n}\r\n.text-muted {\r\n    padding-right: 1em;\r\n    font-size: 0.85rem;\r\n    display: inline-block;\r\n    padding-top: 6px;\r\n}\r\n.c1 {\r\n    margin-top: -15px;\r\n}\r\n\r\n</style>\r\n\r\n\r\n<div class=\"colorblind-sim\">\r\n    {#if result.length}\r\n    <p class=\"res text-danger\"><Icon icon={faExclamationTriangle} /> This palette is not colorblind-safe.</p>\r\n    {:else}\r\n    <p class=\"res text-secondary\"><Icon icon={faCheck} /> This palette is colorblind-safe.</p>\r\n    {/if}\r\n    <div class=\"c1\">\r\n        <div class=\"text-muted\">simulate:</div>\r\n        <div class=\"btn-group btn-group-toggle\" data-toggle=\"buttons\">\r\n            {#each types as type}\r\n            <label class=\"btn btn-sm btn-outline-secondary\"\r\n                class:btn-outline-danger=\"{result.indexOf(type) > -1}\"\r\n                class:active={active===type}>\r\n                <input bind:group={active} value=\"{type}\" type=\"radio\" name=\"options\" id=\"option1\" autocomplete=\"off\" checked={active===type}>{type === 'none' ? 'normal' : type.substr(0,4)+'.'}\r\n            </label>\r\n            {/each}\r\n        </div>\r\n    </div>\r\n</div>\r\n",
    "<svg\r\n  aria-hidden=\"true\"\r\n  class=\"{classes}\"\r\n  role=\"img\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  viewBox=\"{viewBox}\"\r\n>\r\n  <path fill=\"currentColor\" d=\"{path}\" />\r\n</svg>\r\n<script>\r\n  export let icon;\r\n\r\n  let path = [];\r\n  let classes = \"\";\r\n  let viewBox = \"\";\r\n\r\n  $: viewBox = \"0 0 \" + icon.icon[0] + \" \" + icon.icon[1];\r\n\r\n  $: classes = \"fa-svelte \" + ($$props.class ? $$props.class : \"\");\r\n\r\n  $: path = icon.icon[4];\r\n</script>\r\n\r\n<style>\r\n  .fa-svelte {\r\n    width: 1em;\r\n    height: 1em;\r\n    overflow: visible;\r\n    display: inline-block;\r\n  }\r\n</style>",
    "<script>\r\n    import { scaleLinear } from 'd3-scale';\r\n    import { extent } from 'd3-array';\r\n    import { line, curveStepAfter } from 'd3-shape';\r\n    import chroma from 'chroma-js';\r\n\r\n    let div;\r\n    let width;\r\n    $: height = width * 0.7;\r\n    export let title = '';\r\n\r\n    const padding = {\r\n        left: 30,\r\n        right: 10,\r\n        top: 20,\r\n        bottom: 20\r\n    };\r\n\r\n    export let steps = [];\r\n    export let mode = 0;\r\n\r\n    $: values = steps.map(c => chroma(c).lch()[mode]).map(mode === 2 ? h=>h: d=>d);\r\n    $: values2 = values.concat(values[values.length-1]);\r\n\r\n    $: xScale = scaleLinear()\r\n        .domain([0, steps.length])\r\n        .range([padding.left, width - padding.right]);\r\n\r\n    $: minDomain = mode === 1 ? 80 : 50;\r\n    let yDomain;\r\n    $: {\r\n        yDomain = extent(values);\r\n        let diff = Math.abs(yDomain[1] - yDomain[0]);\r\n        if (diff < minDomain) {\r\n            yDomain[0] -= (minDomain-diff)*0.5;\r\n            yDomain[1] += (minDomain-diff)*0.5;\r\n            yDomain = yDomain;\r\n        }\r\n    }\r\n\r\n    $: yScale = scaleLinear()\r\n        .domain(yDomain)\r\n        .nice()\r\n        .rangeRound([height - padding.bottom, padding.top]);\r\n\r\n    $: y0 = yScale.domain()[0];\r\n    $: y1 = yScale.domain()[1];\r\n\r\n    $: lineGen = line().x((v,i) => xScale(i)).y(yScale).curve(curveStepAfter);\r\n    $: path = lineGen(values2);\r\n\r\n\r\n</script>\r\n\r\n<style>\r\n    h4 {\r\n        font-size: 1rem;\r\n    }\r\n    svg {\r\n        width: 100%;\r\n    }\r\n    path {\r\n        fill: none;\r\n        stroke: black;\r\n        stroke-width: 2;\r\n    }\r\n    text {\r\n        dominant-baseline: central;\r\n        font-size: 13px;\r\n        text-anchor: end;\r\n    }\r\n    line {\r\n        fill: none;\r\n        stroke: #ddd;\r\n    }\r\n    line.direct {\r\n        stroke-width: 2;\r\n        stroke: #ccc;\r\n        stroke-dasharray: 6,4;\r\n    }\r\n</style>\r\n\r\n<div bind:clientWidth={width} style=\"margin-top: 1em\">\r\n    <h4>{title}</h4>\r\n    <svg height={height || 50}>\r\n        {#if values.length}\r\n            {#each yScale.ticks(6) as y}\r\n            <text x=\"{padding.left-5}\" y=\"{yScale(y)}\">{y}</text>\r\n            <line x1=\"{padding.left}\" x2=\"{width-padding.right}\" transform=\"translate(0,{yScale(y)})\" />\r\n            {/each}\r\n            <line\r\n                class=\"direct\"\r\n                x1=\"{padding.left}\"\r\n                x2=\"{width-padding.right}\"\r\n                y1=\"{yScale(values[0])}\"\r\n                y2=\"{yScale(values[values.length-1])}\" />\r\n            <path d={path} />\r\n        {/if}\r\n    </svg>\r\n</div>",
    "<script>\r\n\texport let title = '';\r\n\texport let step = '';\r\n\texport let noBorderTop = false;\r\n</script>\r\n\r\n<style>\r\n\t.card {\r\n\t\tmargin-bottom: 20px;\r\n\t}\r\n\tspan.step {\r\n\t\tdisplay: inline-block;\r\n\t\tbackground: #f3f3f3;\r\n\t\tborder: 1px solid #ddd;\r\n\t\tcolor: #bbb;\r\n\t\twidth: 1.5em;\r\n\t\theight: 1.5em;\r\n\t\tline-height: 1.5em;\r\n\t\ttext-align: center;\r\n\t\tmargin-right: 1ex;\r\n\t\tfont-size: 1.35rem;\r\n\t}\r\n</style>\r\n\r\n<div class:rounded-0={noBorderTop} class:border-top-0={noBorderTop} class=\"card shadow-sm\">\r\n\t<div class=\"card-body\">\r\n\t\t<h5 class=\"card-title\">{#if step}<span class=\"step rounded-circle\">{step}</span>{/if}{title}</h5>\r\n\t\t<slot />\r\n\t</div>\r\n</div>\r\n",
    "<script>\r\n\texport let options = [];\r\n\t$: options2 = options.map(s => typeof s === 'string' ? {value:s, title:s} : s);\r\n\texport let value;\r\n\texport let label = '';\r\n\tconst id = Math.round(Math.random()*1e7).toString(36);\r\n\r\n</script>\r\n\r\n<style>\r\n\t.btn-group {\r\n\t\tposition: relative;\r\n\t\ttop: -4px;\r\n\t\tpadding-left:1ex;\r\n\t\tpadding-right:1ex;\r\n\t}\r\n</style>\r\n\r\n<div class=\"btn-group btn-group-toggle\" data-toggle=\"buttons\">\r\n    {#each options2 as option}\r\n    <label class=\"btn btn-outline-secondary\"\r\n        class:active={value===option.value}>\r\n        <input bind:group={value} value=\"{option.value}\" type=\"radio\" name=\"options\" id=\"{id}\" autocomplete=\"off\" checked={value===option.value}>{option.title}\r\n    </label>\r\n    {/each}\r\n</div>",
    "<script>\r\n    import chroma from 'chroma-js';\r\n    import Color from './Color.svelte';\r\n\r\n    export let colors;\r\n    let edit = false;\r\n    let input;\r\n\r\n    let colorString = '';\r\n\r\n    function enterEditMode() {\r\n        edit = true;\r\n        colorString = colors.map(c => c.name()).join(', ');\r\n        input.focus();\r\n    }\r\n\r\n    function exitEditMode() {\r\n        edit = false;\r\n        colors = colorString\r\n            .split(/\\s*[,|\\s]\\s*/)\r\n            .filter(c => chroma.valid(c))\r\n            .map(c => chroma(c));\r\n    }\r\n\r\n    function dragstart(event, index) {\r\n        event.dataTransfer.setData('index', index);\r\n    }\r\n\r\n    function dragover(event) {\r\n        event.dataTransfer.dropEffect = 'move';\r\n    }\r\n\r\n    function drop(event) {\r\n        const index = event.dataTransfer.getData('index');\r\n        const newIndex = findIndex(event.target);\r\n        const col = colors.splice(index, 1, null)[0];\r\n        colors.splice(newIndex, 0, col);\r\n        colors = colors.filter(c => c !== null);\r\n    }\r\n\r\n    function findIndex(el) {\r\n        const siblings = el.parentNode.children;\r\n        for (let i=0; i<siblings.length; i++) {\r\n            if (siblings[i] === el) return i;\r\n        }\r\n        return -1;\r\n    }\r\n</script>\r\n\r\n<style>\r\n    div.form-control {\r\n        cursor: text;\r\n        height: auto;\r\n    }\r\n    .hidden {\r\n        position: absolute;\r\n        opacity: 0;\r\n        left: -99999px;\r\n    }\r\n    span.inv {\r\n        display: inline-block;\r\n        width: 60px;\r\n        background: white;\r\n        height: 100%;\r\n        vertical-align: bottom;\r\n    }\r\n</style>\r\n\r\n<input class:hidden={!edit} bind:this={input} type=\"text\" class=\"form-control\" bind:value={colorString} on:blur={exitEditMode}>\r\n{#if !edit}\r\n<div\r\n    on:drop|preventDefault=\"{(event) => drop(event)}\"\r\n    on:dragover|preventDefault=\"{(event) => dragover(event)}\"\r\n    class=\"form-control\"\r\n    on:click={enterEditMode}>\r\n    {#each colors as color,i}\r\n    <Color\r\n        bind:value={color}\r\n        on:dragstart=\"{(event) => dragstart(event, i)}\" />\r\n    {/each}\r\n    <span class=\"inv\"></span>\r\n</div>\r\n{/if}",
    "<script>\r\n    import chroma from 'chroma-js';\r\n    import range from 'lodash-es/range';\r\n    export let value = chroma('red');\r\n\r\n    let open = false;\r\n    let dragging = false;\r\n\r\n    function toggleEditOpen() { open = true; }\r\n    function toggleEditClose() { open = false; }\r\n\r\n    let colorName;\r\n\r\n    $: lch = value.lch()\r\n    $: lightness = range(-5,6)\r\n        .map(l => lch[0] + Math.pow(l/8,2)*80*(l<0?-1:1))\r\n        .map(l => chroma.lch(l, lch[1], lch[2]));\r\n    $: saturation = range(-5,6)\r\n        .map(s => Math.max(0, lch[1] + Math.pow(s/5,2)*80*(s<0?-1:1)))\r\n        .map(s => chroma.lch(lch[0], s, lch[2]));\r\n    $: hue = range(-5,6)\r\n        .map(h => lch[2] + Math.pow(h/5,2)*80*(h<0?-1:1))\r\n        .map(h => chroma.lch(lch[0], lch[1], h < 0 ? h + 360 : h > 360 ? h - 360 : h));\r\n</script>\r\n\r\n<style>\r\n    span.badge {\r\n        font-weight: normal;\r\n        font-size: 100%;\r\n        color: #000;\r\n        position: relative;\r\n    }\r\n    .badge + .badge {\r\n        margin-left: 1ex;\r\n\r\n    }\r\n    span.inverted {\r\n        color: white;\r\n    }\r\n    .popover {\r\n        position: absolute;\r\n        top: 30px;\r\n        left: -100px;\r\n        width: 300px;\r\n    }\r\n    .color-row {\r\n        display: flex;\r\n        margin-bottom: 3px;\r\n    }\r\n    span.lbl {\r\n        width: 8.333%\r\n    }\r\n    span.color {\r\n        display: inline-block;\r\n        height: 30px;\r\n        width: 8.333%;\r\n        border-left: 1px solid white;\r\n        border-bottom: 1px solid white;\r\n    }\r\n    span.color:nth-child(7) {\r\n        border: 2px solid black;\r\n        margin-top:-1px;\r\n        margin-right: 0px;\r\n        height: 31px;\r\n    }\r\n    span.color:nth-child(8) {\r\n        border-left: 0;\r\n    }\r\n    span.hex {\r\n        pointer-events: none;\r\n    }\r\n</style>\r\n<span\r\n    on:dragstart\r\n    on:dragstart=\"{(event) => dragging = true}\"\r\n    on:dragend=\"{(event) => dragging = false, open = false}\"\r\n    draggable=\"true\"\r\n    on:mouseenter={toggleEditOpen}\r\n    on:mouseleave={toggleEditClose}\r\n    on:click|stopPropagation=\"{() => false}\"\r\n    class:inverted={value.lab()[0]<50}\r\n    class=\"badge shadow-sm\"\r\n    style=\"background: {value.hex()}\">\r\n    <span class=\"hex\">{value.hex().substr(1)}</span>\r\n    {#if open && !dragging}\r\n    <div style=\"position: absolute;top:0px;left:0;right:0;height: 40px\">\r\n        <div\r\n            class=\"popover fade show bs-popover-bottom\"\r\n            role=\"tooltip\" x-placement=\"bottom\">\r\n            <div class=\"arrow\" style=\"left: 121px;\"></div>\r\n            <h3 class=\"popover-header\"></h3>\r\n            <div class=\"popover-body\">\r\n                <div class=\"color-row\">\r\n                    <span class=\"lbl\">L</span>\r\n                    {#each lightness as l}\r\n                    <span on:click=\"{() => value = l}\" class=\"color\" style=\"background: {l.hex()}\"></span>\r\n                    {/each}\r\n                </div>\r\n                <div class=\"color-row\">\r\n                    <span class=\"lbl\">S</span>\r\n                    {#each saturation as c}\r\n                    <span on:click=\"{() => value = c}\" class=\"color\" style=\"background: {c.hex()}\"></span>\r\n                    {/each}\r\n                </div>\r\n                <div class=\"color-row\">\r\n                    <span class=\"lbl\">H</span>\r\n                    {#each hue as c}\r\n                    <span on:click=\"{() => value = c}\" class=\"color\" style=\"background: {c.hex()}\"></span>\r\n                    {/each}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    {/if}\r\n</span>\r\n\r\n"
  ],
  "names": [],
  "mappings": "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"
}