{"version":3,"file":"vue-hsluv-picker.min.js","sources":["../src/vue-hsluv-picker.js"],"sourcesContent":["/*eslint no-console: \"off\" */\nimport {InitializePicker} from './hsluvpicker';\nexport default {\n    name: 'hsluv-picker',\n    props: {\n        value: {\n            type: String,\n            default: \"#cccccc\",\n        },\n        nodisplay: {\n            type: Boolean,\n            default: false,\n        },\n        displaysize: {\n            type: String,\n            default: 300,\n        },\n        horizontal: {\n            type: Boolean,\n            default: false,\n        }\n    },\n    watch: {\n        value: function(newVal){\n            if(newVal != this.currentcolor){\n                this.$refs.picker.dispatchEvent(new CustomEvent('updatecolor', {detail: newVal}));\n                this.currentcolor = newVal;\n            }\n        }\n    },\n    data() {\n        return {\n            currentcolor: \"\",\n        };\n    },\n    methods: {\n        onColorChange(event) {\n            this.currentcolor = event.detail;\n            this.$emit(\"input\",event.detail);\n        }\n    },\n    mounted(){\n        this.currentcolor=this.value;\n        InitializePicker(this.$refs.picker, this.value);\n    },\n    template: `\n        <div ref=\"picker\" @colorchange=\"onColorChange\" :class=\"'vue-hsluv-picker'+(horizontal?' horizontal':'')\">\n            <div v-if=\"!nodisplay\" class=\"display\">\n                <canvas :height=\"displaysize\" :width=\"displaysize\"></canvas>\n            </div>\n            <table class='picker'>\n                <tr class=\"control-h\">\n                    <td class=\"cell-input\">\n                        <input type=\"number\" min=\"0\" max=\"360\" step=\"any\" class=\"counter counter-hue\" tabindex=\"0\"/>\n                    </td>\n                    <td><div class=\"range-slider\"></div></td>\n                    <td class=\"picker-label\">H</td>\n                </tr>\n                <tr class=\"control-s\">\n                    <td class=\"cell-input\">\n                        <input type=\"number\" step=\"any\" min=\"0\" max=\"100\" class=\"counter counter-saturation\"/>\n                    </td>\n                    <td><div class=\"range-slider\"></div></td>\n                    <td class=\"picker-label\">S</td>\n                </tr>\n                <tr class=\"control-l\">\n                    <td class=\"cell-input\">\n                        <input type=\"number\" step=\"any\" min=\"0\" max=\"100\" class=\"counter counter-lightness\"/>\n                    </td>\n                    <td><div class=\"range-slider\"></div></td>\n                    <td class=\"picker-label\">L</td>\n                </tr>\n                <tr>\n                    <td class=\"cell-input cell-input-hex\">\n                        <input ref=\"input\" class=\"input-hex\" pattern=\"#?[0-9a-fA-F]{6}\"/>\n                    </td>\n                    <td><div class=\"swatch\"></div></td>\n                    <td></td>\n                </tr>\n            </table>\n        </div>\n    </div>\n`,\n};"],"names":["name","props","value","type","String","default","nodisplay","Boolean","displaysize","horizontal","watch","newVal","this","currentcolor","$refs","picker","dispatchEvent","CustomEvent","detail","data","methods","onColorChange","event","$emit","mounted","template"],"mappings":"wMAEe,CACXA,KAAM,eACNC,MAAO,CACHC,MAAO,CACHC,KAAMC,OACNC,QAAS,WAEbC,UAAW,CACPH,KAAMI,QACNF,SAAS,GAEbG,YAAa,CACTL,KAAMC,OACNC,QAAS,KAEbI,WAAY,CACRN,KAAMI,QACNF,SAAS,IAGjBK,MAAO,CACHR,MAAO,SAASS,QACTA,QAAUC,KAAKC,oBACTC,MAAMC,OAAOC,cAAc,IAAIC,YAAY,cAAe,CAACC,OAAQP,eACnEE,aAAeF,UAIhCQ,sBACW,CACHN,aAAc,KAGtBO,QAAS,CACLC,uBAAcC,YACLT,aAAeS,MAAMJ,YACrBK,MAAM,QAAQD,MAAMJ,UAGjCM,wBACSX,aAAaD,KAAKV,wCACNU,KAAKE,MAAMC,OAAQH,KAAKV,QAE7CuB"}