tui-calendar-rails 1.12.13.1

data/vendor/assets/javascripts/tui-time-picker/tui-time-picker.js

@@ -0,0 +1,4057 @@
+/*!
+ * TOAST UI Time Picker
+ * @version 2.0.3
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["TimePicker"] = factory();
+	else
+		root["tui"] = root["tui"] || {}, root["tui"]["TimePicker"] = factory();
+})(window, function() {
+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] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = 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;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "dist";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 20);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/* eslint-disable complexity */
+/**
+ * @fileoverview Returns the first index at which a given element can be found in the array.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var isArray = __webpack_require__(2);
+
+/**
+ * @module array
+ */
+
+/**
+ * Returns the first index at which a given element can be found in the array
+ * from start index(default 0), or -1 if it is not present.
+ * It compares searchElement to elements of the Array using strict equality
+ * (the same method used by the ===, or triple-equals, operator).
+ * @param {*} searchElement Element to locate in the array
+ * @param {Array} array Array that will be traversed.
+ * @param {number} startIndex Start index in array for searching (default 0)
+ * @returns {number} the First index at which a given element, or -1 if it is not present
+ * @memberof module:array
+ * @example
+ * var inArray = require('tui-code-snippet/array/inArray'); // node, commonjs
+ *
+ * var arr = ['one', 'two', 'three', 'four'];
+ * var idx1 = inArray('one', arr, 3); // -1
+ * var idx2 = inArray('one', arr); // 0
+ */
+function inArray(searchElement, array, startIndex) {
+  var i;
+  var length;
+  startIndex = startIndex || 0;
+
+  if (!isArray(array)) {
+    return -1;
+  }
+
+  if (Array.prototype.indexOf) {
+    return Array.prototype.indexOf.call(array, searchElement, startIndex);
+  }
+
+  length = array.length;
+  for (i = startIndex; startIndex >= 0 && i < length; i += 1) {
+    if (array[i] === searchElement) {
+      return i;
+    }
+  }
+
+  return -1;
+}
+
+module.exports = inArray;
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Extend the target object from other objects.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * @module object
+ */
+
+/**
+ * Extend the target object from other objects.
+ * @param {object} target - Object that will be extended
+ * @param {...object} objects - Objects as sources
+ * @returns {object} Extended object
+ * @memberof module:object
+ */
+function extend(target, objects) { // eslint-disable-line no-unused-vars
+  var hasOwnProp = Object.prototype.hasOwnProperty;
+  var source, prop, i, len;
+
+  for (i = 1, len = arguments.length; i < len; i += 1) {
+    source = arguments[i];
+    for (prop in source) {
+      if (hasOwnProp.call(source, prop)) {
+        target[prop] = source[prop];
+      }
+    }
+  }
+
+  return target;
+}
+
+module.exports = extend;
+
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Check whether the given variable is an instance of Array or not.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * Check whether the given variable is an instance of Array or not.
+ * If the given variable is an instance of Array, return true.
+ * @param {*} obj - Target for checking
+ * @returns {boolean} Is array instance?
+ * @memberof module:type
+ */
+function isArray(obj) {
+  return obj instanceof Array;
+}
+
+module.exports = isArray;
+
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Execute the provided callback once for each element present in the array(or Array-like object) in ascending order.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * Execute the provided callback once for each element present
+ * in the array(or Array-like object) in ascending order.
+ * If the callback function returns false, the loop will be stopped.
+ * Callback function(iteratee) is invoked with three arguments:
+ *  1) The value of the element
+ *  2) The index of the element
+ *  3) The array(or Array-like object) being traversed
+ * @param {Array|Arguments|NodeList} arr The array(or Array-like object) that will be traversed
+ * @param {function} iteratee Callback function
+ * @param {Object} [context] Context(this) of callback function
+ * @memberof module:collection
+ * @example
+ * var forEachArray = require('tui-code-snippet/collection/forEachArray'); // node, commonjs
+ *
+ * var sum = 0;
+ *
+ * forEachArray([1,2,3], function(value){
+ *     sum += value;
+ * });
+ * alert(sum); // 6
+ */
+function forEachArray(arr, iteratee, context) {
+  var index = 0;
+  var len = arr.length;
+
+  context = context || null;
+
+  for (; index < len; index += 1) {
+    if (iteratee.call(context, arr[index], index, arr) === false) {
+      break;
+    }
+  }
+}
+
+module.exports = forEachArray;
+
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Execute the provided callback once for each property of object(or element of array) which actually exist.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var isArray = __webpack_require__(2);
+var forEachArray = __webpack_require__(3);
+var forEachOwnProperties = __webpack_require__(16);
+
+/**
+ * @module collection
+ */
+
+/**
+ * Execute the provided callback once for each property of object(or element of array) which actually exist.
+ * If the object is Array-like object(ex-arguments object), It needs to transform to Array.(see 'ex2' of example).
+ * If the callback function returns false, the loop will be stopped.
+ * Callback function(iteratee) is invoked with three arguments:
+ *  1) The value of the property(or The value of the element)
+ *  2) The name of the property(or The index of the element)
+ *  3) The object being traversed
+ * @param {Object} obj The object that will be traversed
+ * @param {function} iteratee Callback function
+ * @param {Object} [context] Context(this) of callback function
+ * @memberof module:collection
+ * @example
+ * var forEach = require('tui-code-snippet/collection/forEach'); // node, commonjs
+ *
+ * var sum = 0;
+ *
+ * forEach([1,2,3], function(value){
+ *     sum += value;
+ * });
+ * alert(sum); // 6
+ *
+ * // In case of Array-like object
+ * var array = Array.prototype.slice.call(arrayLike); // change to array
+ * forEach(array, function(value){
+ *     sum += value;
+ * });
+ */
+function forEach(obj, iteratee, context) {
+  if (isArray(obj)) {
+    forEachArray(obj, iteratee, context);
+  } else {
+    forEachOwnProperties(obj, iteratee, context);
+  }
+}
+
+module.exports = forEach;
+
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Check whether the given variable is undefined or not.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * Check whether the given variable is undefined or not.
+ * If the given variable is undefined, returns true.
+ * @param {*} obj - Target for checking
+ * @returns {boolean} Is undefined?
+ * @memberof module:type
+ */
+function isUndefined(obj) {
+  return obj === undefined; // eslint-disable-line no-undefined
+}
+
+module.exports = isUndefined;
+
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Check whether the given variable is a string or not.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * Check whether the given variable is a string or not.
+ * If the given variable is a string, return true.
+ * @param {*} obj - Target for checking
+ * @returns {boolean} Is string?
+ * @memberof module:type
+ */
+function isString(obj) {
+  return typeof obj === 'string' || obj instanceof String;
+}
+
+module.exports = isString;
+
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Convert text by binding expressions with context.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var inArray = __webpack_require__(0);
+var forEach = __webpack_require__(4);
+var isArray = __webpack_require__(2);
+var isString = __webpack_require__(6);
+var extend = __webpack_require__(1);
+
+// IE8 does not support capture groups.
+var EXPRESSION_REGEXP = /{{\s?|\s?}}/g;
+var BRACKET_NOTATION_REGEXP = /^[a-zA-Z0-9_@]+\[[a-zA-Z0-9_@"']+\]$/;
+var BRACKET_REGEXP = /\[\s?|\s?\]/;
+var DOT_NOTATION_REGEXP = /^[a-zA-Z_]+\.[a-zA-Z_]+$/;
+var DOT_REGEXP = /\./;
+var STRING_NOTATION_REGEXP = /^["']\w+["']$/;
+var STRING_REGEXP = /"|'/g;
+var NUMBER_REGEXP = /^-?\d+\.?\d*$/;
+
+var EXPRESSION_INTERVAL = 2;
+
+var BLOCK_HELPERS = {
+  'if': handleIf,
+  'each': handleEach,
+  'with': handleWith
+};
+
+var isValidSplit = 'a'.split(/a/).length === 3;
+
+/**
+ * Split by RegExp. (Polyfill for IE8)
+ * @param {string} text - text to be splitted\
+ * @param {RegExp} regexp - regular expression
+ * @returns {Array.<string>}
+ */
+var splitByRegExp = (function() {
+  if (isValidSplit) {
+    return function(text, regexp) {
+      return text.split(regexp);
+    };
+  }
+
+  return function(text, regexp) {
+    var result = [];
+    var prevIndex = 0;
+    var match, index;
+
+    if (!regexp.global) {
+      regexp = new RegExp(regexp, 'g');
+    }
+
+    match = regexp.exec(text);
+    while (match !== null) {
+      index = match.index;
+      result.push(text.slice(prevIndex, index));
+
+      prevIndex = index + match[0].length;
+      match = regexp.exec(text);
+    }
+    result.push(text.slice(prevIndex));
+
+    return result;
+  };
+})();
+
+/**
+ * Find value in the context by an expression.
+ * @param {string} exp - an expression
+ * @param {object} context - context
+ * @returns {*}
+ * @private
+ */
+// eslint-disable-next-line complexity
+function getValueFromContext(exp, context) {
+  var splitedExps;
+  var value = context[exp];
+
+  if (exp === 'true') {
+    value = true;
+  } else if (exp === 'false') {
+    value = false;
+  } else if (STRING_NOTATION_REGEXP.test(exp)) {
+    value = exp.replace(STRING_REGEXP, '');
+  } else if (BRACKET_NOTATION_REGEXP.test(exp)) {
+    splitedExps = exp.split(BRACKET_REGEXP);
+    value = getValueFromContext(splitedExps[0], context)[getValueFromContext(splitedExps[1], context)];
+  } else if (DOT_NOTATION_REGEXP.test(exp)) {
+    splitedExps = exp.split(DOT_REGEXP);
+    value = getValueFromContext(splitedExps[0], context)[splitedExps[1]];
+  } else if (NUMBER_REGEXP.test(exp)) {
+    value = parseFloat(exp);
+  }
+
+  return value;
+}
+
+/**
+ * Extract elseif and else expressions.
+ * @param {Array.<string>} ifExps - args of if expression
+ * @param {Array.<string>} sourcesInsideBlock - sources inside if block
+ * @returns {object} - exps: expressions of if, elseif, and else / sourcesInsideIf: sources inside if, elseif, and else block.
+ * @private
+ */
+function extractElseif(ifExps, sourcesInsideBlock) {
+  var exps = [ifExps];
+  var sourcesInsideIf = [];
+  var otherIfCount = 0;
+  var start = 0;
+
+  // eslint-disable-next-line complexity
+  forEach(sourcesInsideBlock, function(source, index) {
+    if (source.indexOf('if') === 0) {
+      otherIfCount += 1;
+    } else if (source === '/if') {
+      otherIfCount -= 1;
+    } else if (!otherIfCount && (source.indexOf('elseif') === 0 || source === 'else')) {
+      exps.push(source === 'else' ? ['true'] : source.split(' ').slice(1));
+      sourcesInsideIf.push(sourcesInsideBlock.slice(start, index));
+      start = index + 1;
+    }
+  });
+
+  sourcesInsideIf.push(sourcesInsideBlock.slice(start));
+
+  return {
+    exps: exps,
+    sourcesInsideIf: sourcesInsideIf
+  };
+}
+
+/**
+ * Helper function for "if". 
+ * @param {Array.<string>} exps - array of expressions split by spaces
+ * @param {Array.<string>} sourcesInsideBlock - array of sources inside the if block
+ * @param {object} context - context
+ * @returns {string}
+ * @private
+ */
+function handleIf(exps, sourcesInsideBlock, context) {
+  var analyzed = extractElseif(exps, sourcesInsideBlock);
+  var result = false;
+  var compiledSource = '';
+
+  forEach(analyzed.exps, function(exp, index) {
+    result = handleExpression(exp, context);
+    if (result) {
+      compiledSource = compile(analyzed.sourcesInsideIf[index], context);
+    }
+
+    return !result;
+  });
+
+  return compiledSource;
+}
+
+/**
+ * Helper function for "each".
+ * @param {Array.<string>} exps - array of expressions split by spaces
+ * @param {Array.<string>} sourcesInsideBlock - array of sources inside the each block
+ * @param {object} context - context
+ * @returns {string}
+ * @private
+ */
+function handleEach(exps, sourcesInsideBlock, context) {
+  var collection = handleExpression(exps, context);
+  var additionalKey = isArray(collection) ? '@index' : '@key';
+  var additionalContext = {};
+  var result = '';
+
+  forEach(collection, function(item, key) {
+    additionalContext[additionalKey] = key;
+    additionalContext['@this'] = item;
+    extend(context, additionalContext);
+
+    result += compile(sourcesInsideBlock.slice(), context);
+  });
+
+  return result;
+}
+
+/**
+ * Helper function for "with ... as"
+ * @param {Array.<string>} exps - array of expressions split by spaces
+ * @param {Array.<string>} sourcesInsideBlock - array of sources inside the with block
+ * @param {object} context - context
+ * @returns {string}
+ * @private
+ */
+function handleWith(exps, sourcesInsideBlock, context) {
+  var asIndex = inArray('as', exps);
+  var alias = exps[asIndex + 1];
+  var result = handleExpression(exps.slice(0, asIndex), context);
+
+  var additionalContext = {};
+  additionalContext[alias] = result;
+
+  return compile(sourcesInsideBlock, extend(context, additionalContext)) || '';
+}
+
+/**
+ * Extract sources inside block in place.
+ * @param {Array.<string>} sources - array of sources
+ * @param {number} start - index of start block
+ * @param {number} end - index of end block
+ * @returns {Array.<string>}
+ * @private
+ */
+function extractSourcesInsideBlock(sources, start, end) {
+  var sourcesInsideBlock = sources.splice(start + 1, end - start);
+  sourcesInsideBlock.pop();
+
+  return sourcesInsideBlock;
+}
+
+/**
+ * Handle block helper function
+ * @param {string} helperKeyword - helper keyword (ex. if, each, with)
+ * @param {Array.<string>} sourcesToEnd - array of sources after the starting block
+ * @param {object} context - context
+ * @returns {Array.<string>}
+ * @private
+ */
+function handleBlockHelper(helperKeyword, sourcesToEnd, context) {
+  var executeBlockHelper = BLOCK_HELPERS[helperKeyword];
+  var helperCount = 1;
+  var startBlockIndex = 0;
+  var endBlockIndex;
+  var index = startBlockIndex + EXPRESSION_INTERVAL;
+  var expression = sourcesToEnd[index];
+
+  while (helperCount && isString(expression)) {
+    if (expression.indexOf(helperKeyword) === 0) {
+      helperCount += 1;
+    } else if (expression.indexOf('/' + helperKeyword) === 0) {
+      helperCount -= 1;
+      endBlockIndex = index;
+    }
+
+    index += EXPRESSION_INTERVAL;
+    expression = sourcesToEnd[index];
+  }
+
+  if (helperCount) {
+    throw Error(helperKeyword + ' needs {{/' + helperKeyword + '}} expression.');
+  }
+
+  sourcesToEnd[startBlockIndex] = executeBlockHelper(
+    sourcesToEnd[startBlockIndex].split(' ').slice(1),
+    extractSourcesInsideBlock(sourcesToEnd, startBlockIndex, endBlockIndex),
+    context
+  );
+
+  return sourcesToEnd;
+}
+
+/**
+ * Helper function for "custom helper".
+ * If helper is not a function, return helper itself.
+ * @param {Array.<string>} exps - array of expressions split by spaces (first element: helper)
+ * @param {object} context - context
+ * @returns {string}
+ * @private
+ */
+function handleExpression(exps, context) {
+  var result = getValueFromContext(exps[0], context);
+
+  if (result instanceof Function) {
+    return executeFunction(result, exps.slice(1), context);
+  }
+
+  return result;
+}
+
+/**
+ * Execute a helper function.
+ * @param {Function} helper - helper function
+ * @param {Array.<string>} argExps - expressions of arguments
+ * @param {object} context - context
+ * @returns {string} - result of executing the function with arguments
+ * @private
+ */
+function executeFunction(helper, argExps, context) {
+  var args = [];
+  forEach(argExps, function(exp) {
+    args.push(getValueFromContext(exp, context));
+  });
+
+  return helper.apply(null, args);
+}
+
+/**
+ * Get a result of compiling an expression with the context.
+ * @param {Array.<string>} sources - array of sources split by regexp of expression.
+ * @param {object} context - context
+ * @returns {Array.<string>} - array of sources that bind with its context
+ * @private
+ */
+function compile(sources, context) {
+  var index = 1;
+  var expression = sources[index];
+  var exps, firstExp, result;
+
+  while (isString(expression)) {
+    exps = expression.split(' ');
+    firstExp = exps[0];
+
+    if (BLOCK_HELPERS[firstExp]) {
+      result = handleBlockHelper(firstExp, sources.splice(index, sources.length - index), context);
+      sources = sources.concat(result);
+    } else {
+      sources[index] = handleExpression(exps, context);
+    }
+
+    index += EXPRESSION_INTERVAL;
+    expression = sources[index];
+  }
+
+  return sources.join('');
+}
+
+/**
+ * Convert text by binding expressions with context.
+ * <br>
+ * If expression exists in the context, it will be replaced.
+ * ex) '{{title}}' with context {title: 'Hello!'} is converted to 'Hello!'.
+ * An array or object can be accessed using bracket and dot notation.
+ * ex) '{{odds\[2\]}}' with context {odds: \[1, 3, 5\]} is converted to '5'.
+ * ex) '{{evens\[first\]}}' with context {evens: \[2, 4\], first: 0} is converted to '2'.
+ * ex) '{{project\["name"\]}}' and '{{project.name}}' with context {project: {name: 'CodeSnippet'}} is converted to 'CodeSnippet'.
+ * <br>
+ * If replaced expression is a function, next expressions will be arguments of the function.
+ * ex) '{{add 1 2}}' with context {add: function(a, b) {return a + b;}} is converted to '3'.
+ * <br>
+ * It has 3 predefined block helpers '{{helper ...}} ... {{/helper}}': 'if', 'each', 'with ... as ...'.
+ * 1) 'if' evaluates conditional statements. It can use with 'elseif' and 'else'.
+ * 2) 'each' iterates an array or object. It provides '@index'(array), '@key'(object), and '@this'(current element).
+ * 3) 'with ... as ...' provides an alias.
+ * @param {string} text - text with expressions
+ * @param {object} context - context
+ * @returns {string} - text that bind with its context
+ * @memberof module:domUtil
+ * @example
+ * var template = require('tui-code-snippet/domUtil/template');
+ * 
+ * var source = 
+ *     '<h1>'
+ *   +   '{{if isValidNumber title}}'
+ *   +     '{{title}}th'
+ *   +   '{{elseif isValidDate title}}'
+ *   +     'Date: {{title}}'
+ *   +   '{{/if}}'
+ *   + '</h1>'
+ *   + '{{each list}}'
+ *   +   '{{with addOne @index as idx}}'
+ *   +     '<p>{{idx}}: {{@this}}</p>'
+ *   +   '{{/with}}'
+ *   + '{{/each}}';
+ * 
+ * var context = {
+ *   isValidDate: function(text) {
+ *     return /^\d{4}-(0|1)\d-(0|1|2|3)\d$/.test(text);
+ *   },
+ *   isValidNumber: function(text) {
+ *     return /^\d+$/.test(text);
+ *   }
+ *   title: '2019-11-25',
+ *   list: ['Clean the room', 'Wash the dishes'],
+ *   addOne: function(num) {
+ *     return num + 1;
+ *   }
+ * };
+ * 
+ * var result = template(source, context);
+ * console.log(result); // <h1>Date: 2019-11-25</h1><p>1: Clean the room</p><p>2: Wash the dishes</p>
+ */
+function template(text, context) {
+  return compile(splitByRegExp(text, EXPRESSION_REGEXP), context);
+}
+
+module.exports = template;
+
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview This module provides some functions for custom events. And it is implemented in the observer design pattern.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var extend = __webpack_require__(1);
+var isExisty = __webpack_require__(23);
+var isString = __webpack_require__(6);
+var isObject = __webpack_require__(25);
+var isArray = __webpack_require__(2);
+var isFunction = __webpack_require__(26);
+var forEach = __webpack_require__(4);
+
+var R_EVENTNAME_SPLIT = /\s+/g;
+
+/**
+ * @class
+ * @example
+ * // node, commonjs
+ * var CustomEvents = require('tui-code-snippet/customEvents/customEvents');
+ */
+function CustomEvents() {
+  /**
+     * @type {HandlerItem[]}
+     */
+  this.events = null;
+
+  /**
+     * only for checking specific context event was binded
+     * @type {object[]}
+     */
+  this.contexts = null;
+}
+
+/**
+ * Mixin custom events feature to specific constructor
+ * @param {function} func - constructor
+ * @example
+ * var CustomEvents = require('tui-code-snippet/customEvents/customEvents'); // node, commonjs
+ *
+ * var model;
+ * function Model() {
+ *     this.name = '';
+ * }
+ * CustomEvents.mixin(Model);
+ *
+ * model = new Model();
+ * model.on('change', function() { this.name = 'model'; }, this);
+ * model.fire('change');
+ * alert(model.name); // 'model';
+ */
+CustomEvents.mixin = function(func) {
+  extend(func.prototype, CustomEvents.prototype);
+};
+
+/**
+ * Get HandlerItem object
+ * @param {function} handler - handler function
+ * @param {object} [context] - context for handler
+ * @returns {HandlerItem} HandlerItem object
+ * @private
+ */
+CustomEvents.prototype._getHandlerItem = function(handler, context) {
+  var item = {handler: handler};
+
+  if (context) {
+    item.context = context;
+  }
+
+  return item;
+};
+
+/**
+ * Get event object safely
+ * @param {string} [eventName] - create sub event map if not exist.
+ * @returns {(object|array)} event object. if you supplied `eventName`
+ *  parameter then make new array and return it
+ * @private
+ */
+CustomEvents.prototype._safeEvent = function(eventName) {
+  var events = this.events;
+  var byName;
+
+  if (!events) {
+    events = this.events = {};
+  }
+
+  if (eventName) {
+    byName = events[eventName];
+
+    if (!byName) {
+      byName = [];
+      events[eventName] = byName;
+    }
+
+    events = byName;
+  }
+
+  return events;
+};
+
+/**
+ * Get context array safely
+ * @returns {array} context array
+ * @private
+ */
+CustomEvents.prototype._safeContext = function() {
+  var context = this.contexts;
+
+  if (!context) {
+    context = this.contexts = [];
+  }
+
+  return context;
+};
+
+/**
+ * Get index of context
+ * @param {object} ctx - context that used for bind custom event
+ * @returns {number} index of context
+ * @private
+ */
+CustomEvents.prototype._indexOfContext = function(ctx) {
+  var context = this._safeContext();
+  var index = 0;
+
+  while (context[index]) {
+    if (ctx === context[index][0]) {
+      return index;
+    }
+
+    index += 1;
+  }
+
+  return -1;
+};
+
+/**
+ * Memorize supplied context for recognize supplied object is context or
+ *  name: handler pair object when off()
+ * @param {object} ctx - context object to memorize
+ * @private
+ */
+CustomEvents.prototype._memorizeContext = function(ctx) {
+  var context, index;
+
+  if (!isExisty(ctx)) {
+    return;
+  }
+
+  context = this._safeContext();
+  index = this._indexOfContext(ctx);
+
+  if (index > -1) {
+    context[index][1] += 1;
+  } else {
+    context.push([ctx, 1]);
+  }
+};
+
+/**
+ * Forget supplied context object
+ * @param {object} ctx - context object to forget
+ * @private
+ */
+CustomEvents.prototype._forgetContext = function(ctx) {
+  var context, contextIndex;
+
+  if (!isExisty(ctx)) {
+    return;
+  }
+
+  context = this._safeContext();
+  contextIndex = this._indexOfContext(ctx);
+
+  if (contextIndex > -1) {
+    context[contextIndex][1] -= 1;
+
+    if (context[contextIndex][1] <= 0) {
+      context.splice(contextIndex, 1);
+    }
+  }
+};
+
+/**
+ * Bind event handler
+ * @param {(string|{name:string, handler:function})} eventName - custom
+ *  event name or an object {eventName: handler}
+ * @param {(function|object)} [handler] - handler function or context
+ * @param {object} [context] - context for binding
+ * @private
+ */
+CustomEvents.prototype._bindEvent = function(eventName, handler, context) {
+  var events = this._safeEvent(eventName);
+  this._memorizeContext(context);
+  events.push(this._getHandlerItem(handler, context));
+};
+
+/**
+ * Bind event handlers
+ * @param {(string|{name:string, handler:function})} eventName - custom
+ *  event name or an object {eventName: handler}
+ * @param {(function|object)} [handler] - handler function or context
+ * @param {object} [context] - context for binding
+ * //-- #1. Get Module --//
+ * var CustomEvents = require('tui-code-snippet/customEvents/customEvents'); // node, commonjs
+ *
+ * //-- #2. Use method --//
+ * // # 2.1 Basic Usage
+ * CustomEvents.on('onload', handler);
+ *
+ * // # 2.2 With context
+ * CustomEvents.on('onload', handler, myObj);
+ *
+ * // # 2.3 Bind by object that name, handler pairs
+ * CustomEvents.on({
+ *     'play': handler,
+ *     'pause': handler2
+ * });
+ *
+ * // # 2.4 Bind by object that name, handler pairs with context object
+ * CustomEvents.on({
+ *     'play': handler
+ * }, myObj);
+ */
+CustomEvents.prototype.on = function(eventName, handler, context) {
+  var self = this;
+
+  if (isString(eventName)) {
+    // [syntax 1, 2]
+    eventName = eventName.split(R_EVENTNAME_SPLIT);
+    forEach(eventName, function(name) {
+      self._bindEvent(name, handler, context);
+    });
+  } else if (isObject(eventName)) {
+    // [syntax 3, 4]
+    context = handler;
+    forEach(eventName, function(func, name) {
+      self.on(name, func, context);
+    });
+  }
+};
+
+/**
+ * Bind one-shot event handlers
+ * @param {(string|{name:string,handler:function})} eventName - custom
+ *  event name or an object {eventName: handler}
+ * @param {function|object} [handler] - handler function or context
+ * @param {object} [context] - context for binding
+ */
+CustomEvents.prototype.once = function(eventName, handler, context) {
+  var self = this;
+
+  if (isObject(eventName)) {
+    context = handler;
+    forEach(eventName, function(func, name) {
+      self.once(name, func, context);
+    });
+
+    return;
+  }
+
+  function onceHandler() { // eslint-disable-line require-jsdoc
+    handler.apply(context, arguments);
+    self.off(eventName, onceHandler, context);
+  }
+
+  this.on(eventName, onceHandler, context);
+};
+
+/**
+ * Splice supplied array by callback result
+ * @param {array} arr - array to splice
+ * @param {function} predicate - function return boolean
+ * @private
+ */
+CustomEvents.prototype._spliceMatches = function(arr, predicate) {
+  var i = 0;
+  var len;
+
+  if (!isArray(arr)) {
+    return;
+  }
+
+  for (len = arr.length; i < len; i += 1) {
+    if (predicate(arr[i]) === true) {
+      arr.splice(i, 1);
+      len -= 1;
+      i -= 1;
+    }
+  }
+};
+
+/**
+ * Get matcher for unbind specific handler events
+ * @param {function} handler - handler function
+ * @returns {function} handler matcher
+ * @private
+ */
+CustomEvents.prototype._matchHandler = function(handler) {
+  var self = this;
+
+  return function(item) {
+    var needRemove = handler === item.handler;
+
+    if (needRemove) {
+      self._forgetContext(item.context);
+    }
+
+    return needRemove;
+  };
+};
+
+/**
+ * Get matcher for unbind specific context events
+ * @param {object} context - context
+ * @returns {function} object matcher
+ * @private
+ */
+CustomEvents.prototype._matchContext = function(context) {
+  var self = this;
+
+  return function(item) {
+    var needRemove = context === item.context;
+
+    if (needRemove) {
+      self._forgetContext(item.context);
+    }
+
+    return needRemove;
+  };
+};
+
+/**
+ * Get matcher for unbind specific hander, context pair events
+ * @param {function} handler - handler function
+ * @param {object} context - context
+ * @returns {function} handler, context matcher
+ * @private
+ */
+CustomEvents.prototype._matchHandlerAndContext = function(handler, context) {
+  var self = this;
+
+  return function(item) {
+    var matchHandler = (handler === item.handler);
+    var matchContext = (context === item.context);
+    var needRemove = (matchHandler && matchContext);
+
+    if (needRemove) {
+      self._forgetContext(item.context);
+    }
+
+    return needRemove;
+  };
+};
+
+/**
+ * Unbind event by event name
+ * @param {string} eventName - custom event name to unbind
+ * @param {function} [handler] - handler function
+ * @private
+ */
+CustomEvents.prototype._offByEventName = function(eventName, handler) {
+  var self = this;
+  var andByHandler = isFunction(handler);
+  var matchHandler = self._matchHandler(handler);
+
+  eventName = eventName.split(R_EVENTNAME_SPLIT);
+
+  forEach(eventName, function(name) {
+    var handlerItems = self._safeEvent(name);
+
+    if (andByHandler) {
+      self._spliceMatches(handlerItems, matchHandler);
+    } else {
+      forEach(handlerItems, function(item) {
+        self._forgetContext(item.context);
+      });
+
+      self.events[name] = [];
+    }
+  });
+};
+
+/**
+ * Unbind event by handler function
+ * @param {function} handler - handler function
+ * @private
+ */
+CustomEvents.prototype._offByHandler = function(handler) {
+  var self = this;
+  var matchHandler = this._matchHandler(handler);
+
+  forEach(this._safeEvent(), function(handlerItems) {
+    self._spliceMatches(handlerItems, matchHandler);
+  });
+};
+
+/**
+ * Unbind event by object(name: handler pair object or context object)
+ * @param {object} obj - context or {name: handler} pair object
+ * @param {function} handler - handler function
+ * @private
+ */
+CustomEvents.prototype._offByObject = function(obj, handler) {
+  var self = this;
+  var matchFunc;
+
+  if (this._indexOfContext(obj) < 0) {
+    forEach(obj, function(func, name) {
+      self.off(name, func);
+    });
+  } else if (isString(handler)) {
+    matchFunc = this._matchContext(obj);
+
+    self._spliceMatches(this._safeEvent(handler), matchFunc);
+  } else if (isFunction(handler)) {
+    matchFunc = this._matchHandlerAndContext(handler, obj);
+
+    forEach(this._safeEvent(), function(handlerItems) {
+      self._spliceMatches(handlerItems, matchFunc);
+    });
+  } else {
+    matchFunc = this._matchContext(obj);
+
+    forEach(this._safeEvent(), function(handlerItems) {
+      self._spliceMatches(handlerItems, matchFunc);
+    });
+  }
+};
+
+/**
+ * Unbind custom events
+ * @param {(string|object|function)} eventName - event name or context or
+ *  {name: handler} pair object or handler function
+ * @param {(function)} handler - handler function
+ * @example
+ * //-- #1. Get Module --//
+ * var CustomEvents = require('tui-code-snippet/customEvents/customEvents'); // node, commonjs
+ *
+ * //-- #2. Use method --//
+ * // # 2.1 off by event name
+ * CustomEvents.off('onload');
+ *
+ * // # 2.2 off by event name and handler
+ * CustomEvents.off('play', handler);
+ *
+ * // # 2.3 off by handler
+ * CustomEvents.off(handler);
+ *
+ * // # 2.4 off by context
+ * CustomEvents.off(myObj);
+ *
+ * // # 2.5 off by context and handler
+ * CustomEvents.off(myObj, handler);
+ *
+ * // # 2.6 off by context and event name
+ * CustomEvents.off(myObj, 'onload');
+ *
+ * // # 2.7 off by an Object.<string, function> that is {eventName: handler}
+ * CustomEvents.off({
+ *   'play': handler,
+ *   'pause': handler2
+ * });
+ *
+ * // # 2.8 off the all events
+ * CustomEvents.off();
+ */
+CustomEvents.prototype.off = function(eventName, handler) {
+  if (isString(eventName)) {
+    // [syntax 1, 2]
+    this._offByEventName(eventName, handler);
+  } else if (!arguments.length) {
+    // [syntax 8]
+    this.events = {};
+    this.contexts = [];
+  } else if (isFunction(eventName)) {
+    // [syntax 3]
+    this._offByHandler(eventName);
+  } else if (isObject(eventName)) {
+    // [syntax 4, 5, 6]
+    this._offByObject(eventName, handler);
+  }
+};
+
+/**
+ * Fire custom event
+ * @param {string} eventName - name of custom event
+ */
+CustomEvents.prototype.fire = function(eventName) {  // eslint-disable-line
+  this.invoke.apply(this, arguments);
+};
+
+/**
+ * Fire a event and returns the result of operation 'boolean AND' with all
+ *  listener's results.
+ *
+ * So, It is different from {@link CustomEvents#fire}.
+ *
+ * In service code, use this as a before event in component level usually
+ *  for notifying that the event is cancelable.
+ * @param {string} eventName - Custom event name
+ * @param {...*} data - Data for event
+ * @returns {boolean} The result of operation 'boolean AND'
+ * @example
+ * var map = new Map();
+ * map.on({
+ *     'beforeZoom': function() {
+ *         // It should cancel the 'zoom' event by some conditions.
+ *         if (that.disabled && this.getState()) {
+ *             return false;
+ *         }
+ *         return true;
+ *     }
+ * });
+ *
+ * if (this.invoke('beforeZoom')) {    // check the result of 'beforeZoom'
+ *     // if true,
+ *     // doSomething
+ * }
+ */
+CustomEvents.prototype.invoke = function(eventName) {
+  var events, args, index, item;
+
+  if (!this.hasListener(eventName)) {
+    return true;
+  }
+
+  events = this._safeEvent(eventName);
+  args = Array.prototype.slice.call(arguments, 1);
+  index = 0;
+
+  while (events[index]) {
+    item = events[index];
+
+    if (item.handler.apply(item.context, args) === false) {
+      return false;
+    }
+
+    index += 1;
+  }
+
+  return true;
+};
+
+/**
+ * Return whether at least one of the handlers is registered in the given
+ *  event name.
+ * @param {string} eventName - Custom event name
+ * @returns {boolean} Is there at least one handler in event name?
+ */
+CustomEvents.prototype.hasListener = function(eventName) {
+  return this.getListenerLength(eventName) > 0;
+};
+
+/**
+ * Return a count of events registered.
+ * @param {string} eventName - Custom event name
+ * @returns {number} number of event
+ */
+CustomEvents.prototype.getListenerLength = function(eventName) {
+  var events = this._safeEvent(eventName);
+
+  return events.length;
+};
+
+module.exports = CustomEvents;
+
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview
+ * This module provides a function to make a constructor
+ * that can inherit from the other constructors like the CLASS easily.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var inherit = __webpack_require__(27);
+var extend = __webpack_require__(1);
+
+/**
+ * @module defineClass
+ */
+
+/**
+ * Help a constructor to be defined and to inherit from the other constructors
+ * @param {*} [parent] Parent constructor
+ * @param {Object} props Members of constructor
+ *  @param {Function} props.init Initialization method
+ *  @param {Object} [props.static] Static members of constructor
+ * @returns {*} Constructor
+ * @memberof module:defineClass
+ * @example
+ * var defineClass = require('tui-code-snippet/defineClass/defineClass'); // node, commonjs
+ *
+ * //-- #2. Use property --//
+ * var Parent = defineClass({
+ *     init: function() { // constuructor
+ *         this.name = 'made by def';
+ *     },
+ *     method: function() {
+ *         // ...
+ *     },
+ *     static: {
+ *         staticMethod: function() {
+ *              // ...
+ *         }
+ *     }
+ * });
+ *
+ * var Child = defineClass(Parent, {
+ *     childMethod: function() {}
+ * });
+ *
+ * Parent.staticMethod();
+ *
+ * var parentInstance = new Parent();
+ * console.log(parentInstance.name); //made by def
+ * parentInstance.staticMethod(); // Error
+ *
+ * var childInstance = new Child();
+ * childInstance.method();
+ * childInstance.childMethod();
+ */
+function defineClass(parent, props) {
+  var obj;
+
+  if (!props) {
+    props = parent;
+    parent = null;
+  }
+
+  obj = props.init || function() {};
+
+  if (parent) {
+    inherit(obj, parent);
+  }
+
+  if (props.hasOwnProperty('static')) {
+    extend(obj, props['static']);
+    delete props['static'];
+  }
+
+  extend(obj.prototype, props);
+
+  return obj;
+}
+
+module.exports = defineClass;
+
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Bind DOM events
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var isString = __webpack_require__(6);
+var forEach = __webpack_require__(4);
+
+var safeEvent = __webpack_require__(17);
+
+/**
+ * Bind DOM events.
+ * @param {HTMLElement} element - element to bind events
+ * @param {(string|object)} types - Space splitted events names or eventName:handler object
+ * @param {(function|object)} handler - handler function or context for handler method
+ * @param {object} [context] context - context for handler method.
+ * @memberof module:domEvent
+ * @example
+ * var div = document.querySelector('div');
+ * 
+ * // Bind one event to an element.
+ * on(div, 'click', toggle);
+ * 
+ * // Bind multiple events with a same handler to multiple elements at once.
+ * // Use event names splitted by a space.
+ * on(div, 'mouseenter mouseleave', changeColor);
+ * 
+ * // Bind multiple events with different handlers to an element at once.
+ * // Use an object which of key is an event name and value is a handler function.
+ * on(div, {
+ *   keydown: highlight,
+ *   keyup: dehighlight
+ * });
+ * 
+ * // Set a context for handler method.
+ * var name = 'global';
+ * var repository = {name: 'CodeSnippet'};
+ * on(div, 'drag', function() {
+ *  console.log(this.name);
+ * }, repository);
+ * // Result when you drag a div: "CodeSnippet"
+ */
+function on(element, types, handler, context) {
+  if (isString(types)) {
+    forEach(types.split(/\s+/g), function(type) {
+      bindEvent(element, type, handler, context);
+    });
+
+    return;
+  }
+
+  forEach(types, function(func, type) {
+    bindEvent(element, type, func, handler);
+  });
+}
+
+/**
+ * Bind DOM events
+ * @param {HTMLElement} element - element to bind events
+ * @param {string} type - events name
+ * @param {function} handler - handler function or context for handler method
+ * @param {object} [context] context - context for handler method.
+ * @private
+ */
+function bindEvent(element, type, handler, context) {
+  /**
+     * Event handler
+     * @param {Event} e - event object
+     */
+  function eventHandler(e) {
+    handler.call(context || element, e || window.event);
+  }
+
+  if ('addEventListener' in element) {
+    element.addEventListener(type, eventHandler);
+  } else if ('attachEvent' in element) {
+    element.attachEvent('on' + type, eventHandler);
+  }
+  memorizeHandler(element, type, handler, eventHandler);
+}
+
+/**
+ * Memorize DOM event handler for unbinding.
+ * @param {HTMLElement} element - element to bind events
+ * @param {string} type - events name
+ * @param {function} handler - handler function that user passed at on() use
+ * @param {function} wrappedHandler - handler function that wrapped by domevent for implementing some features
+ * @private
+ */
+function memorizeHandler(element, type, handler, wrappedHandler) {
+  var events = safeEvent(element, type);
+  var existInEvents = false;
+
+  forEach(events, function(obj) {
+    if (obj.handler === handler) {
+      existInEvents = true;
+
+      return false;
+    }
+
+    return true;
+  });
+
+  if (!existInEvents) {
+    events.push({
+      handler: handler,
+      wrappedHandler: wrappedHandler
+    });
+  }
+}
+
+module.exports = on;
+
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Unbind DOM events
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var isString = __webpack_require__(6);
+var forEach = __webpack_require__(4);
+
+var safeEvent = __webpack_require__(17);
+
+/**
+ * Unbind DOM events
+ * If a handler function is not passed, remove all events of that type.
+ * @param {HTMLElement} element - element to unbind events
+ * @param {(string|object)} types - Space splitted events names or eventName:handler object
+ * @param {function} [handler] - handler function
+ * @memberof module:domEvent
+ * @example
+ * // Following the example of domEvent#on
+ * 
+ * // Unbind one event from an element.
+ * off(div, 'click', toggle);
+ * 
+ * // Unbind multiple events with a same handler from multiple elements at once.
+ * // Use event names splitted by a space.
+ * off(element, 'mouseenter mouseleave', changeColor);
+ * 
+ * // Unbind multiple events with different handlers from an element at once.
+ * // Use an object which of key is an event name and value is a handler function.
+ * off(div, {
+ *   keydown: highlight,
+ *   keyup: dehighlight
+ * });
+ * 
+ * // Unbind events without handlers.
+ * off(div, 'drag');
+ */
+function off(element, types, handler) {
+  if (isString(types)) {
+    forEach(types.split(/\s+/g), function(type) {
+      unbindEvent(element, type, handler);
+    });
+
+    return;
+  }
+
+  forEach(types, function(func, type) {
+    unbindEvent(element, type, func);
+  });
+}
+
+/**
+ * Unbind DOM events
+ * If a handler function is not passed, remove all events of that type.
+ * @param {HTMLElement} element - element to unbind events
+ * @param {string} type - events name
+ * @param {function} [handler] - handler function
+ * @private
+ */
+function unbindEvent(element, type, handler) {
+  var events = safeEvent(element, type);
+  var index;
+
+  if (!handler) {
+    forEach(events, function(item) {
+      removeHandler(element, type, item.wrappedHandler);
+    });
+    events.splice(0, events.length);
+  } else {
+    forEach(events, function(item, idx) {
+      if (handler === item.handler) {
+        removeHandler(element, type, item.wrappedHandler);
+        index = idx;
+
+        return false;
+      }
+
+      return true;
+    });
+    events.splice(index, 1);
+  }
+}
+
+/**
+ * Remove an event handler
+ * @param {HTMLElement} element - An element to remove an event
+ * @param {string} type - event type
+ * @param {function} handler - event handler
+ * @private
+ */
+function removeHandler(element, type, handler) {
+  if ('removeEventListener' in element) {
+    element.removeEventListener(type, handler);
+  } else if ('detachEvent' in element) {
+    element.detachEvent('on' + type, handler);
+  }
+}
+
+module.exports = off;
+
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Find parent element recursively
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var matches = __webpack_require__(30);
+
+/**
+ * Find parent element recursively
+ * @param {HTMLElement} element - base element to start find
+ * @param {string} selector - selector string for find
+ * @returns {HTMLElement} - element finded or null
+ * @memberof module:domUtil
+ */
+function closest(element, selector) {
+  var parent = element.parentNode;
+
+  if (matches(element, selector)) {
+    return element;
+  }
+
+  while (parent && parent !== document) {
+    if (matches(parent, selector)) {
+      return parent;
+    }
+
+    parent = parent.parentNode;
+  }
+
+  return null;
+}
+
+module.exports = closest;
+
+
+/***/ }),
+/* 13 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Remove element from parent node.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * Remove element from parent node.
+ * @param {HTMLElement} element - element to remove.
+ * @memberof module:domUtil
+ */
+function removeElement(element) {
+  if (element && element.parentNode) {
+    element.parentNode.removeChild(element);
+  }
+}
+
+module.exports = removeElement;
+
+
+/***/ }),
+/* 14 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Check whether the given variable is a instance of HTMLNode or not.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * Check whether the given variable is a instance of HTMLNode or not.
+ * If the given variables is a instance of HTMLNode, return true.
+ * @param {*} html - Target for checking
+ * @returns {boolean} Is HTMLNode ?
+ * @memberof module:type
+ */
+function isHTMLNode(html) {
+  if (typeof HTMLElement === 'object') {
+    return (html && (html instanceof HTMLElement || !!html.nodeType));
+  }
+
+  return !!(html && html.nodeType);
+}
+
+module.exports = isHTMLNode;
+
+
+/***/ }),
+/* 15 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Utils for Timepicker component
+ * @author NHN. FE dev Lab. <dl_javascript@nhn.com>
+ */
+
+
+
+var inArray = __webpack_require__(0);
+var sendHostname = __webpack_require__(35);
+
+var uniqueId = 0;
+
+/**
+ * Utils
+ * @namespace util
+ * @ignore
+ */
+var utils = {
+  /**
+   * Returns unique id
+   * @returns {number}
+   */
+  getUniqueId: function() {
+    uniqueId += 1;
+
+    return uniqueId;
+  },
+
+  /**
+   * Convert a value to meet the format
+   * @param {number|string} value 
+   * @param {string} format - ex) hh, h, mm, m
+   * @returns {string}
+   */
+  formatTime: function(value, format) {
+    var PADDING_ZERO_TYPES = ['hh', 'mm'];
+    value = String(value);
+
+    return inArray(format, PADDING_ZERO_TYPES) >= 0
+      && value.length === 1
+      ? '0' + value
+      : value;
+  },
+
+  /**
+   * Get meridiem hour
+   * @param {number} hour - Original hour
+   * @returns {number} Converted meridiem hour
+   */
+  getMeridiemHour: function(hour) {
+    hour %= 12;
+
+    if (hour === 0) {
+      hour = 12;
+    }
+
+    return hour;
+  },
+
+  /**
+   * Returns range arr
+   * @param {number} start - Start value
+   * @param {number} end - End value
+   * @param {number} [step] - Step value
+   * @returns {Array}
+   */
+  getRangeArr: function(start, end, step) {
+    var arr = [];
+    var i;
+
+    step = step || 1;
+
+    if (start > end) {
+      for (i = end; i >= start; i -= step) {
+        arr.push(i);
+      }
+    } else {
+      for (i = start; i <= end; i += step) {
+        arr.push(i);
+      }
+    }
+
+    return arr;
+  },
+
+  /**
+   * Get a target element
+   * @param {Event} ev Event object
+   * @returns {HTMLElement} An event target element
+   */
+  getTarget: function(ev) {
+    return ev.target || ev.srcElement;
+  },
+
+  /**
+   * send host name
+   * @ignore
+   */
+  sendHostName: function() {
+    sendHostname('time-picker', 'UA-129987462-1');
+  }
+};
+
+module.exports = utils;
+
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Execute the provided callback once for each property of object which actually exist.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * Execute the provided callback once for each property of object which actually exist.
+ * If the callback function returns false, the loop will be stopped.
+ * Callback function(iteratee) is invoked with three arguments:
+ *  1) The value of the property
+ *  2) The name of the property
+ *  3) The object being traversed
+ * @param {Object} obj The object that will be traversed
+ * @param {function} iteratee  Callback function
+ * @param {Object} [context] Context(this) of callback function
+ * @memberof module:collection
+ * @example
+ * var forEachOwnProperties = require('tui-code-snippet/collection/forEachOwnProperties'); // node, commonjs
+ *
+ * var sum = 0;
+ *
+ * forEachOwnProperties({a:1,b:2,c:3}, function(value){
+ *     sum += value;
+ * });
+ * alert(sum); // 6
+ */
+function forEachOwnProperties(obj, iteratee, context) {
+  var key;
+
+  context = context || null;
+
+  for (key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (iteratee.call(context, obj[key], key, obj) === false) {
+        break;
+      }
+    }
+  }
+}
+
+module.exports = forEachOwnProperties;
+
+
+/***/ }),
+/* 17 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Get event collection for specific HTML element
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var EVENT_KEY = '_feEventKey';
+
+/**
+ * Get event collection for specific HTML element
+ * @param {HTMLElement} element - HTML element
+ * @param {string} type - event type
+ * @returns {array}
+ * @private
+ */
+function safeEvent(element, type) {
+  var events = element[EVENT_KEY];
+  var handlers;
+
+  if (!events) {
+    events = element[EVENT_KEY] = {};
+  }
+
+  handlers = events[type];
+  if (!handlers) {
+    handlers = events[type] = [];
+  }
+
+  return handlers;
+}
+
+module.exports = safeEvent;
+
+
+/***/ }),
+/* 18 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Get HTML element's design classes.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var isUndefined = __webpack_require__(5);
+
+/**
+ * Get HTML element's design classes.
+ * @param {(HTMLElement|SVGElement)} element target element
+ * @returns {string} element css class name
+ * @memberof module:domUtil
+ */
+function getClass(element) {
+  if (!element || !element.className) {
+    return '';
+  }
+
+  if (isUndefined(element.className.baseVal)) {
+    return element.className;
+  }
+
+  return element.className.baseVal;
+}
+
+module.exports = getClass;
+
+
+/***/ }),
+/* 19 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Set className value
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var isArray = __webpack_require__(2);
+var isUndefined = __webpack_require__(5);
+
+/**
+ * Set className value
+ * @param {(HTMLElement|SVGElement)} element - target element
+ * @param {(string|string[])} cssClass - class names
+ * @private
+ */
+function setClassName(element, cssClass) {
+  cssClass = isArray(cssClass) ? cssClass.join(' ') : cssClass;
+
+  cssClass = cssClass.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+
+  if (isUndefined(element.className.baseVal)) {
+    element.className = cssClass;
+
+    return;
+  }
+
+  element.className.baseVal = cssClass;
+}
+
+module.exports = setClassName;
+
+
+/***/ }),
+/* 20 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview The entry file of TimePicker components
+ * @author NHN. FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+__webpack_require__(21);
+
+module.exports = __webpack_require__(22);
+
+
+/***/ }),
+/* 21 */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+/* 22 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview TimePicker component
+ * @author NHN. FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var inArray = __webpack_require__(0);
+var forEachArray = __webpack_require__(3);
+var CustomEvents = __webpack_require__(8);
+var defineClass = __webpack_require__(9);
+var extend = __webpack_require__(1);
+var on = __webpack_require__(10);
+var off = __webpack_require__(11);
+var addClass = __webpack_require__(29);
+var closest = __webpack_require__(12);
+var removeElement = __webpack_require__(13);
+var removeClass = __webpack_require__(32);
+var isHTMLNode = __webpack_require__(14);
+var isNumber = __webpack_require__(33);
+
+var Spinbox = __webpack_require__(34);
+var Selectbox = __webpack_require__(38);
+var util = __webpack_require__(15);
+var localeTexts = __webpack_require__(40);
+var tmpl = __webpack_require__(41);
+var meridiemTmpl = __webpack_require__(42);
+
+var SELECTOR_HOUR_ELEMENT = '.tui-timepicker-hour';
+var SELECTOR_MINUTE_ELEMENT = '.tui-timepicker-minute';
+var SELECTOR_MERIDIEM_ELEMENT = '.tui-timepicker-meridiem';
+var CLASS_NAME_LEFT_MERIDIEM = 'tui-has-left';
+var CLASS_NAME_HIDDEN = 'tui-hidden';
+var CLASS_NAME_CHECKED = 'tui-timepicker-meridiem-checked';
+var INPUT_TYPE_SPINBOX = 'spinbox';
+var INPUT_TYPE_SELECTBOX = 'selectbox';
+
+/**
+ * Merge default options
+ * @ignore
+ * @param {object} options - options
+ * @returns {object} Merged options
+ */
+var mergeDefaultOptions = function(options) {
+  return extend(
+    {
+      language: 'en',
+      initialHour: 0,
+      initialMinute: 0,
+      showMeridiem: true,
+      inputType: 'selectbox',
+      hourStep: 1,
+      minuteStep: 1,
+      meridiemPosition: 'right',
+      format: 'h:m',
+      disabledHours: [],
+      usageStatistics: true
+    },
+    options
+  );
+};
+
+/**
+ * @class
+ * @param {string|HTMLElement} container - Container element or selector
+ * @param {Object} [options] - Options for initialization
+ * @param {number} [options.initialHour = 0] - Initial setting value of hour
+ * @param {number} [options.initialMinute = 0] - Initial setting value of minute
+ * @param {number} [options.hourStep = 1] - Step value of hour
+ * @param {number} [options.minuteStep = 1] - Step value of minute
+ * @param {string} [options.inputType = 'selectbox'] - 'selectbox' or 'spinbox'
+ * @param {string} [options.format = 'h:m'] - hour, minute format for display
+ * @param {boolean} [options.showMeridiem = true] - Show meridiem expression?
+ * @param {Array} [options.disabledHours = []] - Registered Hours is disabled.
+ * @param {string} [options.meridiemPosition = 'right'] - Set location of the meridiem element.
+ *                 If this option set 'left', the meridiem element is created in front of the hour element.
+ * @param {string} [options.language = 'en'] Set locale texts
+ * @param {Boolean} [options.usageStatistics=true|false] send hostname to google analytics [default value is true]
+ * @example
+ * var timepicker = new tui.TimePicker('#timepicker-container', {
+ *     initialHour: 15,
+ *     initialMinute: 13,
+ *     inputType: 'selectbox',
+ *     showMeridiem: false
+ * });
+ */
+var TimePicker = defineClass(
+  /** @lends TimePicker.prototype */ {
+    static: {
+      /**
+       * Locale text data
+       * @type {object}
+       * @memberof TimePicker
+       * @static
+       * @example
+       * var TimePicker = tui.TimePicker; // or require('tui-time-picker');
+       *
+       * TimePicker.localeTexts['customKey'] = {
+       *     am: 'a.m.',
+       *     pm: 'p.m.'
+       * };
+       *
+       * var instance = new tui.TimePicker('#timepicker-container', {
+       *     language: 'customKey',
+       * });
+       */
+      localeTexts: localeTexts
+    },
+    init: function(container, options) {
+      options = mergeDefaultOptions(options);
+
+      /**
+       * @type {number}
+       * @private
+       */
+      this._id = util.getUniqueId();
+
+      /**
+       * @type {HTMLElement}
+       * @private
+       */
+      this._container = isHTMLNode(container)
+        ? container
+        : document.querySelector(container);
+
+      /**
+       * @type {HTMLElement}
+       * @private
+       */
+      this._element = null;
+
+      /**
+       * @type {HTMLElement}
+       * @private
+       */
+      this._meridiemElement = null;
+
+      /**
+       * @type {HTMLElement}
+       * @private
+       */
+      this._amEl = null;
+
+      /**
+       * @type {HTMLElement}
+       * @private
+       */
+      this._pmEl = null;
+
+      /**
+       * @type {boolean}
+       * @private
+       */
+      this._showMeridiem = options.showMeridiem;
+
+      /**
+       * Meridiem postion
+       * @type {'left'|'right'}
+       * @private
+       */
+      this._meridiemPosition = options.meridiemPosition;
+
+      /**
+       * @type {Spinbox|Selectbox}
+       * @private
+       */
+      this._hourInput = null;
+
+      /**
+       * @type {Spinbox|Selectbox}
+       * @private
+       */
+      this._minuteInput = null;
+
+      /**
+       * @type {number}
+       * @private
+       */
+      this._hour = options.initialHour;
+
+      /**
+       * @type {number}
+       * @private
+       */
+      this._minute = options.initialMinute;
+
+      /**
+       * @type {number}
+       * @private
+       */
+      this._hourStep = options.hourStep;
+
+      /**
+       * @type {number}
+       * @private
+       */
+      this._minuteStep = options.minuteStep;
+
+      /**
+       * @type {Array}
+       * @private
+       */
+      this._disabledHours = options.disabledHours;
+
+      /**
+       * TimePicker inputType
+       * @type {'spinbox'|'selectbox'}
+       * @private
+       */
+      this._inputType = options.inputType;
+
+      /**
+       * Locale text for meridiem
+       * @type {string}
+       * @private
+       */
+      this._localeText = localeTexts[options.language];
+
+      /**
+       * Time format for output
+       * @type {string}
+       * @private
+       */
+      this._format = this._getValidTimeFormat(options.format);
+
+      this._render();
+      this._setEvents();
+
+      if (options.usageStatistics) {
+        util.sendHostName();
+      }
+    },
+
+    /**
+     * Set event handlers to selectors, container
+     * @private
+     */
+    _setEvents: function() {
+      this._hourInput.on('change', this._onChangeTimeInput, this);
+      this._minuteInput.on('change', this._onChangeTimeInput, this);
+
+      if (this._showMeridiem) {
+        if (this._inputType === INPUT_TYPE_SELECTBOX) {
+          on(
+            this._meridiemElement.querySelector('select'),
+            'change',
+            this._onChangeMeridiem,
+            this
+          );
+        } else if (this._inputType === INPUT_TYPE_SPINBOX) {
+          on(this._meridiemElement, 'click', this._onChangeMeridiem, this);
+        }
+      }
+    },
+
+    /**
+     * Remove events
+     * @private
+     */
+    _removeEvents: function() {
+      this.off();
+
+      this._hourInput.destroy();
+      this._minuteInput.destroy();
+
+      if (this._showMeridiem) {
+        if (this._inputType === INPUT_TYPE_SELECTBOX) {
+          off(
+            this._meridiemElement.querySelector('select'),
+            'change',
+            this._onChangeMeridiem,
+            this
+          );
+        } else if (this._inputType === INPUT_TYPE_SPINBOX) {
+          off(this._meridiemElement, 'click', this._onChangeMeridiem, this);
+        }
+      }
+    },
+
+    /**
+     * Render element
+     * @private
+     */
+    _render: function() {
+      var context = {
+        showMeridiem: this._showMeridiem,
+        isSpinbox: this._inputType === 'spinbox'
+      };
+
+      if (this._showMeridiem) {
+        extend(context, {
+          meridiemElement: this._makeMeridiemHTML()
+        });
+      }
+
+      if (this._element) {
+        removeElement(this._element);
+      }
+      this._container.innerHTML = tmpl(context);
+      this._element = this._container.firstChild;
+
+      this._renderTimeInputs();
+
+      if (this._showMeridiem) {
+        this._setMeridiemElement();
+      }
+    },
+
+    /**
+     * Set meridiem element on timepicker
+     * @private
+     */
+    _setMeridiemElement: function() {
+      if (this._meridiemPosition === 'left') {
+        addClass(this._element, CLASS_NAME_LEFT_MERIDIEM);
+      }
+      this._meridiemElement = this._element.querySelector(SELECTOR_MERIDIEM_ELEMENT);
+      this._amEl = this._meridiemElement.querySelector('[value="AM"]');
+      this._pmEl = this._meridiemElement.querySelector('[value="PM"]');
+      this._syncToMeridiemElements();
+    },
+
+    /**
+     * Make html for meridiem element
+     * @returns {HTMLElement} Meridiem element
+     * @private
+     */
+    _makeMeridiemHTML: function() {
+      var localeText = this._localeText;
+
+      return meridiemTmpl({
+        am: localeText.am,
+        pm: localeText.pm,
+        radioId: this._id,
+        isSpinbox: this._inputType === 'spinbox'
+      });
+    },
+
+    /**
+     * Render time selectors
+     * @private
+     */
+    _renderTimeInputs: function() {
+      var hour = this._hour;
+      var showMeridiem = this._showMeridiem;
+      var hourElement = this._element.querySelector(SELECTOR_HOUR_ELEMENT);
+      var minuteElement = this._element.querySelector(SELECTOR_MINUTE_ELEMENT);
+      var BoxComponent = this._inputType.toLowerCase() === 'selectbox' ? Selectbox : Spinbox;
+      var formatExplode = this._format.split(':');
+      var hourItems = this._getHourItems();
+
+      if (showMeridiem) {
+        hour = util.getMeridiemHour(hour);
+      }
+
+      this._hourInput = new BoxComponent(hourElement, {
+        initialValue: hour,
+        items: hourItems,
+        format: formatExplode[0],
+        disabledItems: this._makeDisabledStatItems(hourItems)
+      });
+
+      this._minuteInput = new BoxComponent(minuteElement, {
+        initialValue: this._minute,
+        items: this._getMinuteItems(),
+        format: formatExplode[1]
+      });
+    },
+
+    _makeDisabledStatItems: function(hourItems) {
+      var result = [];
+      var disabledHours = this._disabledHours.concat();
+
+      if (this._showMeridiem) {
+        disabledHours = this._meridiemableTime(disabledHours);
+      }
+
+      forEachArray(hourItems, function(hour) {
+        result.push(inArray(hour, disabledHours) >= 0);
+      });
+
+      return result;
+    },
+
+    _meridiemableTime: function(disabledHours) {
+      var diffHour = 0;
+      var startHour = 0;
+      var endHour = 11;
+      var result = [];
+
+      if (this._hour >= 12) {
+        diffHour = 12;
+        startHour = 12;
+        endHour = 23;
+      }
+
+      forEachArray(disabledHours, function(hour) {
+        if (hour >= startHour && hour <= endHour) {
+          result.push(hour - diffHour === 0 ? 12 : hour - diffHour);
+        }
+      });
+
+      return result;
+    },
+
+    /**
+     * Return formatted format.
+     * @param {string} format - format option
+     * @returns {string}
+     * @private
+     */
+    _getValidTimeFormat: function(format) {
+      if (!format.match(/^[h]{1,2}:[m]{1,2}$/i)) {
+        return 'h:m';
+      }
+
+      return format.toLowerCase();
+    },
+
+    /**
+     * Initialize meridiem elements
+     * @private
+     */
+    _syncToMeridiemElements: function() {
+      var selectedEl = this._hour >= 12 ? this._pmEl : this._amEl;
+      var notSelectedEl = selectedEl === this._pmEl ? this._amEl : this._pmEl;
+
+      selectedEl.setAttribute('selected', true);
+      selectedEl.setAttribute('checked', true);
+      addClass(selectedEl, CLASS_NAME_CHECKED);
+      notSelectedEl.removeAttribute('selected');
+      notSelectedEl.removeAttribute('checked');
+      removeClass(notSelectedEl, CLASS_NAME_CHECKED);
+    },
+
+    /**
+     * Set values in spinboxes from time
+     * @private
+     */
+    _syncToInputs: function() {
+      var hour = this._hour;
+      var minute = this._minute;
+
+      if (this._showMeridiem) {
+        hour = util.getMeridiemHour(hour);
+      }
+
+      this._hourInput.setValue(hour);
+      this._minuteInput.setValue(minute);
+    },
+
+    /**
+     * DOM event handler
+     * @param {Event} ev - Change event on meridiem element
+     * @private
+     */
+    _onChangeMeridiem: function(ev) {
+      var hour = this._hour;
+      var target = util.getTarget(ev);
+
+      if (target.value && closest(target, SELECTOR_MERIDIEM_ELEMENT)) {
+        hour = this._to24Hour(target.value === 'PM', hour);
+        this.setTime(hour, this._minute);
+        this._setDisabledHours();
+      }
+    },
+
+    /**
+     * Time change event handler
+     * @private
+     */
+    _onChangeTimeInput: function() {
+      var hour = this._hourInput.getValue();
+      var minute = this._minuteInput.getValue();
+      var isPM = this._hour >= 12;
+
+      if (this._showMeridiem) {
+        hour = this._to24Hour(isPM, hour);
+      }
+      this.setTime(hour, minute);
+    },
+
+    /**
+     * 12Hour-expression to 24Hour-expression
+     * @param {boolean} isPM - Is pm?
+     * @param {number} hour - Hour
+     * @returns {number}
+     * @private
+     */
+    _to24Hour: function(isPM, hour) {
+      hour %= 12;
+      if (isPM) {
+        hour += 12;
+      }
+
+      return hour;
+    },
+
+    _setDisabledHours: function() {
+      var hourItems = this._getHourItems();
+      var disabledItems = this._makeDisabledStatItems(hourItems);
+
+      this._hourInput.setDisabledItems(disabledItems);
+    },
+
+    /**
+     * Get items of hour
+     * @returns {array} Hour item list
+     * @private
+     */
+    _getHourItems: function() {
+      var step = this._hourStep;
+
+      return this._showMeridiem ? util.getRangeArr(1, 12, step) : util.getRangeArr(0, 23, step);
+    },
+
+    /**
+     * Get items of minute
+     * @returns {array} Minute item list
+     * @private
+     */
+    _getMinuteItems: function() {
+      return util.getRangeArr(0, 59, this._minuteStep);
+    },
+
+    /**
+     * Whether the hour and minute are in valid items or not
+     * @param {number} hour - Hour value
+     * @param {number} minute - Minute value
+     * @returns {boolean} State
+     * @private
+     */
+    _validItems: function(hour, minute) {
+      if (!isNumber(hour) || !isNumber(minute)) {
+        return false;
+      }
+
+      if (this._showMeridiem) {
+        hour = util.getMeridiemHour(hour);
+      }
+
+      return (
+        inArray(hour, this._getHourItems()) > -1 &&
+        inArray(minute, this._getMinuteItems()) > -1
+      );
+    },
+
+    /**
+     * Set step of hour
+     * @param {array} step - Step to create items of hour
+     */
+    setHourStep: function(step) {
+      this._hourStep = step;
+      this._hourInput.fire('changeItems', this._getHourItems());
+    },
+
+    /**
+     * Get step of hour
+     * @returns {number} Step of hour
+     */
+    getHourStep: function() {
+      return this._hourStep;
+    },
+
+    /**
+     * Set step of minute
+     * @param {array} step - Step to create items of minute
+     */
+    setMinuteStep: function(step) {
+      this._minuteStep = step;
+      this._minuteInput.fire('changeItems', this._getMinuteItems());
+    },
+
+    /**
+     * Get step of minute
+     * @returns {number} Step of minute
+     */
+    getMinuteStep: function() {
+      return this._minuteStep;
+    },
+
+    /**
+     * Show time picker element
+     */
+    show: function() {
+      removeClass(this._element, CLASS_NAME_HIDDEN);
+    },
+
+    /**
+     * Hide time picker element
+     */
+    hide: function() {
+      addClass(this._element, CLASS_NAME_HIDDEN);
+    },
+
+    /**
+     * Set hour
+     * @param {number} hour for time picker - (0~23)
+     * @returns {boolean} result of set time
+     */
+    setHour: function(hour) {
+      return this.setTime(hour, this._minute);
+    },
+
+    /**
+     * Set minute
+     * @param {number} minute for time picker
+     * @returns {boolean} result of set time
+     */
+    setMinute: function(minute) {
+      return this.setTime(this._hour, minute);
+    },
+
+    /**
+     * Set time
+     * @param {number} hour for time picker - (0~23)
+     * @param {number} minute for time picker
+     */
+    setTime: function(hour, minute) {
+      if (!this._validItems(hour, minute)) {
+        return;
+      }
+
+      this._hour = hour;
+      this._minute = minute;
+
+      this._syncToInputs();
+      if (this._showMeridiem) {
+        this._syncToMeridiemElements();
+      }
+
+      /**
+       * Change event - TimePicker
+       * @event TimePicker#change
+       */
+      this.fire('change', {
+        hour: this._hour,
+        minute: this._minute
+      });
+    },
+
+    /**
+     * Get hour
+     * @returns {number} hour - (0~23)
+     */
+    getHour: function() {
+      return this._hour;
+    },
+
+    /**
+     * Get minute
+     * @returns {number} minute
+     */
+    getMinute: function() {
+      return this._minute;
+    },
+
+    /**
+     * Change locale text of meridiem by language code
+     * @param {string} language - Language code
+     */
+    changeLanguage: function(language) {
+      this._localeText = localeTexts[language];
+      this._render();
+    },
+
+    /**
+     * Destroy
+     */
+    destroy: function() {
+      this._removeEvents();
+      removeElement(this._element);
+
+      this._container
+        = this._showMeridiem
+        = this._hourInput
+        = this._minuteInput
+        = this._hour
+        = this._minute
+        = this._inputType
+        = this._element
+        = this._meridiemElement
+        = this._amEl
+        = this._pmEl
+        = null;
+    }
+  }
+);
+
+CustomEvents.mixin(TimePicker);
+module.exports = TimePicker;
+
+
+/***/ }),
+/* 23 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Check whether the given variable is existing or not.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var isUndefined = __webpack_require__(5);
+var isNull = __webpack_require__(24);
+
+/**
+ * Check whether the given variable is existing or not.
+ * If the given variable is not null and not undefined, returns true.
+ * @param {*} param - Target for checking
+ * @returns {boolean} Is existy?
+ * @memberof module:type
+ * @example
+ * var isExisty = require('tui-code-snippet/type/isExisty'); // node, commonjs
+ *
+ * isExisty(''); //true
+ * isExisty(0); //true
+ * isExisty([]); //true
+ * isExisty({}); //true
+ * isExisty(null); //false
+ * isExisty(undefined); //false
+*/
+function isExisty(param) {
+  return !isUndefined(param) && !isNull(param);
+}
+
+module.exports = isExisty;
+
+
+/***/ }),
+/* 24 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Check whether the given variable is null or not.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * Check whether the given variable is null or not.
+ * If the given variable(arguments[0]) is null, returns true.
+ * @param {*} obj - Target for checking
+ * @returns {boolean} Is null?
+ * @memberof module:type
+ */
+function isNull(obj) {
+  return obj === null;
+}
+
+module.exports = isNull;
+
+
+/***/ }),
+/* 25 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Check whether the given variable is an object or not.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * Check whether the given variable is an object or not.
+ * If the given variable is an object, return true.
+ * @param {*} obj - Target for checking
+ * @returns {boolean} Is object?
+ * @memberof module:type
+ */
+function isObject(obj) {
+  return obj === Object(obj);
+}
+
+module.exports = isObject;
+
+
+/***/ }),
+/* 26 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Check whether the given variable is a function or not.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * Check whether the given variable is a function or not.
+ * If the given variable is a function, return true.
+ * @param {*} obj - Target for checking
+ * @returns {boolean} Is function?
+ * @memberof module:type
+ */
+function isFunction(obj) {
+  return obj instanceof Function;
+}
+
+module.exports = isFunction;
+
+
+/***/ }),
+/* 27 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Provide a simple inheritance in prototype-oriented.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var createObject = __webpack_require__(28);
+
+/**
+ * Provide a simple inheritance in prototype-oriented.
+ * Caution :
+ *  Don't overwrite the prototype of child constructor.
+ *
+ * @param {function} subType Child constructor
+ * @param {function} superType Parent constructor
+ * @memberof module:inheritance
+ * @example
+ * var inherit = require('tui-code-snippet/inheritance/inherit'); // node, commonjs
+ *
+ * // Parent constructor
+ * function Animal(leg) {
+ *     this.leg = leg;
+ * }
+ * Animal.prototype.growl = function() {
+ *     // ...
+ * };
+ *
+ * // Child constructor
+ * function Person(name) {
+ *     this.name = name;
+ * }
+ *
+ * // Inheritance
+ * inherit(Person, Animal);
+ *
+ * // After this inheritance, please use only the extending of property.
+ * // Do not overwrite prototype.
+ * Person.prototype.walk = function(direction) {
+ *     // ...
+ * };
+ */
+function inherit(subType, superType) {
+  var prototype = createObject(superType.prototype);
+  prototype.constructor = subType;
+  subType.prototype = prototype;
+}
+
+module.exports = inherit;
+
+
+/***/ }),
+/* 28 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Create a new object with the specified prototype object and properties.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * @module inheritance
+ */
+
+/**
+ * Create a new object with the specified prototype object and properties.
+ * @param {Object} obj This object will be a prototype of the newly-created object.
+ * @returns {Object}
+ * @memberof module:inheritance
+ */
+function createObject(obj) {
+  function F() {} // eslint-disable-line require-jsdoc
+  F.prototype = obj;
+
+  return new F();
+}
+
+module.exports = createObject;
+
+
+/***/ }),
+/* 29 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Add css class to element
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var forEach = __webpack_require__(4);
+var inArray = __webpack_require__(0);
+var getClass = __webpack_require__(18);
+var setClassName = __webpack_require__(19);
+
+/**
+ * domUtil module
+ * @module domUtil
+ */
+
+/**
+ * Add css class to element
+ * @param {(HTMLElement|SVGElement)} element - target element
+ * @param {...string} cssClass - css classes to add
+ * @memberof module:domUtil
+ */
+function addClass(element) {
+  var cssClass = Array.prototype.slice.call(arguments, 1);
+  var classList = element.classList;
+  var newClass = [];
+  var origin;
+
+  if (classList) {
+    forEach(cssClass, function(name) {
+      element.classList.add(name);
+    });
+
+    return;
+  }
+
+  origin = getClass(element);
+
+  if (origin) {
+    cssClass = [].concat(origin.split(/\s+/), cssClass);
+  }
+
+  forEach(cssClass, function(cls) {
+    if (inArray(cls, newClass) < 0) {
+      newClass.push(cls);
+    }
+  });
+
+  setClassName(element, newClass);
+}
+
+module.exports = addClass;
+
+
+/***/ }),
+/* 30 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Check element match selector
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var inArray = __webpack_require__(0);
+var toArray = __webpack_require__(31);
+
+var elProto = Element.prototype;
+var matchSelector = elProto.matches ||
+    elProto.webkitMatchesSelector ||
+    elProto.mozMatchesSelector ||
+    elProto.msMatchesSelector ||
+    function(selector) {
+      var doc = this.document || this.ownerDocument;
+
+      return inArray(this, toArray(doc.querySelectorAll(selector))) > -1;
+    };
+
+/**
+ * Check element match selector
+ * @param {HTMLElement} element - element to check
+ * @param {string} selector - selector to check
+ * @returns {boolean} is selector matched to element?
+ * @memberof module:domUtil
+ */
+function matches(element, selector) {
+  return matchSelector.call(element, selector);
+}
+
+module.exports = matches;
+
+
+/***/ }),
+/* 31 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Transform the Array-like object to Array.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var forEachArray = __webpack_require__(3);
+
+/**
+ * Transform the Array-like object to Array.
+ * In low IE (below 8), Array.prototype.slice.call is not perfect. So, try-catch statement is used.
+ * @param {*} arrayLike Array-like object
+ * @returns {Array} Array
+ * @memberof module:collection
+ * @example
+ * var toArray = require('tui-code-snippet/collection/toArray'); // node, commonjs
+ *
+ * var arrayLike = {
+ *     0: 'one',
+ *     1: 'two',
+ *     2: 'three',
+ *     3: 'four',
+ *     length: 4
+ * };
+ * var result = toArray(arrayLike);
+ *
+ * alert(result instanceof Array); // true
+ * alert(result); // one,two,three,four
+ */
+function toArray(arrayLike) {
+  var arr;
+  try {
+    arr = Array.prototype.slice.call(arrayLike);
+  } catch (e) {
+    arr = [];
+    forEachArray(arrayLike, function(value) {
+      arr.push(value);
+    });
+  }
+
+  return arr;
+}
+
+module.exports = toArray;
+
+
+/***/ }),
+/* 32 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Remove css class from element
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var forEachArray = __webpack_require__(3);
+var inArray = __webpack_require__(0);
+var getClass = __webpack_require__(18);
+var setClassName = __webpack_require__(19);
+
+/**
+ * Remove css class from element
+ * @param {(HTMLElement|SVGElement)} element - target element
+ * @param {...string} cssClass - css classes to remove
+ * @memberof module:domUtil
+ */
+function removeClass(element) {
+  var cssClass = Array.prototype.slice.call(arguments, 1);
+  var classList = element.classList;
+  var origin, newClass;
+
+  if (classList) {
+    forEachArray(cssClass, function(name) {
+      classList.remove(name);
+    });
+
+    return;
+  }
+
+  origin = getClass(element).split(/\s+/);
+  newClass = [];
+  forEachArray(origin, function(name) {
+    if (inArray(name, cssClass) < 0) {
+      newClass.push(name);
+    }
+  });
+
+  setClassName(element, newClass);
+}
+
+module.exports = removeClass;
+
+
+/***/ }),
+/* 33 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Check whether the given variable is a number or not.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+/**
+ * Check whether the given variable is a number or not.
+ * If the given variable is a number, return true.
+ * @param {*} obj - Target for checking
+ * @returns {boolean} Is number?
+ * @memberof module:type
+ */
+function isNumber(obj) {
+  return typeof obj === 'number' || obj instanceof Number;
+}
+
+module.exports = isNumber;
+
+
+/***/ }),
+/* 34 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Spinbox (in TimePicker)
+ * @author NHN. FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var inArray = __webpack_require__(0);
+var forEachArray = __webpack_require__(3);
+var CustomEvents = __webpack_require__(8);
+var defineClass = __webpack_require__(9);
+var extend = __webpack_require__(1);
+var on = __webpack_require__(10);
+var off = __webpack_require__(11);
+var closest = __webpack_require__(12);
+var removeElement = __webpack_require__(13);
+var isHTMLNode = __webpack_require__(14);
+
+var util = __webpack_require__(15);
+var tmpl = __webpack_require__(37);
+
+var SELECTOR_UP_BUTTON = '.tui-timepicker-btn-up';
+var SELECTOR_DOWN_BUTTON = '.tui-timepicker-btn-down';
+
+/**
+ * @class
+ * @ignore
+ * @param {String|HTMLElement} container - Container of spinbox or selector
+ * @param {Object} [options] - Options for initialization
+ * @param {number} [options.initialValue] - initial setting value
+ * @param {Array.<number>} items - Items
+ */
+var Spinbox = defineClass(
+  /** @lends Spinbox.prototype */ {
+    init: function(container, options) {
+      options = extend(
+        {
+          items: []
+        },
+        options
+      );
+
+      /**
+       * @type {HTMLElement}
+       * @private
+       */
+      this._container = isHTMLNode(container)
+        ? container
+        : document.querySelector(container);
+
+      /**
+       * Spinbox element
+       * @type {HTMLElement}
+       * @private
+       */
+      this._element = null;
+
+      /**
+       * @type {HTMLElement}
+       * @private
+       */
+      this._inputElement = null;
+
+      /**
+       * Spinbox value items
+       * @type {Array.<number>}
+       * @private
+       */
+      this._items = options.items;
+
+      /**
+       * Selectbox disabled items info
+       * @type {Array.<number>}
+       * @private
+       */
+      this._disabledItems = options.disabledItems || [];
+
+      /**
+       * @type {number}
+       * @private
+       */
+      this._selectedIndex = Math.max(0, inArray(options.initialValue, this._items));
+
+      /**
+       * Time format for output
+       * @type {string}
+       * @private
+       */
+      this._format = options.format;
+
+      this._render();
+      this._setEvents();
+    },
+
+    /**
+     * Render spinbox
+     * @private
+     */
+    _render: function() {
+      var index = inArray(this.getValue(), this._items);
+      var context;
+
+      if (this._disabledItems[index]) {
+        this._selectedIndex = this._findEnabledIndex();
+      }
+      context = {
+        maxLength: this._getMaxLength(),
+        initialValue: this.getValue(),
+        format: this._format,
+        formatTime: util.formatTime
+      };
+
+      this._container.innerHTML = tmpl(context);
+      this._element = this._container.firstChild;
+      this._inputElement = this._element.querySelector('input');
+    },
+
+    /**
+     * Find the index of the enabled item
+     * @returns {number} - find selected index
+     * @private
+     */
+    _findEnabledIndex: function() {
+      return inArray(false, this._disabledItems);
+    },
+
+    /**
+     * Returns maxlength of value
+     * @returns {number}
+     * @private
+     */
+    _getMaxLength: function() {
+      var lengths = [];
+
+      forEachArray(this._items, function(item) {
+        lengths.push(String(item).length);
+      });
+
+      return Math.max.apply(null, lengths);
+    },
+
+    /**
+     * Set disabledItems
+     * @param {object} disabledItems - disabled status of items
+     */
+    setDisabledItems: function(disabledItems) {
+      this._disabledItems = disabledItems;
+      this._changeToInputValue();
+    },
+
+    /**
+     * Assign default events to up/down button
+     * @private
+     */
+    _setEvents: function() {
+      on(this._container, 'click', this._onClickHandler, this);
+      on(this._inputElement, 'keydown', this._onKeydownInputElement, this);
+      on(this._inputElement, 'change', this._onChangeHandler, this);
+
+      this.on(
+        'changeItems',
+        function(items) {
+          this._items = items;
+          this._render();
+        },
+        this
+      );
+    },
+
+    /**
+     * Remove events to up/down button
+     * @private
+     */
+    _removeEvents: function() {
+      this.off();
+
+      off(this._container, 'click', this._onClickHandler, this);
+      off(this._inputElement, 'keydown', this._onKeydownInputElement, this);
+      off(this._inputElement, 'change', this._onChangeHandler, this);
+    },
+
+    /**
+     * Click event handler
+     * @param {Event} ev - Change event on up/down buttons.
+     */
+    _onClickHandler: function(ev) {
+      var target = util.getTarget(ev);
+
+      if (closest(target, SELECTOR_DOWN_BUTTON)) {
+        this._setNextValue(true);
+      } else if (closest(target, SELECTOR_UP_BUTTON)) {
+        this._setNextValue(false);
+      }
+    },
+
+    /**
+     * Set input value
+     * @param {boolean} isDown - From down-action?
+     * @private
+     */
+    _setNextValue: function(isDown) {
+      var index = this._selectedIndex;
+
+      if (isDown) {
+        index = index ? index - 1 : this._items.length - 1;
+      } else {
+        index = index < this._items.length - 1 ? index + 1 : 0;
+      }
+
+      if (this._disabledItems[index]) {
+        this._selectedIndex = index;
+        this._setNextValue(isDown);
+      } else {
+        this.setValue(this._items[index]);
+      }
+    },
+
+    /**
+     * DOM(Input element) Keydown Event handler
+     * @param {Event} ev event-object
+     * @private
+     */
+    _onKeydownInputElement: function(ev) {
+      var keyCode = ev.which || ev.keyCode;
+      var isDown;
+
+      if (closest(util.getTarget(ev), 'input')) {
+        switch (keyCode) {
+          case 38:
+            isDown = false;
+            break;
+          case 40:
+            isDown = true;
+            break;
+          default:
+            return;
+        }
+
+        this._setNextValue(isDown);
+      }
+    },
+
+    /**
+     * DOM(Input element) Change Event handler
+     * @param {Event} ev Change event on an input element.
+     * @private
+     */
+    _onChangeHandler: function(ev) {
+      if (closest(util.getTarget(ev), 'input')) {
+        this._changeToInputValue();
+      }
+    },
+
+    /**
+     * Change value to input-box if it is valid.
+     * @private
+     */
+    _changeToInputValue: function() {
+      var newValue = Number(this._inputElement.value);
+      var newIndex = inArray(newValue, this._items);
+
+      if (this._disabledItems[newIndex]) {
+        newIndex = this._findEnabledIndex();
+        newValue = this._items[newIndex];
+      } else if (newIndex === this._selectedIndex) {
+        return;
+      }
+
+      if (newIndex === -1) {
+        this.setValue(this._items[this._selectedIndex]);
+      } else {
+        this._selectedIndex = newIndex;
+        this.fire('change', {
+          value: newValue
+        });
+      }
+    },
+
+    /**
+     * Set value to input-box.
+     * @param {number} value - Value
+     */
+    setValue: function(value) {
+      this._inputElement.value = util.formatTime(value, this._format);
+      this._changeToInputValue();
+    },
+
+    /**
+     * Returns current value
+     * @returns {number}
+     */
+    getValue: function() {
+      return this._items[this._selectedIndex];
+    },
+
+    /**
+     * Destory
+     */
+    destroy: function() {
+      this._removeEvents();
+      removeElement(this._element);
+      this._container = this._element = this._inputElement = this._items = this._selectedIndex = null;
+    }
+  }
+);
+
+CustomEvents.mixin(Spinbox);
+module.exports = Spinbox;
+
+
+/***/ }),
+/* 35 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Send hostname on DOMContentLoaded.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var isUndefined = __webpack_require__(5);
+var imagePing = __webpack_require__(36);
+
+var ms7days = 7 * 24 * 60 * 60 * 1000;
+
+/**
+ * Check if the date has passed 7 days
+ * @param {number} date - milliseconds
+ * @returns {boolean}
+ * @private
+ */
+function isExpired(date) {
+  var now = new Date().getTime();
+
+  return now - date > ms7days;
+}
+
+/**
+ * Send hostname on DOMContentLoaded.
+ * To prevent hostname set tui.usageStatistics to false.
+ * @param {string} appName - application name
+ * @param {string} trackingId - GA tracking ID
+ * @ignore
+ */
+function sendHostname(appName, trackingId) {
+  var url = 'https://www.google-analytics.com/collect';
+  var hostname = location.hostname;
+  var hitType = 'event';
+  var eventCategory = 'use';
+  var applicationKeyForStorage = 'TOAST UI ' + appName + ' for ' + hostname + ': Statistics';
+  var date = window.localStorage.getItem(applicationKeyForStorage);
+
+  // skip if the flag is defined and is set to false explicitly
+  if (!isUndefined(window.tui) && window.tui.usageStatistics === false) {
+    return;
+  }
+
+  // skip if not pass seven days old
+  if (date && !isExpired(date)) {
+    return;
+  }
+
+  window.localStorage.setItem(applicationKeyForStorage, new Date().getTime());
+
+  setTimeout(function() {
+    if (document.readyState === 'interactive' || document.readyState === 'complete') {
+      imagePing(url, {
+        v: 1,
+        t: hitType,
+        tid: trackingId,
+        cid: hostname,
+        dp: hostname,
+        dh: appName,
+        el: appName,
+        ec: eventCategory
+      });
+    }
+  }, 1000);
+}
+
+module.exports = sendHostname;
+
+
+/***/ }),
+/* 36 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Request image ping.
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var forEachOwnProperties = __webpack_require__(16);
+
+/**
+ * @module request
+ */
+
+/**
+ * Request image ping.
+ * @param {String} url url for ping request
+ * @param {Object} trackingInfo infos for make query string
+ * @returns {HTMLElement}
+ * @memberof module:request
+ * @example
+ * var imagePing = require('tui-code-snippet/request/imagePing'); // node, commonjs
+ *
+ * imagePing('https://www.google-analytics.com/collect', {
+ *     v: 1,
+ *     t: 'event',
+ *     tid: 'trackingid',
+ *     cid: 'cid',
+ *     dp: 'dp',
+ *     dh: 'dh'
+ * });
+ */
+function imagePing(url, trackingInfo) {
+  var trackingElement = document.createElement('img');
+  var queryString = '';
+  forEachOwnProperties(trackingInfo, function(value, key) {
+    queryString += '&' + key + '=' + value;
+  });
+  queryString = queryString.substring(1);
+
+  trackingElement.src = url + '?' + queryString;
+
+  trackingElement.style.display = 'none';
+  document.body.appendChild(trackingElement);
+  document.body.removeChild(trackingElement);
+
+  return trackingElement;
+}
+
+module.exports = imagePing;
+
+
+/***/ }),
+/* 37 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var template = __webpack_require__(7);
+
+module.exports = function(context) {
+  var source =
+      '<div class="tui-timepicker-btn-area">'
+    + '  <input type="text" class="tui-timepicker-spinbox-input"'
+    + '        maxlength="{{maxLength}}"'
+    + '        size="{{maxLength}}"'
+    + '        value="{{formatTime initialValue format}}"'
+    + '        aria-label="TimePicker spinbox value">'
+    + '  <button type="button" class="tui-timepicker-btn tui-timepicker-btn-up">'
+    + '    <span class="tui-ico-t-btn">Increase</span>'
+    + '  </button>'
+    + '  <button type="button" class="tui-timepicker-btn tui-timepicker-btn-down">'
+    + '    <span class="tui-ico-t-btn">Decrease</span>'
+    + '  </button>'
+    + '</div>';
+
+  return template(source, context);
+};
+
+
+
+/***/ }),
+/* 38 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Selectbox (in TimePicker)
+ * @author NHN. FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+var inArray = __webpack_require__(0);
+var CustomEvents = __webpack_require__(8);
+var defineClass = __webpack_require__(9);
+var extend = __webpack_require__(1);
+var on = __webpack_require__(10);
+var off = __webpack_require__(11);
+var closest = __webpack_require__(12);
+var removeElement = __webpack_require__(13);
+var isHTMLNode = __webpack_require__(14);
+
+var util = __webpack_require__(15);
+var tmpl = __webpack_require__(39);
+
+/**
+ * @class
+ * @ignore
+ * @param {string|HTMLElement} container - Container element or selector
+ * @param {object} options - Options
+ * @param {Array.<number>} options.items - Items
+ * @param {number} options.initialValue - Initial value
+ */
+var Selectbox = defineClass(
+  /** @lends Selectbox.prototype */ {
+    init: function(container, options) {
+      options = extend(
+        {
+          items: []
+        },
+        options
+      );
+
+      /**
+       * Container element
+       * @type {HTMLElement}
+       * @private
+       */
+      this._container = isHTMLNode(container)
+        ? container
+        : document.querySelector(container);
+
+      /**
+       * Selectbox items
+       * @type {Array.<number>}
+       * @private
+       */
+      this._items = options.items || [];
+
+      /**
+       * Selectbox disabled items info
+       * @type {Array.<number>}
+       * @private
+       */
+      this._disabledItems = options.disabledItems || [];
+
+      /**
+       * Selected index
+       * @type {number}
+       * @private
+       */
+      this._selectedIndex = Math.max(0, inArray(options.initialValue, this._items));
+
+      /**
+       * Time format for output
+       * @type {string}
+       * @private
+       */
+      this._format = options.format;
+
+      /**
+       * Select element
+       * @type {HTMLElement}
+       * @private
+       */
+      this._element = null;
+
+      this._render();
+      this._setEvents();
+    },
+
+    /**
+     * Render selectbox
+     * @private
+     */
+    _render: function() {
+      var context;
+
+      this._changeEnabledIndex();
+      context = {
+        items: this._items,
+        format: this._format,
+        initialValue: this.getValue(),
+        disabledItems: this._disabledItems,
+        formatTime: util.formatTime,
+        equals: function(a, b) {
+          return a === b;
+        }
+      };
+
+      if (this._element) {
+        this._removeElement();
+      }
+
+      this._container.innerHTML = tmpl(context);
+      this._element = this._container.firstChild;
+      on(this._element, 'change', this._onChangeHandler, this);
+    },
+
+    /**
+     * Change the index of the enabled item
+     * @private
+     */
+    _changeEnabledIndex: function() {
+      var index = inArray(this.getValue(), this._items);
+      if (this._disabledItems[index]) {
+        this._selectedIndex = inArray(false, this._disabledItems);
+      }
+    },
+
+    /**
+     * Set disabledItems
+     * @param {object} disabledItems - disabled status of items
+     * @private
+     */
+    setDisabledItems: function(disabledItems) {
+      this._disabledItems = disabledItems;
+      this._render();
+    },
+
+    /**
+     * Set events
+     * @private
+     */
+    _setEvents: function() {
+      this.on(
+        'changeItems',
+        function(items) {
+          this._items = items;
+          this._render();
+        },
+        this
+      );
+    },
+
+    /**
+     * Remove events
+     * @private
+     */
+    _removeEvents: function() {
+      this.off();
+    },
+
+    /**
+     * Remove element
+     * @private
+     */
+    _removeElement: function() {
+      off(this._element, 'change', this._onChangeHandler, this);
+      removeElement(this._element);
+    },
+
+    /**
+     * Change event handler
+     * @param {Event} ev Change event on a select element.
+     * @private
+     */
+    _onChangeHandler: function(ev) {
+      if (closest(util.getTarget(ev), 'select')) {
+        this._setNewValue();
+      }
+    },
+
+    /**
+     * Set new value
+     * @private
+     */
+    _setNewValue: function() {
+      var newValue = Number(this._element.value);
+      this._selectedIndex = inArray(newValue, this._items);
+      this.fire('change', {
+        value: newValue
+      });
+    },
+
+    /**
+     * Returns current value
+     * @returns {number}
+     */
+    getValue: function() {
+      return this._items[this._selectedIndex];
+    },
+
+    /**
+     * Set value
+     * @param {number} value - New value
+     */
+    setValue: function(value) {
+      var newIndex = inArray(value, this._items);
+
+      if (newIndex > -1 && newIndex !== this._selectedIndex) {
+        this._selectedIndex = newIndex;
+        this._element.value = value;
+        this._setNewValue();
+      }
+    },
+
+    /**
+     * Destory
+     */
+    destroy: function() {
+      this._removeEvents();
+      this._removeElement();
+      this._container = this._items = this._selectedIndex = this._element = null;
+    }
+  }
+);
+
+CustomEvents.mixin(Selectbox);
+module.exports = Selectbox;
+
+
+/***/ }),
+/* 39 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var template = __webpack_require__(7);
+
+module.exports = function(context) {
+  var source =
+      '<select class="tui-timepicker-select" aria-label="Time">'
+    + '  {{each items}}'
+    + '    {{if equals initialValue @this}}'
+    + '      <option value="{{@this}}" selected {{if disabledItems[@index]}}disabled{{/if}}>{{formatTime @this format}}</option>'
+    + '    {{else}}'
+    + '      <option value="{{@this}}" {{if disabledItems[@index]}}disabled{{/if}}>{{formatTime @this format}}</option>'
+    + '    {{/if}}'
+    + '  {{/each}}'
+    + '</select>';
+
+  return template(source, context);
+};
+
+
+
+/***/ }),
+/* 40 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * @fileoverview Default locale texts
+ * @author NHN. FE Development Lab <dl_javascript@nhn.com>
+ */
+
+
+
+module.exports = {
+  en: {
+    am: 'AM',
+    pm: 'PM'
+  },
+  ko: {
+    am: '오전',
+    pm: '오후'
+  }
+};
+
+
+/***/ }),
+/* 41 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var template = __webpack_require__(7);
+
+module.exports = function(context) {
+  var source =
+      '<div class="tui-timepicker">'
+    + '  <div class="tui-timepicker-body">'
+    + '    <div class="tui-timepicker-row">'
+    + '      {{if isSpinbox}}'
+    + '        <div class="tui-timepicker-column tui-timepicker-spinbox tui-timepicker-hour"></div>'
+    + '        <span class="tui-timepicker-column tui-timepicker-colon"><span class="tui-ico-colon">:</span></span>'
+    + '        <div class="tui-timepicker-column tui-timepicker-spinbox tui-timepicker-minute"></div>'
+    + '        {{if showMeridiem}}'
+    + '          {{meridiemElement}}'
+    + '        {{/if}}'
+    + '      {{else}}'
+    + '        <div class="tui-timepicker-column tui-timepicker-selectbox tui-timepicker-hour"></div>'
+    + '        <span class="tui-timepicker-column tui-timepicker-colon"><span class="tui-ico-colon">:</span></span>'
+    + '        <div class="tui-timepicker-column tui-timepicker-selectbox tui-timepicker-minute"></div>'
+    + '        {{if showMeridiem}}'
+    + '          {{meridiemElement}}'
+    + '        {{/if}}'
+    + '      {{/if}}'
+    + '    </div>'
+    + '  </div>'
+    + '</div>';
+
+  return template(source, context);
+};
+
+
+
+/***/ }),
+/* 42 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var template = __webpack_require__(7);
+
+module.exports = function(context) {
+  var source =
+      '{{if isSpinbox}}'
+    + '  <div class="tui-timepicker-column tui-timepicker-checkbox tui-timepicker-meridiem">'
+    + '    <div class="tui-timepicker-check-area">'
+    + '      <ul class="tui-timepicker-check-lst">'
+    + '        <li class="tui-timepicker-check">'
+    + '          <div class="tui-timepicker-radio">'
+    + '            <input type="radio"'
+    + '                  name="optionsRadios-{{radioId}}"'
+    + '                  value="AM"'
+    + '                  class="tui-timepicker-radio-am"'
+    + '                  id="tui-timepicker-radio-am-{{radioId}}">'
+    + '            <label for="tui-timepicker-radio-am-{{radioId}}" class="tui-timepicker-radio-label">'
+    + '              <span class="tui-timepicker-input-radio"></span>{{am}}'
+    + '            </label>'
+    + '          </div>'
+    + '        </li>'
+    + '        <li class="tui-timepicker-check">'
+    + '          <div class="tui-timepicker-radio">'
+    + '            <input type="radio"'
+    + '                  name="optionsRadios-{{radioId}}"'
+    + '                  value="PM"'
+    + '                  class="tui-timepicker-radio-pm"'
+    + '                  id="tui-timepicker-radio-pm-{{radioId}}">'
+    + '            <label for="tui-timepicker-radio-pm-{{radioId}}" class="tui-timepicker-radio-label">'
+    + '              <span class="tui-timepicker-input-radio"></span>{{pm}}'
+    + '            </label>'
+    + '          </div>'
+    + '        </li>'
+    + '      </ul>'
+    + '    </div>'
+    + '  </div>'
+    + '{{else}}'
+    + '  <div class="tui-timepicker-column tui-timepicker-selectbox tui-is-add-picker tui-timepicker-meridiem">'
+    + '    <select class="tui-timepicker-select" aria-label="AM/PM">'
+    + '      <option value="AM">{{am}}</option>'
+    + '      <option value="PM">{{pm}}</option>'
+    + '    </select>'
+    + '  </div>'
+    + '{{/if}}';
+
+  return template(source, context);
+};
+
+
+
+/***/ })
+/******/ ]);
+});