tui_editor-rails 1.0.2.0

data/vendor/assets/components/tui-color-picker/.bower.json

@@ -0,0 +1,37 @@
+{
+  "name": "tui-color-picker",
+  "authors": [
+    "NHNent. FE Development Lab <dl_javascript@nhnent.com>"
+  ],
+  "main": [
+    "dist/tui-color-picker.js",
+    "dist/tui-color-picker.css"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "examples",
+    "src",
+    "test",
+    "jsdoc.conf.json",
+    "karma.conf.js",
+    "webpack.config.js",
+    "package.json"
+  ],
+  "dependencies": {
+    "tui-code-snippet": "^1.2.5"
+  },
+  "homepage": "https://github.com/nhnent/tui.color-picker",
+  "version": "2.0.1",
+  "_release": "2.0.1",
+  "_resolution": {
+    "type": "version",
+    "tag": "v2.0.1",
+    "commit": "0e98a86c4b67305e0c2c89b7963c186a9e16d5b7"
+  },
+  "_source": "https://github.com/nhnent/tui.color-picker.git",
+  "_target": "^2.0.1",
+  "_originalSource": "tui-color-picker"
+}

data/vendor/assets/components/tui-color-picker/ISSUE_TEMPLATE.md

@@ -0,0 +1,26 @@
+<!--
+Thank you for your contribution.
+
+When it comes to write an issue, please, use the template below.
+To use the template is mandatory for submit new issue and we won't reply the issue that without the template.
+
+And you can write template's contents in Korean also.
+-->
+
+<!-- TEMPLATE -->
+
+## Version
+<!-- Write the version of the grid you are currently using. -->
+
+## Development Environment
+<!-- Write the browser type, OS and so on -->
+
+## Current Behavior
+<!-- Write a description of the current operation. You can add example code, 'CodePen' or 'jsfiddle' links. -->
+
+```js
+// Write example code
+```
+
+## Expected Behavior
+<!-- Write a description of the future action. -->

data/vendor/assets/components/tui-color-picker/LICENSE

@@ -0,0 +1,34 @@
+The MIT License
+
+Copyright (c) 2017 - present NHN Entertainment Corp.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+
+
+
+Base16 colorset for palette default option
+
+Copyright (C) 2012 Chris Kempson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/vendor/assets/components/tui-color-picker/README.md

@@ -0,0 +1,69 @@
+# ColorPicker
+Component that used to select and adjust color values
+
+## Documentation
+* **API** : [https://nhnent.github.io/tui.color-picker/latest](https://nhnent.github.io/tui.color-picker/latest)
+* **Tutorial** : [https://github.com/nhnent/tui.color-picker/wiki](https://github.com/nhnent/tui.color-picker/wiki)
+* **Example** :
+[https://nhnent.github.io/tui.color-picker/latest/tutorial-example01-basic.html](https://nhnent.github.io/tui.color-picker/latest/tutorial-example01-basic.html)
+
+## Dependency
+* [tui-code-snippet](https://github.com/nhnent/tui.code-snippet) >=1.2.5
+
+## Tested Browsers
+### PC
+* IE8~11
+* Edge
+* Chrome
+* Firefox
+* Safari
+
+## Usage
+### Use `npm`
+Install the latest version using `npm` command:
+
+```
+$ npm install tui-color-picker --save
+```
+
+or want to install the each version:
+
+```
+$ npm install tui-color-picker@<version> --save
+```
+
+To access as module format in your code:
+
+```javascript
+var colorPicker = require('tui-color-picker');
+var instance = colorPicker.create({
+    container: document.getElementById('color-picker')
+});
+```
+
+### Use `bower`
+Install the latest version using `bower` command:
+
+```
+$ bower install tui-color-picker
+```
+
+or want to install the each version:
+
+```
+$ bower install tui-color-picker#<tag>
+```
+
+To access as namespace format in your code:
+
+```javascript
+var instance = tui.colorPicker.create({
+    container: document.getElementById('color-picker')
+});
+```
+### Download
+* [Download bundle files from `dist` folder](https://github.com/nhnent/tui.color-pditor/tree/production/dist)
+* [Download all sources for each version](https://github.com/nhnent/tui.color-picker/releases)
+
+## License
+[MIT LICENSE](https://github.com/nhnent/tui.color-picker/raw/master/LICENSE)

data/vendor/assets/components/tui-color-picker/bower.json

@@ -0,0 +1,26 @@
+{
+    "name": "tui-color-picker",
+    "authors": [
+        "NHNent. FE Development Lab <dl_javascript@nhnent.com>"
+    ],
+    "main": [
+        "dist/tui-color-picker.js",
+        "dist/tui-color-picker.css"
+    ],
+    "license": "MIT",
+    "ignore": [
+        "**/.*",
+        "node_modules",
+        "bower_components",
+        "examples",
+        "src",
+        "test",
+        "jsdoc.conf.json",
+        "karma.conf.js",
+        "webpack.config.js",
+        "package.json"
+    ],
+    "dependencies": {
+        "tui-code-snippet": "^1.2.5"
+    }
+}

data/vendor/assets/components/tui-color-picker/dist/tui-color-picker.css

@@ -0,0 +1,148 @@
+/*!
+ * Toast UI Colorpicker
+ * @version 2.0.1
+ * @author NHNEnt FE Development Team <dl_javascript@nhnent.com>
+ * @license MIT
+ */
+.tui-colorpicker-clearfix {
+  zoom: 1;
+}
+.tui-colorpicker-clearfix:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+.tui-colorpicker-vml {
+  behavior: url("#default#VML");
+  display: block;
+}
+.tui-colorpicker-container {
+  width: 152px;
+}
+.tui-colorpicker-palette-container {
+  width: 152px;
+}
+.tui-colorpicker-palette-container ul {
+  width: 152px;
+  margin: 0px;
+  padding: 0px;
+}
+.tui-colorpicker-palette-container li {
+  float: left;
+  margin: 0;
+  padding: 0 3px 3px 0;
+  list-style: none;
+}
+.tui-colorpicker-palette-button {
+  display: block;
+  border: none;
+  overflow: hidden;
+  outline: none;
+  margin: 0px;
+  padding: 0px;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+}
+.tui-colorpicker-palette-button.tui-colorpicker-selected {
+  border: 2px solid #000;
+}
+.tui-colorpicker-palette-hex {
+  font-family: monospace;
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  width: 60px;
+  vertical-align: middle;
+}
+.tui-colorpicker-palette-preview {
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  width: 12px;
+  height: 12px;
+  border: 1px solid #ccc;
+  border: 1px solid #ccc;
+  vertical-align: middle;
+  overflow: hidden;
+}
+.tui-colorpicker-palette-toggle-slider {
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  vertical-align: middle;
+  float: right;
+}
+.tui-colorpicker-slider-container {
+  margin: 5px 0 0 0;
+  height: 122px;
+  zoom: 1;
+}
+.tui-colorpicker-slider-container:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+.tui-colorpicker-slider-left {
+  float: left;
+  width: 120px;
+  height: 120px;
+}
+.tui-colorpicker-slider-right {
+  float: right;
+  width: 32px;
+  height: 120px;
+}
+.tui-colorpicker-svg {
+  display: block;
+}
+.tui-colorpicker-slider-handle {
+  position: absolute;
+  overflow: visible;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  z-index: 2;
+  opacity: 0.9;
+}
+.tui-colorpicker-svg-slider {
+  width: 120px;
+  height: 120px;
+  border: 1px solid #ccc;
+  overflow: hidden;
+}
+.tui-colorpicker-vml-slider {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  border: 1px solid #ccc;
+  overflow: hidden;
+}
+.tui-colorpicker-vml-slider-bg {
+  position: absolute;
+  margin: -1px 0 0 -1px;
+  top: 0;
+  left: 0;
+  width: 122px;
+  height: 122px;
+}
+.tui-colorpicker-svg-huebar {
+  float: right;
+  width: 18px;
+  height: 120px;
+  border: 1px solid #ccc;
+  overflow: visible;
+}
+.tui-colorpicker-vml-huebar {
+  width: 32px;
+  position: relative;
+}
+.tui-colorpicker-vml-huebar-bg {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 18px;
+  height: 121px;
+}

data/vendor/assets/components/tui-color-picker/dist/tui-color-picker.js

@@ -0,0 +1,3146 @@
+/*!
+ * Toast UI Colorpicker
+ * @version 2.0.1
+ * @author NHNEnt FE Development Team <dl_javascript@nhnent.com>
+ * @license MIT
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("tui-code-snippet"));
+	else if(typeof define === 'function' && define.amd)
+		define(["tui-code-snippet"], factory);
+	else if(typeof exports === 'object')
+		exports["colorPicker"] = factory(require("tui-code-snippet"));
+	else
+		root["tui"] = root["tui"] || {}, root["tui"]["colorPicker"] = factory((root["tui"] && root["tui"]["util"]));
+})(this, function(__WEBPACK_EXTERNAL_MODULE_8__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "dist";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	__webpack_require__(1);
+	module.exports = __webpack_require__(6);
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+	// removed by extract-text-webpack-plugin
+
+/***/ }),
+/* 2 */,
+/* 3 */,
+/* 4 */,
+/* 5 */,
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var domutil = __webpack_require__(7);
+	var domevent = __webpack_require__(9);
+	var Collection = __webpack_require__(10);
+	var View = __webpack_require__(11);
+	var Drag = __webpack_require__(12);
+	var create = __webpack_require__(13);
+	var Palette = __webpack_require__(16);
+	var Slider = __webpack_require__(18);
+	var colorutil = __webpack_require__(14);
+	var svgvml = __webpack_require__(19);
+
+	var colorPicker = {
+	    domutil: domutil,
+	    domevent: domevent,
+	    Collection: Collection,
+	    View: View,
+	    Drag: Drag,
+
+	    create: create,
+	    Palette: Palette,
+	    Slider: Slider,
+	    colorutil: colorutil,
+	    svgvml: svgvml
+	};
+
+	module.exports = colorPicker;
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/**
+	 * @fileoverview Utility modules for manipulate DOM elements.
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var snippet = __webpack_require__(8);
+	var domevent = __webpack_require__(9);
+	var Collection = __webpack_require__(10);
+
+	var util = snippet,
+	    posKey = '_pos',
+	    supportSelectStart = 'onselectstart' in document,
+	    prevSelectStyle = '',
+	    domutil,
+	    userSelectProperty;
+
+	var CSS_AUTO_REGEX = /^auto$|^$|%/;
+
+	function trim(str) {
+	    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
+	}
+
+	domutil = {
+	    /**
+	     * Create DOM element and return it.
+	     * @param {string} tagName Tag name to append.
+	     * @param {HTMLElement} [container] HTML element will be parent to created element.
+	     * if not supplied, will use **document.body**
+	     * @param {string} [className] Design class names to appling created element.
+	     * @returns {HTMLElement} HTML element created.
+	     */
+	    appendHTMLElement: function (tagName, container, className) {
+	        var el;
+
+	        className = className || '';
+
+	        el = document.createElement(tagName);
+	        el.className = className;
+
+	        if (container) {
+	            container.appendChild(el);
+	        } else {
+	            document.body.appendChild(el);
+	        }
+
+	        return el;
+	    },
+
+	    /**
+	     * Remove element from parent node.
+	     * @param {HTMLElement} el - element to remove.
+	     */
+	    remove: function (el) {
+	        if (el && el.parentNode) {
+	            el.parentNode.removeChild(el);
+	        }
+	    },
+
+	    /**
+	     * Get element by id
+	     * @param {string} id element id attribute
+	     * @returns {HTMLElement} element
+	     */
+	    get: function (id) {
+	        return document.getElementById(id);
+	    },
+
+	    /**
+	     * Check supplied element is matched selector.
+	     * @param {HTMLElement} el - element to check
+	     * @param {string} selector - selector string to check
+	     * @returns {boolean} match?
+	     */
+	    _matcher: function (el, selector) {
+	        var cssClassSelector = /^\./,
+	            idSelector = /^#/;
+
+	        if (cssClassSelector.test(selector)) {
+	            return domutil.hasClass(el, selector.replace('.', ''));
+	        } else if (idSelector.test(selector)) {
+	            return el.id === selector.replace('#', '');
+	        }
+
+	        return el.nodeName.toLowerCase() === selector.toLowerCase();
+	    },
+
+	    /**
+	     * Find DOM element by specific selectors.
+	     * below three selector only supported.
+	     *
+	     * 1. css selector
+	     * 2. id selector
+	     * 3. nodeName selector
+	     * @param {string} selector selector
+	     * @param {(HTMLElement|string)} [root] You can assign root element to find. if not supplied, document.body will use.
+	     * @param {boolean|function} [multiple=false] - set true then return all elements that meet condition, if set function then use it filter function.
+	     * @returns {HTMLElement} HTML element finded.
+	     */
+	    find: function (selector, root, multiple) {
+	        var result = [],
+	            found = false,
+	            isFirst = util.isUndefined(multiple) || multiple === false,
+	            isFilter = util.isFunction(multiple);
+
+	        if (util.isString(root)) {
+	            root = domutil.get(root);
+	        }
+
+	        root = root || window.document.body;
+
+	        function recurse(el, selector) {
+	            var childNodes = el.childNodes,
+	                i = 0,
+	                len = childNodes.length,
+	                cursor;
+
+	            for (; i < len; i += 1) {
+	                cursor = childNodes[i];
+
+	                if (cursor.nodeName === '#text') {
+	                    continue;
+	                }
+
+	                if (domutil._matcher(cursor, selector)) {
+	                    if (isFilter && multiple(cursor) || !isFilter) {
+	                        result.push(cursor);
+	                    }
+
+	                    if (isFirst) {
+	                        found = true;
+	                        break;
+	                    }
+	                } else if (cursor.childNodes.length > 0) {
+	                    recurse(cursor, selector);
+	                    if (found) {
+	                        break;
+	                    }
+	                }
+	            }
+	        }
+
+	        recurse(root, selector);
+
+	        return isFirst ? result[0] || null : result;
+	    },
+
+	    /**
+	     * Find parent element recursively.
+	     * @param {HTMLElement} el - base element to start find.
+	     * @param {string} selector - selector string for find
+	     * @returns {HTMLElement} - element finded or undefined.
+	     */
+	    closest: function (el, selector) {
+	        var parent = el.parentNode;
+
+	        if (domutil._matcher(el, selector)) {
+	            return el;
+	        }
+
+	        while (parent && parent !== window.document.body) {
+	            if (domutil._matcher(parent, selector)) {
+	                return parent;
+	            }
+
+	            parent = parent.parentNode;
+	        }
+	    },
+
+	    /**
+	     * Return texts inside element.
+	     * @param {HTMLElement} el target element
+	     * @returns {string} text inside node
+	     */
+	    text: function (el) {
+	        var ret = '',
+	            i = 0,
+	            nodeType = el.nodeType;
+
+	        if (nodeType) {
+	            if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
+	                // nodes that available contain other nodes
+	                if (typeof el.textContent === 'string') {
+	                    return el.textContent;
+	                }
+
+	                for (el = el.firstChild; el; el = el.nextSibling) {
+	                    ret += domutil.text(el);
+	                }
+	            } else if (nodeType === 3 || nodeType === 4) {
+	                // TEXT, CDATA SECTION
+	                return el.nodeValue;
+	            }
+	        } else {
+	            for (; el[i]; i += 1) {
+	                ret += domutil.text(el[i]);
+	            }
+	        }
+
+	        return ret;
+	    },
+
+	    /**
+	     * Set data attribute to target element
+	     * @param {HTMLElement} el - element to set data attribute
+	     * @param {string} key - key
+	     * @param {string|number} data - data value
+	     */
+	    setData: function (el, key, data) {
+	        if ('dataset' in el) {
+	            el.dataset[key] = data;
+
+	            return;
+	        }
+
+	        el.setAttribute('data-' + key, data);
+	    },
+
+	    /**
+	     * Get data value from data-attribute
+	     * @param {HTMLElement} el - target element
+	     * @param {string} key - key
+	     * @returns {string} value
+	     */
+	    getData: function (el, key) {
+	        if ('dataset' in el) {
+	            return el.dataset[key];
+	        }
+
+	        return el.getAttribute('data-' + key);
+	    },
+
+	    /**
+	     * Check element has specific design class name.
+	     * @param {HTMLElement} el target element
+	     * @param {string} name css class
+	     * @returns {boolean} return true when element has that css class name
+	     */
+	    hasClass: function (el, name) {
+	        var className;
+
+	        if (!util.isUndefined(el.classList)) {
+	            return el.classList.contains(name);
+	        }
+
+	        className = domutil.getClass(el);
+
+	        return className.length > 0 && new RegExp('(^|\\s)' + name + '(\\s|$)').test(className);
+	    },
+
+	    /**
+	     * Add design class to HTML element.
+	     * @param {HTMLElement} el target element
+	     * @param {string} name css class name
+	     */
+	    addClass: function (el, name) {
+	        var className;
+
+	        if (!util.isUndefined(el.classList)) {
+	            util.forEachArray(name.split(' '), function (value) {
+	                el.classList.add(value);
+	            });
+	        } else if (!domutil.hasClass(el, name)) {
+	            className = domutil.getClass(el);
+	            domutil.setClass(el, (className ? className + ' ' : '') + name);
+	        }
+	    },
+
+	    /**
+	     *
+	     * Overwrite design class to HTML element.
+	     * @param {HTMLElement} el target element
+	     * @param {string} name css class name
+	     */
+	    setClass: function (el, name) {
+	        if (util.isUndefined(el.className.baseVal)) {
+	            el.className = name;
+	        } else {
+	            el.className.baseVal = name;
+	        }
+	    },
+
+	    /**
+	     * Element에 cssClass속성을 제거하는 메서드
+	     * Remove specific design class from HTML element.
+	     * @param {HTMLElement} el target element
+	     * @param {string} name class name to remove
+	     */
+	    removeClass: function (el, name) {
+	        var removed = '';
+
+	        if (!util.isUndefined(el.classList)) {
+	            el.classList.remove(name);
+	        } else {
+	            removed = (' ' + domutil.getClass(el) + ' ').replace(' ' + name + ' ', ' ');
+	            domutil.setClass(el, trim(removed));
+	        }
+	    },
+
+	    /**
+	     * Get HTML element's design classes.
+	     * @param {HTMLElement} el target element
+	     * @returns {string} element css class name
+	     */
+	    getClass: function (el) {
+	        if (!el || !el.className) {
+	            return '';
+	        }
+
+	        return util.isUndefined(el.className.baseVal) ? el.className : el.className.baseVal;
+	    },
+
+	    /**
+	     * Get specific CSS style value from HTML element.
+	     * @param {HTMLElement} el target element
+	     * @param {string} style css attribute name
+	     * @returns {(string|null)} css style value
+	     */
+	    getStyle: function (el, style) {
+	        var value = el.style[style] || el.currentStyle && el.currentStyle[style],
+	            css;
+
+	        if ((!value || value === 'auto') && document.defaultView) {
+	            css = document.defaultView.getComputedStyle(el, null);
+	            value = css ? css[style] : null;
+	        }
+
+	        return value === 'auto' ? null : value;
+	    },
+
+	    /**
+	     * get element's computed style values.
+	     *
+	     * in lower IE8. use polyfill function that return object. it has only one function 'getPropertyValue'
+	     * @param {HTMLElement} el - element want to get style.
+	     * @returns {object} virtual CSSStyleDeclaration object.
+	     */
+	    getComputedStyle: function (el) {
+	        var defaultView = document.defaultView;
+
+	        if (!defaultView || !defaultView.getComputedStyle) {
+	            return {
+	                getPropertyValue: function (prop) {
+	                    var re = /(\-([a-z]){1})/g;
+	                    if (prop === 'float') {
+	                        prop = 'styleFloat';
+	                    }
+
+	                    if (re.test(prop)) {
+	                        prop = prop.replace(re, function () {
+	                            return arguments[2].toUpperCase();
+	                        });
+	                    }
+
+	                    return el.currentStyle[prop] ? el.currentStyle[prop] : null;
+	                }
+	            };
+	        }
+
+	        return document.defaultView.getComputedStyle(el);
+	    },
+
+	    /**
+	     * Set position CSS style.
+	     * @param {HTMLElement} el target element
+	     * @param {number} [x=0] left pixel value.
+	     * @param {number} [y=0] top pixel value.
+	     */
+	    setPosition: function (el, x, y) {
+	        x = util.isUndefined(x) ? 0 : x;
+	        y = util.isUndefined(y) ? 0 : y;
+
+	        el[posKey] = [x, y];
+
+	        el.style.left = x + 'px';
+	        el.style.top = y + 'px';
+	    },
+
+	    /**
+	     * Get position from HTML element.
+	     * @param {HTMLElement} el target element
+	     * @param {boolean} [clear=false] clear cache before calculating position.
+	     * @returns {number[]} point
+	     */
+	    getPosition: function (el, clear) {
+	        var left, top, bound;
+
+	        if (clear) {
+	            el[posKey] = null;
+	        }
+
+	        if (el[posKey]) {
+	            return el[posKey];
+	        }
+
+	        left = 0;
+	        top = 0;
+
+	        if ((CSS_AUTO_REGEX.test(el.style.left) || CSS_AUTO_REGEX.test(el.style.top)) && 'getBoundingClientRect' in el) {
+	            // 엘리먼트의 left또는 top이 'auto'일 때 수단
+	            bound = el.getBoundingClientRect();
+
+	            left = bound.left;
+	            top = bound.top;
+	        } else {
+	            left = parseFloat(el.style.left || 0);
+	            top = parseFloat(el.style.top || 0);
+	        }
+
+	        return [left, top];
+	    },
+
+	    /**
+	     * Return element's size
+	     * @param {HTMLElement} el target element
+	     * @returns {number[]} width, height
+	     */
+	    getSize: function (el) {
+	        var bound,
+	            width = domutil.getStyle(el, 'width'),
+	            height = domutil.getStyle(el, 'height');
+
+	        if ((CSS_AUTO_REGEX.test(width) || CSS_AUTO_REGEX.test(height)) && 'getBoundingClientRect' in el) {
+	            bound = el.getBoundingClientRect();
+	            width = bound.width;
+	            height = bound.height;
+	        } else {
+	            width = parseFloat(width || 0);
+	            height = parseFloat(height || 0);
+	        }
+
+	        return [width, height];
+	    },
+
+	    /**
+	     * Check specific CSS style is available.
+	     * @param {array} props property name to testing
+	     * @returns {(string|boolean)} return true when property is available
+	     * @example
+	     * var props = ['transform', '-webkit-transform'];
+	     * domutil.testProp(props);    // 'transform'
+	     */
+	    testProp: function (props) {
+	        var style = document.documentElement.style,
+	            i = 0,
+	            len = props.length;
+
+	        for (; i < len; i += 1) {
+	            if (props[i] in style) {
+	                return props[i];
+	            }
+	        }
+
+	        return false;
+	    },
+
+	    /**
+	     * Get form data
+	     * @param {HTMLFormElement} formElement - form element to extract data
+	     * @returns {object} form data
+	     */
+	    getFormData: function (formElement) {
+	        var groupedByName = new Collection(function () {
+	            return this.length;
+	        }),
+	            noDisabledFilter = function (el) {
+	            return !el.disabled;
+	        },
+	            output = {};
+
+	        groupedByName.add.apply(groupedByName, domutil.find('input', formElement, noDisabledFilter).concat(domutil.find('select', formElement, noDisabledFilter)).concat(domutil.find('textarea', formElement, noDisabledFilter)));
+
+	        groupedByName = groupedByName.groupBy(function (el) {
+	            return el && el.getAttribute('name') || '_other';
+	        });
+
+	        util.forEach(groupedByName, function (elements, name) {
+	            if (name === '_other') {
+	                return;
+	            }
+
+	            elements.each(function (el) {
+	                var nodeName = el.nodeName.toLowerCase(),
+	                    type = el.type,
+	                    result = [];
+
+	                if (type === 'radio') {
+	                    result = [elements.find(function (el) {
+	                        return el.checked;
+	                    }).toArray().pop()];
+	                } else if (type === 'checkbox') {
+	                    result = elements.find(function (el) {
+	                        return el.checked;
+	                    }).toArray();
+	                } else if (nodeName === 'select') {
+	                    elements.find(function (el) {
+	                        return !!el.childNodes.length;
+	                    }).each(function (el) {
+	                        result = result.concat(domutil.find('option', el, function (opt) {
+	                            return opt.selected;
+	                        }));
+	                    });
+	                } else {
+	                    result = elements.find(function (el) {
+	                        return el.value !== '';
+	                    }).toArray();
+	                }
+
+	                result = util.map(result, function (el) {
+	                    return el.value;
+	                });
+
+	                if (!result.length) {
+	                    result = '';
+	                } else if (result.length === 1) {
+	                    result = result[0];
+	                }
+
+	                output[name] = result;
+	            });
+	        });
+
+	        return output;
+	    }
+	};
+
+	userSelectProperty = domutil.testProp(['userSelect', 'WebkitUserSelect', 'OUserSelect', 'MozUserSelect', 'msUserSelect']);
+
+	/**
+	 * Disable browser's text selection behaviors.
+	 * @method
+	 */
+	domutil.disableTextSelection = function () {
+	    if (supportSelectStart) {
+	        return function () {
+	            domevent.on(window, 'selectstart', domevent.preventDefault);
+	        };
+	    }
+
+	    return function () {
+	        var style = document.documentElement.style;
+	        prevSelectStyle = style[userSelectProperty];
+	        style[userSelectProperty] = 'none';
+	    };
+	}();
+
+	/**
+	 * Enable browser's text selection behaviors.
+	 * @method
+	 */
+	domutil.enableTextSelection = function () {
+	    if (supportSelectStart) {
+	        return function () {
+	            domevent.off(window, 'selectstart', domevent.preventDefault);
+	        };
+	    }
+
+	    return function () {
+	        document.documentElement.style[userSelectProperty] = prevSelectStyle;
+	    };
+	}();
+
+	/**
+	 * Disable browser's image drag behaviors.
+	 */
+	domutil.disableImageDrag = function () {
+	    domevent.on(window, 'dragstart', domevent.preventDefault);
+	};
+
+	/**
+	 * Enable browser's image drag behaviors.
+	 */
+	domutil.enableImageDrag = function () {
+	    domevent.off(window, 'dragstart', domevent.preventDefault);
+	};
+
+	module.exports = domutil;
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+	module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/**
+	 * @fileoverview Utility module for handling DOM events.
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var snippet = __webpack_require__(8);
+
+	var util = snippet,
+	    browser = util.browser,
+	    eventKey = '_evt',
+	    DRAG = {
+	    START: ['touchstart', 'mousedown'],
+	    END: {
+	        mousedown: 'mouseup',
+	        touchstart: 'touchend',
+	        pointerdown: 'touchend',
+	        MSPointerDown: 'touchend'
+	    },
+	    MOVE: {
+	        mousedown: 'mousemove',
+	        touchstart: 'touchmove',
+	        pointerdown: 'touchmove',
+	        MSPointerDown: 'touchmove'
+	    }
+	};
+
+	var domevent = {
+	    /**
+	     * Bind dom events.
+	     * @param {HTMLElement} obj HTMLElement to bind events.
+	     * @param {(string|object)} types Space splitted events names or eventName:handler object.
+	     * @param {*} fn handler function or context for handler method.
+	     * @param {*} [context] context object for handler method.
+	     */
+	    on: function (obj, types, fn, context) {
+	        if (util.isString(types)) {
+	            util.forEach(types.split(' '), function (type) {
+	                domevent._on(obj, type, fn, context);
+	            });
+
+	            return;
+	        }
+
+	        util.forEachOwnProperties(types, function (handler, type) {
+	            domevent._on(obj, type, handler, fn);
+	        });
+	    },
+
+	    /**
+	     * DOM event binding.
+	     * @param {HTMLElement} obj HTMLElement to bind events.
+	     * @param {String} type The name of events.
+	     * @param {*} fn handler function
+	     * @param {*} [context] context object for handler method.
+	     * @private
+	     */
+	    _on: function (obj, type, fn, context) {
+	        var id, handler, originHandler;
+
+	        id = type + util.stamp(fn) + (context ? '_' + util.stamp(context) : '');
+
+	        if (obj[eventKey] && obj[eventKey][id]) {
+	            return;
+	        }
+
+	        handler = function (e) {
+	            fn.call(context || obj, e || window.event);
+	        };
+
+	        originHandler = handler;
+
+	        if ('addEventListener' in obj) {
+	            if (type === 'mouseenter' || type === 'mouseleave') {
+	                handler = function (e) {
+	                    e = e || window.event;
+	                    if (!domevent._checkMouse(obj, e)) {
+	                        return;
+	                    }
+	                    originHandler(e);
+	                };
+	                obj.addEventListener(type === 'mouseenter' ? 'mouseover' : 'mouseout', handler, false);
+	            } else {
+	                if (type === 'mousewheel') {
+	                    obj.addEventListener('DOMMouseScroll', handler, false);
+	                }
+
+	                obj.addEventListener(type, handler, false);
+	            }
+	        } else if ('attachEvent' in obj) {
+	            obj.attachEvent('on' + type, handler);
+	        }
+
+	        obj[eventKey] = obj[eventKey] || {};
+	        obj[eventKey][id] = handler;
+	    },
+
+	    /**
+	     * Unbind DOM Event handler.
+	     * @param {HTMLElement} obj HTMLElement to unbind.
+	     * @param {(string|object)} types Space splitted events names or eventName:handler object.
+	     * @param {*} fn handler function or context for handler method.
+	     * @param {*} [context] context object for handler method.
+	     */
+	    off: function (obj, types, fn, context) {
+	        if (util.isString(types)) {
+	            util.forEach(types.split(' '), function (type) {
+	                domevent._off(obj, type, fn, context);
+	            });
+
+	            return;
+	        }
+
+	        util.forEachOwnProperties(types, function (handler, type) {
+	            domevent._off(obj, type, handler, fn);
+	        });
+	    },
+
+	    /**
+	     * Unbind DOM event handler.
+	     * @param {HTMLElement} obj HTMLElement to unbind.
+	     * @param {String} type The name of event to unbind.
+	     * @param {function()} fn Event handler that supplied when binding.
+	     * @param {*} context context object that supplied when binding.
+	     * @private
+	     */
+	    _off: function (obj, type, fn, context) {
+	        var id = type + util.stamp(fn) + (context ? '_' + util.stamp(context) : ''),
+	            handler = obj[eventKey] && obj[eventKey][id];
+
+	        if (!handler) {
+	            return;
+	        }
+
+	        if ('removeEventListener' in obj) {
+	            if (type === 'mouseenter' || type === 'mouseleave') {
+	                obj.removeEventListener(type === 'mouseenter' ? 'mouseover' : 'mouseout', handler, false);
+	            } else {
+	                if (type === 'mousewheel') {
+	                    obj.removeEventListener('DOMMouseScroll', handler, false);
+	                }
+
+	                obj.removeEventListener(type, handler, false);
+	            }
+	        } else if ('detachEvent' in obj) {
+	            try {
+	                obj.detachEvent('on' + type, handler);
+	            } catch (e) {} //eslint-disable-line
+	        }
+
+	        delete obj[eventKey][id];
+
+	        if (util.keys(obj[eventKey]).length) {
+	            return;
+	        }
+
+	        // throw exception when deleting host object's property in below IE8
+	        if (util.browser.msie && util.browser.version < 9) {
+	            obj[eventKey] = null;
+
+	            return;
+	        }
+
+	        delete obj[eventKey];
+	    },
+
+	    /**
+	     * Bind DOM event. this event will unbind after invokes.
+	     * @param {HTMLElement} obj HTMLElement to bind events.
+	     * @param {(string|object)} types Space splitted events names or eventName:handler object.
+	     * @param {*} fn handler function or context for handler method.
+	     * @param {*} [context] context object for handler method.
+	     */
+	    once: function (obj, types, fn, context) {
+	        var that = this;
+
+	        if (util.isObject(types)) {
+	            util.forEachOwnProperties(types, function (handler, type) {
+	                domevent.once(obj, type, handler, fn);
+	            });
+
+	            return;
+	        }
+
+	        function onceHandler() {
+	            fn.apply(context || obj, arguments);
+	            that._off(obj, types, onceHandler, context);
+	        }
+
+	        domevent.on(obj, types, onceHandler, context);
+	    },
+
+	    /**
+	     * Cancel event bubbling.
+	     * @param {Event} e Event object.
+	     */
+	    stopPropagation: function (e) {
+	        if (e.stopPropagation) {
+	            e.stopPropagation();
+	        } else {
+	            e.cancelBubble = true;
+	        }
+	    },
+
+	    /**
+	     * Cancel browser default actions.
+	     * @param {Event} e Event object.
+	     */
+	    preventDefault: function (e) {
+	        if (e.preventDefault) {
+	            e.preventDefault();
+	        } else {
+	            e.returnValue = false;
+	        }
+	    },
+
+	    /**
+	     * Syntatic sugar of stopPropagation and preventDefault
+	     * @param {Event} e Event object.
+	     */
+	    stop: function (e) {
+	        domevent.preventDefault(e);
+	        domevent.stopPropagation(e);
+	    },
+
+	    /**
+	     * Stop scroll events.
+	     * @param {HTMLElement} el HTML element to prevent scroll.
+	     */
+	    disableScrollPropagation: function (el) {
+	        domevent.on(el, 'mousewheel MozMousePixelScroll', domevent.stopPropagation);
+	    },
+
+	    /**
+	     * Stop all events related with click.
+	     * @param {HTMLElement} el HTML element to prevent all event related with click.
+	     */
+	    disableClickPropagation: function (el) {
+	        domevent.on(el, DRAG.START.join(' ') + ' click dblclick', domevent.stopPropagation);
+	    },
+
+	    /**
+	     * Get mouse position from mouse event.
+	     *
+	     * If supplied relatveElement parameter then return relative position based on element.
+	     * @param {Event} mouseEvent Mouse event object
+	     * @param {HTMLElement} relativeElement HTML element that calculate relative position.
+	     * @returns {number[]} mouse position.
+	     */
+	    getMousePosition: function (mouseEvent, relativeElement) {
+	        var rect;
+
+	        if (!relativeElement) {
+	            return [mouseEvent.clientX, mouseEvent.clientY];
+	        }
+
+	        rect = relativeElement.getBoundingClientRect();
+
+	        return [mouseEvent.clientX - rect.left - relativeElement.clientLeft, mouseEvent.clientY - rect.top - relativeElement.clientTop];
+	    },
+
+	    /**
+	     * Normalize mouse wheel event that different each browsers.
+	     * @param {MouseEvent} e Mouse wheel event.
+	     * @returns {Number} delta
+	     */
+	    getWheelDelta: function (e) {
+	        var delta = 0;
+
+	        if (e.wheelDelta) {
+	            delta = e.wheelDelta / 120;
+	        }
+
+	        if (e.detail) {
+	            delta = -e.detail / 3;
+	        }
+
+	        return delta;
+	    },
+
+	    /**
+	     * prevent firing mouseleave event when mouse entered child elements.
+	     * @param {HTMLElement} el HTML element
+	     * @param {MouseEvent} e Mouse event
+	     * @returns {Boolean} leave?
+	     * @private
+	     */
+	    _checkMouse: function (el, e) {
+	        var related = e.relatedTarget;
+
+	        if (!related) {
+	            return true;
+	        }
+
+	        try {
+	            while (related && related !== el) {
+	                related = related.parentNode;
+	            }
+	        } catch (err) {
+	            return false;
+	        }
+
+	        return related !== el;
+	    },
+
+	    /**
+	     * Trigger specific events to html element.
+	     * @param {HTMLElement} obj HTMLElement
+	     * @param {string} type Event type name
+	     * @param {object} [eventData] Event data
+	     */
+	    trigger: function (obj, type, eventData) {
+	        var rMouseEvent = /(mouse|click)/;
+	        if (util.isUndefined(eventData) && rMouseEvent.exec(type)) {
+	            eventData = domevent.mouseEvent(type);
+	        }
+
+	        if (obj.dispatchEvent) {
+	            obj.dispatchEvent(eventData);
+	        } else if (obj.fireEvent) {
+	            obj.fireEvent('on' + type, eventData);
+	        }
+	    },
+
+	    /**
+	     * Create virtual mouse event.
+	     *
+	     * Tested at
+	     *
+	     * - IE7 ~ IE11
+	     * - Chrome
+	     * - Firefox
+	     * - Safari
+	     * @param {string} type Event type
+	     * @param {object} [eventObj] Event data
+	     * @returns {MouseEvent} Virtual mouse event.
+	     */
+	    mouseEvent: function (type, eventObj) {
+	        var evt, e;
+
+	        e = util.extend({
+	            bubbles: true,
+	            cancelable: type !== 'mousemove',
+	            view: window,
+	            wheelDelta: 0,
+	            detail: 0,
+	            screenX: 0,
+	            screenY: 0,
+	            clientX: 0,
+	            clientY: 0,
+	            ctrlKey: false,
+	            altKey: false,
+	            shiftKey: false,
+	            metaKey: false,
+	            button: 0,
+	            relatedTarget: undefined // eslint-disable-line
+	        }, eventObj);
+
+	        // prevent throw error when inserting wheelDelta property to mouse event on below IE8
+	        if (browser.msie && browser.version < 9) {
+	            delete e.wheelDelta;
+	        }
+
+	        if (typeof document.createEvent === 'function') {
+	            evt = document.createEvent('MouseEvents');
+	            evt.initMouseEvent(type, e.bubbles, e.cancelable, e.view, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, document.body.parentNode);
+	        } else if (document.createEventObject) {
+	            evt = document.createEventObject();
+
+	            util.forEach(e, function (value, propName) {
+	                evt[propName] = value;
+	            }, this);
+	            evt.button = {
+	                0: 1,
+	                1: 4,
+	                2: 2
+	            }[evt.button] || evt.button;
+	        }
+
+	        return evt;
+	    },
+
+	    /**
+	     * Normalize mouse event's button attributes.
+	     *
+	     * Can detect which button is clicked by this method.
+	     *
+	     * Meaning of return numbers
+	     *
+	     * - 0: primary mouse button
+	     * - 1: wheel button or center button
+	     * - 2: secondary mouse button
+	     * @param {MouseEvent} mouseEvent - The mouse event object want to know.
+	     * @returns {number} - The value of meaning which button is clicked?
+	     */
+	    getMouseButton: function (mouseEvent) {
+	        var button,
+	            primary = '0,1,3,5,7',
+	            secondary = '2,6',
+	            wheel = '4';
+
+	        /* istanbul ignore else */
+	        if (document.implementation.hasFeature('MouseEvents', '2.0')) {
+	            return mouseEvent.button;
+	        }
+
+	        button = mouseEvent.button + '';
+	        if (~primary.indexOf(button)) {
+	            return 0;
+	        } else if (~secondary.indexOf(button)) {
+	            return 2;
+	        } else if (~wheel.indexOf(button)) {
+	            return 1;
+	        }
+	    }
+	};
+
+	module.exports = domevent;
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/**
+	 * @fileoverview Common collections.
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var snippet = __webpack_require__(8);
+
+	var util = snippet,
+	    forEachProp = util.forEachOwnProperties,
+	    forEachArr = util.forEachArray,
+	    isFunc = util.isFunction,
+	    isObj = util.isObject;
+
+	var aps = Array.prototype.slice;
+
+	/**
+	 * Common collection.
+	 *
+	 * It need function for get model's unique id.
+	 *
+	 * if the function is not supplied then it use default function {@link Collection#getItemID}
+	 * @constructor
+	 * @param {function} [getItemIDFn] function for get model's id.
+	 * @ignore
+	 */
+	function Collection(getItemIDFn) {
+	    /**
+	     * @type {object.<string, *>}
+	     */
+	    this.items = {};
+
+	    /**
+	     * @type {number}
+	     */
+	    this.length = 0;
+
+	    if (isFunc(getItemIDFn)) {
+	        /**
+	         * @type {function}
+	         */
+	        this.getItemID = getItemIDFn;
+	    }
+	}
+
+	/**********
+	 * static props
+	 **********/
+
+	/**
+	 * Combind supplied function filters and condition.
+	 * @param {...function} filters - function filters
+	 * @returns {function} combined filter
+	 */
+	Collection.and = function (filters) {
+	    var cnt;
+
+	    filters = aps.call(arguments);
+	    cnt = filters.length;
+
+	    return function (item) {
+	        var i = 0;
+
+	        for (; i < cnt; i += 1) {
+	            if (!filters[i].call(null, item)) {
+	                return false;
+	            }
+	        }
+
+	        return true;
+	    };
+	};
+
+	/**
+	 * Combine multiple function filters with OR clause.
+	 * @param {...function} filters - function filters
+	 * @returns {function} combined filter
+	 */
+	Collection.or = function (filters) {
+	    var cnt;
+
+	    filters = aps.call(arguments);
+	    cnt = filters.length;
+
+	    return function (item) {
+	        var i = 1,
+	            result = filters[0].call(null, item);
+
+	        for (; i < cnt; i += 1) {
+	            result = result || filters[i].call(null, item);
+	        }
+
+	        return result;
+	    };
+	};
+
+	/**
+	 * Merge several collections.
+	 *
+	 * You can\'t merge collections different _getEventID functions. Take case of use.
+	 * @param {...Collection} collections collection arguments to merge
+	 * @returns {Collection} merged collection.
+	 */
+	Collection.merge = function (collections) {
+	    // eslint-disable-line
+	    var cols = aps.call(arguments),
+	        newItems = {},
+	        merged = new Collection(cols[0].getItemID),
+	        extend = util.extend;
+
+	    forEachArr(cols, function (col) {
+	        extend(newItems, col.items);
+	    });
+
+	    merged.items = newItems;
+	    merged.length = util.keys(merged.items).length;
+
+	    return merged;
+	};
+
+	/**********
+	 * prototype props
+	 **********/
+
+	/**
+	 * get model's unique id.
+	 * @param {object} item model instance.
+	 * @returns {number} model unique id.
+	 */
+	Collection.prototype.getItemID = function (item) {
+	    return item._id + '';
+	};
+
+	/**
+	 * add models.
+	 * @param {...*} item models to add this collection.
+	 */
+	Collection.prototype.add = function (item) {
+	    var id, ownItems;
+
+	    if (arguments.length > 1) {
+	        forEachArr(aps.call(arguments), function (o) {
+	            this.add(o);
+	        }, this);
+
+	        return;
+	    }
+
+	    id = this.getItemID(item);
+	    ownItems = this.items;
+
+	    if (!ownItems[id]) {
+	        this.length += 1;
+	    }
+	    ownItems[id] = item;
+	};
+
+	/**
+	 * remove models.
+	 * @param {...(object|string|number)} id model instance or unique id to delete.
+	 * @returns {array} deleted model list.
+	 */
+	Collection.prototype.remove = function (id) {
+	    var removed = [],
+	        ownItems,
+	        itemToRemove;
+
+	    if (!this.length) {
+	        return removed;
+	    }
+
+	    if (arguments.length > 1) {
+	        removed = util.map(aps.call(arguments), function (id) {
+	            return this.remove(id);
+	        }, this);
+
+	        return removed;
+	    }
+
+	    ownItems = this.items;
+
+	    if (isObj(id)) {
+	        id = this.getItemID(id);
+	    }
+
+	    if (!ownItems[id]) {
+	        return removed;
+	    }
+
+	    this.length -= 1;
+	    itemToRemove = ownItems[id];
+	    delete ownItems[id];
+
+	    return itemToRemove;
+	};
+
+	/**
+	 * remove all models in collection.
+	 */
+	Collection.prototype.clear = function () {
+	    this.items = {};
+	    this.length = 0;
+	};
+
+	/**
+	 * check collection has specific model.
+	 * @param {(object|string|number|function)} id model instance or id or filter function to check
+	 * @returns {boolean} is has model?
+	 */
+	Collection.prototype.has = function (id) {
+	    var isFilter, has;
+
+	    if (!this.length) {
+	        return false;
+	    }
+
+	    isFilter = isFunc(id);
+	    has = false;
+
+	    if (isFilter) {
+	        this.each(function (item) {
+	            if (id(item) === true) {
+	                has = true;
+
+	                return false;
+	            }
+
+	            return true;
+	        });
+	    } else {
+	        id = isObj(id) ? this.getItemID(id) : id;
+	        has = util.isExisty(this.items[id]);
+	    }
+
+	    return has;
+	};
+
+	/**
+	 * invoke callback when model exist in collection.
+	 * @param {(string|number)} id model unique id.
+	 * @param {function} fn the callback.
+	 * @param {*} [context] callback context.
+	 */
+	Collection.prototype.doWhenHas = function (id, fn, context) {
+	    var item = this.items[id];
+
+	    if (!util.isExisty(item)) {
+	        return;
+	    }
+
+	    fn.call(context || this, item);
+	};
+
+	/**
+	 * Search model. and return new collection.
+	 * @param {function} filter filter function.
+	 * @returns {Collection} new collection with filtered models.
+	 * @example
+	 * collection.find(function(item) {
+	 *     return item.edited === true;
+	 * });
+	 *
+	 * function filter1(item) {
+	 *     return item.edited === false;
+	 * }
+	 *
+	 * function filter2(item) {
+	 *     return item.disabled === false;
+	 * }
+	 *
+	 * collection.find(Collection.and(filter1, filter2));
+	 *
+	 * collection.find(Collection.or(filter1, filter2));
+	 */
+	Collection.prototype.find = function (filter) {
+	    var result = new Collection();
+
+	    if (this.hasOwnProperty('getItemID')) {
+	        result.getItemID = this.getItemID;
+	    }
+
+	    this.each(function (item) {
+	        if (filter(item) === true) {
+	            result.add(item);
+	        }
+	    });
+
+	    return result;
+	};
+
+	/**
+	 * Group element by specific key values.
+	 *
+	 * if key parameter is function then invoke it and use returned value.
+	 * @param {(string|number|function|array)} key key property or getter function. if string[] supplied, create each collection before grouping.
+	 * @param {function} [groupFunc] - function that return each group's key
+	 * @returns {object.<string, Collection>} grouped object
+	 * @example
+	 *
+	 * // pass `string`, `number`, `boolean` type value then group by property value.
+	 * collection.groupBy('gender');    // group by 'gender' property value.
+	 * collection.groupBy(50);          // group by '50' property value.
+	 *
+	 * // pass `function` then group by return value. each invocation `function` is called with `(item)`.
+	 * collection.groupBy(function(item) {
+	 *     if (item.score > 60) {
+	 *         return 'pass';
+	 *     }
+	 *     return 'fail';
+	 * });
+	 *
+	 * // pass `array` with first arguments then create each collection before grouping.
+	 * collection.groupBy(['go', 'ruby', 'javascript']);
+	 * // result: { 'go': empty Collection, 'ruby': empty Collection, 'javascript': empty Collection }
+	 *
+	 * // can pass `function` with `array` then group each elements.
+	 * collection.groupBy(['go', 'ruby', 'javascript'], function(item) {
+	 *     if (item.isFast) {
+	 *         return 'go';
+	 *     }
+	 *
+	 *     return item.name;
+	 * });
+	 */
+	Collection.prototype.groupBy = function (key, groupFunc) {
+	    var result = {},
+	        collection,
+	        baseValue,
+	        keyIsFunc = isFunc(key),
+	        getItemIDFn = this.getItemID;
+
+	    if (util.isArray(key)) {
+	        util.forEachArray(key, function (k) {
+	            result[k + ''] = new Collection(getItemIDFn);
+	        });
+
+	        if (!groupFunc) {
+	            return result;
+	        }
+
+	        key = groupFunc;
+	        keyIsFunc = true;
+	    }
+
+	    this.each(function (item) {
+	        if (keyIsFunc) {
+	            baseValue = key(item);
+	        } else {
+	            baseValue = item[key];
+
+	            if (isFunc(baseValue)) {
+	                baseValue = baseValue.apply(item);
+	            }
+	        }
+
+	        collection = result[baseValue];
+
+	        if (!collection) {
+	            collection = result[baseValue] = new Collection(getItemIDFn);
+	        }
+
+	        collection.add(item);
+	    });
+
+	    return result;
+	};
+
+	/**
+	 * Return single item in collection.
+	 *
+	 * Returned item is inserted in this collection firstly.
+	 * @returns {object} item.
+	 */
+	Collection.prototype.single = function () {
+	    var result;
+
+	    this.each(function (item) {
+	        result = item;
+
+	        return false;
+	    }, this);
+
+	    return result;
+	};
+
+	/**
+	 * sort a basis of supplied compare function.
+	 * @param {function} compareFunction compareFunction
+	 * @returns {array} sorted array.
+	 */
+	Collection.prototype.sort = function (compareFunction) {
+	    var arr = [];
+
+	    this.each(function (item) {
+	        arr.push(item);
+	    });
+
+	    if (isFunc(compareFunction)) {
+	        arr = arr.sort(compareFunction);
+	    }
+
+	    return arr;
+	};
+
+	/**
+	 * iterate each model element.
+	 *
+	 * when iteratee return false then break the loop.
+	 * @param {function} iteratee iteratee(item, index, items)
+	 * @param {*} [context] context
+	 */
+	Collection.prototype.each = function (iteratee, context) {
+	    forEachProp(this.items, iteratee, context || this);
+	};
+
+	/**
+	 * return new array with collection items.
+	 * @returns {array} new array.
+	 */
+	Collection.prototype.toArray = function () {
+	    if (!this.length) {
+	        return [];
+	    }
+
+	    return util.map(this.items, function (item) {
+	        return item;
+	    });
+	};
+
+	module.exports = Collection;
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/**
+	 * @fileoverview The base class of views.
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var util = __webpack_require__(8);
+	var domutil = __webpack_require__(7);
+	var Collection = __webpack_require__(10);
+
+	/**
+	 * Base class of views.
+	 *
+	 * All views create own container element inside supplied container element.
+	 * @constructor
+	 * @param {options} options The object for describe view's specs.
+	 * @param {HTMLElement} container Default container element for view. you can use this element for this.container syntax.
+	 * @ignore
+	 */
+	function View(options, container) {
+	    var id = util.stamp(this);
+
+	    options = options || {};
+
+	    if (util.isUndefined(container)) {
+	        container = domutil.appendHTMLElement('div');
+	    }
+
+	    domutil.addClass(container, 'tui-view-' + id);
+
+	    /**
+	     * unique id
+	     * @type {number}
+	     */
+	    this.id = id;
+
+	    /**
+	     * base element of view.
+	     * @type {HTMLDIVElement}
+	     */
+	    this.container = container;
+
+	    /**
+	     * child views.
+	     * @type {Collection}
+	     */
+	    this.childs = new Collection(function (view) {
+	        return util.stamp(view);
+	    });
+
+	    /**
+	     * parent view instance.
+	     * @type {View}
+	     */
+	    this.parent = null;
+	}
+
+	/**
+	 * Add child views.
+	 * @param {View} view The view instance to add.
+	 * @param {function} [fn] Function for invoke before add. parent view class is supplied first arguments.
+	 */
+	View.prototype.addChild = function (view, fn) {
+	    if (fn) {
+	        fn.call(view, this);
+	    }
+	    // add parent view
+	    view.parent = this;
+
+	    this.childs.add(view);
+	};
+
+	/**
+	 * Remove added child view.
+	 * @param {(number|View)} id View id or instance itself to remove.
+	 * @param {function} [fn] Function for invoke before remove. parent view class is supplied first arguments.
+	 */
+	View.prototype.removeChild = function (id, fn) {
+	    var view = util.isNumber(id) ? this.childs.items[id] : id;
+
+	    id = util.stamp(view);
+
+	    if (fn) {
+	        fn.call(view, this);
+	    }
+
+	    this.childs.remove(id);
+	};
+
+	/**
+	 * Render view recursively.
+	 */
+	View.prototype.render = function () {
+	    this.childs.each(function (childView) {
+	        childView.render();
+	    });
+	};
+
+	/**
+	 * Invoke function recursively.
+	 * @param {function} fn - function to invoke child view recursively
+	 * @param {boolean} [skipThis=false] - set true then skip invoke with this(root) view.
+	 */
+	View.prototype.recursive = function (fn, skipThis) {
+	    if (!util.isFunction(fn)) {
+	        return;
+	    }
+
+	    if (!skipThis) {
+	        fn(this);
+	    }
+
+	    this.childs.each(function (childView) {
+	        childView.recursive(fn);
+	    });
+	};
+
+	/**
+	 * Resize view recursively to parent.
+	 */
+	View.prototype.resize = function () {
+	    var args = Array.prototype.slice.call(arguments),
+	        parent = this.parent;
+
+	    while (parent) {
+	        if (util.isFunction(parent._onResize)) {
+	            parent._onResize.apply(parent, args);
+	        }
+
+	        parent = parent.parent;
+	    }
+	};
+
+	/**
+	 * Invoking method before destroying.
+	 */
+	View.prototype._beforeDestroy = function () {};
+
+	/**
+	 * Clear properties
+	 */
+	View.prototype._destroy = function () {
+	    this._beforeDestroy();
+	    this.childs.clear();
+	    this.container.innerHTML = '';
+
+	    this.id = this.parent = this.childs = this.container = null;
+	};
+
+	/**
+	 * Destroy child view recursively.
+	 * @param {boolean} isChildView - Whether it is the child view or not
+	 */
+	View.prototype.destroy = function (isChildView) {
+	    this.childs.each(function (childView) {
+	        childView.destroy(true);
+	        childView._destroy();
+	    });
+
+	    if (isChildView) {
+	        return;
+	    }
+
+	    this._destroy();
+	};
+
+	/**
+	 * Calculate view's container element bound.
+	 * @returns {object} The bound of container element.
+	 */
+	View.prototype.getViewBound = function () {
+	    var container = this.container,
+	        position = domutil.getPosition(container),
+	        size = domutil.getSize(container);
+
+	    return {
+	        x: position[0],
+	        y: position[1],
+	        width: size[0],
+	        height: size[1]
+	    };
+	};
+
+	module.exports = View;
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/* WEBPACK VAR INJECTION */(function(global) {/**
+	 * @fileoverview General drag handler
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var util = __webpack_require__(8);
+	var domutil = __webpack_require__(7);
+	var domevent = __webpack_require__(9);
+
+	/**
+	 * @constructor
+	 * @mixes CustomEvents
+	 * @param {object} options - options for drag handler
+	 * @param {number} [options.distance=10] - distance in pixels after mouse must move before dragging should start
+	 * @param {HTMLElement} container - container element to bind drag events
+	 * @ignore
+	 */
+	function Drag(options, container) {
+	    domevent.on(container, 'mousedown', this._onMouseDown, this);
+
+	    this.options = util.extend({
+	        distance: 10
+	    }, options);
+
+	    /**
+	     * @type {HTMLElement}
+	     */
+	    this.container = container;
+
+	    /**
+	     * @type {boolean}
+	     */
+	    this._isMoved = false;
+
+	    /**
+	     * dragging distance in pixel between mousedown and firing dragStart events
+	     * @type {number}
+	     */
+	    this._distance = 0;
+
+	    /**
+	     * @type {boolean}
+	     */
+	    this._dragStartFired = false;
+
+	    /**
+	     * @type {object}
+	     */
+	    this._dragStartEventData = null;
+	}
+
+	/**
+	 * Destroy method.
+	 */
+	Drag.prototype.destroy = function () {
+	    domevent.off(this.container, 'mousedown', this._onMouseDown, this);
+
+	    this.options = this.container = this._isMoved = this._distance = this._dragStartFired = this._dragStartEventData = null;
+	};
+
+	/**
+	 * Toggle events for mouse dragging.
+	 * @param {boolean} toBind - bind events related with dragging when supplied "true"
+	 */
+	Drag.prototype._toggleDragEvent = function (toBind) {
+	    var container = this.container,
+	        domMethod,
+	        method;
+
+	    if (toBind) {
+	        domMethod = 'on';
+	        method = 'disable';
+	    } else {
+	        domMethod = 'off';
+	        method = 'enable';
+	    }
+
+	    domutil[method + 'TextSelection'](container);
+	    domutil[method + 'ImageDrag'](container);
+	    domevent[domMethod](global.document, {
+	        mousemove: this._onMouseMove,
+	        mouseup: this._onMouseUp
+	    }, this);
+	};
+
+	/**
+	 * Normalize mouse event object.
+	 * @param {MouseEvent} mouseEvent - mouse event object.
+	 * @returns {object} normalized mouse event data.
+	 */
+	Drag.prototype._getEventData = function (mouseEvent) {
+	    return {
+	        target: mouseEvent.target || mouseEvent.srcElement,
+	        originEvent: mouseEvent
+	    };
+	};
+
+	/**
+	 * MouseDown DOM event handler.
+	 * @param {MouseEvent} mouseDownEvent MouseDown event object.
+	 */
+	Drag.prototype._onMouseDown = function (mouseDownEvent) {
+	    // only primary button can start drag.
+	    if (domevent.getMouseButton(mouseDownEvent) !== 0) {
+	        return;
+	    }
+
+	    this._distance = 0;
+	    this._dragStartFired = false;
+	    this._dragStartEventData = this._getEventData(mouseDownEvent);
+
+	    this._toggleDragEvent(true);
+	};
+
+	/**
+	 * MouseMove DOM event handler.
+	 * @emits Drag#drag
+	 * @emits Drag#dragStart
+	 * @param {MouseEvent} mouseMoveEvent MouseMove event object.
+	 */
+	Drag.prototype._onMouseMove = function (mouseMoveEvent) {
+	    var distance = this.options.distance;
+	    // prevent automatic scrolling.
+	    domevent.preventDefault(mouseMoveEvent);
+
+	    this._isMoved = true;
+
+	    if (this._distance < distance) {
+	        this._distance += 1;
+
+	        return;
+	    }
+
+	    if (!this._dragStartFired) {
+	        this._dragStartFired = true;
+
+	        /**
+	         * Drag starts events. cancelable.
+	         * @event Drag#dragStart
+	         * @type {object}
+	         * @property {HTMLElement} target - target element in this event.
+	         * @property {MouseEvent} originEvent - original mouse event object.
+	         */
+	        if (!this.invoke('dragStart', this._dragStartEventData)) {
+	            this._toggleDragEvent(false);
+
+	            return;
+	        }
+	    }
+
+	    /**
+	     * Events while dragging.
+	     * @event Drag#drag
+	     * @type {object}
+	     * @property {HTMLElement} target - target element in this event.
+	     * @property {MouseEvent} originEvent - original mouse event object.
+	     */
+	    this.fire('drag', this._getEventData(mouseMoveEvent));
+	};
+
+	/**
+	 * MouseUp DOM event handler.
+	 * @param {MouseEvent} mouseUpEvent MouseUp event object.
+	 * @emits Drag#dragEnd
+	 * @emits Drag#click
+	 */
+	Drag.prototype._onMouseUp = function (mouseUpEvent) {
+	    this._toggleDragEvent(false);
+
+	    // emit "click" event when not emitted drag event between mousedown and mouseup.
+	    if (this._isMoved) {
+	        this._isMoved = false;
+
+	        /**
+	         * Drag end events.
+	         * @event Drag#dragEnd
+	         * @type {MouseEvent}
+	         * @property {HTMLElement} target - target element in this event.
+	         * @property {MouseEvent} originEvent - original mouse event object.
+	         */
+	        this.fire('dragEnd', this._getEventData(mouseUpEvent));
+
+	        return;
+	    }
+
+	    /**
+	     * Click events.
+	     * @event Drag#click
+	     * @type {MouseEvent}
+	     * @property {HTMLElement} target - target element in this event.
+	     * @property {MouseEvent} originEvent - original mouse event object.
+	     */
+	    this.fire('click', this._getEventData(mouseUpEvent));
+	};
+
+	util.CustomEvents.mixin(Drag);
+
+	module.exports = Drag;
+	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
+
+/***/ }),
+/* 13 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/**
+	 * @fileoverview ColorPicker factory module
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var util = __webpack_require__(8);
+	var colorutil = __webpack_require__(14);
+	var Layout = __webpack_require__(15);
+	var Palette = __webpack_require__(16);
+	var Slider = __webpack_require__(18);
+
+	/**
+	 * @constructor
+	 * @mixes CustomEvents
+	 * @param {object} options - options for colorpicker component
+	 *  @param {HTMLDivElement} options.container - container element
+	 *  @param {string} [options.color='#ffffff'] - default selected color
+	 *  @param {string[]} [options.preset] - color preset for palette (use base16 palette if not supplied)
+	 *  @param {string} [options.cssPrefix='tui-colorpicker-'] - css prefix text for each child elements
+	 *  @param {string} [options.detailTxt='Detail'] - text for detail button.
+	 * @example
+	 * var colorPicker = tui.colorPicker; // or require('tui-color-picker')
+	 *
+	 * colorPicker.create({
+	 *   container: document.getElementById('color-picker')
+	 * });
+	 */
+	function ColorPicker(options) {
+	    var layout;
+
+	    if (!(this instanceof ColorPicker)) {
+	        return new ColorPicker(options);
+	    }
+	    /**
+	     * Option object
+	     * @type {object}
+	     * @private
+	     */
+	    options = this.options = util.extend({
+	        container: null,
+	        color: '#f8f8f8',
+	        preset: ['#181818', '#282828', '#383838', '#585858', '#b8b8b8', '#d8d8d8', '#e8e8e8', '#f8f8f8', '#ab4642', '#dc9656', '#f7ca88', '#a1b56c', '#86c1b9', '#7cafc2', '#ba8baf', '#a16946'],
+	        cssPrefix: 'tui-colorpicker-',
+	        detailTxt: 'Detail'
+	    }, options);
+
+	    if (!options.container) {
+	        throw new Error('ColorPicker(): need container option.');
+	    }
+
+	    /**********
+	     * Create layout view
+	     **********/
+
+	    /**
+	     * @type {Layout}
+	     * @private
+	     */
+	    layout = this.layout = new Layout(options, options.container);
+
+	    /**********
+	     * Create palette view
+	     **********/
+	    this.palette = new Palette(options, layout.container);
+	    this.palette.on({
+	        '_selectColor': this._onSelectColorInPalette,
+	        '_toggleSlider': this._onToggleSlider
+	    }, this);
+
+	    /**********
+	     * Create slider view
+	     **********/
+	    this.slider = new Slider(options, layout.container);
+	    this.slider.on('_selectColor', this._onSelectColorInSlider, this);
+
+	    /**********
+	     * Add child views
+	     **********/
+	    layout.addChild(this.palette);
+	    layout.addChild(this.slider);
+
+	    this.render(options.color);
+	}
+
+	/**
+	 * Handler method for Palette#_selectColor event
+	 * @private
+	 * @fires ColorPicker#selectColor
+	 * @param {object} selectColorEventData - event data
+	 */
+	ColorPicker.prototype._onSelectColorInPalette = function (selectColorEventData) {
+	    var color = selectColorEventData.color,
+	        opt = this.options;
+
+	    if (!colorutil.isValidRGB(color)) {
+	        this.render();
+
+	        return;
+	    }
+
+	    /**
+	     * @event ColorPicker#selectColor
+	     * @type {object}
+	     * @property {string} color - selected color (hex string)
+	     * @property {string} origin - flags for represent the source of event fires.
+	     */
+	    this.fire('selectColor', {
+	        color: color,
+	        origin: 'palette'
+	    });
+
+	    if (opt.color === color) {
+	        return;
+	    }
+
+	    opt.color = color;
+	    this.render(color);
+	};
+
+	/**
+	 * Handler method for Palette#_toggleSlider event
+	 * @private
+	 */
+	ColorPicker.prototype._onToggleSlider = function () {
+	    this.slider.toggle(!this.slider.isVisible());
+	};
+
+	/**
+	 * Handler method for Slider#_selectColor event
+	 * @private
+	 * @fires ColorPicker#selectColor
+	 * @param {object} selectColorEventData - event data
+	 */
+	ColorPicker.prototype._onSelectColorInSlider = function (selectColorEventData) {
+	    var color = selectColorEventData.color,
+	        opt = this.options;
+
+	    /**
+	     * @event ColorPicker#selectColor
+	     * @type {object}
+	     * @property {string} color - selected color (hex string)
+	     * @property {string} origin - flags for represent the source of event fires.
+	     * @ignore
+	     */
+	    this.fire('selectColor', {
+	        color: color,
+	        origin: 'slider'
+	    });
+
+	    if (opt.color === color) {
+	        return;
+	    }
+
+	    opt.color = color;
+	    this.palette.render(color);
+	};
+
+	/**********
+	 * PUBLIC API
+	 **********/
+
+	/**
+	 * Set color to colorpicker instance.<br>
+	 * The string parameter must be hex color value
+	 * @param {string} hexStr - hex formatted color string
+	 * @example
+	 * colorPicker.setColor('#ffff00');
+	 */
+	ColorPicker.prototype.setColor = function (hexStr) {
+	    if (!colorutil.isValidRGB(hexStr)) {
+	        throw new Error('ColorPicker#setColor(): need valid hex string color value');
+	    }
+
+	    this.options.color = hexStr;
+	    this.render(hexStr);
+	};
+
+	/**
+	 * Get hex color string of current selected color in colorpicker instance.
+	 * @returns {string} hex string formatted color
+	 * @example
+	 * colorPicker.setColor('#ffff00');
+	 * colorPicker.getColor(); // '#ffff00';
+	 */
+	ColorPicker.prototype.getColor = function () {
+	    return this.options.color;
+	};
+
+	/**
+	 * Toggle colorpicker element. set true then reveal colorpicker view.
+	 * @param {boolean} [isShow=false] - A flag to show
+	 * @example
+	 * colorPicker.toggle(false); // hide
+	 * colorPicker.toggle(); // hide
+	 * colorPicker.toggle(true); // show
+	 */
+	ColorPicker.prototype.toggle = function (isShow) {
+	    this.layout.container.style.display = !!isShow ? 'block' : 'none';
+	};
+
+	/**
+	 * Render colorpicker
+	 * @param {string} [color] - selected color
+	 * @ignore
+	 */
+	ColorPicker.prototype.render = function (color) {
+	    this.layout.render(color || this.options.color);
+	};
+
+	/**
+	 * Destroy colorpicker instance.
+	 * @example
+	 * colorPicker.destroy(); // DOM-element is removed
+	 */
+	ColorPicker.prototype.destroy = function () {
+	    this.layout.destroy();
+	    this.options.container.innerHTML = '';
+
+	    this.layout = this.slider = this.palette = this.options = null;
+	};
+
+	util.CustomEvents.mixin(ColorPicker);
+
+	module.exports = ColorPicker;
+
+/***/ }),
+/* 14 */
+/***/ (function(module, exports) {
+
+	/**
+	 * @fileoverview Utility methods to manipulate colors
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var hexRX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i;
+
+	var colorutil = {
+	    /**
+	     * pad left zero characters.
+	     * @param {number} number number value to pad zero.
+	     * @param {number} length pad length to want.
+	     * @returns {string} padded string.
+	     */
+	    leadingZero: function (number, length) {
+	        var zero = '',
+	            i = 0;
+
+	        if ((number + '').length > length) {
+	            return number + '';
+	        }
+
+	        for (; i < length - 1; i += 1) {
+	            zero += '0';
+	        }
+
+	        return (zero + number).slice(length * -1);
+	    },
+
+	    /**
+	     * Check validate of hex string value is RGB
+	     * @param {string} str - rgb hex string
+	     * @returns {boolean} return true when supplied str is valid RGB hex string
+	     */
+	    isValidRGB: function (str) {
+	        return hexRX.test(str);
+	    },
+
+	    // @license RGB <-> HSV conversion utilities based off of http://www.cs.rit.edu/~ncs/color/t_convert.html
+
+	    /**
+	     * Convert color hex string to rgb number array
+	     * @param {string} hexStr - hex string
+	     * @returns {number[]} rgb numbers
+	     */
+	    hexToRGB: function (hexStr) {
+	        var r, g, b;
+
+	        if (!colorutil.isValidRGB(hexStr)) {
+	            return false;
+	        }
+
+	        hexStr = hexStr.substring(1);
+
+	        r = parseInt(hexStr.substr(0, 2), 16);
+	        g = parseInt(hexStr.substr(2, 2), 16);
+	        b = parseInt(hexStr.substr(4, 2), 16);
+
+	        return [r, g, b];
+	    },
+
+	    /**
+	     * Convert rgb number to hex string
+	     * @param {number} r - red
+	     * @param {number} g - green
+	     * @param {number} b - blue
+	     * @returns {string|boolean} return false when supplied rgb number is not valid. otherwise, converted hex string
+	     */
+	    rgbToHEX: function (r, g, b) {
+	        var hexStr = '#' + colorutil.leadingZero(r.toString(16), 2) + colorutil.leadingZero(g.toString(16), 2) + colorutil.leadingZero(b.toString(16), 2);
+
+	        if (colorutil.isValidRGB(hexStr)) {
+	            return hexStr;
+	        }
+
+	        return false;
+	    },
+
+	    /**
+	     * Convert rgb number to HSV value
+	     * @param {number} r - red
+	     * @param {number} g - green
+	     * @param {number} b - blue
+	     * @returns {number[]} hsv value
+	     */
+	    rgbToHSV: function (r, g, b) {
+	        var max, min, h, s, v, d;
+
+	        r /= 255;
+	        g /= 255;
+	        b /= 255;
+	        max = Math.max(r, g, b);
+	        min = Math.min(r, g, b);
+	        v = max;
+	        d = max - min;
+	        s = max === 0 ? 0 : d / max;
+
+	        if (max === min) {
+	            h = 0;
+	        } else {
+	            switch (max) {
+	                case r:
+	                    h = (g - b) / d + (g < b ? 6 : 0);break;
+	                case g:
+	                    h = (b - r) / d + 2;break;
+	                case b:
+	                    h = (r - g) / d + 4;break;
+	                // no default
+	            }
+	            h /= 6;
+	        }
+
+	        return [Math.round(h * 360), Math.round(s * 100), Math.round(v * 100)];
+	    },
+
+	    /**
+	     * Convert HSV number to RGB
+	     * @param {number} h - hue
+	     * @param {number} s - saturation
+	     * @param {number} v - value
+	     * @returns {number[]} rgb value
+	     */
+	    hsvToRGB: function (h, s, v) {
+	        var r, g, b;
+	        var i;
+	        var f, p, q, t;
+
+	        h = Math.max(0, Math.min(360, h));
+	        s = Math.max(0, Math.min(100, s));
+	        v = Math.max(0, Math.min(100, v));
+
+	        s /= 100;
+	        v /= 100;
+
+	        if (s === 0) {
+	            // Achromatic (grey)
+	            r = g = b = v;
+
+	            return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+	        }
+
+	        h /= 60; // sector 0 to 5
+	        i = Math.floor(h);
+	        f = h - i; // factorial part of h
+	        p = v * (1 - s);
+	        q = v * (1 - s * f);
+	        t = v * (1 - s * (1 - f));
+
+	        switch (i) {
+	            case 0:
+	                r = v;g = t;b = p;break;
+	            case 1:
+	                r = q;g = v;b = p;break;
+	            case 2:
+	                r = p;g = v;b = t;break;
+	            case 3:
+	                r = p;g = q;b = v;break;
+	            case 4:
+	                r = t;g = p;b = v;break;
+	            default:
+	                r = v;g = p;b = q;break;
+	        }
+
+	        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+	    }
+	};
+
+	module.exports = colorutil;
+
+/***/ }),
+/* 15 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/**
+	 * @fileoverview ColorPicker layout module
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var util = __webpack_require__(8);
+	var domutil = __webpack_require__(7);
+	var View = __webpack_require__(11);
+
+	/**
+	 * @constructor
+	 * @extends {View}
+	 * @param {object} options - option object
+	 *  @param {string} options.cssPrefix - css prefix for each child elements
+	 * @param {HTMLDivElement} container - container
+	 * @ignore
+	 */
+	function Layout(options, container) {
+	    /**
+	     * option object
+	     * @type {object}
+	     */
+	    this.options = util.extend({
+	        cssPrefix: 'tui-colorpicker-'
+	    }, options);
+
+	    container = domutil.appendHTMLElement('div', container, this.options.cssPrefix + 'container');
+
+	    View.call(this, options, container);
+
+	    this.render();
+	}
+
+	util.inherit(Layout, View);
+
+	/**
+	 * @override
+	 * @param {string} [color] - selected color
+	 */
+	Layout.prototype.render = function (color) {
+	    this.recursive(function (view) {
+	        view.render(color);
+	    }, true);
+	};
+
+	module.exports = Layout;
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/**
+	 * @fileoverview Color palette view
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var util = __webpack_require__(8);
+	var domutil = __webpack_require__(7);
+	var domevent = __webpack_require__(9);
+	var View = __webpack_require__(11);
+	var tmpl = __webpack_require__(17);
+
+	/**
+	 * @constructor
+	 * @extends {View}
+	 * @mixes CustomEvents
+	 * @param {object} options - options for color palette view
+	 *  @param {string[]} options.preset - color list
+	 * @param {HTMLDivElement} container - container element
+	 * @ignore
+	 */
+	function Palette(options, container) {
+	    /**
+	     * option object
+	     * @type {object}
+	     */
+	    this.options = util.extend({
+	        cssPrefix: 'tui-colorpicker-',
+	        preset: ['#181818', '#282828', '#383838', '#585858', '#B8B8B8', '#D8D8D8', '#E8E8E8', '#F8F8F8', '#AB4642', '#DC9656', '#F7CA88', '#A1B56C', '#86C1B9', '#7CAFC2', '#BA8BAF', '#A16946'],
+	        detailTxt: 'Detail'
+	    }, options);
+
+	    container = domutil.appendHTMLElement('div', container, this.options.cssPrefix + 'palette-container');
+
+	    View.call(this, options, container);
+	}
+
+	util.inherit(Palette, View);
+
+	/**
+	 * Mouse click event handler
+	 * @fires Palette#_selectColor
+	 * @fires Palette#_toggleSlider
+	 * @param {MouseEvent} clickEvent - mouse event object
+	 */
+	Palette.prototype._onClick = function (clickEvent) {
+	    var options = this.options,
+	        target = clickEvent.srcElement || clickEvent.target,
+	        eventData = {};
+
+	    if (domutil.hasClass(target, options.cssPrefix + 'palette-button')) {
+	        eventData.color = target.value;
+
+	        /**
+	         * @event Palette#_selectColor
+	         * @type {object}
+	         * @property {string} color - selected color value
+	         */
+	        this.fire('_selectColor', eventData);
+
+	        return;
+	    }
+
+	    if (domutil.hasClass(target, options.cssPrefix + 'palette-toggle-slider')) {
+	        /**
+	         * @event Palette#_toggleSlider
+	         */
+	        this.fire('_toggleSlider');
+	    }
+	};
+
+	/**
+	 * Textbox change event handler
+	 * @fires Palette#_selectColor
+	 * @param {Event} changeEvent - change event object
+	 */
+	Palette.prototype._onChange = function (changeEvent) {
+	    var options = this.options,
+	        target = changeEvent.srcElement || changeEvent.target,
+	        eventData = {};
+
+	    if (domutil.hasClass(target, options.cssPrefix + 'palette-hex')) {
+	        eventData.color = target.value;
+
+	        /**
+	         * @event Palette#_selectColor
+	         * @type {object}
+	         * @property {string} color - selected color value
+	         */
+	        this.fire('_selectColor', eventData);
+	    }
+	};
+
+	/**
+	 * Invoke before destory
+	 * @override
+	 */
+	Palette.prototype._beforeDestroy = function () {
+	    this._toggleEvent(false);
+	};
+
+	/**
+	 * Toggle view DOM events
+	 * @param {boolean} [onOff=false] - true to bind event.
+	 */
+	Palette.prototype._toggleEvent = function (onOff) {
+	    var options = this.options,
+	        container = this.container,
+	        method = domevent[!!onOff ? 'on' : 'off'],
+	        hexTextBox;
+
+	    method(container, 'click', this._onClick, this);
+
+	    hexTextBox = domutil.find('.' + options.cssPrefix + 'palette-hex', container);
+
+	    if (hexTextBox) {
+	        method(hexTextBox, 'change', this._onChange, this);
+	    }
+	};
+
+	/**
+	 * Render palette
+	 * @override
+	 */
+	Palette.prototype.render = function (color) {
+	    var options = this.options,
+	        html = '';
+
+	    this._toggleEvent(false);
+
+	    html = tmpl.layout.replace('{{colorList}}', util.map(options.preset, function (_color) {
+	        var itemHtml = tmpl.item.replace(/{{color}}/g, _color);
+	        itemHtml = itemHtml.replace('{{selected}}', _color === color ? ' ' + options.cssPrefix + 'selected' : '');
+
+	        return itemHtml;
+	    }).join(''));
+
+	    html = html.replace(/{{cssPrefix}}/g, options.cssPrefix).replace('{{detailTxt}}', options.detailTxt).replace(/{{color}}/g, color);
+
+	    this.container.innerHTML = html;
+
+	    this._toggleEvent(true);
+	};
+
+	util.CustomEvents.mixin(Palette);
+
+	module.exports = Palette;
+
+/***/ }),
+/* 17 */
+/***/ (function(module, exports) {
+
+	/**
+	 * @fileoverview Palette view template
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var layout = ['<ul class="{{cssPrefix}}clearfix">{{colorList}}</ul>', '<div class="{{cssPrefix}}clearfix" style="overflow:hidden">', '<input type="button" class="{{cssPrefix}}palette-toggle-slider" value="{{detailTxt}}" />', '<input type="text" class="{{cssPrefix}}palette-hex" value="{{color}}" maxlength="7" />', '<span class="{{cssPrefix}}palette-preview" style="background-color:{{color}};color:{{color}}">{{color}}</span>', '</div>'].join('\n');
+
+	var item = '<li><input class="{{cssPrefix}}palette-button{{selected}}" type="button" style="background-color:{{color}};color:{{color}}" title="{{color}}" value="{{color}}" /></li>';
+
+	module.exports = {
+	    layout: layout,
+	    item: item
+	};
+
+/***/ }),
+/* 18 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/**
+	 * @fileoverview Slider view
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var util = __webpack_require__(8);
+	var domutil = __webpack_require__(7);
+	var domevent = __webpack_require__(9);
+	var svgvml = __webpack_require__(19);
+	var colorutil = __webpack_require__(14);
+	var View = __webpack_require__(11);
+	var Drag = __webpack_require__(12);
+	var tmpl = __webpack_require__(20);
+
+	// Limitation position of point element inside of colorslider and hue bar
+	// Minimum value can to be negative because that using color point of handle element is center point. not left, top point.
+	var COLORSLIDER_POS_LIMIT_RANGE = [-7, 112];
+	var HUEBAR_POS_LIMIT_RANGE = [-3, 115];
+	var HUE_WHEEL_MAX = 359.99;
+
+	/**
+	 * @constructor
+	 * @extends {View}
+	 * @mixes CustomEvents
+	 * @param {object} options - options for view
+	 *  @param {string} options.cssPrefix - design css prefix
+	 * @param {HTMLElement} container - container element
+	 * @ignore
+	 */
+	function Slider(options, container) {
+	    container = domutil.appendHTMLElement('div', container, options.cssPrefix + 'slider-container');
+	    container.style.display = 'none';
+
+	    View.call(this, options, container);
+
+	    /**
+	     * @type {object}
+	     */
+	    this.options = util.extend({
+	        color: '#f8f8f8',
+	        cssPrefix: 'tui-colorpicker-'
+	    }, options);
+
+	    /**
+	     * Cache immutable data in click, drag events.
+	     *
+	     * (i.e. is event related with colorslider? or huebar?)
+	     * @type {object}
+	     * @property {boolean} isColorSlider
+	     * @property {number[]} containerSize
+	     */
+	    this._dragDataCache = {};
+
+	    /**
+	     * Color slider handle element
+	     * @type {SVG|VML}
+	     */
+	    this.sliderHandleElement = null;
+
+	    /**
+	     * hue bar handle element
+	     * @type {SVG|VML}
+	     */
+	    this.huebarHandleElement = null;
+
+	    /**
+	     * Element that render base color in colorslider part
+	     * @type {SVG|VML}
+	     */
+	    this.baseColorElement = null;
+
+	    /**
+	     * @type {Drag}
+	     */
+	    this.drag = new Drag({
+	        distance: 0
+	    }, container);
+
+	    // bind drag events
+	    this.drag.on({
+	        'dragStart': this._onDragStart,
+	        'drag': this._onDrag,
+	        'dragEnd': this._onDragEnd,
+	        'click': this._onClick
+	    }, this);
+	}
+
+	util.inherit(Slider, View);
+
+	/**
+	 * @override
+	 */
+	Slider.prototype._beforeDestroy = function () {
+	    this.drag.off();
+
+	    this.drag = this.options = this._dragDataCache = this.sliderHandleElement = this.huebarHandleElement = this.baseColorElement = null;
+	};
+
+	/**
+	 * Toggle slider view
+	 * @param {boolean} onOff - set true then reveal slider view
+	 */
+	Slider.prototype.toggle = function (onOff) {
+	    this.container.style.display = !!onOff ? 'block' : 'none';
+	};
+
+	/**
+	 * Get slider display status
+	 * @returns {boolean} return true when slider is visible
+	 */
+	Slider.prototype.isVisible = function () {
+	    return this.container.style.display === 'block';
+	};
+
+	/**
+	 * Render slider view
+	 * @override
+	 * @param {string} colorStr - hex string color from parent view (Layout)
+	 */
+	Slider.prototype.render = function (colorStr) {
+	    var that = this,
+	        container = that.container,
+	        options = that.options,
+	        html = tmpl.layout,
+	        rgb,
+	        hsv;
+
+	    html = html.replace(/{{slider}}/, tmpl.slider);
+	    html = html.replace(/{{huebar}}/, tmpl.huebar);
+	    html = html.replace(/{{cssPrefix}}/g, options.cssPrefix);
+
+	    that.container.innerHTML = html;
+
+	    that.sliderHandleElement = domutil.find('.' + options.cssPrefix + 'slider-handle', container);
+	    that.huebarHandleElement = domutil.find('.' + options.cssPrefix + 'huebar-handle', container);
+	    that.baseColorElement = domutil.find('.' + options.cssPrefix + 'slider-basecolor', container);
+
+	    rgb = colorutil.hexToRGB(colorStr);
+	    hsv = colorutil.rgbToHSV.apply(null, rgb);
+
+	    this.moveHue(hsv[0], true);
+	    this.moveSaturationAndValue(hsv[1], hsv[2], true);
+	};
+
+	/**
+	 * Move colorslider by newLeft(X), newTop(Y) value
+	 * @private
+	 * @param {number} newLeft - left pixel value to move handle
+	 * @param {number} newTop - top pixel value to move handle
+	 * @param {boolean} [silent=false] - set true then not fire custom event
+	 */
+	Slider.prototype._moveColorSliderHandle = function (newLeft, newTop, silent) {
+	    var handle = this.sliderHandleElement,
+	        handleColor;
+
+	    // Check position limitation.
+	    newTop = Math.max(COLORSLIDER_POS_LIMIT_RANGE[0], newTop);
+	    newTop = Math.min(COLORSLIDER_POS_LIMIT_RANGE[1], newTop);
+	    newLeft = Math.max(COLORSLIDER_POS_LIMIT_RANGE[0], newLeft);
+	    newLeft = Math.min(COLORSLIDER_POS_LIMIT_RANGE[1], newLeft);
+
+	    svgvml.setTranslateXY(handle, newLeft, newTop);
+
+	    handleColor = newTop > 50 ? 'white' : 'black';
+	    svgvml.setStrokeColor(handle, handleColor);
+
+	    if (!silent) {
+	        this.fire('_selectColor', {
+	            color: colorutil.rgbToHEX.apply(null, this.getRGB())
+	        });
+	    }
+	};
+
+	/**
+	 * Move colorslider by supplied saturation and values.
+	 *
+	 * The movement of color slider handle follow HSV cylinder model. {@link https://en.wikipedia.org/wiki/HSL_and_HSV}
+	 * @param {number} saturation - the percent of saturation (0% ~ 100%)
+	 * @param {number} value - the percent of saturation (0% ~ 100%)
+	 * @param {boolean} [silent=false] - set true then not fire custom event
+	 */
+	Slider.prototype.moveSaturationAndValue = function (saturation, value, silent) {
+	    var absMin, maxValue, newLeft, newTop;
+
+	    saturation = saturation || 0;
+	    value = value || 0;
+
+	    absMin = Math.abs(COLORSLIDER_POS_LIMIT_RANGE[0]);
+	    maxValue = COLORSLIDER_POS_LIMIT_RANGE[1];
+
+	    // subtract absMin value because current color position is not left, top of handle element.
+	    // The saturation. from left 0 to right 100
+	    newLeft = saturation * maxValue / 100 - absMin;
+	    // The Value. from top 100 to bottom 0. that why newTop subtract by maxValue.
+	    newTop = maxValue - value * maxValue / 100 - absMin;
+
+	    this._moveColorSliderHandle(newLeft, newTop, silent);
+	};
+
+	/**
+	 * Move color slider handle to supplied position
+	 *
+	 * The number of X, Y must be related value from color slider container
+	 * @private
+	 * @param {number} x - the pixel value to move handle
+	 * @param {number} y - the pixel value to move handle
+	 */
+	Slider.prototype._moveColorSliderByPosition = function (x, y) {
+	    var offset = COLORSLIDER_POS_LIMIT_RANGE[0];
+	    this._moveColorSliderHandle(x + offset, y + offset);
+	};
+
+	/**
+	 * Get saturation and value value.
+	 * @returns {number[]} saturation and value
+	 */
+	Slider.prototype.getSaturationAndValue = function () {
+	    var absMin = Math.abs(COLORSLIDER_POS_LIMIT_RANGE[0]),
+	        maxValue = absMin + COLORSLIDER_POS_LIMIT_RANGE[1],
+	        position = svgvml.getTranslateXY(this.sliderHandleElement),
+	        saturation,
+	        value;
+
+	    saturation = (position[1] + absMin) / maxValue * 100;
+	    // The value of HSV color model is inverted. top 100 ~ bottom 0. so subtract by 100
+	    value = 100 - (position[0] + absMin) / maxValue * 100;
+
+	    return [saturation, value];
+	};
+
+	/**
+	 * Move hue handle supplied pixel value
+	 * @private
+	 * @param {number} newTop - pixel to move hue handle
+	 * @param {boolean} [silent=false] - set true then not fire custom event
+	 */
+	Slider.prototype._moveHueHandle = function (newTop, silent) {
+	    var hueHandleElement = this.huebarHandleElement,
+	        baseColorElement = this.baseColorElement,
+	        newGradientColor,
+	        hexStr;
+
+	    newTop = Math.max(HUEBAR_POS_LIMIT_RANGE[0], newTop);
+	    newTop = Math.min(HUEBAR_POS_LIMIT_RANGE[1], newTop);
+
+	    svgvml.setTranslateY(hueHandleElement, newTop);
+
+	    newGradientColor = colorutil.hsvToRGB(this.getHue(), 100, 100);
+	    hexStr = colorutil.rgbToHEX.apply(null, newGradientColor);
+
+	    svgvml.setGradientColorStop(baseColorElement, hexStr);
+
+	    if (!silent) {
+	        this.fire('_selectColor', {
+	            color: colorutil.rgbToHEX.apply(null, this.getRGB())
+	        });
+	    }
+	};
+
+	/**
+	 * Move hue bar handle by supplied degree
+	 * @param {number} degree - (0 ~ 359.9 degree)
+	 * @param {boolean} [silent=false] - set true then not fire custom event
+	 */
+	Slider.prototype.moveHue = function (degree, silent) {
+	    var newTop = 0,
+	        absMin,
+	        maxValue;
+
+	    absMin = Math.abs(HUEBAR_POS_LIMIT_RANGE[0]);
+	    maxValue = absMin + HUEBAR_POS_LIMIT_RANGE[1];
+
+	    degree = degree || 0;
+	    newTop = maxValue * degree / HUE_WHEEL_MAX - absMin;
+
+	    this._moveHueHandle(newTop, silent);
+	};
+
+	/**
+	 * Move hue bar handle by supplied percent
+	 * @private
+	 * @param {number} y - pixel value to move hue handle
+	 */
+	Slider.prototype._moveHueByPosition = function (y) {
+	    var offset = HUEBAR_POS_LIMIT_RANGE[0];
+
+	    this._moveHueHandle(y + offset);
+	};
+
+	/**
+	 * Get huebar handle position by color degree
+	 * @returns {number} degree (0 ~ 359.9 degree)
+	 */
+	Slider.prototype.getHue = function () {
+	    var handle = this.huebarHandleElement,
+	        position = svgvml.getTranslateXY(handle),
+	        absMin,
+	        maxValue;
+
+	    absMin = Math.abs(HUEBAR_POS_LIMIT_RANGE[0]);
+	    maxValue = absMin + HUEBAR_POS_LIMIT_RANGE[1];
+
+	    // maxValue : 359.99 = pos.y : x
+	    return (position[0] + absMin) * HUE_WHEEL_MAX / maxValue;
+	};
+
+	/**
+	 * Get HSV value from slider
+	 * @returns {number[]} hsv values
+	 */
+	Slider.prototype.getHSV = function () {
+	    var sv = this.getSaturationAndValue(),
+	        h = this.getHue();
+
+	    return [h].concat(sv);
+	};
+
+	/**
+	 * Get RGB value from slider
+	 * @returns {number[]} RGB value
+	 */
+	Slider.prototype.getRGB = function () {
+	    return colorutil.hsvToRGB.apply(null, this.getHSV());
+	};
+
+	/**********
+	 * Drag event handler
+	 **********/
+
+	/**
+	 * Cache immutable data when dragging or click view
+	 * @param {object} event - Click, DragStart event.
+	 * @returns {object} cached data.
+	 */
+	Slider.prototype._prepareColorSliderForMouseEvent = function (event) {
+	    var options = this.options,
+	        sliderPart = domutil.closest(event.target, '.' + options.cssPrefix + 'slider-part'),
+	        cache;
+
+	    cache = this._dragDataCache = {
+	        isColorSlider: domutil.hasClass(sliderPart, options.cssPrefix + 'slider-left'),
+	        parentElement: sliderPart
+	    };
+
+	    return cache;
+	};
+
+	/**
+	 * Click event handler
+	 * @param {object} clickEvent - Click event from Drag module
+	 */
+	Slider.prototype._onClick = function (clickEvent) {
+	    var cache = this._prepareColorSliderForMouseEvent(clickEvent),
+	        mousePos = domevent.getMousePosition(clickEvent.originEvent, cache.parentElement);
+
+	    if (cache.isColorSlider) {
+	        this._moveColorSliderByPosition(mousePos[0], mousePos[1]);
+	    } else {
+	        this._moveHueByPosition(mousePos[1]);
+	    }
+
+	    this._dragDataCache = null;
+	};
+
+	/**
+	 * DragStart event handler
+	 * @param {object} dragStartEvent - dragStart event data from Drag#dragStart
+	 */
+	Slider.prototype._onDragStart = function (dragStartEvent) {
+	    this._prepareColorSliderForMouseEvent(dragStartEvent);
+	};
+
+	/**
+	 * Drag event handler
+	 * @param {Drag#drag} dragEvent - drag event data
+	 */
+	Slider.prototype._onDrag = function (dragEvent) {
+	    var cache = this._dragDataCache,
+	        mousePos = domevent.getMousePosition(dragEvent.originEvent, cache.parentElement);
+
+	    if (cache.isColorSlider) {
+	        this._moveColorSliderByPosition(mousePos[0], mousePos[1]);
+	    } else {
+	        this._moveHueByPosition(mousePos[1]);
+	    }
+	};
+
+	/**
+	 * Drag#dragEnd event handler
+	 */
+	Slider.prototype._onDragEnd = function () {
+	    this._dragDataCache = null;
+	};
+
+	util.CustomEvents.mixin(Slider);
+
+	module.exports = Slider;
+
+/***/ }),
+/* 19 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/**
+	 * @fileoverview module for manipulate SVG or VML object
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var util = __webpack_require__(8);
+	var PARSE_TRANSLATE_NUM_REGEX = /[\.\-0-9]+/g;
+	var SVG_HUE_HANDLE_RIGHT_POS = -6;
+
+	/* istanbul ignore next */
+	var svgvml = {
+	    /**
+	     * Return true when browser is below IE8.
+	     * @returns {boolean} is old browser?
+	     */
+	    isOldBrowser: function () {
+	        var _isOldBrowser = svgvml._isOldBrowser;
+
+	        if (!util.isExisty(_isOldBrowser)) {
+	            svgvml._isOldBrowser = _isOldBrowser = util.browser.msie && util.browser.version < 9;
+	        }
+
+	        return _isOldBrowser;
+	    },
+
+	    /**
+	     * Get translate transform value
+	     * @param {SVG|VML} obj - svg or vml object that want to know translate x, y
+	     * @returns {number[]} translated coordinates [x, y]
+	     */
+	    getTranslateXY: function (obj) {
+	        var temp;
+
+	        if (svgvml.isOldBrowser()) {
+	            temp = obj.style;
+
+	            return [parseFloat(temp.top), parseFloat(temp.left)];
+	        }
+
+	        temp = obj.getAttribute('transform');
+
+	        if (!temp) {
+	            return [0, 0];
+	        }
+
+	        temp = temp.match(PARSE_TRANSLATE_NUM_REGEX);
+
+	        // need caution for difference of VML, SVG coordinates system.
+	        // translate command need X coords in first parameter. but VML is use CSS coordinate system(top, left)
+	        return [parseFloat(temp[1]), parseFloat(temp[0])];
+	    },
+
+	    /**
+	     * Set translate transform value
+	     * @param {SVG|VML} obj - SVG or VML object to setting translate transform.
+	     * @param {number} x - translate X value
+	     * @param {number} y - translate Y value
+	     */
+	    setTranslateXY: function (obj, x, y) {
+	        if (svgvml.isOldBrowser()) {
+	            obj.style.left = x + 'px';
+	            obj.style.top = y + 'px';
+	        } else {
+	            obj.setAttribute('transform', 'translate(' + x + ',' + y + ')');
+	        }
+	    },
+
+	    /**
+	     * Set translate only Y value
+	     * @param {SVG|VML} obj - SVG or VML object to setting translate transform.
+	     * @param {number} y - translate Y value
+	     */
+	    setTranslateY: function (obj, y) {
+	        if (svgvml.isOldBrowser()) {
+	            obj.style.top = y + 'px';
+	        } else {
+	            obj.setAttribute('transform', 'translate(' + SVG_HUE_HANDLE_RIGHT_POS + ',' + y + ')');
+	        }
+	    },
+
+	    /**
+	     * Set stroke color to SVG or VML object
+	     * @param {SVG|VML} obj - SVG or VML object to setting stroke color
+	     * @param {string} colorStr - color string
+	     */
+	    setStrokeColor: function (obj, colorStr) {
+	        if (svgvml.isOldBrowser()) {
+	            obj.strokecolor = colorStr;
+	        } else {
+	            obj.setAttribute('stroke', colorStr);
+	        }
+	    },
+
+	    /**
+	     * Set gradient stop color to SVG, VML object.
+	     * @param {SVG|VML} obj - SVG, VML object to applying gradient stop color
+	     * @param {string} colorStr - color string
+	     */
+	    setGradientColorStop: function (obj, colorStr) {
+	        if (svgvml.isOldBrowser()) {
+	            obj.color = colorStr;
+	        } else {
+	            obj.setAttribute('stop-color', colorStr);
+	        }
+	    }
+
+	};
+
+	module.exports = svgvml;
+
+/***/ }),
+/* 20 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/* WEBPACK VAR INJECTION */(function(global) {/**
+	 * @fileoverview Slider template
+	 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
+	 */
+
+	'use strict';
+
+	var util = __webpack_require__(8);
+
+	var layout = ['<div class="{{cssPrefix}}slider-left {{cssPrefix}}slider-part">{{slider}}</div>', '<div class="{{cssPrefix}}slider-right {{cssPrefix}}slider-part">{{huebar}}</div>'].join('\n');
+
+	var SVGSlider = ['<svg class="{{cssPrefix}}svg {{cssPrefix}}svg-slider">', '<defs>', '<linearGradient id="{{cssPrefix}}svg-fill-color" x1="0%" y1="0%" x2="100%" y2="0%">', '<stop offset="0%" stop-color="rgb(255,255,255)" />', '<stop class="{{cssPrefix}}slider-basecolor" offset="100%" stop-color="rgb(255,0,0)" />', '</linearGradient>', '<linearGradient id="{{cssPrefix}}svn-fill-black" x1="0%" y1="0%" x2="0%" y2="100%">', '<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0" />', '<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />', '</linearGradient>', '</defs>', '<rect width="100%" height="100%" fill="url(#{{cssPrefix}}svg-fill-color)"></rect>', '<rect width="100%" height="100%" fill="url(#{{cssPrefix}}svn-fill-black)"></rect>', '<path transform="translate(0,0)" class="{{cssPrefix}}slider-handle" d="M0 7.5 L15 7.5 M7.5 15 L7.5 0 M2 7 a5.5 5.5 0 1 1 0 1 Z" stroke="black" stroke-width="0.75" fill="none" />', '</svg>'].join('\n');
+
+	var VMLSlider = ['<div class="{{cssPrefix}}vml-slider">', '<v:rect strokecolor="none" class="{{cssPrefix}}vml {{cssPrefix}}vml-slider-bg">', '<v:fill class="{{cssPrefix}}vml {{cssPrefix}}slider-basecolor" type="gradient" method="none" color="#ff0000" color2="#fff" angle="90" />', '</v:rect>', '<v:rect strokecolor="#ccc" class="{{cssPrefix}}vml {{cssPrefix}}vml-slider-bg">', '<v:fill type="gradient" method="none" color="black" color2="white" o:opacity2="0%" class="{{cssPrefix}}vml" />', '</v:rect>', '<v:shape class="{{cssPrefix}}vml {{cssPrefix}}slider-handle" coordsize="1 1" style="width:1px;height:1px;"' + 'path="m 0,7 l 14,7 m 7,14 l 7,0 ar 12,12 2,2 z" filled="false" stroked="true" />', '</div>'].join('\n');
+
+	var SVGHuebar = ['<svg class="{{cssPrefix}}svg {{cssPrefix}}svg-huebar">', '<defs>', '<linearGradient id="g" x1="0%" y1="0%" x2="0%" y2="100%">', '<stop offset="0%" stop-color="rgb(255,0,0)" />', '<stop offset="16.666%" stop-color="rgb(255,255,0)" />', '<stop offset="33.333%" stop-color="rgb(0,255,0)" />', '<stop offset="50%" stop-color="rgb(0,255,255)" />', '<stop offset="66.666%" stop-color="rgb(0,0,255)" />', '<stop offset="83.333%" stop-color="rgb(255,0,255)" />', '<stop offset="100%" stop-color="rgb(255,0,0)" />', '</linearGradient>', '</defs>', '<rect width="18px" height="100%" fill="url(#g)"></rect>', '<path transform="translate(-6,-3)" class="{{cssPrefix}}huebar-handle" d="M0 0 L4 4 L0 8 L0 0 Z" fill="black" stroke="none" />', '</svg>'].join('\n');
+
+	var VMLHuebar = ['<div class="{{cssPrefix}}vml-huebar">', '<v:rect strokecolor="#ccc" class="{{cssPrefix}}vml {{cssPrefix}}vml-huebar-bg">', '<v:fill type="gradient" method="none" colors="' + '0% rgb(255,0,0), 16.666% rgb(255,255,0), 33.333% rgb(0,255,0), 50% rgb(0,255,255), 66.666% rgb(0,0,255), 83.333% rgb(255,0,255), 100% rgb(255,0,0)' + '" angle="180" class="{{cssPrefix}}vml" />', '</v:rect>', '<v:shape class="{{cssPrefix}}vml {{cssPrefix}}huebar-handle" coordsize="1 1" style="width:1px;height:1px;position:absolute;z-index:1;right:22px;top:-3px;"' + 'path="m 0,0 l 4,4 l 0,8 l 0,0 z" filled="true" fillcolor="black" stroked="false" />', '</div>'].join('\n');
+
+	var isOldBrowser = util.browser.msie && util.browser.version < 9;
+
+	if (isOldBrowser) {
+	    global.document.namespaces.add('v', 'urn:schemas-microsoft-com:vml');
+	}
+
+	module.exports = {
+	    layout: layout,
+	    slider: isOldBrowser ? VMLSlider : SVGSlider,
+	    huebar: isOldBrowser ? VMLHuebar : SVGHuebar
+	};
+	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
+
+/***/ })
+/******/ ])
+});
+;