Initial import of Recruitment-HC source code

2026-10-14 11:30:09 +07:00
commit 9107ffb158
@@ -0,0 +1,32 @@
+{
+  "name": "bootstrap-colorpicker",
+  "main": [
+    "dist/css/bootstrap-colorpicker.css",
+    "dist/js/bootstrap-colorpicker.js"
+  ],
+  "dependencies": {
+    "jquery": ">=1.10"
+  },
+  "ignore": [
+    "\\.*",
+    "/index.html",
+    "/package.json",
+    "/composer.json",
+    "/Gruntfile.js",
+    "/.travis.yml",
+    "/travis.sh",
+    "/server.js"
+  ],
+  "homepage": "https://github.com/itsjavi/bootstrap-colorpicker",
+  "version": "2.5.1",
+  "_release": "2.5.1",
+  "_resolution": {
+    "type": "version",
+    "tag": "2.5.1",
+    "commit": "db978b4d8c3436cdaed6e3a1a065f9f47bb686b1"
+  },
+  "_source": "https://github.com/itsjavi/bootstrap-colorpicker.git",
+  "_target": "^2.5.1",
+  "_originalSource": "bootstrap-colorpicker",
+  "_direct": true
+}
@@ -0,0 +1,40 @@
+# Contributing
+
+## Support
+
+The issue tracker is not the place for support requests. If you get stuck with bootstrap-colorpicker, it's very likely
+that the fine folks at [StackOverflow](http://stackoverflow.com/) will be able to help you; simply describe the problem
+you're having and provide them a link to the repo (so they know what code you're using).
+
+
+## Issues
+For feature requests, suggestions or ideas, add `[SUGGESTION]` before the title of the issue, for anything else follow
+the following guidelines.
+
+### Steps to submit an issue
+- Try to reproduce your problem in a separated environment, like in JSFiddle,
+  [here is a template for it](http://jsfiddle.net/itsjavi/0vopxm13/), that you can fork in the same page.
+  It already includes the required JS and CSS files.
+- Before posting your issue, consider adding this information:
+  * Expected behaviour: what should happen?
+  * Actual behaviour: what happens instead?
+  * Your context: Where it happens? In which browser and version (if applicable)?
+  * Plugin version (and/or commit reference).
+  * jQuery version you use and list of all other plugins/scripts you are using with this one and may cause some conflict.
+  * A link to your JSFiddle (or similar tool) demo where you reproduced the problem (if applicable).
+
+## Pull Requests
+
+Patches and new features are welcome!
+
+- Prerequisites: having `node`, `npm`, `bower` and `grunt` installed in your machine.
+- After a fresh clone for your fork, you need to run `npm install && bower install` inside the project's root folder.
+- For checking your changes in the browser you can execute `node serve` and navigate to http://localhost:5000/
+- Before any commit run always `grunt` inside the project's root folder, to update the dist files
+  (never modify them manually).
+- Do not change the plugin coding style.
+- Check that the index.html demos aren't broken (modify if necessary).
+- Test your code at least in Chrome, Firefox and IE >= 10 / Edge.
+- Any new feature should come with updated docs if applicable (a demonstration).
+- Generate the `/dist` files executing `grunt` before your Pull Request.
+- Push to your fork and submit the pull request.
@@ -0,0 +1,13 @@
+Copyright 2012 Stefan Petre
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
@@ -0,0 +1,24 @@
+# Bootstrap Colorpicker 2
+
+Fancy and customizable color picker plugin for Twitter Bootstrap
+
+[![Build Status](https://travis-ci.org/itsjavi/bootstrap-colorpicker.svg?branch=master)](https://travis-ci.org/itsjavi/bootstrap-colorpicker)
+
+## Installation
+For downloading the source code, you have many choices:
+
+- Downloading the [latest source code ZIP file](https://github.com/itsjavi/bootstrap-colorpicker/archive/master.zip)
+- Cloning the source code: `git clone https://github.com/itsjavi/bootstrap-colorpicker.git`
+- Installing via Bower: `bower install bootstrap-colorpicker`
+- Installing via NPM: `npm install bootstrap-colorpicker`
+- Installing via Composer: `composer require itsjavi/bootstrap-colorpicker`
+
+## Getting started
+- For using the plugin you will only need the files under the `dist` folder
+- You can read the [documentation here](https://itsjavi.com/bootstrap-colorpicker/)
+
+## Contributing and reporting issues
+If you want to contribute to the source code or report issues and suggestions, please read the [CONTRIBUTING.md](CONTRIBUTING.md) guidelines first. Some steps are mandatory in order to accept a Pull Request.
+
+## Credits
+Originally written by [Stefan Petre](http://www.eyecon.ro/)
@@ -0,0 +1,20 @@
+{
+  "name": "bootstrap-colorpicker",
+  "main": [
+    "dist/css/bootstrap-colorpicker.css",
+    "dist/js/bootstrap-colorpicker.js"
+  ],
+  "dependencies": {
+    "jquery": ">=1.10"
+  },
+  "ignore": [
+    "\\.*",
+    "/index.html",
+    "/package.json",
+    "/composer.json",
+    "/Gruntfile.js",
+    "/.travis.yml",
+    "/travis.sh",
+    "/server.js"
+  ]
+}
@@ -0,0 +1,230 @@
+/*!
+ * Bootstrap Colorpicker v2.5.1
+ * https://itsjavi.com/bootstrap-colorpicker/
+ *
+ * Originally written by (c) 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0.txt
+ *
+ */
+.colorpicker-saturation {
+  width: 100px;
+  height: 100px;
+  background-image: url("../img/bootstrap-colorpicker/saturation.png");
+  cursor: crosshair;
+  float: left;
+}
+.colorpicker-saturation i {
+  display: block;
+  height: 5px;
+  width: 5px;
+  border: 1px solid #000;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: -4px 0 0 -4px;
+}
+.colorpicker-saturation i b {
+  display: block;
+  height: 5px;
+  width: 5px;
+  border: 1px solid #fff;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.colorpicker-hue,
+.colorpicker-alpha {
+  width: 15px;
+  height: 100px;
+  float: left;
+  cursor: row-resize;
+  margin-left: 4px;
+  margin-bottom: 4px;
+}
+.colorpicker-hue i,
+.colorpicker-alpha i {
+  display: block;
+  height: 1px;
+  background: #000;
+  border-top: 1px solid #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin-top: -1px;
+}
+.colorpicker-hue {
+  background-image: url("../img/bootstrap-colorpicker/hue.png");
+}
+.colorpicker-alpha {
+  background-image: url("../img/bootstrap-colorpicker/alpha.png");
+  display: none;
+}
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-alpha {
+  background-size: contain;
+}
+.colorpicker {
+  padding: 4px;
+  min-width: 130px;
+  margin-top: 1px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  z-index: 2500;
+}
+.colorpicker:before,
+.colorpicker:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.colorpicker:after {
+  clear: both;
+}
+.colorpicker:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  top: -7px;
+  left: 6px;
+}
+.colorpicker:after {
+  content: '';
+  display: inline-block;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #ffffff;
+  position: absolute;
+  top: -6px;
+  left: 7px;
+}
+.colorpicker div {
+  position: relative;
+}
+.colorpicker.colorpicker-with-alpha {
+  min-width: 140px;
+}
+.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
+  display: block;
+}
+.colorpicker-color {
+  height: 10px;
+  margin-top: 5px;
+  clear: both;
+  background-image: url("../img/bootstrap-colorpicker/alpha.png");
+  background-position: 0 100%;
+}
+.colorpicker-color div {
+  height: 10px;
+}
+.colorpicker-selectors {
+  display: none;
+  height: 10px;
+  margin-top: 5px;
+  clear: both;
+}
+.colorpicker-selectors i {
+  cursor: pointer;
+  float: left;
+  height: 10px;
+  width: 10px;
+}
+.colorpicker-selectors i + i {
+  margin-left: 3px;
+}
+.colorpicker-element .input-group-addon i,
+.colorpicker-element .add-on i {
+  display: inline-block;
+  cursor: pointer;
+  height: 16px;
+  vertical-align: text-top;
+  width: 16px;
+}
+.colorpicker.colorpicker-inline {
+  position: relative;
+  display: inline-block;
+  float: none;
+  z-index: auto;
+}
+.colorpicker.colorpicker-horizontal {
+  width: 110px;
+  min-width: 110px;
+  height: auto;
+}
+.colorpicker.colorpicker-horizontal .colorpicker-saturation {
+  margin-bottom: 4px;
+}
+.colorpicker.colorpicker-horizontal .colorpicker-color {
+  width: 100px;
+}
+.colorpicker.colorpicker-horizontal .colorpicker-hue,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+  width: 100px;
+  height: 15px;
+  float: left;
+  cursor: col-resize;
+  margin-left: 0px;
+  margin-bottom: 4px;
+}
+.colorpicker.colorpicker-horizontal .colorpicker-hue i,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
+  display: block;
+  height: 15px;
+  background: #ffffff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  border: none;
+  margin-top: 0px;
+}
+.colorpicker.colorpicker-horizontal .colorpicker-hue {
+  background-image: url("../img/bootstrap-colorpicker/hue-horizontal.png");
+}
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+  background-image: url("../img/bootstrap-colorpicker/alpha-horizontal.png");
+}
+.colorpicker-right:before {
+  left: auto;
+  right: 6px;
+}
+.colorpicker-right:after {
+  left: auto;
+  right: 7px;
+}
+.colorpicker-no-arrow:before {
+  border-right: 0;
+  border-left: 0;
+}
+.colorpicker-no-arrow:after {
+  border-right: 0;
+  border-left: 0;
+}
+.colorpicker.colorpicker-visible,
+.colorpicker-alpha.colorpicker-visible,
+.colorpicker-saturation.colorpicker-visible,
+.colorpicker-hue.colorpicker-visible,
+.colorpicker-selectors.colorpicker-visible {
+  display: block;
+}
+.colorpicker.colorpicker-hidden,
+.colorpicker-alpha.colorpicker-hidden,
+.colorpicker-saturation.colorpicker-hidden,
+.colorpicker-hue.colorpicker-hidden,
+.colorpicker-selectors.colorpicker-hidden {
+  display: none;
+}
+.colorpicker-inline.colorpicker-visible {
+  display: inline-block;
+}
+/*# sourceMappingURL=bootstrap-colorpicker.css.map */
@@ -0,0 +1 @@
+{"version":3,"sources":["src/less/colorpicker.less"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Bootstrap Colorpicker v2.5.1\n * https://itsjavi.com/bootstrap-colorpicker/\n *\n * Originally written by (c) 2012 Stefan Petre\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0.txt\n *\n */\n@colorpicker-img-path: \"../img/bootstrap-colorpicker/\";\n\n.bgImg(@imgFilename) {\n  background-image: url(\"@{colorpicker-img-path}@{imgFilename}\");\n}\n\n.borderRadius(@size) {\n  -webkit-border-radius: @size;\n  -moz-border-radius: @size;\n  border-radius: @size;\n}\n\n.colorpicker-saturation {\n  width: 100px;\n  height: 100px;\n  .bgImg('saturation.png');\n  cursor: crosshair;\n  float: left;\n  i {\n    display: block;\n    height: 5px;\n    width: 5px;\n    border: 1px solid #000;\n    .borderRadius(5px);\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin: -4px 0 0 -4px;\n    b {\n      display: block;\n      height: 5px;\n      width: 5px;\n      border: 1px solid #fff;\n      .borderRadius(5px);\n    }\n  }\n}\n\n.colorpicker-hue,\n.colorpicker-alpha {\n  width: 15px;\n  height: 100px;\n  float: left;\n  cursor: row-resize;\n  margin-left: 4px;\n  margin-bottom: 4px;\n}\n\n.colorpicker-hue i,\n.colorpicker-alpha i {\n  display: block;\n  height: 1px;\n  background: #000;\n  border-top: 1px solid #fff;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  margin-top: -1px;\n}\n\n.colorpicker-hue {\n  .bgImg('hue.png');\n}\n\n.colorpicker-alpha {\n  .bgImg('alpha.png');\n  display: none;\n}\n\n.colorpicker-saturation,\n.colorpicker-hue,\n.colorpicker-alpha {\n  background-size: contain;\n}\n\n.colorpicker {\n  padding: 4px;\n  min-width: 130px;\n  margin-top: 1px;\n  .borderRadius(4px);\n  z-index: 2500;\n}\n\n.colorpicker:before,\n.colorpicker:after {\n  display: table;\n  content: \"\";\n  line-height: 0;\n}\n\n.colorpicker:after {\n  clear: both;\n}\n\n.colorpicker:before {\n  content: '';\n  display: inline-block;\n  border-left: 7px solid transparent;\n  border-right: 7px solid transparent;\n  border-bottom: 7px solid #ccc;\n  border-bottom-color: rgba(0, 0, 0, 0.2);\n  position: absolute;\n  top: -7px;\n  left: 6px;\n}\n\n.colorpicker:after {\n  content: '';\n  display: inline-block;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #ffffff;\n  position: absolute;\n  top: -6px;\n  left: 7px;\n}\n\n.colorpicker div {\n  position: relative;\n}\n\n.colorpicker.colorpicker-with-alpha {\n  min-width: 140px;\n}\n\n.colorpicker.colorpicker-with-alpha .colorpicker-alpha {\n  display: block;\n}\n\n.colorpicker-color {\n  height: 10px;\n  margin-top: 5px;\n  clear: both;\n  .bgImg('alpha.png');\n  background-position: 0 100%;\n}\n\n.colorpicker-color div {\n  height: 10px;\n}\n\n.colorpicker-selectors {\n  display: none;\n  Line truncated
@@ -0,0 +1,10 @@
+/*!
+ * Bootstrap Colorpicker v2.5.1
+ * https://itsjavi.com/bootstrap-colorpicker/
+ *
+ * Originally written by (c) 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0.txt
+ *
+ */.colorpicker-saturation{width:100px;height:100px;background-image:url(../img/bootstrap-colorpicker/saturation.png);cursor:crosshair;float:left}.colorpicker-saturation i{display:block;height:5px;width:5px;border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;top:0;left:0;margin:-4px 0 0 -4px}.colorpicker-saturation i b{display:block;height:5px;width:5px;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-alpha,.colorpicker-hue{width:15px;height:100px;float:left;cursor:row-resize;margin-left:4px;margin-bottom:4px}.colorpicker-alpha i,.colorpicker-hue i{display:block;height:1px;background:#000;border-top:1px solid #fff;position:absolute;top:0;left:0;width:100%;margin-top:-1px}.colorpicker-hue{background-image:url(../img/bootstrap-colorpicker/hue.png)}.colorpicker-alpha{background-image:url(../img/bootstrap-colorpicker/alpha.png);display:none}.colorpicker-alpha,.colorpicker-hue,.colorpicker-saturation{background-size:contain}.colorpicker{padding:4px;min-width:130px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;z-index:2500}.colorpicker:after,.colorpicker:before{display:table;content:"";line-height:0}.colorpicker:after{clear:both}.colorpicker:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:6px}.colorpicker:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:7px}.colorpicker div{position:relative}.colorpicker.colorpicker-with-alpha{min-width:140px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-color{height:10px;margin-top:5px;clear:both;background-image:url(../img/bootstrap-colorpicker/alpha.png);background-position:0 100%}.colorpicker-color div{height:10px}.colorpicker-selectors{display:none;height:10px;margin-top:5px;clear:both}.colorpicker-selectors i{cursor:pointer;float:left;height:10px;width:10px}.colorpicker-selectors i+i{margin-left:3px}.colorpicker-element .add-on i,.colorpicker-element .input-group-addon i{display:inline-block;cursor:pointer;height:16px;vertical-align:text-top;width:16px}.colorpicker.colorpicker-inline{position:relative;display:inline-block;float:none;z-index:auto}.colorpicker.colorpicker-horizontal{width:110px;min-width:110px;height:auto}.colorpicker.colorpicker-horizontal .colorpicker-saturation{margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-color{width:100px}.colorpicker.colorpicker-horizontal .colorpicker-alpha,.colorpicker.colorpicker-horizontal .colorpicker-hue{width:100px;height:15px;float:left;cursor:col-resize;margin-left:0;margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-alpha i,.colorpicker.colorpicker-horizontal .colorpicker-hue i{display:block;height:15px;background:#fff;position:absolute;top:0;left:0;width:1px;border:none;margin-top:0}.colorpicker.colorpicker-horizontal .colorpicker-hue{background-image:url(../img/bootstrap-colorpicker/hue-horizontal.png)}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background-image:url(../img/bootstrap-colorpicker/alpha-horizontal.png)}.colorpicker-right:before{left:auto;right:6px}.colorpicker-right:after{left:auto;right:7px}.colorpicker-no-arrow:before{border-right:0;border-left:0}.colorpicker-no-arrow:after{border-right:0;border-left:0}.colorpicker-alpha.colorpicker-visible,.colorpicker-hue.colorpicker-visible,.colorpicker-saturation.colorpicker-visible,.colorpicker-selectors.colorpicker-visible,.colorpicker.colorpicker-visible{display:block}.colorpicker-alpha.colorpicker-hidden,.colorpicker-hue.colorpicker-hidden,.colorpicker-saturation.colorpicker-hidden,.colorpicker-selectors.colorpicker-hidden,.colorpicker.colorpicker-hidden{display:none}.colorpicker-inline.colorpicker-visible{display:inline-block}
+/*# sourceMappingURL=bootstrap-colorpicker.min.css.map */
@@ -0,0 +1 @@
+{"version":3,"sources":["src/less/colorpicker.less"],"names":[],"mappings":";;;;;;;;AAqBA,wBACE,MAAA,MACA,OAAA,MAXA,iBAAsB,iDAatB,OAAA,UACA,MAAA,KACA,0BACE,QAAA,MACA,OAAA,IACA,MAAA,IACA,OAAA,IAAA,MAAA,KAfF,sBAAA,IACA,mBAAA,IACA,cAAA,IAeE,SAAA,SACA,IAAA,EACA,KAAA,EACA,OAAA,KAAA,EAAA,EAAA,KACA,4BACE,QAAA,MACA,OAAA,IACA,MAAA,IACA,OAAA,IAAA,MAAA,KAzBJ,sBAAA,IACA,mBAAA,IACA,cAAA,IA8BF,mBADA,iBAEE,MAAA,KACA,OAAA,MACA,MAAA,KACA,OAAA,WACA,YAAA,IACA,cAAA,IAIiB,qBADF,mBAEf,QAAA,MACA,OAAA,IACA,WAAA,KACA,WAAA,IAAA,MAAA,KACA,SAAA,SACA,IAAA,EACA,KAAA,EACA,MAAA,KACA,WAAA,KAGF,iBA1DE,iBAAsB,0CA8DxB,mBA9DE,iBAAsB,4CAgEtB,QAAA,KAKF,mBADA,iBADA,wBAGE,gBAAA,QAGF,aACE,QAAA,IACA,UAAA,MACA,WAAA,IAxEA,sBAAA,IACA,mBAAA,IACA,cAAA,IAwEA,QAAA,KAIU,mBADA,oBAEV,QAAA,MACA,QAAA,GACA,YAAA,EAGU,mBACV,MAAA,KAGU,oBACV,QAAA,GACA,QAAA,aACA,YAAA,IAAA,MAAA,YACA,aAAA,IAAA,MAAA,YACA,cAAA,IAAA,MAAA,KACA,oBAAA,eACA,SAAA,SACA,IAAA,KACA,KAAA,IAGU,mBACV,QAAA,GACA,QAAA,aACA,YAAA,IAAA,MAAA,YACA,aAAA,IAAA,MAAA,YACA,cAAA,IAAA,MAAA,KACA,SAAA,SACA,IAAA,KACA,KAAA,IAGW,iBACX,SAAA,SAGU,oCACV,UAAA,MAGkC,uDAClC,QAAA,MAGF,mBACE,OAAA,KACA,WAAA,IACA,MAAA,KAlIA,iBAAsB,4CAoItB,oBAAA,EAAA,KAGiB,uBACjB,OAAA,KAGF,uBACE,QAAA,KACA,OAAA,KACA,WAAA,IACA,MAAA,KAGqB,yBACrB,OAAA,QACA,MAAA,KACA,OAAA,KACA,MAAA,KAGuB,2BACvB,YAAA,IAI2B,+BADW,0CAEtC,QAAA,aACA,OAAA,QACA,OAAA,KACA,eAAA,SACA,MAAA,KAGU,gCACV,SAAA,SACA,QAAA,aACA,MAAA,KACA,QAAA,KAGU,oCACV,MAAA,MACA,UAAA,MACA,OAAA,KAGkC,4DAClC,cAAA,IAGkC,uDAClC,MAAA,MAIkC,uDADA,qDAElC,MAAA,MACA,OAAA,KACA,MAAA,KACA,OAAA,WACA,YAAA,EACA,cAAA,IAIqD,yDADF,uDAEnD,QAAA,MACA,OAAA,KACA,WAAA,KACA,SAAA,SACA,IAAA,EACA,KAAA,EACA,MAAA,IACA,OAAA,KACA,WAAA,EAGkC,qDAlNlC,iBAAsB,qDAsNY,uDAtNlC,iBAAsB,uDA0NN,0BAChB,KAAA,KACA,MAAA,IAGgB,yBAChB,KAAA,KACA,MAAA,IAGmB,6BACnB,aAAA,EACA,YAAA,EAGmB,4BACnB,aAAA,EACA,YAAA,EAQC,uCAAA,qCAAA,4CAAA,2CAAA,iCACC,QAAA,MASD,sCAAA,oCAAA,2CAAA,0CAAA,gCACC,QAAA,KAIe,wCACjB,QAAA"}
@@ -0,0 +1,5 @@
+/*!
+ * Bootstrap Colorpicker v2.5.1
+ * https://itsjavi.com/bootstrap-colorpicker/
+ */
+!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(a){return b(a)}):"object"==typeof exports?module.exports=b(require("jquery")):jQuery&&!jQuery.fn.colorpicker&&b(jQuery)}(this,function(a){"use strict";var b=function(c,d,e,f,g){this.fallbackValue=e?e&&"undefined"!=typeof e.h?e:this.value={h:0,s:0,b:0,a:1}:null,this.fallbackFormat=f?f:"rgba",this.hexNumberSignPrefix=g===!0,this.value=this.fallbackValue,this.origFormat=null,this.predefinedColors=d?d:{},this.colors=a.extend({},b.webColors,this.predefinedColors),c&&("undefined"!=typeof c.h?this.value=c:this.setColor(String(c))),this.value||(this.value={h:0,s:0,b:0,a:1})};b.webColors={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"00ffff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000000",blanchedalmond:"ffebcd",blue:"0000ff",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"00ffff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"ff00ff",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgrey:"d3d3d3",lightgreen:"90ee90",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"778899",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"00ff00",limegreen:"32cd32",linen:"faf0e6",magenta:"ff00ff",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370d8",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"d87093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",red:"ff0000",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"ffffff",whitesmoke:"f5f5f5",yellow:"ffff00",yellowgreen:"9acd32",transparent:"transparent"},b.prototype={constructor:b,colors:{},predefinedColors:{},getValue:function(){return this.value},setValue:function(a){this.value=a},_sanitizeNumber:function(a){return"number"==typeof a?a:isNaN(a)||null===a||""===a||void 0===a?1:""===a?0:"undefined"!=typeof a.toLowerCase?(a.match(/^\./)&&(a="0"+a),Math.ceil(100*parseFloat(a))/100):1},isTransparent:function(a){return!(!a||!("string"==typeof a||a instanceof String))&&(a=a.toLowerCase().trim(),"transparent"===a||a.match(/#?00000000/)||a.match(/(rgba|hsla)\(0,0,0,0?\.?0\)/))},rgbaIsTransparent:function(a){return 0===a.r&&0===a.g&&0===a.b&&0===a.a},setColor:function(a){if(a=a.toLowerCase().trim()){if(this.isTransparent(a))return this.value={h:0,s:0,b:0,a:0},!0;var b=this.parse(a);b?(this.value=this.value={h:b.h,s:b.s,b:b.b,a:b.a},this.origFormat||(this.origFormat=b.format)):this.fallbackValue&&(this.value=this.fallbackValue)}return!1},setHue:function(a){this.value.h=1-a},setSaturation:function(a){this.value.s=a},setBrightness:function(a){this.value.b=1-a},setAlpha:function(a){this.value.a=Math.round(parseInt(100*(1-a),10)/100*100)/100},toRGB:function(a,b,c,d){0===arguments.length&&(a=this.value.h,b=this.value.s,c=this.value.b,d=this.value.a),a*=360;var e,f,g,h,i;return a=a%360/60,i=c*b,h=i*(1-Math.abs(a%2-1)),e=f=g=c-i,a=~~a,e+=[i,h,0,0,h,i][a],f+=[h,i,i,h,0,0][a],g+=[0,0,h,i,i,h][a],{r:Math.round(255*e),g:Math.round(255*f),b:Math.round(255*g),a:d}},toHex:function(a,b,c,d){0===arguments.length&&(a=this.value.h,b=this.value.s,c=this.value.b,d=this.value.a);var e=this.toRGB(a,b,c,d);if(this.rgbaIsTransparent(e))return"transparent";var f=(this.hexNumberSignPrefix?"#":"")+((1<<24)+(parseInt(e.Line truncated
@@ -0,0 +1,61 @@
+.container {
+  background: #fff;
+}
+
+h4 ~ p {
+  padding-left: 20px;
+}
+
+.well .markup,
+.example-content .example-code {
+  background: #2B2B2B;
+  color: #BABABA;
+  position: relative;
+  padding: 15px 15px 15px;
+  margin: 15px 0 0 0;
+  border-radius: 0 0 4px 4px;
+  box-shadow: none;
+  font-size: 12px;
+  line-height: 1.42857143;
+  word-break: break-all;
+  word-wrap: break-word;
+  border: 1px solid #000;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  white-space: pre;
+  overflow: auto;
+}
+
+.well .markup::after {
+  content: "Source code";
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #eee;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.share-btn {
+  vertical-align: middle;
+  display: inline-block;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+
+.example-title{
+  font-size: 14px;
+  margin: 10px 0 10px 2px;
+  font-weight: bold;
+}
+.example-description{
+  margin: 10px 0 10px 2px;
+}
+.example-code{
+  display:none;
+}
+.example-content-widget{
+  margin-bottom: 2px;
+}
@@ -0,0 +1,23 @@
+var beautify = require('js-beautify').html;
+
+var entityMap = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': '&quot;',
+  "'": '&#39;',
+  "/": '&#x2F;'
+};
+module.exports.register = function (Handlebars, options) {
+  Handlebars.registerHelper('code', function (hboptions) {
+    var codeStr = beautify(String(hboptions.fn(this)).trim(), {
+      "wrap_line_length": 80,
+      "wrap_attributes": "auto",
+      "indent_scripts": "normal"
+    }).replace(/[&<>"'\/]/g, function (s) {
+      return entityMap[s];
+    });
+
+    return '<div class="example-code">' + codeStr + '</div>';
+  });
+};
@@ -0,0 +1,278 @@
+<h2>Documentation</h2>
+
+<hr>
+
+<p>Call the colopicker via javascript:</p>
+<pre class="well">$('.sample-selector').colorpicker({ /*options...*/ });</pre>
+<h3>Options</h3>
+
+<p>
+    You can set colorpicker options either as a plugin parameter or data-* attributes
+</p>
+<table class="table table-bordered table-striped">
+    <thead>
+    <tr>
+        <th style="width: 100px;">Name</th>
+        <th style="width: 50px;">Type</th>
+        <th style="width: 100px;">Default</th>
+        <th>Description</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td>format</td>
+        <td>string</td>
+        <td>false</td>
+        <td>If not false, forces the color format to be hex, rgb or rgba, otherwise the format is
+            automatically detected.
+        </td>
+    </tr>
+    <tr>
+        <td>color</td>
+        <td>string</td>
+        <td>false</td>
+        <td>If not false, sets the color to this value.</td>
+    </tr>
+    <tr>
+        <td>container</td>
+        <td>string or jQuery Element</td>
+        <td>false</td>
+        <td>If not false, the picker will be contained inside this element, otherwise it will be
+            appended to the document body.
+        </td>
+    </tr>
+    <tr>
+        <td>component</td>
+        <td>string or jQuery Element</td>
+        <td>'.add-on, .input-group-addon'</td>
+        <td>Children selector for the component or element that trigger the colorpicker and which
+            background color will change (needs an inner &lt;i&gt; element).
+        </td>
+    </tr>
+    <tr>
+        <td>input</td>
+        <td>string or jQuery Element</td>
+        <td>'input'</td>
+        <td>Children selector for the input that will store the picker selected value.</td>
+    </tr>
+    <tr>
+        <td>hexNumberSignPrefix</td>
+        <td>boolean</td>
+        <td>true</td>
+        <td>If true, put a '&num;' (number sign) before hex strings.
+        </td>
+    </tr>
+    <tr>
+        <td>horizontal</td>
+        <td>boolean</td>
+        <td>false</td>
+        <td>If true, the hue and alpha channel bars will be rendered horizontally, above the saturation
+            selector.
+        </td>
+    </tr>
+    <tr>
+        <td>inline</td>
+        <td>boolean</td>
+        <td>false</td>
+        <td>If true, forces to show the colorpicker as an inline element.</td>
+    </tr>
+    <tr>
+        <td>sliders</td>
+        <td>object</td>
+        <td><abbr title='please, read the source code to see this value'>[...]</abbr></td>
+        <td>Vertical sliders configuration (read source code if you really need to tweak this).</td>
+    </tr>
+    <tr>
+        <td>slidersHorz</td>
+        <td>object</td>
+        <td><abbr title='please, read the source code to see this value'>[...]</abbr></td>
+        <td>Horizontal sliders configuration (read source code if you really need to tweak this).</td>
+    </tr>
+    <tr>
+        <td>template</td>
+        <td>string</td>
+        <td><abbr title='please, read the source code to see this value'>[...]</abbr></td>
+        <td>Customizes the default colorpicker HTML template.</td>
+    </tr>
+    <tr>
+        <td>align</td>
+        <td>string</td>
+        <td>'right'</td>
+        <td>By default, the colorpicker is aligned to the right of the input. If you need to switch it
+            to the left, set align to 'left'.
+        </td>
+    </tr>
+    <tr>
+        <td>customClass</td>
+        <td>string</td>
+        <td>null</td>
+        <td>Adds this class to the colorpicker widget.</td>
+    </tr>
+    <tr>
+        <td>colorSelectors</td>
+        <td>object</td>
+        <td>null</td>
+        <td>List of pre selected colors (hex format). If you choose one of these colors, the alias is returned instead of the hex
+            code.
+        </td>
+    </tr>
+    <tr>
+      <td>fallbackColor</td>
+      <td>string</td>
+      <td>null</td>
+      <td>
+        Fallback color string that will be applied when the color failed to be parsed.
+        If <var>null</var>, it will keep the current color if any.
+      </td>
+    </tr>
+    <tr>
+      <td>fallbackFormat</td>
+      <td>string</td>
+      <td>hex</td>
+      <td>
+        Fallback color format (e.g. when not specified or for alias mode, when selecting non aliased colors)
+      </td>
+    </tr>
+    </tbody>
+</table>
+
+<h3>jQuery API Methods</h3>
+
+<p>General usage methods</p>
+<h4>.colorpicker(options)</h4>
+
+<p>Initializes an colorpicker.</p>
+
+<h4>.colorpicker('getValue', defaultValue)</h4>
+
+<p>Gets the value from the input or the data attribute (if has no input), otherwise returns the default
+    value, which defaults to #000000 if not specified.</p>
+
+<h4>.colorpicker('setValue', value)</h4>
+
+<p>Set a new value for the color picker (also updates everything). Triggers 'changeColor' event.</p>
+
+<h4>.colorpicker('show')</h4>
+
+<p>Show the color picker</p>
+
+<h4>.colorpicker('hide')</h4>
+
+<p>Hide the color picker</p>
+
+<h4>.colorpicker('reposition')</h4>
+
+<p>Updates the color picker's position relative to the element</p>
+
+<h4>.colorpicker('update')</h4>
+
+<p>Refreshes the widget colors (this is done automatically)</p>
+
+<h4>.colorpicker('enable')</h4>
+
+<p>Enable the color picker.</p>
+
+<h4>.colorpicker('disable')</h4>
+
+<p>Disable the color picker.</p>
+
+<h4>.colorpicker('destroy')</h4>
+
+<p>Destroys the colorpicker widget and unbind all .colorpicker events from the element and component</p>
+
+<h4>.data('colorpicker')</h4>
+
+<p>Access to the colorpicker API directly</p>
+
+<h4>.data('colorpicker').color</h4>
+
+<p>Access to the colorpicker Color object information</p>
+
+<hr>
+
+<h3>Color object methods</h3>
+
+<p>Each triggered events have a color object (avaliable through event.color, see the example at the
+    bottom) used internally by the picker. This object has several useful methods. These are the more
+    commonly used:</p>
+
+<h4>.setColor(value)</h4>
+
+<p>Set a new color. The value is parsed and tries to do a quess on the format.</p>
+
+<h4>.setHue(value)</h4>
+
+<p>Set the HUE with a value between 0 and 1.</p>
+
+<h4>.setSaturation(value)</h4>
+
+<p>Set the saturation with a value between 0 and 1.</p>
+
+<h4>.setBrightness(value)</h4>
+
+<p>Set the brightness with a value between 0 and 1.</p>
+
+<h4>.setAlpha(value)</h4>
+
+<p>Set the transparency with a value between 0 and 1.</p>
+
+<h4>.toRGB()</h4>
+
+<p>Returns a hash with red, green, blue and alpha.</p>
+
+<h4>.toHex()</h4>
+
+<p>Returns a string with HEX format for the current color.</p>
+
+<h4>.toHSL()</h4>
+
+<p>Returns a hash with HSLA values.</p>
+
+<hr>
+
+<h3>Events</h3>
+
+<p>The colorpicker plugin exposes some events</p>
+
+<table class="table table-bordered table-striped">
+    <thead>
+    <tr>
+        <th style="width: 150px;">Event</th>
+        <th>Description</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td>create</td>
+        <td>This event fires immediately when the color picker is created.</td>
+    </tr>
+    <tr>
+        <td>showPicker</td>
+        <td>This event fires immediately when the color picker is displayed.</td>
+    </tr>
+    <tr>
+        <td>hidePicker</td>
+        <td>This event is fired immediately when the color picker is hidden.</td>
+    </tr>
+    <tr>
+        <td>changeColor</td>
+        <td>This event is fired when the color is changed.</td>
+    </tr>
+    <tr>
+        <td>disable</td>
+        <td>This event is fired immediately when the color picker is disabled, except if it was
+            initialized as disabled.
+        </td>
+    </tr>
+    <tr>
+        <td>enable</td>
+        <td>This event is fired immediately when the color picker is enabled, except upon
+            initialization.
+        </td>
+    </tr>
+    <tr>
+        <td>destroy</td>
+        <td>This event fires immediately when the color picker is destroyed.</td>
+    </tr>
+    </tbody>
+</table>
@@ -0,0 +1,13 @@
+<div class="example">
+    <div class="example-title">{{title}}</div>
+    {{#if description}}<div class="example-description">{{description}}</div>{{/if}}
+    <div class="example-content well">
+        <div class="example-content-widget">
+      {{> (lookup . 'content') }}
+        </div>
+        <button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
+      {{#code}}
+        {{> (lookup . 'content') }}
+      {{/code}}
+    </div>
+</div>
@@ -0,0 +1,23 @@
+<h2>Examples</h2>
+<hr>
+
+{{> example title="Simple input field" content="01_basic" }}
+{{> example title="As a component" content="02_component" }}
+{{> example title="With custom options" description="Sample overriding the initial color and format" content="03_component_options" }}
+{{> example title="Working with events" content="04_events" }}
+{{> example title="Transparent color support" content="05_transparent" }}
+{{> example title="Horizontal mode" content="06_horizontal" }}
+{{> example title="Inline mode" content="07_inline" }}
+{{> example title="Aliased color palette" content="08_palette" }}
+{{> example title="Customized widget size" description="Also showing the support of HTML color names" content="09_size" }}
+{{> example title="Disabled / enabled status" content="10_disabled" }}
+{{> example title="Inside a modal" content="11_modal" }}
+
+
+<script>
+    $(function () {
+        $('.example-code-toggle').on('click', function () {
+            $(this).parent().find('.example-code').toggle();
+        });
+    });
+</script>
@@ -0,0 +1,6 @@
+<input id="cp1" type="text" class="form-control" value="#5367ce"/>
+<script>
+    $(function () {
+        $('#cp1').colorpicker();
+    });
+</script>
@@ -0,0 +1,9 @@
+<div id="cp2" class="input-group colorpicker-component">
+    <input type="text" value="#00AABB" class="form-control"/>
+    <span class="input-group-addon"><i></i></span>
+</div>
+<script>
+    $(function () {
+        $('#cp2').colorpicker();
+    });
+</script>
@@ -0,0 +1,12 @@
+<div id="cp3" class="input-group colorpicker-component">
+    <input type="text" value="#00AABB" class="form-control"/>
+    <span class="input-group-addon"><i></i></span>
+</div>
+<script>
+    $(function () {
+        $('#cp3').colorpicker({
+            color: '#AA3399',
+            format: 'rgb'
+        });
+    });
+</script>
@@ -0,0 +1,8 @@
+<a href="#" class="btn btn-default" id="cp4">Change background color</a>
+<script>
+    $(function () {
+        $('#cp4').colorpicker().on('changeColor', function (e) {
+            $('body')[0].style.backgroundColor = e.color.toString('rgba');
+        });
+    });
+</script>
@@ -0,0 +1,9 @@
+<input type="text" class="form-control" id="cp5"/>
+<script>
+    $(function () {
+        $('#cp5').colorpicker({
+            color: "transparent",
+            format: "hex"
+        });
+    });
+</script>
@@ -0,0 +1,9 @@
+<input type="text" class="form-control" id="cp6" />
+<script>
+    $(function () {
+        $('#cp6').colorpicker({
+            color: "#88cc33",
+            horizontal: true
+        });
+    });
+</script>
@@ -0,0 +1,15 @@
+<div id="cp7" class="inl-bl"></div>
+<style>
+    .inl-bl {
+        display: inline-block;
+    }
+</style>
+<script>
+    $(function () {
+        $('#cp7').colorpicker({
+            color:'#ffaa00',
+            container: true,
+            inline:true
+        });
+    });
+</script>
@@ -0,0 +1,21 @@
+<div id="cp8" data-format="alias" class="input-group colorpicker-component">
+  <input type="text" value="primary" class="form-control"/>
+  <span class="input-group-addon"><i></i></span>
+</div>
+<script>
+    $(function () {
+        $('#cp8').colorpicker({
+            colorSelectors: {
+                'black': '#000000',
+                'white': '#ffffff',
+                'red': '#FF0000',
+                'default': '#777777',
+                'primary': '#337ab7',
+                'success': '#5cb85c',
+                'info': '#5bc0de',
+                'warning': '#f0ad4e',
+                'danger': '#d9534f'
+            }
+        });
+    });
+</script>
@@ -0,0 +1,37 @@
+<input id="cp9" type="text" class="form-control" value="pink"/>
+<style>
+    .colorpicker-2x .colorpicker-saturation {
+        width: 200px;
+        height: 200px;
+    }
+
+    .colorpicker-2x .colorpicker-hue,
+    .colorpicker-2x .colorpicker-alpha {
+        width: 30px;
+        height: 200px;
+    }
+
+    .colorpicker-2x .colorpicker-color,
+    .colorpicker-2x .colorpicker-color div {
+        height: 30px;
+    }
+</style>
+<script>
+    $(function () {
+        $('#cp9').colorpicker({
+            customClass: 'colorpicker-2x',
+            sliders: {
+                saturation: {
+                    maxLeft: 200,
+                    maxTop: 200
+                },
+                hue: {
+                    maxTop: 200
+                },
+                alpha: {
+                    maxTop: 200
+                }
+            }
+        });
+    });
+</script>
@@ -0,0 +1,23 @@
+<div id="cp10" class="input-group colorpicker-component">
+    <input disabled type="text" value="" class="form-control"/>
+    <span class="input-group-addon"><i></i></span>
+</div>
+<br>
+<p>
+  <a class="btn btn-sm btn-default enable-button" href="#">Enable</a>
+  <a class="btn btn-sm btn-default disable-button" href="#">Disable</a>
+</p>
+<script>
+    $(function () {
+        $(".disable-button").click(function(e) {
+            e.preventDefault();
+            $("#cp10").colorpicker('disable');
+        });
+
+        $(".enable-button").click(function(e) {
+            e.preventDefault();
+            $("#cp10").colorpicker('enable');
+        });
+        $('#cp10').colorpicker();
+    });
+</script>
@@ -0,0 +1,20 @@
+<button class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal">
+    Show modal
+</button>
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-body">
+                <div id="cp11" class="input-group colorpicker-component">
+                    <input type="text" value="" class="form-control"/>
+                    <span class="input-group-addon"><i></i></span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    $(function () {
+        $('#cp11').colorpicker();
+    });
+</script>
@@ -0,0 +1,43 @@
+<div class="row">
+    <article class="col-md-12">
+        <hr>
+        <div class="social">
+            <a href="https://github.com/itsjavi/bootstrap-colorpicker/" target="_blank"
+               class="btn btn-default btn-sm"><span class="octicon octicon-mark-github"></span> Source code</a>
+            <a href="https://github.com/itsjavi/bootstrap-colorpicker/archive/master.zip" target="_blank"
+               class="btn btn-success btn-sm"><i class="glyphicon glyphicon-download-alt"></i> Download latest</a>
+
+            <div class="share-btn share-btn-twitter">
+                <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-related="itsjaviaguilar"
+                   data-hashtags="bootstrap">Tweet</a>
+                <script>!function (d, s, id) {
+                    var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
+                    if (!d.getElementById(id)) {
+                        js = d.createElement(s);
+                        js.id = id;
+                        js.src = p + '://platform.twitter.com/widgets.js';
+                        fjs.parentNode.insertBefore(js, fjs);
+                    }
+                }(document, 'script', 'twitter-wjs');</script>
+            </div>
+
+            <div class="share-btn share-btn-google-plus">
+                <!-- Place this tag where you want the +1 button to render. -->
+                <div class="g-plusone" data-size="large"></div>
+
+                <!-- Place this tag after the last +1 button tag. -->
+                <script type="text/javascript">
+                    (function () {
+                        var po = document.createElement('script');
+                        po.type = 'text/javascript';
+                        po.async = true;
+                        po.src = 'https://apis.google.com/js/plusone.js';
+                        var s = document.getElementsByTagName('script')[0];
+                        s.parentNode.insertBefore(po, s);
+                    })();
+                </script>
+            </div>
+        </div>
+        <hr>
+    </article>
+</div>
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Colorpicker for Twitter Bootstrap</title>
+
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+    <link href="//cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css" rel="stylesheet">
+    <link href="dist/css/bootstrap-colorpicker.min.css" rel="stylesheet">
+    <link href="docs/assets/main.css" rel="stylesheet">
+
+    <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
+    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="dist/js/bootstrap-colorpicker.js"></script>
+</head>
+<body>
+    <div class="container">
+      {{> body }}
+    </div>
+</body>
+</html>
@@ -0,0 +1,24 @@
+<div class="page-header">
+    <h1><i class="glyphicon glyphicon-tint"></i> Bootstrap Colorpicker {{package.version}}
+        <small>for Twitter Bootstrap</small>
+    </h1>
+</div>
+<div class="row">
+    <article class="col-md-12">
+        <p>
+          {{package.description}}.
+            Originally written by <a
+                href="https://twitter.com/stefanpetre/" target="_blank">Stefan Petre</a> and maintained by
+            <a href="https://itsjavi.com/" target="_blank">Javi Aguilar</a> and the Github community.
+        </p>
+    </article>
+</div>
+{{> social }}
+<div class="row">
+    <div class="col-md-7">
+      {{> api }}
+    </div>
+    <div class="col-md-5">
+{{> examples }}
+    </div>
+</div>
@@ -0,0 +1,31 @@
+/*
+ Script for serving index.html and other static content with Node.
+ Run it using `node serve` from your terminal and navigate to http://localhost:5000
+ in order to test your changes in the browser.
+ */
+
+var http = require('http'), fs = require('fs'), mimeTypes = {
+  'html': 'text/html',
+  'css': 'text/css',
+  'js': 'text/javascript',
+  'json': 'application/json',
+  'png': 'image/png',
+  'jpg': 'image/jpg'
+};
+
+http.createServer(function (req, res) {
+  var file = (req.url === '/') ? 'index.html' : "." + req.url;
+  var ext = require('path').extname(file),
+    type = (mimeTypes[ext] ? mimeTypes[ext] : '');
+
+  fs.exists(file, function (exists) {
+    if (exists) {
+      res.writeHead(200, {'Content-Type': type});
+      fs.createReadStream(file).pipe(res);
+    } else {
+      console.warn(file, ' does not exit');
+    }
+  });
+}).listen(5000);
+
+console.log("Your bootstrap-colorpicker development URL is http://localhost:5000");
@@ -0,0 +1,662 @@
+/**
+ * Color manipulation helper class
+ *
+ * @param {Object|String} [val]
+ * @param {Object} [predefinedColors]
+ * @param {String|null} [fallbackColor]
+ * @param {String|null} [fallbackFormat]
+ * @param {Boolean} [hexNumberSignPrefix]
+ * @constructor
+ */
+var Color = function(
+  val, predefinedColors, fallbackColor, fallbackFormat, hexNumberSignPrefix) {
+  this.fallbackValue = fallbackColor ?
+    (
+      fallbackColor && (typeof fallbackColor.h !== 'undefined') ?
+      fallbackColor :
+      this.value = {
+        h: 0,
+        s: 0,
+        b: 0,
+        a: 1
+      }
+    ) :
+    null;
+
+  this.fallbackFormat = fallbackFormat ? fallbackFormat : 'rgba';
+
+  this.hexNumberSignPrefix = hexNumberSignPrefix === true;
+
+  this.value = this.fallbackValue;
+
+  this.origFormat = null; // original string format
+
+  this.predefinedColors = predefinedColors ? predefinedColors : {};
+
+  // We don't want to share aliases across instances so we extend new object
+  this.colors = $.extend({}, Color.webColors, this.predefinedColors);
+
+  if (val) {
+    if (typeof val.h !== 'undefined') {
+      this.value = val;
+    } else {
+      this.setColor(String(val));
+    }
+  }
+
+  if (!this.value) {
+    // Initial value is always black if no arguments are passed or val is empty
+    this.value = {
+      h: 0,
+      s: 0,
+      b: 0,
+      a: 1
+    };
+  }
+};
+
+Color.webColors = { // 140 predefined colors from the HTML Colors spec
+  "aliceblue": "f0f8ff",
+  "antiquewhite": "faebd7",
+  "aqua": "00ffff",
+  "aquamarine": "7fffd4",
+  "azure": "f0ffff",
+  "beige": "f5f5dc",
+  "bisque": "ffe4c4",
+  "black": "000000",
+  "blanchedalmond": "ffebcd",
+  "blue": "0000ff",
+  "blueviolet": "8a2be2",
+  "brown": "a52a2a",
+  "burlywood": "deb887",
+  "cadetblue": "5f9ea0",
+  "chartreuse": "7fff00",
+  "chocolate": "d2691e",
+  "coral": "ff7f50",
+  "cornflowerblue": "6495ed",
+  "cornsilk": "fff8dc",
+  "crimson": "dc143c",
+  "cyan": "00ffff",
+  "darkblue": "00008b",
+  "darkcyan": "008b8b",
+  "darkgoldenrod": "b8860b",
+  "darkgray": "a9a9a9",
+  "darkgreen": "006400",
+  "darkkhaki": "bdb76b",
+  "darkmagenta": "8b008b",
+  "darkolivegreen": "556b2f",
+  "darkorange": "ff8c00",
+  "darkorchid": "9932cc",
+  "darkred": "8b0000",
+  "darksalmon": "e9967a",
+  "darkseagreen": "8fbc8f",
+  "darkslateblue": "483d8b",
+  "darkslategray": "2f4f4f",
+  "darkturquoise": "00ced1",
+  "darkviolet": "9400d3",
+  "deeppink": "ff1493",
+  "deepskyblue": "00bfff",
+  "dimgray": "696969",
+  "dodgerblue": "1e90ff",
+  "firebrick": "b22222",
+  "floralwhite": "fffaf0",
+  "forestgreen": "228b22",
+  "fuchsia": "ff00ff",
+  "gainsboro": "dcdcdc",
+  "ghostwhite": "f8f8ff",
+  "gold": "ffd700",
+  "goldenrod": "daa520",
+  "gray": "808080",
+  "green": "008000",
+  "greenyellow": "adff2f",
+  "honeydew": "f0fff0",
+  "hotpink": "ff69b4",
+  "indianred": "cd5c5c",
+  "indigo": "4b0082",
+  "ivory": "fffff0",
+  "khaki": "f0e68c",
+  "lavender": "e6e6fa",
+  "lavenderblush": "fff0f5",
+  "lawngreen": "7cfc00",
+  "lemonchiffon": "fffacd",
+  "lightblue": "add8e6",
+  "lightcoral": "f08080",
+  "lightcyan": "e0ffff",
+  "lightgoldenrodyellow": "fafad2",
+  "lightgrey": "d3d3d3",
+  "lightgreen": "90ee90",
+  "lightpink": "ffb6c1",
+  "lightsalmon": "ffa07a",
+  "lightseagreen": "20b2aa",
+  "lightskyblue": "87cefa",
+  "lightslategray": "778899",
+  "lightsteelblue": "b0c4de",
+  "lightyellow": "ffffe0",
+  "lime": "00ff00",
+  "limegreen": "32cd32",
+  "linen": "faf0e6",
+  "magenta": "ff00ff",
+  "maroon": "800000",
+  "mediumaquamarine": "66cdaa",
+  "mediumblue": "0000cd",
+  "mediumorchid": "ba55d3",
+  "mediumpurple": "9370d8",
+  "mediumseagreen": "3cb371",
+  "mediumslateblue": "7b68ee",
+  "mediumspringgreen": "00fa9a",
+  "mediumturquoise": "48d1cc",
+  "mediumvioletred": "c71585",
+  "midnightblue": "191970",
+  "mintcream": "f5fffa",
+  "mistyrose": "ffe4e1",
+  "moccasin": "ffe4b5",
+  "navajowhite": "ffdead",
+  "navy": "000080",
+  "oldlace": "fdf5e6",
+  "olive": "808000",
+  "olivedrab": "6b8e23",
+  "orange": "ffa500",
+  "orangered": "ff4500",
+  "orchid": "da70d6",
+  "palegoldenrod": "eee8aa",
+  "palegreen": "98fb98",
+  "paleturquoise": "afeeee",
+  "palevioletred": "d87093",
+  "papayawhip": "ffefd5",
+  "peachpuff": "ffdab9",
+  "peru": "cd853f",
+  "pink": "ffc0cb",
+  "plum": "dda0dd",
+  "powderblue": "b0e0e6",
+  "purple": "800080",
+  "red": "ff0000",
+  "rosybrown": "bc8f8f",
+  "royalblue": "4169e1",
+  "saddlebrown": "8b4513",
+  "salmon": "fa8072",
+  "sandybrown": "f4a460",
+  "seagreen": "2e8b57",
+  "seashell": "fff5ee",
+  "sienna": "a0522d",
+  "silver": "c0c0c0",
+  "skyblue": "87ceeb",
+  "slateblue": "6a5acd",
+  "slategray": "708090",
+  "snow": "fffafa",
+  "springgreen": "00ff7f",
+  "steelblue": "4682b4",
+  "tan": "d2b48c",
+  "teal": "008080",
+  "thistle": "d8bfd8",
+  "tomato": "ff6347",
+  "turquoise": "40e0d0",
+  "violet": "ee82ee",
+  "wheat": "f5deb3",
+  "white": "ffffff",
+  "whitesmoke": "f5f5f5",
+  "yellow": "ffff00",
+  "yellowgreen": "9acd32",
+  "transparent": "transparent"
+};
+
+Color.prototype = {
+  constructor: Color,
+  colors: {}, // merged web and predefined colors
+  predefinedColors: {},
+  /**
+   * @return {Object}
+   */
+  getValue: function() {
+    return this.value;
+  },
+  /**
+   * @param {Object} val
+   */
+  setValue: function(val) {
+    this.value = val;
+  },
+  _sanitizeNumber: function(val) {
+    if (typeof val === 'number') {
+      return val;
+    }
+    if (isNaN(val) || (val === null) || (val === '') || (val === undefined)) {
+      return 1;
+    }
+    if (val === '') {
+      return 0;
+    }
+    if (typeof val.toLowerCase !== 'undefined') {
+      if (val.match(/^\./)) {
+        val = "0" + val;
+      }
+      return Math.ceil(parseFloat(val) * 100) / 100;
+    }
+    return 1;
+  },
+  isTransparent: function(strVal) {
+    if (!strVal || !(typeof strVal === 'string' || strVal instanceof String)) {
+      return false;
+    }
+    strVal = strVal.toLowerCase().trim();
+    return (strVal === 'transparent') || (strVal.match(/#?00000000/)) || (strVal.match(/(rgba|hsla)\(0,0,0,0?\.?0\)/));
+  },
+  rgbaIsTransparent: function(rgba) {
+    return ((rgba.r === 0) && (rgba.g === 0) && (rgba.b === 0) && (rgba.a === 0));
+  },
+  // parse a string to HSB
+  /**
+   * @protected
+   * @param {String} strVal
+   * @returns {boolean} Returns true if it could be parsed, false otherwise
+   */
+  setColor: function(strVal) {
+    strVal = strVal.toLowerCase().trim();
+    if (strVal) {
+      if (this.isTransparent(strVal)) {
+        this.value = {
+          h: 0,
+          s: 0,
+          b: 0,
+          a: 0
+        };
+        return true;
+      } else {
+        var parsedColor = this.parse(strVal);
+        if (parsedColor) {
+          this.value = this.value = {
+            h: parsedColor.h,
+            s: parsedColor.s,
+            b: parsedColor.b,
+            a: parsedColor.a
+          };
+          if (!this.origFormat) {
+            this.origFormat = parsedColor.format;
+          }
+        } else if (this.fallbackValue) {
+          // if parser fails, defaults to fallbackValue if defined, otherwise the value won't be changed
+          this.value = this.fallbackValue;
+        }
+      }
+    }
+    return false;
+  },
+  setHue: function(h) {
+    this.value.h = 1 - h;
+  },
+  setSaturation: function(s) {
+    this.value.s = s;
+  },
+  setBrightness: function(b) {
+    this.value.b = 1 - b;
+  },
+  setAlpha: function(a) {
+    this.value.a = Math.round((parseInt((1 - a) * 100, 10) / 100) * 100) / 100;
+  },
+  toRGB: function(h, s, b, a) {
+    if (arguments.length === 0) {
+      h = this.value.h;
+      s = this.value.s;
+      b = this.value.b;
+      a = this.value.a;
+    }
+
+    h *= 360;
+    var R, G, B, X, C;
+    h = (h % 360) / 60;
+    C = b * s;
+    X = C * (1 - Math.abs(h % 2 - 1));
+    R = G = B = b - C;
+
+    h = ~~h;
+    R += [C, X, 0, 0, X, C][h];
+    G += [X, C, C, X, 0, 0][h];
+    B += [0, 0, X, C, C, X][h];
+
+    return {
+      r: Math.round(R * 255),
+      g: Math.round(G * 255),
+      b: Math.round(B * 255),
+      a: a
+    };
+  },
+  toHex: function(h, s, b, a) {
+    if (arguments.length === 0) {
+      h = this.value.h;
+      s = this.value.s;
+      b = this.value.b;
+      a = this.value.a;
+    }
+
+    var rgb = this.toRGB(h, s, b, a);
+
+    if (this.rgbaIsTransparent(rgb)) {
+      return 'transparent';
+    }
+
+    var hexStr = (this.hexNumberSignPrefix ? '#' : '') + (
+        (1 << 24) +
+        (parseInt(rgb.r) << 16) +
+        (parseInt(rgb.g) << 8) +
+        parseInt(rgb.b))
+      .toString(16)
+      .slice(1);
+
+    return hexStr;
+  },
+  toHSL: function(h, s, b, a) {
+    if (arguments.length === 0) {
+      h = this.value.h;
+      s = this.value.s;
+      b = this.value.b;
+      a = this.value.a;
+    }
+
+    var H = h,
+      L = (2 - s) * b,
+      S = s * b;
+    if (L > 0 && L <= 1) {
+      S /= L;
+    } else {
+      S /= 2 - L;
+    }
+    L /= 2;
+    if (S > 1) {
+      S = 1;
+    }
+    return {
+      h: isNaN(H) ? 0 : H,
+      s: isNaN(S) ? 0 : S,
+      l: isNaN(L) ? 0 : L,
+      a: isNaN(a) ? 0 : a
+    };
+  },
+  toAlias: function(r, g, b, a) {
+    var c, rgb = (arguments.length === 0) ? this.toHex() : this.toHex(r, g, b, a);
+
+    // support predef. colors in non-hex format too, as defined in the alias itself
+    var original = this.origFormat === 'alias' ? rgb : this.toString(this.origFormat, false);
+
+    for (var alias in this.colors) {
+      c = this.colors[alias].toLowerCase().trim();
+      if ((c === rgb) || (c === original)) {
+        return alias;
+      }
+    }
+    return false;
+  },
+  RGBtoHSB: function(r, g, b, a) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+
+    var H, S, V, C;
+    V = Math.max(r, g, b);
+    C = V - Math.min(r, g, b);
+    H = (C === 0 ? null :
+      V === r ? (g - b) / C :
+      V === g ? (b - r) / C + 2 :
+      (r - g) / C + 4
+    );
+    H = ((H + 360) % 6) * 60 / 360;
+    S = C === 0 ? 0 : C / V;
+    return {
+      h: this._sanitizeNumber(H),
+      s: S,
+      b: V,
+      a: this._sanitizeNumber(a)
+    };
+  },
+  HueToRGB: function(p, q, h) {
+    if (h < 0) {
+      h += 1;
+    } else if (h > 1) {
+      h -= 1;
+    }
+    if ((h * 6) < 1) {
+      return p + (q - p) * h * 6;
+    } else if ((h * 2) < 1) {
+      return q;
+    } else if ((h * 3) < 2) {
+      return p + (q - p) * ((2 / 3) - h) * 6;
+    } else {
+      return p;
+    }
+  },
+  HSLtoRGB: function(h, s, l, a) {
+    if (s < 0) {
+      s = 0;
+    }
+    var q;
+    if (l <= 0.5) {
+      q = l * (1 + s);
+    } else {
+      q = l + s - (l * s);
+    }
+
+    var p = 2 * l - q;
+
+    var tr = h + (1 / 3);
+    var tg = h;
+    var tb = h - (1 / 3);
+
+    var r = Math.round(this.HueToRGB(p, q, tr) * 255);
+    var g = Math.round(this.HueToRGB(p, q, tg) * 255);
+    var b = Math.round(this.HueToRGB(p, q, tb) * 255);
+    return [r, g, b, this._sanitizeNumber(a)];
+  },
+  /**
+   * @param {String} strVal
+   * @returns {Object} Object containing h,s,b,a,format properties or FALSE if failed to parse
+   */
+  parse: function(strVal) {
+    if (arguments.length === 0) {
+      return false;
+    }
+
+    var that = this,
+      result = false,
+      isAlias = (typeof this.colors[strVal] !== 'undefined'),
+      values, format;
+
+    if (isAlias) {
+      strVal = this.colors[strVal].toLowerCase().trim();
+    }
+
+    $.each(this.stringParsers, function(i, parser) {
+      var match = parser.re.exec(strVal);
+      values = match && parser.parse.apply(that, [match]);
+      if (values) {
+        result = {};
+        format = (isAlias ? 'alias' : (parser.format ? parser.format : that.getValidFallbackFormat()));
+        if (format.match(/hsla?/)) {
+          result = that.RGBtoHSB.apply(that, that.HSLtoRGB.apply(that, values));
+        } else {
+          result = that.RGBtoHSB.apply(that, values);
+        }
+        if (result instanceof Object) {
+          result.format = format;
+        }
+        return false; // stop iterating
+      }
+      return true;
+    });
+    return result;
+  },
+  getValidFallbackFormat: function() {
+    var formats = [
+      'rgba', 'rgb', 'hex', 'hsla', 'hsl'
+    ];
+    if (this.origFormat && (formats.indexOf(this.origFormat) !== -1)) {
+      return this.origFormat;
+    }
+    if (this.fallbackFormat && (formats.indexOf(this.fallbackFormat) !== -1)) {
+      return this.fallbackFormat;
+    }
+
+    return 'rgba'; // By default, return a format that will not lose the alpha info
+  },
+  /**
+   *
+   * @param {string} [format] (default: rgba)
+   * @param {boolean} [translateAlias] Return real color for pre-defined (non-standard) aliases (default: false)
+   * @returns {String}
+   */
+  toString: function(format, translateAlias) {
+    format = format || this.origFormat || this.fallbackFormat;
+    translateAlias = translateAlias || false;
+
+    var c = false;
+
+    switch (format) {
+      case 'rgb':
+        {
+          c = this.toRGB();
+          if (this.rgbaIsTransparent(c)) {
+            return 'transparent';
+          }
+          return 'rgb(' + c.r + ',' + c.g + ',' + c.b + ')';
+        }
+        break;
+      case 'rgba':
+        {
+          c = this.toRGB();
+          return 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')';
+        }
+        break;
+      case 'hsl':
+        {
+          c = this.toHSL();
+          return 'hsl(' + Math.round(c.h * 360) + ',' + Math.round(c.s * 100) + '%,' + Math.round(c.l * 100) + '%)';
+        }
+        break;
+      case 'hsla':
+        {
+          c = this.toHSL();
+          return 'hsla(' + Math.round(c.h * 360) + ',' + Math.round(c.s * 100) + '%,' + Math.round(c.l * 100) + '%,' + c.a + ')';
+        }
+        break;
+      case 'hex':
+        {
+          return this.toHex();
+        }
+        break;
+      case 'alias':
+        {
+          c = this.toAlias();
+
+          if (c === false) {
+            return this.toString(this.getValidFallbackFormat());
+          }
+
+          if (translateAlias && !(c in Color.webColors) && (c in this.predefinedColors)) {
+            return this.predefinedColors[c];
+          }
+
+          return c;
+        }
+      default:
+        {
+          return c;
+        }
+        break;
+    }
+  },
+  // a set of RE's that can match strings and generate color tuples.
+  // from John Resig color plugin
+  // https://github.com/jquery/jquery-color/
+  stringParsers: [{
+    re: /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*?\)/,
+    format: 'rgb',
+    parse: function(execResult) {
+      return [
+        execResult[1],
+        execResult[2],
+        execResult[3],
+        1
+      ];
+    }
+  }, {
+    re: /rgb\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/,
+    format: 'rgb',
+    parse: function(execResult) {
+      return [
+        2.55 * execResult[1],
+        2.55 * execResult[2],
+        2.55 * execResult[3],
+        1
+      ];
+    }
+  }, {
+    re: /rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,
+    format: 'rgba',
+    parse: function(execResult) {
+      return [
+        execResult[1],
+        execResult[2],
+        execResult[3],
+        execResult[4]
+      ];
+    }
+  }, {
+    re: /rgba\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,
+    format: 'rgba',
+    parse: function(execResult) {
+      return [
+        2.55 * execResult[1],
+        2.55 * execResult[2],
+        2.55 * execResult[3],
+        execResult[4]
+      ];
+    }
+  }, {
+    re: /hsl\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/,
+    format: 'hsl',
+    parse: function(execResult) {
+      return [
+        execResult[1] / 360,
+        execResult[2] / 100,
+        execResult[3] / 100,
+        execResult[4]
+      ];
+    }
+  }, {
+    re: /hsla\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,
+    format: 'hsla',
+    parse: function(execResult) {
+      return [
+        execResult[1] / 360,
+        execResult[2] / 100,
+        execResult[3] / 100,
+        execResult[4]
+      ];
+    }
+  }, {
+    re: /#?([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
+    format: 'hex',
+    parse: function(execResult) {
+      return [
+        parseInt(execResult[1], 16),
+        parseInt(execResult[2], 16),
+        parseInt(execResult[3], 16),
+        1
+      ];
+    }
+  }, {
+    re: /#?([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
+    format: 'hex',
+    parse: function(execResult) {
+      return [
+        parseInt(execResult[1] + execResult[1], 16),
+        parseInt(execResult[2] + execResult[2], 16),
+        parseInt(execResult[3] + execResult[3], 16),
+        1
+      ];
+    }
+  }],
+  colorNameToHex: function(name) {
+    if (typeof this.colors[name.toLowerCase()] !== 'undefined') {
+      return this.colors[name.toLowerCase()];
+    }
+    return false;
+  }
+};
@@ -0,0 +1,562 @@
+/**
+ * Colorpicker component class
+ *
+ * @param {Object|String} element
+ * @param {Object} options
+ * @constructor
+ */
+var Colorpicker = function(element, options) {
+  this.element = $(element).addClass('colorpicker-element');
+  this.options = $.extend(true, {}, defaults, this.element.data(), options);
+  this.component = this.options.component;
+  this.component = (this.component !== false) ? this.element.find(this.component) : false;
+  if (this.component && (this.component.length === 0)) {
+    this.component = false;
+  }
+  this.container = (this.options.container === true) ? this.element : this.options.container;
+  this.container = (this.container !== false) ? $(this.container) : false;
+
+  // Is the element an input? Should we search inside for any input?
+  this.input = this.element.is('input') ? this.element : (this.options.input ?
+    this.element.find(this.options.input) : false);
+  if (this.input && (this.input.length === 0)) {
+    this.input = false;
+  }
+  // Set HSB color
+  this.color = this.createColor(this.options.color !== false ? this.options.color : this.getValue());
+
+  this.format = this.options.format !== false ? this.options.format : this.color.origFormat;
+
+  if (this.options.color !== false) {
+    this.updateInput(this.color);
+    this.updateData(this.color);
+  }
+
+  // Setup picker
+  var $picker = this.picker = $(this.options.template);
+  if (this.options.customClass) {
+    $picker.addClass(this.options.customClass);
+  }
+  if (this.options.inline) {
+    $picker.addClass('colorpicker-inline colorpicker-visible');
+  } else {
+    $picker.addClass('colorpicker-hidden');
+  }
+  if (this.options.horizontal) {
+    $picker.addClass('colorpicker-horizontal');
+  }
+  if (
+    (['rgba', 'hsla', 'alias'].indexOf(this.format) !== -1) ||
+    this.options.format === false ||
+    this.getValue() === 'transparent'
+  ) {
+    $picker.addClass('colorpicker-with-alpha');
+  }
+  if (this.options.align === 'right') {
+    $picker.addClass('colorpicker-right');
+  }
+  if (this.options.inline === true) {
+    $picker.addClass('colorpicker-no-arrow');
+  }
+  if (this.options.colorSelectors) {
+    var colorpicker = this,
+      selectorsContainer = colorpicker.picker.find('.colorpicker-selectors');
+
+    if (selectorsContainer.length > 0) {
+      $.each(this.options.colorSelectors, function(name, color) {
+        var $btn = $('<i />')
+          .addClass('colorpicker-selectors-color')
+          .css('background-color', color)
+          .data('class', name).data('alias', name);
+
+        $btn.on('mousedown.colorpicker touchstart.colorpicker', function(event) {
+          event.preventDefault();
+          colorpicker.setValue(
+            colorpicker.format === 'alias' ? $(this).data('alias') : $(this).css('background-color')
+          );
+        });
+        selectorsContainer.append($btn);
+      });
+      selectorsContainer.show().addClass('colorpicker-visible');
+    }
+  }
+
+  // Prevent closing the colorpicker when clicking on itself
+  $picker.on('mousedown.colorpicker touchstart.colorpicker', $.proxy(function(e) {
+    if (e.target === e.currentTarget) {
+      e.preventDefault();
+    }
+  }, this));
+
+  // Bind click/tap events on the sliders
+  $picker.find('.colorpicker-saturation, .colorpicker-hue, .colorpicker-alpha')
+    .on('mousedown.colorpicker touchstart.colorpicker', $.proxy(this.mousedown, this));
+
+  $picker.appendTo(this.container ? this.container : $('body'));
+
+  // Bind other events
+  if (this.input !== false) {
+    this.input.on({
+      'keyup.colorpicker': $.proxy(this.keyup, this)
+    });
+    this.input.on({
+      'change.colorpicker': $.proxy(this.change, this)
+    });
+    if (this.component === false) {
+      this.element.on({
+        'focus.colorpicker': $.proxy(this.show, this)
+      });
+    }
+    if (this.options.inline === false) {
+      this.element.on({
+        'focusout.colorpicker': $.proxy(this.hide, this)
+      });
+    }
+  }
+
+  if (this.component !== false) {
+    this.component.on({
+      'click.colorpicker': $.proxy(this.show, this)
+    });
+  }
+
+  if ((this.input === false) && (this.component === false)) {
+    this.element.on({
+      'click.colorpicker': $.proxy(this.show, this)
+    });
+  }
+
+  // for HTML5 input[type='color']
+  if ((this.input !== false) && (this.component !== false) && (this.input.attr('type') === 'color')) {
+
+    this.input.on({
+      'click.colorpicker': $.proxy(this.show, this),
+      'focus.colorpicker': $.proxy(this.show, this)
+    });
+  }
+  this.update();
+
+  $($.proxy(function() {
+    this.element.trigger('create');
+  }, this));
+};
+
+Colorpicker.Color = Color;
+
+Colorpicker.prototype = {
+  constructor: Colorpicker,
+  destroy: function() {
+    this.picker.remove();
+    this.element.removeData('colorpicker', 'color').off('.colorpicker');
+    if (this.input !== false) {
+      this.input.off('.colorpicker');
+    }
+    if (this.component !== false) {
+      this.component.off('.colorpicker');
+    }
+    this.element.removeClass('colorpicker-element');
+    this.element.trigger({
+      type: 'destroy'
+    });
+  },
+  reposition: function() {
+    if (this.options.inline !== false || this.options.container) {
+      return false;
+    }
+    var type = this.container && this.container[0] !== window.document.body ? 'position' : 'offset';
+    var element = this.component || this.element;
+    var offset = element[type]();
+    if (this.options.align === 'right') {
+      offset.left -= this.picker.outerWidth() - element.outerWidth();
+    }
+    this.picker.css({
+      top: offset.top + element.outerHeight(),
+      left: offset.left
+    });
+  },
+  show: function(e) {
+    if (this.isDisabled()) {
+      // Don't show the widget if it's disabled (the input)
+      return;
+    }
+    this.picker.addClass('colorpicker-visible').removeClass('colorpicker-hidden');
+    this.reposition();
+    $(window).on('resize.colorpicker', $.proxy(this.reposition, this));
+    if (e && (!this.hasInput() || this.input.attr('type') === 'color')) {
+      if (e.stopPropagation && e.preventDefault) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    }
+    if ((this.component || !this.input) && (this.options.inline === false)) {
+      $(window.document).on({
+        'mousedown.colorpicker': $.proxy(this.hide, this)
+      });
+    }
+    this.element.trigger({
+      type: 'showPicker',
+      color: this.color
+    });
+  },
+  hide: function(e) {
+    if ((typeof e !== 'undefined') && e.target) {
+      // Prevent hide if triggered by an event and an element inside the colorpicker has been clicked/touched
+      if (
+        $(e.currentTarget).parents('.colorpicker').length > 0 ||
+        $(e.target).parents('.colorpicker').length > 0
+      ) {
+        return false;
+      }
+    }
+    this.picker.addClass('colorpicker-hidden').removeClass('colorpicker-visible');
+    $(window).off('resize.colorpicker', this.reposition);
+    $(window.document).off({
+      'mousedown.colorpicker': this.hide
+    });
+    this.update();
+    this.element.trigger({
+      type: 'hidePicker',
+      color: this.color
+    });
+  },
+  updateData: function(val) {
+    val = val || this.color.toString(this.format, false);
+    this.element.data('color', val);
+    return val;
+  },
+  updateInput: function(val) {
+    val = val || this.color.toString(this.format, false);
+    if (this.input !== false) {
+      this.input.prop('value', val);
+      this.input.trigger('change');
+    }
+    return val;
+  },
+  updatePicker: function(val) {
+    if (typeof val !== 'undefined') {
+      this.color = this.createColor(val);
+    }
+    var sl = (this.options.horizontal === false) ? this.options.sliders : this.options.slidersHorz;
+    var icns = this.picker.find('i');
+    if (icns.length === 0) {
+      return;
+    }
+    if (this.options.horizontal === false) {
+      sl = this.options.sliders;
+      icns.eq(1).css('top', sl.hue.maxTop * (1 - this.color.value.h)).end()
+        .eq(2).css('top', sl.alpha.maxTop * (1 - this.color.value.a));
+    } else {
+      sl = this.options.slidersHorz;
+      icns.eq(1).css('left', sl.hue.maxLeft * (1 - this.color.value.h)).end()
+        .eq(2).css('left', sl.alpha.maxLeft * (1 - this.color.value.a));
+    }
+    icns.eq(0).css({
+      'top': sl.saturation.maxTop - this.color.value.b * sl.saturation.maxTop,
+      'left': this.color.value.s * sl.saturation.maxLeft
+    });
+
+    this.picker.find('.colorpicker-saturation')
+      .css('backgroundColor', (this.options.hexNumberSignPrefix ? '' : '#') + this.color.toHex(this.color.value.h, 1, 1, 1));
+
+    this.picker.find('.colorpicker-alpha')
+      .css('backgroundColor', (this.options.hexNumberSignPrefix ? '' : '#') + this.color.toHex());
+
+    this.picker.find('.colorpicker-color, .colorpicker-color div')
+      .css('backgroundColor', this.color.toString(this.format, true));
+
+    return val;
+  },
+  updateComponent: function(val) {
+    var color;
+
+    if (typeof val !== 'undefined') {
+      color = this.createColor(val);
+    } else {
+      color = this.color;
+    }
+
+    if (this.component !== false) {
+      var icn = this.component.find('i').eq(0);
+      if (icn.length > 0) {
+        icn.css({
+          'backgroundColor': color.toString(this.format, true)
+        });
+      } else {
+        this.component.css({
+          'backgroundColor': color.toString(this.format, true)
+        });
+      }
+    }
+
+    return color.toString(this.format, false);
+  },
+  update: function(force) {
+    var val;
+    if ((this.getValue(false) !== false) || (force === true)) {
+      // Update input/data only if the current value is not empty
+      val = this.updateComponent();
+      this.updateInput(val);
+      this.updateData(val);
+      this.updatePicker(); // only update picker if value is not empty
+    }
+    return val;
+
+  },
+  setValue: function(val) { // set color manually
+    this.color = this.createColor(val);
+    this.update(true);
+    this.element.trigger({
+      type: 'changeColor',
+      color: this.color,
+      value: val
+    });
+  },
+  /**
+   * Creates a new color using the instance options
+   * @protected
+   * @param {String} val
+   * @returns {Color}
+   */
+  createColor: function(val) {
+    return new Color(
+      val ? val : null,
+      this.options.colorSelectors,
+      this.options.fallbackColor ? this.options.fallbackColor : this.color,
+      this.options.fallbackFormat,
+      this.options.hexNumberSignPrefix
+    );
+  },
+  getValue: function(defaultValue) {
+    defaultValue = (typeof defaultValue === 'undefined') ? this.options.fallbackColor : defaultValue;
+    var val;
+    if (this.hasInput()) {
+      val = this.input.val();
+    } else {
+      val = this.element.data('color');
+    }
+    if ((val === undefined) || (val === '') || (val === null)) {
+      // if not defined or empty, return default
+      val = defaultValue;
+    }
+    return val;
+  },
+  hasInput: function() {
+    return (this.input !== false);
+  },
+  isDisabled: function() {
+    if (this.hasInput()) {
+      return (this.input.prop('disabled') === true);
+    }
+    return false;
+  },
+  disable: function() {
+    if (this.hasInput()) {
+      this.input.prop('disabled', true);
+      this.element.trigger({
+        type: 'disable',
+        color: this.color,
+        value: this.getValue()
+      });
+      return true;
+    }
+    return false;
+  },
+  enable: function() {
+    if (this.hasInput()) {
+      this.input.prop('disabled', false);
+      this.element.trigger({
+        type: 'enable',
+        color: this.color,
+        value: this.getValue()
+      });
+      return true;
+    }
+    return false;
+  },
+  currentSlider: null,
+  mousePointer: {
+    left: 0,
+    top: 0
+  },
+  mousedown: function(e) {
+    if (!e.pageX && !e.pageY && e.originalEvent && e.originalEvent.touches) {
+      e.pageX = e.originalEvent.touches[0].pageX;
+      e.pageY = e.originalEvent.touches[0].pageY;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+
+    var target = $(e.target);
+
+    //detect the slider and set the limits and callbacks
+    var zone = target.closest('div');
+    var sl = this.options.horizontal ? this.options.slidersHorz : this.options.sliders;
+    if (!zone.is('.colorpicker')) {
+      if (zone.is('.colorpicker-saturation')) {
+        this.currentSlider = $.extend({}, sl.saturation);
+      } else if (zone.is('.colorpicker-hue')) {
+        this.currentSlider = $.extend({}, sl.hue);
+      } else if (zone.is('.colorpicker-alpha')) {
+        this.currentSlider = $.extend({}, sl.alpha);
+      } else {
+        return false;
+      }
+      var offset = zone.offset();
+      //reference to guide's style
+      this.currentSlider.guide = zone.find('i')[0].style;
+      this.currentSlider.left = e.pageX - offset.left;
+      this.currentSlider.top = e.pageY - offset.top;
+      this.mousePointer = {
+        left: e.pageX,
+        top: e.pageY
+      };
+      //trigger mousemove to move the guide to the current position
+      $(window.document).on({
+        'mousemove.colorpicker': $.proxy(this.mousemove, this),
+        'touchmove.colorpicker': $.proxy(this.mousemove, this),
+        'mouseup.colorpicker': $.proxy(this.mouseup, this),
+        'touchend.colorpicker': $.proxy(this.mouseup, this)
+      }).trigger('mousemove');
+    }
+    return false;
+  },
+  mousemove: function(e) {
+    if (!e.pageX && !e.pageY && e.originalEvent && e.originalEvent.touches) {
+      e.pageX = e.originalEvent.touches[0].pageX;
+      e.pageY = e.originalEvent.touches[0].pageY;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    var left = Math.max(
+      0,
+      Math.min(
+        this.currentSlider.maxLeft,
+        this.currentSlider.left + ((e.pageX || this.mousePointer.left) - this.mousePointer.left)
+      )
+    );
+    var top = Math.max(
+      0,
+      Math.min(
+        this.currentSlider.maxTop,
+        this.currentSlider.top + ((e.pageY || this.mousePointer.top) - this.mousePointer.top)
+      )
+    );
+    this.currentSlider.guide.left = left + 'px';
+    this.currentSlider.guide.top = top + 'px';
+    if (this.currentSlider.callLeft) {
+      this.color[this.currentSlider.callLeft].call(this.color, left / this.currentSlider.maxLeft);
+    }
+    if (this.currentSlider.callTop) {
+      this.color[this.currentSlider.callTop].call(this.color, top / this.currentSlider.maxTop);
+    }
+    // Change format dynamically
+    // Only occurs if user choose the dynamic format by
+    // setting option format to false
+    if (
+      this.options.format === false &&
+      (this.currentSlider.callTop === 'setAlpha' ||
+        this.currentSlider.callLeft === 'setAlpha')
+    ) {
+
+      // Converting from hex / rgb to rgba
+      if (this.color.value.a !== 1) {
+        this.format = 'rgba';
+        this.color.origFormat = 'rgba';
+      }
+
+      // Converting from rgba to hex
+      else {
+        this.format = 'hex';
+        this.color.origFormat = 'hex';
+      }
+    }
+    this.update(true);
+
+    this.element.trigger({
+      type: 'changeColor',
+      color: this.color
+    });
+    return false;
+  },
+  mouseup: function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    $(window.document).off({
+      'mousemove.colorpicker': this.mousemove,
+      'touchmove.colorpicker': this.mousemove,
+      'mouseup.colorpicker': this.mouseup,
+      'touchend.colorpicker': this.mouseup
+    });
+    return false;
+  },
+  change: function(e) {
+    this.keyup(e);
+  },
+  keyup: function(e) {
+    if ((e.keyCode === 38)) {
+      if (this.color.value.a < 1) {
+        this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100;
+      }
+      this.update(true);
+    } else if ((e.keyCode === 40)) {
+      if (this.color.value.a > 0) {
+        this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100;
+      }
+      this.update(true);
+    } else {
+      this.color = this.createColor(this.input.val());
+      // Change format dynamically
+      // Only occurs if user choose the dynamic format by
+      // setting option format to false
+      if (this.color.origFormat && this.options.format === false) {
+        this.format = this.color.origFormat;
+      }
+      if (this.getValue(false) !== false) {
+        this.updateData();
+        this.updateComponent();
+        this.updatePicker();
+      }
+    }
+    this.element.trigger({
+      type: 'changeColor',
+      color: this.color,
+      value: this.input.val()
+    });
+  }
+};
+
+$.colorpicker = Colorpicker;
+
+$.fn.colorpicker = function(option) {
+  var apiArgs = Array.prototype.slice.call(arguments, 1),
+    isSingleElement = (this.length === 1),
+    returnValue = null;
+
+  var $jq = this.each(function() {
+    var $this = $(this),
+      inst = $this.data('colorpicker'),
+      options = ((typeof option === 'object') ? option : {});
+
+    if (!inst) {
+      inst = new Colorpicker(this, options);
+      $this.data('colorpicker', inst);
+    }
+
+    if (typeof option === 'string') {
+      if ($.isFunction(inst[option])) {
+        returnValue = inst[option].apply(inst, apiArgs);
+      } else { // its a property ?
+        if (apiArgs.length) {
+          // set property
+          inst[option] = apiArgs[0];
+        }
+        returnValue = inst[option];
+      }
+    } else {
+      returnValue = $this;
+    }
+  });
+  return isSingleElement ? returnValue : $jq;
+};
+
+$.fn.colorpicker.constructor = Colorpicker;
@@ -0,0 +1,65 @@
+/*
+ * Default plugin options
+ */
+var defaults = {
+  horizontal: false, // horizontal mode layout ?
+  inline: false, //forces to show the colorpicker as an inline element
+  color: false, //forces a color
+  format: false, //forces a format
+  input: 'input', // children input selector
+  container: false, // container selector
+  component: '.add-on, .input-group-addon', // children component selector
+  fallbackColor: false, // fallback color value. null = keeps current color.
+  fallbackFormat: 'hex', // fallback color format
+  hexNumberSignPrefix: true, // put a '#' (number sign) before hex strings
+  sliders: {
+    saturation: {
+      maxLeft: 100,
+      maxTop: 100,
+      callLeft: 'setSaturation',
+      callTop: 'setBrightness'
+    },
+    hue: {
+      maxLeft: 0,
+      maxTop: 100,
+      callLeft: false,
+      callTop: 'setHue'
+    },
+    alpha: {
+      maxLeft: 0,
+      maxTop: 100,
+      callLeft: false,
+      callTop: 'setAlpha'
+    }
+  },
+  slidersHorz: {
+    saturation: {
+      maxLeft: 100,
+      maxTop: 100,
+      callLeft: 'setSaturation',
+      callTop: 'setBrightness'
+    },
+    hue: {
+      maxLeft: 100,
+      maxTop: 0,
+      callLeft: 'setHue',
+      callTop: false
+    },
+    alpha: {
+      maxLeft: 100,
+      maxTop: 0,
+      callLeft: 'setAlpha',
+      callTop: false
+    }
+  },
+  template: '<div class="colorpicker dropdown-menu">' +
+    '<div class="colorpicker-saturation"><i><b></b></i></div>' +
+    '<div class="colorpicker-hue"><i></i></div>' +
+    '<div class="colorpicker-alpha"><i></i></div>' +
+    '<div class="colorpicker-color"><div /></div>' +
+    '<div class="colorpicker-selectors"></div>' +
+    '</div>',
+  align: 'right',
+  customClass: null, // custom class added to the colorpicker element
+  colorSelectors: null // custom color aliases
+};
@@ -0,0 +1,30 @@
+/*!
+ * Bootstrap Colorpicker v2.5.1
+ * https://itsjavi.com/bootstrap-colorpicker/
+ *
+ * Originally written by (c) 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0.txt
+ *
+ */
+
+(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module unless amdModuleId is set
+    define(["jquery"], function(jq) {
+      return (factory(jq));
+    });
+  } else if (typeof exports === 'object') {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like environments that support module.exports,
+    // like Node.
+    module.exports = factory(require("jquery"));
+  } else if (jQuery && !jQuery.fn.colorpicker) {
+    factory(jQuery);
+  }
+}(this, function($) {
+  'use strict';
+  //@colorpicker-color
+  //@colorpicker-defaults
+  //@colorpicker-component
+}));
@@ -0,0 +1,273 @@
+/*!
+ * Bootstrap Colorpicker v2.5.1
+ * https://itsjavi.com/bootstrap-colorpicker/
+ *
+ * Originally written by (c) 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0.txt
+ *
+ */
+@colorpicker-img-path: "../img/bootstrap-colorpicker/";
+
+.bgImg(@imgFilename) {
+  background-image: url("@{colorpicker-img-path}@{imgFilename}");
+}
+
+.borderRadius(@size) {
+  -webkit-border-radius: @size;
+  -moz-border-radius: @size;
+  border-radius: @size;
+}
+
+.colorpicker-saturation {
+  width: 100px;
+  height: 100px;
+  .bgImg('saturation.png');
+  cursor: crosshair;
+  float: left;
+  i {
+    display: block;
+    height: 5px;
+    width: 5px;
+    border: 1px solid #000;
+    .borderRadius(5px);
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: -4px 0 0 -4px;
+    b {
+      display: block;
+      height: 5px;
+      width: 5px;
+      border: 1px solid #fff;
+      .borderRadius(5px);
+    }
+  }
+}
+
+.colorpicker-hue,
+.colorpicker-alpha {
+  width: 15px;
+  height: 100px;
+  float: left;
+  cursor: row-resize;
+  margin-left: 4px;
+  margin-bottom: 4px;
+}
+
+.colorpicker-hue i,
+.colorpicker-alpha i {
+  display: block;
+  height: 1px;
+  background: #000;
+  border-top: 1px solid #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin-top: -1px;
+}
+
+.colorpicker-hue {
+  .bgImg('hue.png');
+}
+
+.colorpicker-alpha {
+  .bgImg('alpha.png');
+  display: none;
+}
+
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-alpha {
+  background-size: contain;
+}
+
+.colorpicker {
+  padding: 4px;
+  min-width: 130px;
+  margin-top: 1px;
+  .borderRadius(4px);
+  z-index: 2500;
+}
+
+.colorpicker:before,
+.colorpicker:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+
+.colorpicker:after {
+  clear: both;
+}
+
+.colorpicker:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  top: -7px;
+  left: 6px;
+}
+
+.colorpicker:after {
+  content: '';
+  display: inline-block;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #ffffff;
+  position: absolute;
+  top: -6px;
+  left: 7px;
+}
+
+.colorpicker div {
+  position: relative;
+}
+
+.colorpicker.colorpicker-with-alpha {
+  min-width: 140px;
+}
+
+.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
+  display: block;
+}
+
+.colorpicker-color {
+  height: 10px;
+  margin-top: 5px;
+  clear: both;
+  .bgImg('alpha.png');
+  background-position: 0 100%;
+}
+
+.colorpicker-color div {
+  height: 10px;
+}
+
+.colorpicker-selectors {
+  display: none;
+  height: 10px;
+  margin-top: 5px;
+  clear: both;
+}
+
+.colorpicker-selectors i {
+  cursor: pointer;
+  float: left;
+  height: 10px;
+  width: 10px;
+}
+
+.colorpicker-selectors i + i {
+  margin-left: 3px;
+}
+
+.colorpicker-element .input-group-addon i,
+.colorpicker-element .add-on i {
+  display: inline-block;
+  cursor: pointer;
+  height: 16px;
+  vertical-align: text-top;
+  width: 16px;
+}
+
+.colorpicker.colorpicker-inline {
+  position: relative;
+  display: inline-block;
+  float: none;
+  z-index: auto;
+}
+
+.colorpicker.colorpicker-horizontal {
+  width: 110px;
+  min-width: 110px;
+  height: auto;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-saturation {
+  margin-bottom: 4px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-color {
+  width: 100px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+  width: 100px;
+  height: 15px;
+  float: left;
+  cursor: col-resize;
+  margin-left: 0px;
+  margin-bottom: 4px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue i,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
+  display: block;
+  height: 15px;
+  background: #ffffff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  border: none;
+  margin-top: 0px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue {
+  .bgImg('hue-horizontal.png');
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+  .bgImg('alpha-horizontal.png');
+}
+
+.colorpicker-right:before {
+  left: auto;
+  right: 6px;
+}
+
+.colorpicker-right:after {
+  left: auto;
+  right: 7px;
+}
+
+.colorpicker-no-arrow:before {
+  border-right: 0;
+  border-left: 0;
+}
+
+.colorpicker-no-arrow:after {
+  border-right: 0;
+  border-left: 0;
+}
+
+.colorpicker,
+.colorpicker-alpha,
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-selectors {
+  &.colorpicker-visible {
+    display: block;
+  }
+}
+
+.colorpicker,
+.colorpicker-alpha,
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-selectors {
+  &.colorpicker-hidden {
+    display: none;
+  }
+}
+
+.colorpicker-inline.colorpicker-visible {
+  display: inline-block;
+}
@@ -0,0 +1,273 @@
+/*!
+ * Bootstrap Colorpicker v2.5.1
+ * https://itsjavi.com/bootstrap-colorpicker/
+ *
+ * Originally written by (c) 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0.txt
+ *
+ */
+$colorpicker-img-path: "../img/bootstrap-colorpicker" !default;
+
+@mixin bgImg($imgFilename) {
+  background-image: url("#{$colorpicker-img-path}/#{$imgFilename}");
+}
+
+@mixin borderRadius($size) {
+  -webkit-border-radius: $size;
+  -moz-border-radius: $size;
+  border-radius: $size;
+}
+
+.colorpicker-saturation {
+  width: 100px;
+  height: 100px;
+  @include bgImg('saturation.png');
+  cursor: crosshair;
+  float: left;
+  i {
+    display: block;
+    height: 5px;
+    width: 5px;
+    border: 1px solid #000;
+    @include borderRadius(5px);
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: -4px 0 0 -4px;
+    b {
+      display: block;
+      height: 5px;
+      width: 5px;
+      border: 1px solid #fff;
+      @include borderRadius(5px);
+    }
+  }
+}
+
+.colorpicker-hue,
+.colorpicker-alpha {
+  width: 15px;
+  height: 100px;
+  float: left;
+  cursor: row-resize;
+  margin-left: 4px;
+  margin-bottom: 4px;
+}
+
+.colorpicker-hue i,
+.colorpicker-alpha i {
+  display: block;
+  height: 1px;
+  background: #000;
+  border-top: 1px solid #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin-top: -1px;
+}
+
+.colorpicker-hue {
+  @include bgImg('hue.png');
+}
+
+.colorpicker-alpha {
+  @include bgImg('alpha.png');
+  display: none;
+}
+
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-alpha {
+  background-size: contain;
+}
+
+.colorpicker {
+  padding: 4px;
+  min-width: 130px;
+  margin-top: 1px;
+  @include borderRadius(4px);
+  z-index: 2500;
+}
+
+.colorpicker:before,
+.colorpicker:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+
+.colorpicker:after {
+  clear: both;
+}
+
+.colorpicker:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  top: -7px;
+  left: 6px;
+}
+
+.colorpicker:after {
+  content: '';
+  display: inline-block;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #ffffff;
+  position: absolute;
+  top: -6px;
+  left: 7px;
+}
+
+.colorpicker div {
+  position: relative;
+}
+
+.colorpicker.colorpicker-with-alpha {
+  min-width: 140px;
+}
+
+.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
+  display: block;
+}
+
+.colorpicker-color {
+  height: 10px;
+  margin-top: 5px;
+  clear: both;
+  @include bgImg('alpha.png');
+  background-position: 0 100%;
+}
+
+.colorpicker-color div {
+  height: 10px;
+}
+
+.colorpicker-selectors {
+  display: none;
+  height: 10px;
+  margin-top: 5px;
+  clear: both;
+}
+
+.colorpicker-selectors i {
+  cursor: pointer;
+  float: left;
+  height: 10px;
+  width: 10px;
+}
+
+.colorpicker-selectors i + i {
+  margin-left: 3px;
+}
+
+.colorpicker-element .input-group-addon i,
+.colorpicker-element .add-on i {
+  display: inline-block;
+  cursor: pointer;
+  height: 16px;
+  vertical-align: text-top;
+  width: 16px;
+}
+
+.colorpicker.colorpicker-inline {
+  position: relative;
+  display: inline-block;
+  float: none;
+  z-index: auto;
+}
+
+.colorpicker.colorpicker-horizontal {
+  width: 110px;
+  min-width: 110px;
+  height: auto;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-saturation {
+  margin-bottom: 4px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-color {
+  width: 100px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+  width: 100px;
+  height: 15px;
+  float: left;
+  cursor: col-resize;
+  margin-left: 0px;
+  margin-bottom: 4px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue i,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
+  display: block;
+  height: 15px;
+  background: #ffffff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  border: none;
+  margin-top: 0px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue {
+  @include bgImg('hue-horizontal.png');
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+  @include bgImg('alpha-horizontal.png');
+}
+
+.colorpicker-right:before {
+  left: auto;
+  right: 6px;
+}
+
+.colorpicker-right:after {
+  left: auto;
+  right: 7px;
+}
+
+.colorpicker-no-arrow:before {
+  border-right: 0;
+  border-left: 0;
+}
+
+.colorpicker-no-arrow:after {
+  border-right: 0;
+  border-left: 0;
+}
+
+.colorpicker,
+.colorpicker-alpha,
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-selectors {
+  &.colorpicker-visible {
+    display: block;
+  }
+}
+
+.colorpicker,
+.colorpicker-alpha,
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-selectors {
+  &.colorpicker-hidden {
+    display: none;
+  }
+}
+
+.colorpicker-inline.colorpicker-visible {
+  display: inline-block;
+}
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["src/less/colorpicker.less"],"names":[],"mappings":"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","sourcesContent":["/!\n Bootstrap Colorpicker v2.5.1\n * https://itsjavi.com/bootstrap-colorpicker/\n \n Originally written by (c) 2012 Stefan Petre\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0.txt\n \n /\n@colorpicker-img-path: \"../img/bootstrap-colorpicker/\";\n\n.bgImg(@imgFilename) {\n background-image: url(\"@{colorpicker-img-path}@{imgFilename}\");\n}\n\n.borderRadius(@size) {\n -webkit-border-radius: @size;\n -moz-border-radius: @size;\n border-radius: @size;\n}\n\n.colorpicker-saturation {\n width: 100px;\n height: 100px;\n .bgImg('saturation.png');\n cursor: crosshair;\n float: left;\n i {\n display: block;\n height: 5px;\n width: 5px;\n border: 1px solid #000;\n .borderRadius(5px);\n position: absolute;\n top: 0;\n left: 0;\n margin: -4px 0 0 -4px;\n b {\n display: block;\n height: 5px;\n width: 5px;\n border: 1px solid #fff;\n .borderRadius(5px);\n }\n }\n}\n\n.colorpicker-hue,\n.colorpicker-alpha {\n width: 15px;\n height: 100px;\n float: left;\n cursor: row-resize;\n margin-left: 4px;\n margin-bottom: 4px;\n}\n\n.colorpicker-hue i,\n.colorpicker-alpha i {\n display: block;\n height: 1px;\n background: #000;\n border-top: 1px solid #fff;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n margin-top: -1px;\n}\n\n.colorpicker-hue {\n .bgImg('hue.png');\n}\n\n.colorpicker-alpha {\n .bgImg('alpha.png');\n display: none;\n}\n\n.colorpicker-saturation,\n.colorpicker-hue,\n.colorpicker-alpha {\n background-size: contain;\n}\n\n.colorpicker {\n padding: 4px;\n min-width: 130px;\n margin-top: 1px;\n .borderRadius(4px);\n z-index: 2500;\n}\n\n.colorpicker:before,\n.colorpicker:after {\n display: table;\n content: \"\";\n line-height: 0;\n}\n\n.colorpicker:after {\n clear: both;\n}\n\n.colorpicker:before {\n content: '';\n display: inline-block;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n border-bottom: 7px solid #ccc;\n border-bottom-color: rgba(0, 0, 0, 0.2);\n position: absolute;\n top: -7px;\n left: 6px;\n}\n\n.colorpicker:after {\n content: '';\n display: inline-block;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid #ffffff;\n position: absolute;\n top: -6px;\n left: 7px;\n}\n\n.colorpicker div {\n position: relative;\n}\n\n.colorpicker.colorpicker-with-alpha {\n min-width: 140px;\n}\n\n.colorpicker.colorpicker-with-alpha .colorpicker-alpha {\n display: block;\n}\n\n.colorpicker-color {\n height: 10px;\n margin-top: 5px;\n clear: both;\n .bgImg('alpha.png');\n background-position: 0 100%;\n}\n\n.colorpicker-color div {\n height: 10px;\n}\n\n.colorpicker-selectors {\n display: none;\n Line truncated