@egjs/flicking 4.10.3 → 4.10.5-beta.0

package/dist/flicking.pkgd.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.10.3
+version: 4.10.5-beta.0
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -256,7 +256,7 @@ version: 4.10.3
     license: MIT
     author: NAVER Corp.
     repository: https://github.com/naver/egjs-component
-    version: 3.0.2
+    version: 3.0.3
     */
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -274,8 +274,8 @@ version: 4.10.3
     ***************************************************************************** */
     function __values(o) {
       var s = typeof Symbol === "function" && Symbol.iterator,
-          m = s && o[s],
-          i = 0;
+        m = s && o[s],
+        i = 0;
       if (m) return m.call(o);
       if (o && typeof o.length === "number") return {
         next: function () {
@@ -292,10 +292,9 @@ version: 4.10.3
       var m = typeof Symbol === "function" && o[Symbol.iterator];
       if (!m) return o;
       var i = m.call(o),
-          r,
-          ar = [],
-          e;
-
+        r,
+        ar = [],
+        e;
       try {
         while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
       } catch (error) {
@@ -309,12 +308,10 @@ version: 4.10.3
           if (e) throw e.error;
         }
       }
-
       return ar;
     }
     function __spread() {
       for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
-
       return ar;
     }
 
@@ -326,14 +323,12 @@ version: 4.10.3
       return typeof value === "undefined";
     };
 
+    // This class name is not matched to file name intentionally
     /**
      * Event class to provide additional properties
      * @ko Component에서 추가적인 프로퍼티를 제공하는 이벤트 클래스
      */
-
-    var ComponentEvent =
-    /*#__PURE__*/
-    function () {
+    var ComponentEvent = /*#__PURE__*/function () {
       /**
        * Create a new instance of ComponentEvent.
        * @ko ComponentEvent의 새로운 인스턴스를 생성한다.
@@ -342,14 +337,12 @@ version: 4.10.3
        */
       function ComponentEvent(eventType, props) {
         var e_1, _a;
-
         this._canceled = false;
-
         if (props) {
           try {
             for (var _b = __values(Object.keys(props)), _c = _b.next(); !_c.done; _c = _b.next()) {
-              var key = _c.value; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-
+              var key = _c.value;
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               this[key] = props[key];
             }
           } catch (e_1_1) {
@@ -364,17 +357,13 @@ version: 4.10.3
             }
           }
         }
-
         this.eventType = eventType;
       }
       /**
        * Stop the event. {@link ComponentEvent#isCanceled} will return `true` after.
        * @ko 이벤트를 중단한다. 이후 {@link ComponentEvent#isCanceled}가 `true`를 반환한다.
        */
-
-
       var __proto = ComponentEvent.prototype;
-
       __proto.stop = function () {
         this._canceled = true;
       };
@@ -383,12 +372,9 @@ version: 4.10.3
        * @ko {@link ComponentEvent#stop}이 호출되었는지 여부를 반환한다.
        * @return {boolean} A boolean value that indicates whether {@link ComponentEvent#stop} is called before.<ko>이전에 {@link ComponentEvent#stop}이 불려졌는지 여부를 반환한다.</ko>
        */
-
-
       __proto.isCanceled = function () {
         return this._canceled;
       };
-
       return ComponentEvent;
     }();
 
@@ -396,10 +382,7 @@ version: 4.10.3
      * A class used to manage events in a component
      * @ko 컴포넌트의 이벤트을 관리할 수 있게 하는 클래스
      */
-
-    var Component =
-    /*#__PURE__*/
-    function () {
+    var Component = /*#__PURE__*/function () {
       /**
        * @support {"ie": "7+", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"}
        */
@@ -447,25 +430,17 @@ version: 4.10.3
        * // https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
        * ```
        */
-
-
       var __proto = Component.prototype;
-
       __proto.trigger = function (event) {
         var params = [];
-
         for (var _i = 1; _i < arguments.length; _i++) {
           params[_i - 1] = arguments[_i];
         }
-
         var eventName = event instanceof ComponentEvent ? event.eventType : event;
-
         var handlers = __spread(this._eventHandler[eventName] || []);
-
         if (handlers.length <= 0) {
           return this;
         }
-
         if (event instanceof ComponentEvent) {
           event.currentTarget = this;
           handlers.forEach(function (handler) {
@@ -477,7 +452,6 @@ version: 4.10.3
             handler.apply(void 0, __spread(params));
           });
         }
-
         return this;
       };
       /**
@@ -509,36 +483,26 @@ version: 4.10.3
        * // Nothing happens
        * ```
        */
-
-
       __proto.once = function (eventName, handlerToAttach) {
         var _this = this;
-
         if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
           var eventHash = eventName;
-
           for (var key in eventHash) {
             this.once(key, eventHash[key]);
           }
-
           return this;
         } else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
           var listener_1 = function () {
             var args = [];
-
             for (var _i = 0; _i < arguments.length; _i++) {
               args[_i] = arguments[_i];
-            } // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-
-
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
             handlerToAttach.apply(void 0, __spread(args));
-
             _this.off(eventName, listener_1);
           };
-
           this.on(eventName, listener_1);
         }
-
         return this;
       };
       /**
@@ -559,8 +523,6 @@ version: 4.10.3
        * }
        * ```
        */
-
-
       __proto.hasOn = function (eventName) {
         return !!this._eventHandler[eventName];
       };
@@ -586,28 +548,21 @@ version: 4.10.3
        * }
        * ```
        */
-
-
       __proto.on = function (eventName, handlerToAttach) {
         if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
           var eventHash = eventName;
-
           for (var name in eventHash) {
             this.on(name, eventHash[name]);
           }
-
           return this;
         } else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
           var handlerList = this._eventHandler[eventName];
-
           if (isUndefined(handlerList)) {
             this._eventHandler[eventName] = [];
             handlerList = this._eventHandler[eventName];
           }
-
           handlerList.push(handlerToAttach);
         }
-
         return this;
       };
       /**
@@ -632,53 +587,40 @@ version: 4.10.3
        * }
        * ```
        */
-
-
       __proto.off = function (eventName, handlerToDetach) {
-        var e_1, _a; // Detach all event handlers.
-
-
+        var e_1, _a;
+        // Detach all event handlers.
         if (isUndefined(eventName)) {
           this._eventHandler = {};
           return this;
-        } // Detach all handlers for eventname or detach event handlers by object.
-
-
+        }
+        // Detach all handlers for eventname or detach event handlers by object.
         if (isUndefined(handlerToDetach)) {
           if (typeof eventName === "string") {
             delete this._eventHandler[eventName];
             return this;
           } else {
             var eventHash = eventName;
-
             for (var name in eventHash) {
               this.off(name, eventHash[name]);
             }
-
             return this;
           }
-        } // Detach single event handler
-
-
+        }
+        // Detach single event handler
         var handlerList = this._eventHandler[eventName];
-
         if (handlerList) {
           var idx = 0;
-
           try {
             for (var handlerList_1 = __values(handlerList), handlerList_1_1 = handlerList_1.next(); !handlerList_1_1.done; handlerList_1_1 = handlerList_1.next()) {
               var handlerFunction = handlerList_1_1.value;
-
               if (handlerFunction === handlerToDetach) {
                 handlerList.splice(idx, 1);
-
                 if (handlerList.length <= 0) {
                   delete this._eventHandler[eventName];
                 }
-
                 break;
               }
-
               idx++;
             }
           } catch (e_1_1) {
@@ -693,7 +635,6 @@ version: 4.10.3
             }
           }
         }
-
         return this;
       };
       /**
@@ -705,9 +646,7 @@ version: 4.10.3
        * Component.VERSION;  // ex) 3.0.0
        * @memberof Component
        */
-
-
-      Component.VERSION = "3.0.2";
+      Component.VERSION = "3.0.3";
       return Component;
     }();
 
@@ -715,7 +654,7 @@ version: 4.10.3
      * Copyright (c) 2015 NAVER Corp.
      * egjs projects are licensed under the MIT license
      */
-
+    // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-assignment
     var ComponentEvent$1 = ComponentEvent;
 
     /*
@@ -1148,7 +1087,7 @@ version: 4.10.3
       if (pos < min) {
         var offset = (min - pos) % size;
         pos = max - offset;
-      } else if (pos > max) {
+      } else if (pos >= max) {
         var offset = (pos - max) % size;
         pos = min + offset;
       }
@@ -2487,9 +2426,9 @@ version: 4.10.3
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
 
-    /*
-     * Copyright (c) 2015 NAVER Corp.
-     * egjs projects are licensed under the MIT license
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
      */
 
     /* eslint-disable no-new-func, no-nested-ternary */
@@ -2506,9 +2445,9 @@ version: 4.10.3
       win = window;
     }
 
-    /*
-     * Copyright (c) 2015 NAVER Corp.
-     * egjs projects are licensed under the MIT license
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
      */
     var DIRECTION_NONE = 1;
     var DIRECTION_LEFT = 2;
@@ -2521,6 +2460,12 @@ version: 4.10.3
     var MOUSE_LEFT = "left";
     var MOUSE_RIGHT = "right";
     var MOUSE_MIDDLE = "middle";
+    var ANY = "any";
+    var NONE = "none";
+    var SHIFT = "shift";
+    var CTRL = "ctrl";
+    var ALT = "alt";
+    var META = "meta";
     var VELOCITY_INTERVAL = 16;
     var IOS_EDGE_THRESHOLD = 30;
     var IS_IOS_SAFARI = "ontouchstart" in win && agent().browser.name === "safari";
@@ -2635,21 +2580,21 @@ version: 4.10.3
 
       caf = win.clearTimeout;
     }
-    /**
-     * A polyfill for the window.requestAnimationFrame() method.
-     * @see  https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
-     * @private
+    /**
+     * A polyfill for the window.requestAnimationFrame() method.
+     * @see  https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
+     * @private
      */
 
 
     var requestAnimationFrame = function (fp) {
       return raf(fp);
     };
-    /**
-     * A polyfill for the window.cancelAnimationFrame() method. It cancels an animation executed through a call to the requestAnimationFrame() method.
-     * @param {Number} key −  The ID value returned through a call to the requestAnimationFrame() method. <ko>requestAnimationFrame() 메서드가 반환한 아이디 값</ko>
-     * @see  https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame
-     * @private
+    /**
+     * A polyfill for the window.cancelAnimationFrame() method. It cancels an animation executed through a call to the requestAnimationFrame() method.
+     * @param {Number} key −  The ID value returned through a call to the requestAnimationFrame() method. <ko>requestAnimationFrame() 메서드가 반환한 아이디 값</ko>
+     * @see  https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame
+     * @private
      */
 
     var cancelAnimationFrame = function (key) {
@@ -2816,32 +2761,32 @@ version: 4.10.3
       function EventManager(_axes) {
         this._axes = _axes;
       }
-      /**
-       * This event is fired when a user holds an element on the screen of the device.
-       * @ko 사용자가 기기의 화면에 손을 대고 있을 때 발생하는 이벤트
-       * @event Axes#hold
-       * @type {object}
-       * @property {Object.<string, number>} pos coordinate <ko>좌표 정보</ko>
-       * @property {Object} input The instance of inputType where the event occurred<ko>이벤트가 발생한 inputType 인스턴스</ko>
-       * @property {Object} inputEvent The event object received from inputType <ko>inputType으로 부터 받은 이벤트 객체</ko>
-       * @property {Boolean} isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call <ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
-       *
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "zoom": {
-       *      range: [50, 30]
-       *   }
-       * }).on("hold", function(event) {
-       *   // event.pos
-       *   // event.input
-       *   // event.inputEvent
-       *   // isTrusted
-       * });
-       * ```
+      /**
+       * This event is fired when a user holds an element on the screen of the device.
+       * @ko 사용자가 기기의 화면에 손을 대고 있을 때 발생하는 이벤트
+       * @event Axes#hold
+       * @type {object}
+       * @property {Object.<string, number>} pos coordinate <ko>좌표 정보</ko>
+       * @property {Object} input The instance of inputType where the event occurred<ko>이벤트가 발생한 inputType 인스턴스</ko>
+       * @property {Object} inputEvent The event object received from inputType <ko>inputType으로 부터 받은 이벤트 객체</ko>
+       * @property {Boolean} isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call <ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
+       *
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "zoom": {
+       *      range: [50, 30]
+       *   }
+       * }).on("hold", function(event) {
+       *   // event.pos
+       *   // event.input
+       *   // event.inputEvent
+       *   // isTrusted
+       * });
+       * ```
        */
 
 
@@ -2857,80 +2802,80 @@ version: 4.10.3
           isTrusted: true
         }));
       };
-      /**
-       * Specifies the coordinates to move after the 'change' event. It works when the holding value of the change event is true.
-       * @ko 'change' 이벤트 이후 이동할 좌표를 지정한다. change이벤트의 holding 값이 true일 경우에 동작한다
-       * @param {Object.<string, number>} pos The coordinate to move to <ko>이동할 좌표</ko>
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "zoom": {
-       *      range: [50, 30]
-       *   }
-       * }).on("change", function(event) {
-       *   event.holding && event.set({x: 10});
-       * });
-       * ```
+      /**
+       * Specifies the coordinates to move after the 'change' event. It works when the holding value of the change event is true.
+       * @ko 'change' 이벤트 이후 이동할 좌표를 지정한다. change이벤트의 holding 값이 true일 경우에 동작한다
+       * @param {Object.<string, number>} pos The coordinate to move to <ko>이동할 좌표</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "zoom": {
+       *      range: [50, 30]
+       *   }
+       * }).on("change", function(event) {
+       *   event.holding && event.set({x: 10});
+       * });
+       * ```
        */
 
-      /** Specifies the animation coordinates to move after the 'release' or 'animationStart' events.
-       * @ko 'release' 또는 'animationStart' 이벤트 이후 이동할 좌표를 지정한다.
-       * @param {Object.<string, number>} pos The coordinate to move to <ko>이동할 좌표</ko>
-       * @param {Number} [duration=0] Duration of the animation (unit: ms) <ko>애니메이션 진행 시간(단위: ms)</ko>
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "zoom": {
-       *      range: [50, 30]
-       *   }
-       * }).on("animationStart", function(event) {
-       *   event.setTo({x: 10}, 2000);
-       * });
-       * ```
+      /** Specifies the animation coordinates to move after the 'release' or 'animationStart' events.
+       * @ko 'release' 또는 'animationStart' 이벤트 이후 이동할 좌표를 지정한다.
+       * @param {Object.<string, number>} pos The coordinate to move to <ko>이동할 좌표</ko>
+       * @param {Number} [duration=0] Duration of the animation (unit: ms) <ko>애니메이션 진행 시간(단위: ms)</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "zoom": {
+       *      range: [50, 30]
+       *   }
+       * }).on("animationStart", function(event) {
+       *   event.setTo({x: 10}, 2000);
+       * });
+       * ```
        */
 
-      /**
-       * This event is fired when a user release an element on the screen of the device.
-       * @ko 사용자가 기기의 화면에서 손을 뗐을 때 발생하는 이벤트
-       * @event Axes#release
-       * @type {object}
-       * @property {Object.<string, number>} depaPos The coordinates when releasing an element<ko>손을 뗐을 때의 좌표 </ko>
-       * @property {Object.<string, number>} destPos The coordinates to move to after releasing an element<ko>손을 뗀 뒤에 이동할 좌표</ko>
-       * @property {Object.<string, number>} delta  The movement variation of coordinate <ko>좌표의 변화량</ko>
-       * @property {Object.<string, number>} bounceRatio If the coordinates at the time of release are in the bounce area, the current bounce value divided by the maximum bounce value <ko>손을 뗐을 때의 좌표가 bounce 영역에 있는 경우 현재 bounce된 값을 최대 bounce 값으로 나눈 수치.</ko>
-       * @property {Object} inputEvent The event object received from inputType <ko>inputType으로 부터 받은 이벤트 객체</ko>
-       * @property {Object} input The instance of inputType where the event occurred<ko>이벤트가 발생한 inputType 인스턴스</ko>
-       * @property {setTo} setTo Specifies the animation coordinates to move after the event <ko>이벤트 이후 이동할 애니메이션 좌표를 지정한다</ko>
-       * @property {Boolean} isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call <ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
-       *
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "zoom": {
-       *      range: [50, 30]
-       *   }
-       * }).on("release", function(event) {
-       *   // event.depaPos
-       *   // event.destPos
-       *   // event.delta
-       *   // event.input
-       *   // event.inputEvent
-       *   // event.setTo
-       *   // event.isTrusted
-       *
-       *   // if you want to change the animation coordinates to move after the 'release' event.
-       *   event.setTo({x: 10}, 2000);
-       * });
-       * ```
+      /**
+       * This event is fired when a user release an element on the screen of the device.
+       * @ko 사용자가 기기의 화면에서 손을 뗐을 때 발생하는 이벤트
+       * @event Axes#release
+       * @type {object}
+       * @property {Object.<string, number>} depaPos The coordinates when releasing an element<ko>손을 뗐을 때의 좌표 </ko>
+       * @property {Object.<string, number>} destPos The coordinates to move to after releasing an element<ko>손을 뗀 뒤에 이동할 좌표</ko>
+       * @property {Object.<string, number>} delta  The movement variation of coordinate <ko>좌표의 변화량</ko>
+       * @property {Object.<string, number>} bounceRatio If the coordinates at the time of release are in the bounce area, the current bounce value divided by the maximum bounce value <ko>손을 뗐을 때의 좌표가 bounce 영역에 있는 경우 현재 bounce된 값을 최대 bounce 값으로 나눈 수치.</ko>
+       * @property {Object} inputEvent The event object received from inputType <ko>inputType으로 부터 받은 이벤트 객체</ko>
+       * @property {Object} input The instance of inputType where the event occurred<ko>이벤트가 발생한 inputType 인스턴스</ko>
+       * @property {setTo} setTo Specifies the animation coordinates to move after the event <ko>이벤트 이후 이동할 애니메이션 좌표를 지정한다</ko>
+       * @property {Boolean} isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call <ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
+       *
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "zoom": {
+       *      range: [50, 30]
+       *   }
+       * }).on("release", function(event) {
+       *   // event.depaPos
+       *   // event.destPos
+       *   // event.delta
+       *   // event.input
+       *   // event.inputEvent
+       *   // event.setTo
+       *   // event.isTrusted
+       *
+       *   // if you want to change the animation coordinates to move after the 'release' event.
+       *   event.setTo({x: 10}, 2000);
+       * });
+       * ```
        */
 
 
@@ -2947,43 +2892,43 @@ version: 4.10.3
           bounceRatio: this._getBounceRatio(roundPos)
         })));
       };
-      /**
-       * This event is fired when coordinate changes.
-       * @ko 좌표가 변경됐을 때 발생하는 이벤트
-       * @event Axes#change
-       * @type {object}
-       * @property {Object.<string, number>} pos  The coordinate <ko>좌표</ko>
-       * @property {Object.<string, number>} delta  The movement variation of coordinate <ko>좌표의 변화량</ko>
-       * @property {Object.<string, number>} bounceRatio If the current coordinates are in the bounce area, the current bounce value divided by the maximum bounce value <ko>현재 좌표가 bounce 영역에 있는 경우 현재 bounce된 값을 최대 bounce 값으로 나눈 수치.</ko>
-       * @property {Boolean} holding Indicates whether a user holds an element on the screen of the device.<ko>사용자가 기기의 화면을 누르고 있는지 여부</ko>
-       * @property {Object} input The instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'.<ko>이벤트가 발생한 inputType 인스턴스. 애니메이션에 의해 값이 변경될 경우에는 'null'을 반환한다.</ko>
-       * @property {Object} inputEvent The event object received from inputType. If the value is changed by animation, it returns 'null'.<ko>inputType으로 부터 받은 이벤트 객체. 애니메이션에 의해 값이 변경될 경우에는 'null'을 반환한다.</ko>
-       * @property {set} set Specifies the coordinates to move after the event. It works when the holding value is true <ko>이벤트 이후 이동할 좌표를 지정한다. holding 값이 true일 경우에 동작한다.</ko>
-       * @property {Boolean} isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call <ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
-       *
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "zoom": {
-       *      range: [50, 30]
-       *   }
-       * }).on("change", function(event) {
-       *   // event.pos
-       *   // event.delta
-       *   // event.input
-       *   // event.inputEvent
-       *   // event.holding
-       *   // event.set
-       *   // event.isTrusted
-       *
-       *   // if you want to change the coordinates to move after the 'change' event.
-       *   // it works when the holding value of the change event is true.
-       *   event.holding && event.set({x: 10});
-       * });
-       * ```
+      /**
+       * This event is fired when coordinate changes.
+       * @ko 좌표가 변경됐을 때 발생하는 이벤트
+       * @event Axes#change
+       * @type {object}
+       * @property {Object.<string, number>} pos  The coordinate <ko>좌표</ko>
+       * @property {Object.<string, number>} delta  The movement variation of coordinate <ko>좌표의 변화량</ko>
+       * @property {Object.<string, number>} bounceRatio If the current coordinates are in the bounce area, the current bounce value divided by the maximum bounce value <ko>현재 좌표가 bounce 영역에 있는 경우 현재 bounce된 값을 최대 bounce 값으로 나눈 수치.</ko>
+       * @property {Boolean} holding Indicates whether a user holds an element on the screen of the device.<ko>사용자가 기기의 화면을 누르고 있는지 여부</ko>
+       * @property {Object} input The instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'.<ko>이벤트가 발생한 inputType 인스턴스. 애니메이션에 의해 값이 변경될 경우에는 'null'을 반환한다.</ko>
+       * @property {Object} inputEvent The event object received from inputType. If the value is changed by animation, it returns 'null'.<ko>inputType으로 부터 받은 이벤트 객체. 애니메이션에 의해 값이 변경될 경우에는 'null'을 반환한다.</ko>
+       * @property {set} set Specifies the coordinates to move after the event. It works when the holding value is true <ko>이벤트 이후 이동할 좌표를 지정한다. holding 값이 true일 경우에 동작한다.</ko>
+       * @property {Boolean} isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call <ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
+       *
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "zoom": {
+       *      range: [50, 30]
+       *   }
+       * }).on("change", function(event) {
+       *   // event.pos
+       *   // event.delta
+       *   // event.input
+       *   // event.inputEvent
+       *   // event.holding
+       *   // event.set
+       *   // event.isTrusted
+       *
+       *   // if you want to change the coordinates to move after the 'change' event.
+       *   // it works when the holding value of the change event is true.
+       *   event.holding && event.set({x: 10});
+       * });
+       * ```
        */
 
 
@@ -3030,42 +2975,42 @@ version: 4.10.3
 
         return !event.isCanceled();
       };
-      /**
-       * This event is fired when animation starts.
-       * @ko 에니메이션이 시작할 때 발생한다.
-       * @event Axes#animationStart
-       * @type {object}
-       * @property {Object.<string, number>} depaPos The coordinates when animation starts<ko>애니메이션이 시작 되었을 때의 좌표 </ko>
-       * @property {Object.<string, number>} destPos The coordinates to move to. If you change this value, you can run the animation<ko>이동할 좌표. 이값을 변경하여 애니메이션을 동작시킬수 있다</ko>
-       * @property {Object.<string, number>} delta  The movement variation of coordinate <ko>좌표의 변화량</ko>
-       * @property {Number} duration Duration of the animation (unit: ms). If you change this value, you can control the animation duration time.<ko>애니메이션 진행 시간(단위: ms). 이값을 변경하여 애니메이션의 이동시간을 조절할 수 있다.</ko>
-       * @property {Object} input The instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'.<ko>이벤트가 발생한 inputType 인스턴스. 애니메이션에 의해 값이 변경될 경우에는 'null'을 반환한다.</ko>
-       * @property {Object} inputEvent The event object received from inputType <ko>inputType으로 부터 받은 이벤트 객체</ko>
-       * @property {setTo} setTo Specifies the animation coordinates to move after the event <ko>이벤트 이후 이동할 애니메이션 좌표를 지정한다</ko>
-       * @property {Boolean} isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call <ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
-       *
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "zoom": {
-       *      range: [50, 30]
-       *   }
-       * }).on("release", function(event) {
-       *   // event.depaPos
-       *   // event.destPos
-       *   // event.delta
-       *   // event.input
-       *   // event.inputEvent
-       *   // event.setTo
-       *   // event.isTrusted
-       *
-       *   // if you want to change the animation coordinates to move after the 'animationStart' event.
-       *   event.setTo({x: 10}, 2000);
-       * });
-       * ```
+      /**
+       * This event is fired when animation starts.
+       * @ko 에니메이션이 시작할 때 발생한다.
+       * @event Axes#animationStart
+       * @type {object}
+       * @property {Object.<string, number>} depaPos The coordinates when animation starts<ko>애니메이션이 시작 되었을 때의 좌표 </ko>
+       * @property {Object.<string, number>} destPos The coordinates to move to. If you change this value, you can run the animation<ko>이동할 좌표. 이값을 변경하여 애니메이션을 동작시킬수 있다</ko>
+       * @property {Object.<string, number>} delta  The movement variation of coordinate <ko>좌표의 변화량</ko>
+       * @property {Number} duration Duration of the animation (unit: ms). If you change this value, you can control the animation duration time.<ko>애니메이션 진행 시간(단위: ms). 이값을 변경하여 애니메이션의 이동시간을 조절할 수 있다.</ko>
+       * @property {Object} input The instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'.<ko>이벤트가 발생한 inputType 인스턴스. 애니메이션에 의해 값이 변경될 경우에는 'null'을 반환한다.</ko>
+       * @property {Object} inputEvent The event object received from inputType <ko>inputType으로 부터 받은 이벤트 객체</ko>
+       * @property {setTo} setTo Specifies the animation coordinates to move after the event <ko>이벤트 이후 이동할 애니메이션 좌표를 지정한다</ko>
+       * @property {Boolean} isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call <ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
+       *
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "zoom": {
+       *      range: [50, 30]
+       *   }
+       * }).on("release", function(event) {
+       *   // event.depaPos
+       *   // event.destPos
+       *   // event.delta
+       *   // event.input
+       *   // event.inputEvent
+       *   // event.setTo
+       *   // event.isTrusted
+       *
+       *   // if you want to change the animation coordinates to move after the 'animationStart' event.
+       *   event.setTo({x: 10}, 2000);
+       * });
+       * ```
        */
 
 
@@ -3083,26 +3028,26 @@ version: 4.10.3
 
         return !event.isCanceled();
       };
-      /**
-       * This event is fired when animation ends.
-       * @ko 에니메이션이 끝났을 때 발생한다.
-       * @event Axes#animationEnd
-       * @type {object}
-       * @property {Boolean} isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call <ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
-       *
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "zoom": {
-       *      range: [50, 30]
-       *   }
-       * }).on("animationEnd", function(event) {
-       *   // event.isTrusted
-       * });
-       * ```
+      /**
+       * This event is fired when animation ends.
+       * @ko 에니메이션이 끝났을 때 발생한다.
+       * @event Axes#animationEnd
+       * @type {object}
+       * @property {Boolean} isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call <ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
+       *
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "zoom": {
+       *      range: [50, 30]
+       *   }
+       * }).on("animationEnd", function(event) {
+       *   // event.isTrusted
+       * });
+       * ```
        */
 
 
@@ -3115,26 +3060,26 @@ version: 4.10.3
           isTrusted: isTrusted
         }));
       };
-      /**
-       * This event is fired when all actions have been completed.
-       * @ko 에니메이션이 끝났을 때 발생한다.
-       * @event Axes#finish
-       * @type {object}
-       * @property {Boolean} isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call <ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
-       *
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "zoom": {
-       *      range: [50, 30]
-       *   }
-       * }).on("finish", function(event) {
-       *   // event.isTrusted
-       * });
-       * ```
+      /**
+       * This event is fired when all actions have been completed.
+       * @ko 에니메이션이 끝났을 때 발생한다.
+       * @event Axes#finish
+       * @type {object}
+       * @property {Boolean} isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call <ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
+       *
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "zoom": {
+       *      range: [50, 30]
+       *   }
+       * }).on("finish", function(event) {
+       *   // event.isTrusted
+       * });
+       * ```
        */
 
 
@@ -3234,9 +3179,9 @@ version: 4.10.3
       return InterruptManager;
     }();
 
-    /*
-     * Copyright (c) 2015 NAVER Corp.
-     * egjs projects are licensed under the MIT license
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
      */
     var getInsidePosition = function (destPos, range, circular, bounce) {
       var toDestPos = destPos;
@@ -3390,9 +3335,9 @@ version: 4.10.3
 
         this._complementOptions();
       };
-      /**
-       * set up 'css' expression
-       * @private
+      /**
+       * set up 'css' expression
+       * @private
        */
 
 
@@ -3424,6 +3369,13 @@ version: 4.10.3
     var SUPPORT_POINTER = ("PointerEvent" in win);
     var SUPPORT_MSPOINTER = ("MSPointerEvent" in win);
     var SUPPORT_POINTER_EVENTS = SUPPORT_POINTER || SUPPORT_MSPOINTER;
+    var isValidKey = function (event, inputKey) {
+      if (!inputKey || inputKey.indexOf(ANY) > -1 || inputKey.indexOf(NONE) > -1 && !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey || inputKey.indexOf(SHIFT) > -1 && event.shiftKey || inputKey.indexOf(CTRL) > -1 && event.ctrlKey || inputKey.indexOf(ALT) > -1 && event.altKey || inputKey.indexOf(META) > -1 && event.metaKey) {
+        return true;
+      }
+
+      return false;
+    };
 
     var EventInput =
     /*#__PURE__*/
@@ -3506,13 +3458,17 @@ version: 4.10.3
       };
 
       __proto._isTouchEvent = function (event) {
-        return event.type.indexOf("touch") > -1;
+        return event.type && event.type.indexOf("touch") > -1;
       };
 
       __proto._isValidButton = function (button, inputButton) {
         return inputButton.indexOf(button) > -1;
       };
 
+      __proto._isValidEvent = function (event, inputKey, inputButton) {
+        return (!inputKey || isValidKey(event, inputKey)) && (!inputButton || this._isValidButton(this._getButton(event), inputButton));
+      };
+
       __proto._preventMouseButton = function (event, button) {
         if (button === MOUSE_RIGHT) {
           win.addEventListener("contextmenu", this._stopContextMenu);
@@ -3540,10 +3496,10 @@ version: 4.10.3
 
       var __proto = MouseEventInput.prototype;
 
-      __proto.onEventStart = function (event, inputButton) {
+      __proto.onEventStart = function (event, inputKey, inputButton) {
         var button = this._getButton(event);
 
-        if (inputButton && !this._isValidButton(button, inputButton)) {
+        if (!this._isValidEvent(event, inputKey, inputButton)) {
           return null;
         }
 
@@ -3552,8 +3508,8 @@ version: 4.10.3
         return this.extendEvent(event);
       };
 
-      __proto.onEventMove = function (event, inputButton) {
-        if (inputButton && !this._isValidButton(this._getButton(event), inputButton)) {
+      __proto.onEventMove = function (event, inputKey, inputButton) {
+        if (!this._isValidEvent(event, inputKey, inputButton)) {
           return null;
         }
 
@@ -3620,12 +3576,21 @@ version: 4.10.3
 
       var __proto = TouchEventInput.prototype;
 
-      __proto.onEventStart = function (event) {
+      __proto.onEventStart = function (event, inputKey) {
         this._baseTouches = event.touches;
+
+        if (!this._isValidEvent(event, inputKey)) {
+          return null;
+        }
+
         return this.extendEvent(event);
       };
 
-      __proto.onEventMove = function (event) {
+      __proto.onEventMove = function (event, inputKey) {
+        if (!this._isValidEvent(event, inputKey)) {
+          return null;
+        }
+
         return this.extendEvent(event);
       };
 
@@ -3697,10 +3662,10 @@ version: 4.10.3
 
       var __proto = PointerEventInput.prototype;
 
-      __proto.onEventStart = function (event, inputButton) {
+      __proto.onEventStart = function (event, inputKey, inputButton) {
         var button = this._getButton(event);
 
-        if (inputButton && !this._isValidButton(button, inputButton)) {
+        if (!this._isValidEvent(event, inputKey, inputButton)) {
           return null;
         }
 
@@ -3711,8 +3676,8 @@ version: 4.10.3
         return this.extendEvent(event);
       };
 
-      __proto.onEventMove = function (event, inputButton) {
-        if (inputButton && !this._isValidButton(this._getButton(event), inputButton)) {
+      __proto.onEventMove = function (event, inputKey, inputButton) {
+        if (!this._isValidEvent(event, inputKey, inputButton)) {
           return null;
         }
 
@@ -3814,14 +3779,14 @@ version: 4.10.3
 
       var __proto = TouchMouseEventInput.prototype;
 
-      __proto.onEventStart = function (event, inputButton) {
+      __proto.onEventStart = function (event, inputKey, inputButton) {
         var button = this._getButton(event);
 
         if (this._isTouchEvent(event)) {
           this._baseTouches = event.touches;
         }
 
-        if (inputButton && !this._isValidButton(button, inputButton)) {
+        if (!this._isValidEvent(event, inputKey, inputButton)) {
           return null;
         }
 
@@ -3830,8 +3795,8 @@ version: 4.10.3
         return this.extendEvent(event);
       };
 
-      __proto.onEventMove = function (event, inputButton) {
-        if (inputButton && !this._isValidButton(this._getButton(event), inputButton)) {
+      __proto.onEventMove = function (event, inputKey, inputButton) {
+        if (!this._isValidEvent(event, inputKey, inputButton)) {
           return null;
         }
 
@@ -4011,7 +3976,7 @@ version: 4.10.3
         this._moveDistance = this._axisManager.get(input.axes);
       };
 
-      __proto.change = function (input, event, offset, useAnimation) {
+      __proto.change = function (input, event, offset, useAnimation, velocity) {
         if (this._isStopped || !this._interruptManager.isInterrupting() || this._axisManager.every(offset, function (v) {
           return v === 0;
         })) {
@@ -4024,8 +3989,7 @@ version: 4.10.3
           return;
         }
 
-        var depaPos = this._moveDistance || this._axisManager.get(input.axes);
-
+        var depaPos = !this._moveDistance || velocity ? this._axisManager.get(input.axes) : this._moveDistance;
         var destPos; // for outside logic
 
         destPos = map(depaPos, function (v, k) {
@@ -4060,9 +4024,7 @@ version: 4.10.3
         };
 
         if (useAnimation) {
-          var duration = this._animationManager.getDuration(destPos, depaPos);
-
-          this._animationManager.animateTo(destPos, duration, changeOption);
+          this._animationManager.changeTo(destPos, changeOption);
         } else {
           var isCanceled = !this._eventManager.triggerChange(destPos, depaPos, changeOption, true);
 
@@ -4071,6 +4033,15 @@ version: 4.10.3
             this._moveDistance = null;
 
             this._animationManager.finish(false);
+          } else if (velocity) {
+            var displacement = this._animationManager.getDisplacement(velocity);
+
+            var nextOffset_1 = toAxis(input.axes, displacement);
+            destPos = this._atOutside(map(destPos, function (v, k) {
+              return v + (nextOffset_1[k] || 0);
+            }));
+
+            this._animationManager.changeTo(destPos, changeOption);
           }
         }
       };
@@ -4118,6 +4089,7 @@ version: 4.10.3
           destPos: destPos,
           duration: duration,
           delta: this._axisManager.getDelta(depaPos, destPos),
+          triggerAnimationEvent: true,
           inputEvent: event,
           input: input,
           isTrusted: true
@@ -4256,14 +4228,11 @@ version: 4.10.3
             this.eventManager.triggerChange(pos, orgPos_1, option, !!option);
           }
 
-          this._animateParam = null;
-
-          if (this._raf) {
-            cancelAnimationFrame(this._raf);
+          if (this._animateParam.triggerAnimationEvent) {
+            this.eventManager.triggerAnimationEnd(!!(option === null || option === void 0 ? void 0 : option.event));
           }
 
-          this._raf = null;
-          this.eventManager.triggerAnimationEnd(!!(option === null || option === void 0 ? void 0 : option.event));
+          this._removeAnimationParam();
         }
       };
 
@@ -4324,6 +4293,30 @@ version: 4.10.3
         return userWish;
       };
 
+      __proto.changeTo = function (destPos, option) {
+        var _this = this;
+
+        var depaPos = this.axisManager.get(option.input.axes);
+
+        if (this._raf) {
+          cancelAnimationFrame(this._raf);
+        }
+
+        if (!equal(destPos, depaPos)) {
+          var newParam = {
+            depaPos: depaPos,
+            destPos: destPos,
+            duration: this.getDuration(destPos, depaPos),
+            delta: this.axisManager.getDelta(depaPos, destPos),
+            triggerAnimationEvent: false
+          };
+
+          this._animateLoop(newParam, function () {
+            return _this._removeAnimationParam();
+          });
+        }
+      };
+
       __proto.animateTo = function (destPos, duration, option) {
         var _this = this;
 
@@ -4351,6 +4344,7 @@ version: 4.10.3
             destPos: userWish.destPos,
             duration: userWish.duration,
             delta: this.axisManager.getDelta(depaPos, userWish.destPos),
+            triggerAnimationEvent: true,
             isTrusted: !!inputEvent,
             inputEvent: inputEvent,
             input: (option === null || option === void 0 ? void 0 : option.input) || null
@@ -4426,6 +4420,7 @@ version: 4.10.3
           destPos: destPos,
           duration: clamp(duration, this._options.minimumDuration, this._options.maximumDuration),
           delta: this.axisManager.getDelta(depaPos, destPos),
+          triggerAnimationEvent: true,
           inputEvent: inputEvent,
           input: (option === null || option === void 0 ? void 0 : option.input) || null,
           isTrusted: !!inputEvent,
@@ -4433,6 +4428,16 @@ version: 4.10.3
         };
       };
 
+      __proto._removeAnimationParam = function () {
+        this._animateParam = null;
+
+        if (this._raf) {
+          cancelAnimationFrame(this._raf);
+        }
+
+        this._raf = null;
+      };
+
       __proto._animateLoop = function (param, complete) {
         var _this = this;
 
@@ -4477,15 +4482,15 @@ version: 4.10.3
           complete();
         }
       };
-      /**
-       * Get estimated final value.
-       *
-       * If destPos is within the 'error range' of the original intended position, the initial intended position is returned.
-       *   - eg. original intended pos: 100, destPos: 100.0000000004 ==> return 100;
-       * If dest Pos is outside the 'range of error' compared to the originally intended pos, it is returned rounded based on the originally intended pos.
-       *   - eg. original intended pos: 100.123 destPos: 50.12345 => return 50.123
-       * @param originalIntendedPos
-       * @param destPos
+      /**
+       * Get estimated final value.
+       *
+       * If destPos is within the 'error range' of the original intended position, the initial intended position is returned.
+       *   - eg. original intended pos: 100, destPos: 100.0000000004 ==> return 100;
+       * If dest Pos is outside the 'range of error' compared to the originally intended pos, it is returned rounded based on the originally intended pos.
+       *   - eg. original intended pos: 100.123 destPos: 50.12345 => return 50.123
+       * @param originalIntendedPos
+       * @param destPos
        */
 
 
@@ -4642,116 +4647,116 @@ version: 4.10.3
       return EasingManager;
     }(AnimationManager);
 
-    /**
-     * @typedef {Object} AxisOption The Axis information. The key of the axis specifies the name to use as the logical virtual coordinate system.
-     * @ko 축 정보. 축의 키는 논리적인 가상 좌표계로 사용할 이름을 지정한다.
-     * @param {Number[]} [range] The range of coordinate <ko>좌표 범위</ko>
-     * @param {Number} [range[0]=0] The coordinate of the minimum <ko>최소 좌표</ko>
-     * @param {Number} [range[1]=0] The coordinate of the maximum <ko>최대 좌표</ko>
-     * @param {Number} [startPos=range[0]] The coordinates to be moved when creating an instance <ko>인스턴스 생성시 이동할 좌표</ko>
-     * @param {Number[]} [bounce] The size of bouncing area. The coordinates can exceed the coordinate area as much as the bouncing area based on user action. If the coordinates does not exceed the bouncing area when an element is dragged, the coordinates where bouncing effects are applied are retuned back into the coordinate area<ko>바운스 영역의 크기. 사용자의 동작에 따라 좌표가 좌표 영역을 넘어 바운스 영역의 크기만큼 더 이동할 수 있다. 사용자가 끌어다 놓는 동작을 했을 때 좌표가 바운스 영역에 있으면, 바운스 효과가 적용된 좌표가 다시 좌표 영역 안으로 들어온다</ko>
-     * @param {Number} [bounce[0]=0] The size of coordinate of the minimum area <ko>최소 좌표 바운스 영역의 크기</ko>
-     * @param {Number} [bounce[1]=0] The size of coordinate of the maximum area <ko>최대 좌표 바운스 영역의 크기</ko>
-     * @param {Boolean[]} [circular] Indicates whether a circular element is available. If it is set to "true" and an element is dragged outside the coordinate area, the element will appear on the other side.<ko>순환 여부. 'true'로 설정한 방향의 좌표 영역 밖으로 엘리먼트가 이동하면 반대 방향에서 엘리먼트가 나타난다</ko>
-     * @param {Boolean} [circular[0]=false] Indicates whether to circulate to the coordinate of the minimum <ko>최소 좌표 방향의 순환 여부</ko>
-     * @param {Boolean} [circular[1]=false] Indicates whether to circulate to the coordinate of the maximum <ko>최대 좌표 방향의 순환 여부</ko>
+    /**
+     * @typedef {Object} AxisOption The Axis information. The key of the axis specifies the name to use as the logical virtual coordinate system.
+     * @ko 축 정보. 축의 키는 논리적인 가상 좌표계로 사용할 이름을 지정한다.
+     * @param {Number[]} [range] The range of coordinate <ko>좌표 범위</ko>
+     * @param {Number} [range[0]=0] The coordinate of the minimum <ko>최소 좌표</ko>
+     * @param {Number} [range[1]=0] The coordinate of the maximum <ko>최대 좌표</ko>
+     * @param {Number} [startPos=range[0]] The coordinates to be moved when creating an instance <ko>인스턴스 생성시 이동할 좌표</ko>
+     * @param {Number[]} [bounce] The size of bouncing area. The coordinates can exceed the coordinate area as much as the bouncing area based on user action. If the coordinates does not exceed the bouncing area when an element is dragged, the coordinates where bouncing effects are applied are retuned back into the coordinate area<ko>바운스 영역의 크기. 사용자의 동작에 따라 좌표가 좌표 영역을 넘어 바운스 영역의 크기만큼 더 이동할 수 있다. 사용자가 끌어다 놓는 동작을 했을 때 좌표가 바운스 영역에 있으면, 바운스 효과가 적용된 좌표가 다시 좌표 영역 안으로 들어온다</ko>
+     * @param {Number} [bounce[0]=0] The size of coordinate of the minimum area <ko>최소 좌표 바운스 영역의 크기</ko>
+     * @param {Number} [bounce[1]=0] The size of coordinate of the maximum area <ko>최대 좌표 바운스 영역의 크기</ko>
+     * @param {Boolean[]} [circular] Indicates whether a circular element is available. If it is set to "true" and an element is dragged outside the coordinate area, the element will appear on the other side.<ko>순환 여부. 'true'로 설정한 방향의 좌표 영역 밖으로 엘리먼트가 이동하면 반대 방향에서 엘리먼트가 나타난다</ko>
+     * @param {Boolean} [circular[0]=false] Indicates whether to circulate to the coordinate of the minimum <ko>최소 좌표 방향의 순환 여부</ko>
+     * @param {Boolean} [circular[1]=false] Indicates whether to circulate to the coordinate of the maximum <ko>최대 좌표 방향의 순환 여부</ko>
      **/
 
-    /**
-     * @typedef {Object} AxesOption The option object of the eg.Axes module
-     * @ko eg.Axes 모듈의 옵션 객체
-     * @param {Function} [easing=easing.easeOutCubic] The easing function to apply to an animation <ko>애니메이션에 적용할 easing 함수</ko>
-     * @param {Number} [maximumDuration=Infinity] Maximum duration of the animation <ko>가속도에 의해 애니메이션이 동작할 때의 최대 좌표 이동 시간</ko>
-     * @param {Number} [minimumDuration=0] Minimum duration of the animation <ko>가속도에 의해 애니메이션이 동작할 때의 최소 좌표 이동 시간</ko>
-     * @param {Number} [deceleration=0.0006] Deceleration of the animation where acceleration is manually enabled by user. A higher value indicates shorter running time. <ko>사용자의 동작으로 가속도가 적용된 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아진다</ko>
-     * @param {Boolean} [interruptable=true] Indicates whether an animation is interruptible.
-     * - true: It can be paused or stopped by user action or the API.
-     * - false: It cannot be paused or stopped by user action or the API while it is running.
-     * <ko>진행 중인 애니메이션 중지 가능 여부.
-     * - true: 사용자의 동작이나 API로 애니메이션을 중지할 수 있다.
-     * - false: 애니메이션이 진행 중일 때는 사용자의 동작이나 API가 적용되지 않는다</ko>
-     * @param {Number} [round=null] Rounding unit. For example, 0.1 rounds to 0.1 decimal point(6.1234 => 6.1), 5 rounds to 5 (93 => 95)
-     * [Details](https://github.com/naver/egjs-axes/wiki/round-option)<ko>반올림 단위. 예를 들어 0.1 은 소숫점 0.1 까지 반올림(6.1234 => 6.1), 5 는 5 단위로 반올림(93 => 95).
-     * [상세내용](https://github.com/naver/egjs-axes/wiki/round-option)</ko>
-     * @param {Boolean} [nested=false] Whether the event propagates to other instances when the coordinates reach the end of the movable area <ko>좌표가 이동 가능한 영역의 끝까지 도달했을 때 다른 인스턴스들로의 이벤트 전파 여부</ko>
+    /**
+     * @typedef {Object} AxesOption The option object of the eg.Axes module
+     * @ko eg.Axes 모듈의 옵션 객체
+     * @param {Function} [easing=easing.easeOutCubic] The easing function to apply to an animation <ko>애니메이션에 적용할 easing 함수</ko>
+     * @param {Number} [maximumDuration=Infinity] Maximum duration of the animation <ko>가속도에 의해 애니메이션이 동작할 때의 최대 좌표 이동 시간</ko>
+     * @param {Number} [minimumDuration=0] Minimum duration of the animation <ko>가속도에 의해 애니메이션이 동작할 때의 최소 좌표 이동 시간</ko>
+     * @param {Number} [deceleration=0.0006] Deceleration of the animation where acceleration is manually enabled by user. A higher value indicates shorter running time. <ko>사용자의 동작으로 가속도가 적용된 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아진다</ko>
+     * @param {Boolean} [interruptable=true] Indicates whether an animation is interruptible.
+     * - true: It can be paused or stopped by user action or the API.
+     * - false: It cannot be paused or stopped by user action or the API while it is running.
+     * <ko>진행 중인 애니메이션 중지 가능 여부.
+     * - true: 사용자의 동작이나 API로 애니메이션을 중지할 수 있다.
+     * - false: 애니메이션이 진행 중일 때는 사용자의 동작이나 API가 적용되지 않는다</ko>
+     * @param {Number} [round=null] Rounding unit. For example, 0.1 rounds to 0.1 decimal point(6.1234 => 6.1), 5 rounds to 5 (93 => 95)
+     * [Details](https://github.com/naver/egjs-axes/wiki/round-option)<ko>반올림 단위. 예를 들어 0.1 은 소숫점 0.1 까지 반올림(6.1234 => 6.1), 5 는 5 단위로 반올림(93 => 95).
+     * [상세내용](https://github.com/naver/egjs-axes/wiki/round-option)</ko>
+     * @param {Boolean} [nested=false] Whether the event propagates to other instances when the coordinates reach the end of the movable area <ko>좌표가 이동 가능한 영역의 끝까지 도달했을 때 다른 인스턴스들로의 이벤트 전파 여부</ko>
      **/
 
-    /**
-     * A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.
-     * @ko 터치 입력 장치나 마우스와 같은 다양한 입력 장치를 통해 전달 받은 사용자의 동작을 논리적인 가상 좌표로 변경하는 모듈이다. 사용자 동작에 반응하는 UI를 손쉽게 만들수 있다.
-     * @extends eg.Component
-     *
-     * @param {Object.<string, AxisOption>} axis Axis information managed by eg.Axes. The key of the axis specifies the name to use as the logical virtual coordinate system.  <ko>eg.Axes가 관리하는 축 정보. 축의 키는 논리적인 가상 좌표계로 사용할 이름을 지정한다.</ko>
-     * @param {AxesOption} [options={}] The option object of the eg.Axes module<ko>eg.Axes 모듈의 옵션 객체</ko>
-     * @param {Object.<string, number>} [startPos={}] The coordinates to be moved when creating an instance. It is applied with higher priority than startPos of axisOption.<ko>인스턴스 생성시 이동할 좌표, axisOption의 startPos보다 높은 우선순위로 적용된다.</ko>
-     *
-     * @support {"ie": "10+", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.3+ (except 3.x)"}
-     * @example
-     * ```js
-     * // 1. Initialize eg.Axes
-     * const axes = new eg.Axes({
-     *  something1: {
-     *    range: [0, 150],
-     *    bounce: 50
-     *  },
-     *  something2: {
-     *    range: [0, 200],
-     *    bounce: 100
-     *  },
-     *  somethingN: {
-     *    range: [1, 10],
-     *  }
-     * }, {
-     *  deceleration : 0.0024
-     * });
-     *
-     * // 2. attach event handler
-     * axes.on({
-     *  "hold" : function(evt) {
-     *  },
-     *  "release" : function(evt) {
-     *  },
-     *  "animationStart" : function(evt) {
-     *  },
-     *  "animationEnd" : function(evt) {
-     *  },
-     *  "change" : function(evt) {
-     *  }
-     * });
-     *
-     * // 3. Initialize inputTypes
-     * const panInputArea = new eg.Axes.PanInput("#area", {
-     *  scale: [0.5, 1]
-     * });
-     * const panInputHmove = new eg.Axes.PanInput("#hmove");
-     * const panInputVmove = new eg.Axes.PanInput("#vmove");
-     * const pinchInputArea = new eg.Axes.PinchInput("#area", {
-     *  scale: 1.5
-     * });
-     *
-     * // 4. Connect eg.Axes and InputTypes
-     * // [PanInput] When the mouse or touchscreen is down and moved.
-     * // Connect the 'something2' axis to the mouse or touchscreen x position and
-     * // connect the 'somethingN' axis to the mouse or touchscreen y position.
-     * axes.connect(["something2", "somethingN"], panInputArea); // or axes.connect("something2 somethingN", panInputArea);
-     *
-     * // Connect only one 'something1' axis to the mouse or touchscreen x position.
-     * axes.connect(["something1"], panInputHmove); // or axes.connect("something1", panInputHmove);
-     *
-     * // Connect only one 'something2' axis to the mouse or touchscreen y position.
-     * axes.connect(["", "something2"], panInputVmove); // or axes.connect(" something2", panInputVmove);
-     *
-     * // [PinchInput] Connect 'something2' axis when two pointers are moving toward (zoom-in) or away from each other (zoom-out).
-     * axes.connect("something2", pinchInputArea);
-     * ```
+    /**
+     * A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.
+     * @ko 터치 입력 장치나 마우스와 같은 다양한 입력 장치를 통해 전달 받은 사용자의 동작을 논리적인 가상 좌표로 변경하는 모듈이다. 사용자 동작에 반응하는 UI를 손쉽게 만들수 있다.
+     * @extends eg.Component
+     *
+     * @param {Object.<string, AxisOption>} axis Axis information managed by eg.Axes. The key of the axis specifies the name to use as the logical virtual coordinate system.  <ko>eg.Axes가 관리하는 축 정보. 축의 키는 논리적인 가상 좌표계로 사용할 이름을 지정한다.</ko>
+     * @param {AxesOption} [options={}] The option object of the eg.Axes module<ko>eg.Axes 모듈의 옵션 객체</ko>
+     * @param {Object.<string, number>} [startPos={}] The coordinates to be moved when creating an instance. It is applied with higher priority than startPos of axisOption.<ko>인스턴스 생성시 이동할 좌표, axisOption의 startPos보다 높은 우선순위로 적용된다.</ko>
+     *
+     * @support {"ie": "10+", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.3+ (except 3.x)"}
+     * @example
+     * ```js
+     * // 1. Initialize eg.Axes
+     * const axes = new eg.Axes({
+     *  something1: {
+     *    range: [0, 150],
+     *    bounce: 50
+     *  },
+     *  something2: {
+     *    range: [0, 200],
+     *    bounce: 100
+     *  },
+     *  somethingN: {
+     *    range: [1, 10],
+     *  }
+     * }, {
+     *  deceleration : 0.0024
+     * });
+     *
+     * // 2. attach event handler
+     * axes.on({
+     *  "hold" : function(evt) {
+     *  },
+     *  "release" : function(evt) {
+     *  },
+     *  "animationStart" : function(evt) {
+     *  },
+     *  "animationEnd" : function(evt) {
+     *  },
+     *  "change" : function(evt) {
+     *  }
+     * });
+     *
+     * // 3. Initialize inputTypes
+     * const panInputArea = new eg.Axes.PanInput("#area", {
+     *  scale: [0.5, 1]
+     * });
+     * const panInputHmove = new eg.Axes.PanInput("#hmove");
+     * const panInputVmove = new eg.Axes.PanInput("#vmove");
+     * const pinchInputArea = new eg.Axes.PinchInput("#area", {
+     *  scale: 1.5
+     * });
+     *
+     * // 4. Connect eg.Axes and InputTypes
+     * // [PanInput] When the mouse or touchscreen is down and moved.
+     * // Connect the 'something2' axis to the mouse or touchscreen x position and
+     * // connect the 'somethingN' axis to the mouse or touchscreen y position.
+     * axes.connect(["something2", "somethingN"], panInputArea); // or axes.connect("something2 somethingN", panInputArea);
+     *
+     * // Connect only one 'something1' axis to the mouse or touchscreen x position.
+     * axes.connect(["something1"], panInputHmove); // or axes.connect("something1", panInputHmove);
+     *
+     * // Connect only one 'something2' axis to the mouse or touchscreen y position.
+     * axes.connect(["", "something2"], panInputVmove); // or axes.connect(" something2", panInputVmove);
+     *
+     * // [PinchInput] Connect 'something2' axis when two pointers are moving toward (zoom-in) or away from each other (zoom-out).
+     * axes.connect("something2", pinchInputArea);
+     * ```
      */
 
     var Axes =
     /*#__PURE__*/
     function (_super) {
       __extends$1(Axes, _super);
-      /**
-       *
+      /**
+       *
        */
 
 
@@ -4798,30 +4803,30 @@ version: 4.10.3
 
         return _this;
       }
-      /**
-       * Connect the axis of eg.Axes to the inputType.
-       * @ko eg.Axes의 축과 inputType을 연결한다
-       * @param {(String[]|String)} axes The name of the axis to associate with inputType <ko>inputType과 연결할 축의 이름</ko>
-       * @param {Object} inputType The inputType instance to associate with the axis of eg.Axes <ko>eg.Axes의 축과 연결할 inputType 인스턴스</ko>
-       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "xOther": {
-       *      range: [-100, 100]
-       *   }
-       * });
-       *
-       * axes.connect("x", new eg.Axes.PanInput("#area1"))
-       *    .connect("x xOther", new eg.Axes.PanInput("#area2"))
-       *    .connect(" xOther", new eg.Axes.PanInput("#area3"))
-       *    .connect(["x"], new eg.Axes.PanInput("#area4"))
-       *    .connect(["xOther", "x"], new eg.Axes.PanInput("#area5"))
-       *    .connect(["", "xOther"], new eg.Axes.PanInput("#area6"));
-       * ```
+      /**
+       * Connect the axis of eg.Axes to the inputType.
+       * @ko eg.Axes의 축과 inputType을 연결한다
+       * @param {(String[]|String)} axes The name of the axis to associate with inputType <ko>inputType과 연결할 축의 이름</ko>
+       * @param {Object} inputType The inputType instance to associate with the axis of eg.Axes <ko>eg.Axes의 축과 연결할 inputType 인스턴스</ko>
+       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "xOther": {
+       *      range: [-100, 100]
+       *   }
+       * });
+       *
+       * axes.connect("x", new eg.Axes.PanInput("#area1"))
+       *    .connect("x xOther", new eg.Axes.PanInput("#area2"))
+       *    .connect(" xOther", new eg.Axes.PanInput("#area3"))
+       *    .connect(["x"], new eg.Axes.PanInput("#area4"))
+       *    .connect(["xOther", "x"], new eg.Axes.PanInput("#area5"))
+       *    .connect(["", "xOther"], new eg.Axes.PanInput("#area6"));
+       * ```
        */
 
 
@@ -4848,33 +4853,33 @@ version: 4.10.3
 
         return this;
       };
-      /**
-       * Disconnect the axis of eg.Axes from the inputType.
-       * @ko eg.Axes의 축과 inputType의 연결을 끊는다.
-       * @param {Object} [inputType] An inputType instance associated with the axis of eg.Axes <ko>eg.Axes의 축과 연결한 inputType 인스턴스</ko>
-       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "xOther": {
-       *      range: [-100, 100]
-       *   }
-       * });
-       *
-       * const input1 = new eg.Axes.PanInput("#area1");
-       * const input2 = new eg.Axes.PanInput("#area2");
-       * const input3 = new eg.Axes.PanInput("#area3");
-       *
-       * axes.connect("x", input1);
-       *    .connect("x xOther", input2)
-       *    .connect(["xOther", "x"], input3);
-       *
-       * axes.disconnect(input1); // disconnects input1
-       * axes.disconnect(); // disconnects all of them
-       * ```
+      /**
+       * Disconnect the axis of eg.Axes from the inputType.
+       * @ko eg.Axes의 축과 inputType의 연결을 끊는다.
+       * @param {Object} [inputType] An inputType instance associated with the axis of eg.Axes <ko>eg.Axes의 축과 연결한 inputType 인스턴스</ko>
+       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "xOther": {
+       *      range: [-100, 100]
+       *   }
+       * });
+       *
+       * const input1 = new eg.Axes.PanInput("#area1");
+       * const input2 = new eg.Axes.PanInput("#area2");
+       * const input3 = new eg.Axes.PanInput("#area3");
+       *
+       * axes.connect("x", input1);
+       *    .connect("x xOther", input2)
+       *    .connect(["xOther", "x"], input3);
+       *
+       * axes.disconnect(input1); // disconnects input1
+       * axes.disconnect(); // disconnects all of them
+       * ```
        */
 
 
@@ -4897,62 +4902,62 @@ version: 4.10.3
 
         return this;
       };
-      /**
-       * Returns the current position of the coordinates.
-       * @ko 좌표의 현재 위치를 반환한다
-       * @param {Object} [axes] The names of the axis <ko>축 이름들</ko>
-       * @return {Object.<string, number>} Axis coordinate information <ko>축 좌표 정보</ko>
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "xOther": {
-       *      range: [-100, 100]
-       *   },
-       *    "zoom": {
-       *      range: [50, 30]
-       *   }
-       * });
-       *
-       * axes.get(); // {"x": 0, "xOther": -100, "zoom": 50}
-       * axes.get(["x", "zoom"]); // {"x": 0, "zoom": 50}
-       * ```
+      /**
+       * Returns the current position of the coordinates.
+       * @ko 좌표의 현재 위치를 반환한다
+       * @param {Object} [axes] The names of the axis <ko>축 이름들</ko>
+       * @return {Object.<string, number>} Axis coordinate information <ko>축 좌표 정보</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "xOther": {
+       *      range: [-100, 100]
+       *   },
+       *    "zoom": {
+       *      range: [50, 30]
+       *   }
+       * });
+       *
+       * axes.get(); // {"x": 0, "xOther": -100, "zoom": 50}
+       * axes.get(["x", "zoom"]); // {"x": 0, "zoom": 50}
+       * ```
        */
 
 
       __proto.get = function (axes) {
         return this.axisManager.get(axes);
       };
-      /**
-       * Moves an axis to specific coordinates.
-       * @ko 좌표를 이동한다.
-       * @param {Object.<string, number>} pos The coordinate to move to <ko>이동할 좌표</ko>
-       * @param {Number} [duration=0] Duration of the animation (unit: ms) <ko>애니메이션 진행 시간(단위: ms)</ko>
-       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "xOther": {
-       *      range: [-100, 100]
-       *   },
-       *    "zoom": {
-       *      range: [50, 30]
-       *   }
-       * });
-       *
-       * axes.setTo({"x": 30, "zoom": 60});
-       * axes.get(); // {"x": 30, "xOther": -100, "zoom": 60}
-       *
-       * axes.setTo({"x": 100, "xOther": 60}, 1000); // animatation
-       *
-       * // after 1000 ms
-       * axes.get(); // {"x": 100, "xOther": 60, "zoom": 60}
-       * ```
+      /**
+       * Moves an axis to specific coordinates.
+       * @ko 좌표를 이동한다.
+       * @param {Object.<string, number>} pos The coordinate to move to <ko>이동할 좌표</ko>
+       * @param {Number} [duration=0] Duration of the animation (unit: ms) <ko>애니메이션 진행 시간(단위: ms)</ko>
+       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "xOther": {
+       *      range: [-100, 100]
+       *   },
+       *    "zoom": {
+       *      range: [50, 30]
+       *   }
+       * });
+       *
+       * axes.setTo({"x": 30, "zoom": 60});
+       * axes.get(); // {"x": 30, "xOther": -100, "zoom": 60}
+       *
+       * axes.setTo({"x": 100, "xOther": 60}, 1000); // animatation
+       *
+       * // after 1000 ms
+       * axes.get(); // {"x": 100, "xOther": 60, "zoom": 60}
+       * ```
        */
 
 
@@ -4964,34 +4969,34 @@ version: 4.10.3
         this.animationManager.setTo(pos, duration);
         return this;
       };
-      /**
-       * Moves an axis from the current coordinates to specific coordinates.
-       * @ko 현재 좌표를 기준으로 좌표를 이동한다.
-       * @param {Object.<string, number>} pos The coordinate to move to <ko>이동할 좌표</ko>
-       * @param {Number} [duration=0] Duration of the animation (unit: ms) <ko>애니메이션 진행 시간(단위: ms)</ko>
-       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "xOther": {
-       *      range: [-100, 100]
-       *   },
-       *    "zoom": {
-       *      range: [50, 30]
-       *   }
-       * });
-       *
-       * axes.setBy({"x": 30, "zoom": 10});
-       * axes.get(); // {"x": 30, "xOther": -100, "zoom": 60}
-       *
-       * axes.setBy({"x": 70, "xOther": 60}, 1000); // animatation
-       *
-       * // after 1000 ms
-       * axes.get(); // {"x": 100, "xOther": -40, "zoom": 60}
-       * ```
+      /**
+       * Moves an axis from the current coordinates to specific coordinates.
+       * @ko 현재 좌표를 기준으로 좌표를 이동한다.
+       * @param {Object.<string, number>} pos The coordinate to move to <ko>이동할 좌표</ko>
+       * @param {Number} [duration=0] Duration of the animation (unit: ms) <ko>애니메이션 진행 시간(단위: ms)</ko>
+       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "xOther": {
+       *      range: [-100, 100]
+       *   },
+       *    "zoom": {
+       *      range: [50, 30]
+       *   }
+       * });
+       *
+       * axes.setBy({"x": 30, "zoom": 10});
+       * axes.get(); // {"x": 30, "xOther": -100, "zoom": 60}
+       *
+       * axes.setBy({"x": 70, "xOther": 60}, 1000); // animatation
+       *
+       * // after 1000 ms
+       * axes.get(); // {"x": 100, "xOther": -40, "zoom": 60}
+       * ```
        */
 
 
@@ -5003,31 +5008,31 @@ version: 4.10.3
         this.animationManager.setBy(pos, duration);
         return this;
       };
-      /**
-       * Change the options of Axes instance.
-       * @ko 인스턴스의 옵션을 변경한다.
-       * @param {AxesOption} options Axes options to change <ko>변경할 옵션 목록</ko>
-       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       * }, {
-       *   round: 10,
-       * });
-       *
-       * axes.setTo({"x": 48});
-       * axes.get(); // {"x": 50}
-       *
-       * axes.setOptions({
-       *   round: 1,
-       * });
-       *
-       * axes.setTo({"x": 48});
-       * axes.get(); // {"x": 48}
-       * ```
+      /**
+       * Change the options of Axes instance.
+       * @ko 인스턴스의 옵션을 변경한다.
+       * @param {AxesOption} options Axes options to change <ko>변경할 옵션 목록</ko>
+       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       * }, {
+       *   round: 10,
+       * });
+       *
+       * axes.setTo({"x": 48});
+       * axes.get(); // {"x": 50}
+       *
+       * axes.setOptions({
+       *   round: 1,
+       * });
+       *
+       * axes.setTo({"x": 48});
+       * axes.get(); // {"x": 48}
+       * ```
        */
 
 
@@ -5035,31 +5040,31 @@ version: 4.10.3
         this.options = __assign$1(__assign$1({}, this.options), options);
         return this;
       };
-      /**
-       * Change the information of an existing axis.
-       * @ko 존재하는 축의 정보를 변경한다.
-       * @param {Object.<string, AxisOption>} axis Axis options to change <ko>변경할 축의 정보</ko>
-       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       * });
-       *
-       * axes.setTo({"x": 150});
-       * axes.get(); // {"x": 100}
-       *
-       * axes.setAxis({
-       *   "x": {
-       *      range: [0, 200]
-       *   },
-       * });
-       *
-       * axes.setTo({"x": 150});
-       * axes.get(); // {"x": 150}
-       * ```
+      /**
+       * Change the information of an existing axis.
+       * @ko 존재하는 축의 정보를 변경한다.
+       * @param {Object.<string, AxisOption>} axis Axis options to change <ko>변경할 축의 정보</ko>
+       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       * });
+       *
+       * axes.setTo({"x": 150});
+       * axes.get(); // {"x": 100}
+       *
+       * axes.setAxis({
+       *   "x": {
+       *      range: [0, 200]
+       *   },
+       * });
+       *
+       * axes.setTo({"x": 150});
+       * axes.get(); // {"x": 150}
+       * ```
        */
 
 
@@ -5067,23 +5072,23 @@ version: 4.10.3
         this.axisManager.setAxis(axis);
         return this;
       };
-      /**
-       * Stop an animation in progress.
-       * @ko 재생 중인 애니메이션을 정지한다.
-       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       * });
-       *
-       * axes.setTo({"x": 10}, 1000); // start animatation
-       *
-       * // after 500 ms
-       * axes.stopAnimation(); // stop animation during movement.
-       * ```
+      /**
+       * Stop an animation in progress.
+       * @ko 재생 중인 애니메이션을 정지한다.
+       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       * });
+       *
+       * axes.setTo({"x": 10}, 1000); // start animatation
+       *
+       * // after 500 ms
+       * axes.stopAnimation(); // stop animation during movement.
+       * ```
        */
 
 
@@ -5092,33 +5097,33 @@ version: 4.10.3
         this.animationManager.finish(false);
         return this;
       };
-      /**
-       * Change the destination of an animation in progress.
-       * @ko 재생 중인 애니메이션의 목적지와 진행 시간을 변경한다.
-       * @param {UpdateAnimationOption} pos The coordinate to move to <ko>이동할 좌표</ko>
-       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 200]
-       *   },
-       *   "y": {
-       *      range: [0, 200]
-       *   }
-       * });
-       *
-       * axes.setTo({"x": 50, "y": 50}, 1000); // trigger animation by setTo
-       *
-       * // after 500 ms
-       * axes.updateAnimation({destPos: {"x": 100, "y": 100}}); // animation will end after 500 ms, at {"x": 100, "y": 100}
-       *
-       * // after 500 ms
-       * axes.setTo({"x": 50, "y": 50}, 1000); // trigger animation by setTo
-       *
-       * // after 700 ms
-       * axes.updateAnimation({destPos: {"x": 100, "y": 100}, duration: 1500, restart: true}); // this works same as axes.setTo({"x": 100, "y": 100}, 800) since restart is true.
-       * ```
+      /**
+       * Change the destination of an animation in progress.
+       * @ko 재생 중인 애니메이션의 목적지와 진행 시간을 변경한다.
+       * @param {UpdateAnimationOption} pos The coordinate to move to <ko>이동할 좌표</ko>
+       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 200]
+       *   },
+       *   "y": {
+       *      range: [0, 200]
+       *   }
+       * });
+       *
+       * axes.setTo({"x": 50, "y": 50}, 1000); // trigger animation by setTo
+       *
+       * // after 500 ms
+       * axes.updateAnimation({destPos: {"x": 100, "y": 100}}); // animation will end after 500 ms, at {"x": 100, "y": 100}
+       *
+       * // after 500 ms
+       * axes.setTo({"x": 50, "y": 50}, 1000); // trigger animation by setTo
+       *
+       * // after 700 ms
+       * axes.updateAnimation({destPos: {"x": 100, "y": 100}, duration: 1500, restart: true}); // this works same as axes.setTo({"x": 100, "y": 100}, 800) since restart is true.
+       * ```
        */
 
 
@@ -5126,38 +5131,38 @@ version: 4.10.3
         this.animationManager.updateAnimation(options);
         return this;
       };
-      /**
-       * Returns whether there is a coordinate in the bounce area of ​​the target axis.
-       * @ko 대상 축 중 bounce영역에 좌표가 존재하는지를 반환한다
-       * @param {Object} [axes] The names of the axis <ko>축 이름들</ko>
-       * @return {Boolen} Whether the bounce area exists. <ko>bounce 영역 존재 여부</ko>
-       * @example
-       * ```js
-       * const axes = new eg.Axes({
-       *   "x": {
-       *      range: [0, 100]
-       *   },
-       *   "xOther": {
-       *      range: [-100, 100]
-       *   },
-       *    "zoom": {
-       *      range: [50, 30]
-       *   }
-       * });
-       *
-       * axes.isBounceArea(["x"]);
-       * axes.isBounceArea(["x", "zoom"]);
-       * axes.isBounceArea();
-       * ```
+      /**
+       * Returns whether there is a coordinate in the bounce area of ​​the target axis.
+       * @ko 대상 축 중 bounce영역에 좌표가 존재하는지를 반환한다
+       * @param {Object} [axes] The names of the axis <ko>축 이름들</ko>
+       * @return {Boolen} Whether the bounce area exists. <ko>bounce 영역 존재 여부</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       *   "xOther": {
+       *      range: [-100, 100]
+       *   },
+       *    "zoom": {
+       *      range: [50, 30]
+       *   }
+       * });
+       *
+       * axes.isBounceArea(["x"]);
+       * axes.isBounceArea(["x", "zoom"]);
+       * axes.isBounceArea();
+       * ```
        */
 
 
       __proto.isBounceArea = function (axes) {
         return this.axisManager.isOutside(axes);
       };
-      /**
-       * Destroys properties, and events used in a module and disconnect all connections to inputTypes.
-       * @ko 모듈에 사용한 속성, 이벤트를 해제한다. 모든 inputType과의 연결을 끊는다.
+      /**
+       * Destroys properties, and events used in a module and disconnect all connections to inputTypes.
+       * @ko 모듈에 사용한 속성, 이벤트를 해제한다. 모든 inputType과의 연결을 끊는다.
        */
 
 
@@ -5165,90 +5170,90 @@ version: 4.10.3
         this.disconnect();
         this.eventManager.destroy();
       };
-      /**
-       * @name VERSION
-       * @desc Version info string
-       * @ko 버전정보 문자열
-       *
-       * @constant
-       * @type {String}
-       * @example
-       * ```js
-       * eg.Axes.VERSION;  // ex) 3.3.3
-       * ```
+      /**
+       * @name VERSION
+       * @desc Version info string
+       * @ko 버전정보 문자열
+       *
+       * @constant
+       * @type {String}
+       * @example
+       * ```js
+       * eg.Axes.VERSION;  // ex) 3.3.3
+       * ```
        */
 
 
       Axes.VERSION = "3.8.1";
       /* eslint-enable */
 
-      /**
-       * @name TRANSFORM
-       * @desc Returns the transform attribute with CSS vendor prefixes.
-       * @ko CSS vendor prefixes를 붙인 transform 속성을 반환한다.
-       *
-       * @constant
-       * @type {String}
-       * @example
-       * ```js
-       * eg.Axes.TRANSFORM; // "transform" or "webkitTransform"
-       * ```
+      /**
+       * @name TRANSFORM
+       * @desc Returns the transform attribute with CSS vendor prefixes.
+       * @ko CSS vendor prefixes를 붙인 transform 속성을 반환한다.
+       *
+       * @constant
+       * @type {String}
+       * @example
+       * ```js
+       * eg.Axes.TRANSFORM; // "transform" or "webkitTransform"
+       * ```
        */
 
       Axes.TRANSFORM = TRANSFORM;
-      /**
-       * @name DIRECTION_NONE
-       * @constant
-       * @type {Number}
+      /**
+       * @name DIRECTION_NONE
+       * @constant
+       * @type {Number}
        */
 
       Axes.DIRECTION_NONE = DIRECTION_NONE;
-      /**
-       * @name DIRECTION_LEFT
-       * @constant
-       * @type {Number}
+      /**
+       * @name DIRECTION_LEFT
+       * @constant
+       * @type {Number}
        */
 
       Axes.DIRECTION_LEFT = DIRECTION_LEFT;
-      /**
-       * @name DIRECTION_RIGHT
-       * @constant
-       * @type {Number}
+      /**
+       * @name DIRECTION_RIGHT
+       * @constant
+       * @type {Number}
        */
 
       Axes.DIRECTION_RIGHT = DIRECTION_RIGHT;
-      /**
-       * @name DIRECTION_UP
-       * @constant
-       * @type {Number}
+      /**
+       * @name DIRECTION_UP
+       * @constant
+       * @type {Number}
        */
 
       Axes.DIRECTION_UP = DIRECTION_UP;
-      /**
-       * @name DIRECTION_DOWN
-       * @constant
-       * @type {Number}
+      /**
+       * @name DIRECTION_DOWN
+       * @constant
+       * @type {Number}
        */
 
       Axes.DIRECTION_DOWN = DIRECTION_DOWN;
-      /**
-       * @name DIRECTION_HORIZONTAL
-       * @constant
-       * @type {Number}
+      /**
+       * @name DIRECTION_HORIZONTAL
+       * @constant
+       * @type {Number}
        */
 
       Axes.DIRECTION_HORIZONTAL = DIRECTION_HORIZONTAL;
-      /**
-       * @name DIRECTION_VERTICAL
-       * @constant
-       * @type {Number}
+      /**
+       * @name DIRECTION_VERTICAL
+       * @constant
+       * @type {Number}
        */
 
       Axes.DIRECTION_VERTICAL = DIRECTION_VERTICAL;
-      /**
-       * @name DIRECTION_ALL
-       * @constant
-       * @type {Number}
+      /**
+       * @name DIRECTION_ALL
+       * @constant
+       * @type {Number}
        */
 
       Axes.DIRECTION_ALL = DIRECTION_ALL;
@@ -5256,9 +5261,9 @@ version: 4.10.3
       return Axes;
     }(Component);
 
-    /*
-     * Copyright (c) 2015 NAVER Corp.
-     * egjs projects are licensed under the MIT license
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
      */
 
     var getDirectionByAngle = function (angle, thresholdAngle) {
@@ -5269,63 +5274,77 @@ version: 4.10.3
       var toAngle = Math.abs(angle);
       return toAngle > thresholdAngle && toAngle < 180 - thresholdAngle ? DIRECTION_VERTICAL : DIRECTION_HORIZONTAL;
     };
-    /**
-     * @typedef {Object} PanInputOption The option object of the eg.Axes.PanInput module.
-     * @ko eg.Axes.PanInput 모듈의 옵션 객체
-     * @param {String[]} [inputType=["touch", "mouse", "pointer"]] Types of input devices
-     * - touch: Touch screen
-     * - mouse: Mouse
-     * - pointer: Mouse and touch <ko>입력 장치 종류
-     * - touch: 터치 입력 장치
-     * - mouse: 마우스
-     * - pointer: 마우스 및 터치</ko>
-     * @param {String[]} [inputButton=["left"]] List of buttons to allow input
-     * - left: Left mouse button and normal touch
-     * - middle: Mouse wheel press
-     * - right: Right mouse button <ko>입력을 허용할 버튼 목록
-     * - left: 마우스 왼쪽 버튼
-     * - middle: 마우스 휠 눌림
-     * - right: 마우스 오른쪽 버튼 </ko>
-     * @param {Number[]} [scale] Coordinate scale that a user can move<ko>사용자의 동작으로 이동하는 좌표의 배율</ko>
-     * @param {Number} [scale[0]=1] horizontal axis scale <ko>수평축 배율</ko>
-     * @param {Number} [scale[1]=1] vertical axis scale <ko>수직축 배율</ko>
-     * @param {Number} [thresholdAngle=45] The threshold value that determines whether user action is horizontal or vertical (0~90) <ko>사용자의 동작이 가로 방향인지 세로 방향인지 판단하는 기준 각도(0~90)</ko>
-     * @param {Number} [threshold=0] Minimal pan distance required before recognizing <ko>사용자의 Pan 동작을 인식하기 위해산 최소한의 거리</ko>
-     * @param {Boolean} [preventClickOnDrag=false] Whether to cancel the {@link https://developer.mozilla.org/en/docs/Web/API/Element/click_event click} event when the user finishes dragging more than 1 pixel <ko>사용자가 1픽셀 이상 드래그를 마쳤을 때 {@link https://developer.mozilla.org/ko/docs/Web/API/Element/click_event click} 이벤트 취소 여부</ko>
-     * @param {Number} [iOSEdgeSwipeThreshold=30] Area (px) that can go to the next page when swiping the right edge in iOS safari <ko>iOS Safari에서 오른쪽 엣지를 스와이프 하는 경우 다음 페이지로 넘어갈 수 있는 영역(px)</ko>
-     * @param {String} [touchAction=null] Value that overrides the element's "touch-action" css property. If set to null, it is automatically set to prevent scrolling in the direction of the connected axis. <ko>엘리먼트의 "touch-action" CSS 속성을 덮어쓰는 값. 만약 null로 설정된 경우, 연결된 축 방향으로의 스크롤을 방지하게끔 자동으로 설정된다.</ko>
+    /**
+     * @typedef {Object} PanInputOption The option object of the eg.Axes.PanInput module.
+     * @ko eg.Axes.PanInput 모듈의 옵션 객체
+     * @param {String[]} [inputType=["touch", "mouse", "pointer"]] Types of input devices
+     * - touch: Touch screen
+     * - mouse: Mouse
+     * - pointer: Mouse and touch <ko>입력 장치 종류
+     * - touch: 터치 입력 장치
+     * - mouse: 마우스
+     * - pointer: 마우스 및 터치</ko>
+     * @param {String[]} [inputKey=["any"]] List of key combinations to allow input
+     * - any: any key
+     * - shift: shift key
+     * - ctrl: ctrl key and pinch gesture on the trackpad
+     * - alt: alt key
+     * - meta: meta key
+     * - none: none of these keys are pressed <ko>입력을 허용할 키 조합 목록
+     * - any: 아무 키
+     * - shift: shift 키
+     * - ctrl: ctrl 키 및 트랙패드의 pinch 제스쳐
+     * - alt: alt 키
+     * - meta: meta 키
+     * - none: 아무 키도 눌리지 않은 상태 </ko>
+     * @param {String[]} [inputButton=["left"]] List of buttons to allow input
+     * - left: Left mouse button and normal touch
+     * - middle: Mouse wheel press
+     * - right: Right mouse button <ko>입력을 허용할 버튼 목록
+     * - left: 마우스 왼쪽 버튼
+     * - middle: 마우스 휠 눌림
+     * - right: 마우스 오른쪽 버튼 </ko>
+     * @param {Number[]} [scale] Coordinate scale that a user can move<ko>사용자의 동작으로 이동하는 좌표의 배율</ko>
+     * @param {Number} [scale[0]=1] horizontal axis scale <ko>수평축 배율</ko>
+     * @param {Number} [scale[1]=1] vertical axis scale <ko>수직축 배율</ko>
+     * @param {Number} [thresholdAngle=45] The threshold value that determines whether user action is horizontal or vertical (0~90) <ko>사용자의 동작이 가로 방향인지 세로 방향인지 판단하는 기준 각도(0~90)</ko>
+     * @param {Number} [threshold=0] Minimal pan distance required before recognizing <ko>사용자의 Pan 동작을 인식하기 위해산 최소한의 거리</ko>
+     * @param {Boolean} [preventClickOnDrag=false] Whether to cancel the {@link https://developer.mozilla.org/en/docs/Web/API/Element/click_event click} event when the user finishes dragging more than threshold <ko>사용자가 threshold 이상 드래그를 마쳤을 때 {@link https://developer.mozilla.org/ko/docs/Web/API/Element/click_event click} 이벤트 취소 여부</ko>
+     * @param {Number} [iOSEdgeSwipeThreshold=30] Area (px) that can go to the next page when swiping the right edge in iOS safari <ko>iOS Safari에서 오른쪽 엣지를 스와이프 하는 경우 다음 페이지로 넘어갈 수 있는 영역(px)</ko>
+     * @param {Boolean} [useAcceleration=false] Whether to apply the dragging speed to coordinate changes. <ko>사용자의 드래그 속도를 좌표 변화에 반영할지 여부</ko>
+     * @param {String} [touchAction=null] Value that overrides the element's "touch-action" css property. If set to null, it is automatically set to prevent scrolling in the direction of the connected axis. <ko>엘리먼트의 "touch-action" CSS 속성을 덮어쓰는 값. 만약 null로 설정된 경우, 연결된 축 방향으로의 스크롤을 방지하게끔 자동으로 설정된다.</ko>
      **/
 
-    /**
-     * A module that passes the amount of change to eg.Axes when the mouse or touchscreen is down and moved. use less than two axes.
-     * @ko 마우스나 터치 스크린을 누르고 움직일때의 변화량을 eg.Axes에 전달하는 모듈. 두개 이하의 축을 사용한다.
-     *
-     * @example
-     * ```js
-     * const pan = new eg.Axes.PanInput("#area", {
-     *     inputType: ["touch"],
-     *     scale: [1, 1.3],
-     * });
-     *
-     * // Connect the 'something2' axis to the mouse or touchscreen x position when the mouse or touchscreen is down and moved.
-     * // Connect the 'somethingN' axis to the mouse or touchscreen y position when the mouse or touchscreen is down and moved.
-     * axes.connect(["something2", "somethingN"], pan); // or axes.connect("something2 somethingN", pan);
-     *
-     * // Connect only one 'something1' axis to the mouse or touchscreen x position when the mouse or touchscreen is down and moved.
-     * axes.connect(["something1"], pan); // or axes.connect("something1", pan);
-     *
-     * // Connect only one 'something2' axis to the mouse or touchscreen y position when the mouse or touchscreen is down and moved.
-     * axes.connect(["", "something2"], pan); // or axes.connect(" something2", pan);
-     * ```
-     * @param {String|HTMLElement|Ref<HTMLElement>|jQuery} element An element to use the eg.Axes.PanInput module <ko>eg.Axes.PanInput 모듈을 사용할 엘리먼트</ko>
-     * @param {PanInputOption} [options={}] The option object of the eg.Axes.PanInput module<ko>eg.Axes.PanInput 모듈의 옵션 객체</ko>
+    /**
+     * A module that passes the amount of change to eg.Axes when the mouse or touchscreen is down and moved. use less than two axes.
+     * @ko 마우스나 터치 스크린을 누르고 움직일때의 변화량을 eg.Axes에 전달하는 모듈. 두개 이하의 축을 사용한다.
+     *
+     * @example
+     * ```js
+     * const pan = new eg.Axes.PanInput("#area", {
+     *     inputType: ["touch"],
+     *     scale: [1, 1.3],
+     * });
+     *
+     * // Connect the 'something2' axis to the mouse or touchscreen x position when the mouse or touchscreen is down and moved.
+     * // Connect the 'somethingN' axis to the mouse or touchscreen y position when the mouse or touchscreen is down and moved.
+     * axes.connect(["something2", "somethingN"], pan); // or axes.connect("something2 somethingN", pan);
+     *
+     * // Connect only one 'something1' axis to the mouse or touchscreen x position when the mouse or touchscreen is down and moved.
+     * axes.connect(["something1"], pan); // or axes.connect("something1", pan);
+     *
+     * // Connect only one 'something2' axis to the mouse or touchscreen y position when the mouse or touchscreen is down and moved.
+     * axes.connect(["", "something2"], pan); // or axes.connect(" something2", pan);
+     * ```
+     * @param {String|HTMLElement|Ref<HTMLElement>|jQuery} element An element to use the eg.Axes.PanInput module <ko>eg.Axes.PanInput 모듈을 사용할 엘리먼트</ko>
+     * @param {PanInputOption} [options={}] The option object of the eg.Axes.PanInput module<ko>eg.Axes.PanInput 모듈의 옵션 객체</ko>
      */
 
     var PanInput =
     /*#__PURE__*/
     function () {
-      /**
-       *
+      /**
+       *
        */
       function PanInput(el, options) {
         var _this = this;
@@ -5353,6 +5372,7 @@ version: 4.10.3
         this.element = $(el);
         this.options = __assign$1({
           inputType: ["touch", "mouse", "pointer"],
+          inputKey: [ANY],
           inputButton: [MOUSE_LEFT],
           scale: [1, 1],
           thresholdAngle: 45,
@@ -5360,6 +5380,7 @@ version: 4.10.3
           preventClickOnDrag: false,
           iOSEdgeSwipeThreshold: IOS_EDGE_THRESHOLD,
           releaseOnScroll: false,
+          useAcceleration: false,
           touchAction: null
         }, options);
         this._onPanstart = this._onPanstart.bind(this);
@@ -5399,9 +5420,9 @@ version: 4.10.3
         this._direction = DIRECTION_NONE;
         return this;
       };
-      /**
-       * Destroys elements, properties, and events used in a module.
-       * @ko 모듈에 사용한 엘리먼트와 속성, 이벤트를 해제한다.
+      /**
+       * Destroys elements, properties, and events used in a module.
+       * @ko 모듈에 사용한 엘리먼트와 속성, 이벤트를 해제한다.
        */
 
 
@@ -5409,10 +5430,10 @@ version: 4.10.3
         this.disconnect();
         this.element = null;
       };
-      /**
-       * Enables input devices
-       * @ko 입력 장치를 사용할 수 있게 한다
-       * @return {PanInput} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+      /**
+       * Enables input devices
+       * @ko 입력 장치를 사용할 수 있게 한다
+       * @return {PanInput} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
        */
 
 
@@ -5420,10 +5441,10 @@ version: 4.10.3
         this._enabled = true;
         return this;
       };
-      /**
-       * Disables input devices
-       * @ko 입력 장치를 사용할 수 없게 한다.
-       * @return {PanInput} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+      /**
+       * Disables input devices
+       * @ko 입력 장치를 사용할 수 없게 한다.
+       * @return {PanInput} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
        */
 
 
@@ -5431,20 +5452,20 @@ version: 4.10.3
         this._enabled = false;
         return this;
       };
-      /**
-       * Returns whether to use an input device
-       * @ko 입력 장치 사용 여부를 반환한다.
-       * @return {Boolean} Whether to use an input device <ko>입력장치 사용여부</ko>
+      /**
+       * Returns whether to use an input device
+       * @ko 입력 장치 사용 여부를 반환한다.
+       * @return {Boolean} Whether to use an input device <ko>입력장치 사용여부</ko>
        */
 
 
       __proto.isEnabled = function () {
         return this._enabled;
       };
-      /**
-       * Releases current user input.
-       * @ko 사용자의 입력을 강제로 중단시킨다.
-       * @return {PanInput} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+      /**
+       * Releases current user input.
+       * @ko 사용자의 입력을 강제로 중단시킨다.
+       * @return {PanInput} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
        */
 
 
@@ -5461,9 +5482,11 @@ version: 4.10.3
       };
 
       __proto._onPanstart = function (event) {
-        var inputButton = this.options.inputButton;
+        var _a = this.options,
+            inputKey = _a.inputKey,
+            inputButton = _a.inputButton;
         var activeEvent = this._activeEvent;
-        var panEvent = activeEvent.onEventStart(event, inputButton);
+        var panEvent = activeEvent.onEventStart(event, inputKey, inputButton);
 
         if (!panEvent || !this._enabled || activeEvent.getTouches(event, inputButton) > 1) {
           return;
@@ -5490,11 +5513,13 @@ version: 4.10.3
         var _a = this.options,
             iOSEdgeSwipeThreshold = _a.iOSEdgeSwipeThreshold,
             releaseOnScroll = _a.releaseOnScroll,
+            useAcceleration = _a.useAcceleration,
+            inputKey = _a.inputKey,
             inputButton = _a.inputButton,
             threshold = _a.threshold,
             thresholdAngle = _a.thresholdAngle;
         var activeEvent = this._activeEvent;
-        var panEvent = activeEvent.onEventMove(event, inputButton);
+        var panEvent = activeEvent.onEventMove(event, inputKey, inputButton);
         var touches = activeEvent.getTouches(event, inputButton);
 
         if (touches === 0 || releaseOnScroll && panEvent && !panEvent.srcEvent.cancelable) {
@@ -5553,10 +5578,11 @@ version: 4.10.3
         panEvent.preventSystemEvent = prevent;
 
         if (prevent && (this._isOverThreshold || distance >= threshold)) {
+          var velocity = useAcceleration ? this._getVelocity(panEvent) : undefined;
           this._dragged = true;
           this._isOverThreshold = true;
 
-          this._observer.change(this, panEvent, toAxis(this.axes, offset));
+          this._observer.change(this, panEvent, toAxis(this.axes, offset), false, velocity);
         }
 
         activeEvent.prevEvent = panEvent;
@@ -5575,7 +5601,9 @@ version: 4.10.3
 
         clearTimeout(this._rightEdgeTimer);
         var prevEvent = activeEvent.prevEvent;
-        var velocity = this._isOverThreshold ? this._getOffset([Math.abs(prevEvent.velocityX) * (prevEvent.offsetX < 0 ? -1 : 1), Math.abs(prevEvent.velocityY) * (prevEvent.offsetY < 0 ? -1 : 1)], [useDirection(DIRECTION_HORIZONTAL, this._direction), useDirection(DIRECTION_VERTICAL, this._direction)]) : [0, 0];
+
+        var velocity = this._getVelocity(prevEvent);
+
         activeEvent.onRelease();
 
         this._observer.release(this, prevEvent, velocity);
@@ -5612,6 +5640,10 @@ version: 4.10.3
         return [direction[0] ? properties[0] * scale[0] : 0, direction[1] ? properties[1] * scale[1] : 0];
       };
 
+      __proto._getVelocity = function (event) {
+        return this._isOverThreshold ? this._getOffset([Math.abs(event.velocityX) * (event.offsetX < 0 ? -1 : 1), Math.abs(event.velocityY) * (event.offsetY < 0 ? -1 : 1)], [useDirection(DIRECTION_HORIZONTAL, this._direction), useDirection(DIRECTION_VERTICAL, this._direction)]) : [0, 0];
+      };
+
       __proto._getDistance = function (delta, direction) {
         return Math.sqrt(Number(direction[0]) * Math.pow(delta[0], 2) + Number(direction[1]) * Math.pow(delta[1], 2));
       };
@@ -5673,9 +5705,9 @@ version: 4.10.3
       return PanInput;
     }();
 
-    /*
-     * Copyright (c) 2015 NAVER Corp.
-     * egjs projects are licensed under the MIT license
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
      */
 
     var Axes$1 = Axes;
@@ -12532,6 +12564,7 @@ version: 4.10.3
          * @property {ALIGN | string | number} panel The align value for each {@link Panel}s<ko>개개의 {@link Panel}에 적용할 값</ko>
          * @property {ALIGN | string | number} camera The align value for {@link Camera}<ko>{@link Camera}에 적용할 값</ko>
          * @default "center"
+         * @see {@link https://naver.github.io/egjs-flicking/Options#align align ( Options )}
          * @example
          * ```ts
          * const possibleOptions = [
@@ -12572,6 +12605,7 @@ version: 4.10.3
          * @ko Flicking의 {@link Flicking#init init()}이 호출될 때 이동할 디폴트 패널의 인덱스로, 0부터 시작하는 정수입니다
          * @type {number}
          * @default 0
+         * @see {@link https://naver.github.io/egjs-flicking/Options#defaultindex defaultIndex ( Options )}
          */
         get: function () {
           return this._defaultIndex;
@@ -12588,6 +12622,7 @@ version: 4.10.3
          * @ko 패널 이동 방향 (true: 가로방향, false: 세로방향)
          * @type {boolean}
          * @default true
+         * @see {@link https://naver.github.io/egjs-flicking/Options#horizontal horizontal ( Options )}
          */
         get: function () {
           return this._horizontal;
@@ -12608,6 +12643,7 @@ version: 4.10.3
          * @ko 순환 모드를 활성화합니다. 순환 모드에서는 양 끝의 패널이 서로 연결되어 끊김없는 스크롤이 가능합니다.
          * @type {boolean}
          * @default false
+         * @see {@link https://naver.github.io/egjs-flicking/Options#circular circular ( Options )}
          */
         get: function () {
           return this._circular;
@@ -12630,6 +12666,7 @@ version: 4.10.3
          * @see CIRCULAR_FALLBACK
          * @type {string}
          * @default "linear"
+         * @see {@link https://naver.github.io/egjs-flicking/Options#circularfallback circularFallback ( Options )}
          */
         get: function () {
           return this._circularFallback;
@@ -12645,6 +12682,7 @@ version: 4.10.3
          * `circular=false`인 경우에만 사용할 수 있습니다
          * @type {boolean}
          * @default false
+         * @see {@link https://naver.github.io/egjs-flicking/Options#bound bound ( Options )}
          */
         get: function () {
           return this._bound;
@@ -12662,6 +12700,7 @@ version: 4.10.3
          * @ko 이동한 후 뷰포트 엘리먼트의 크기를 현재 패널의 높이와 동일하게 설정합니다. `horizontal=true`인 경우에만 사용할 수 있습니다.
          * @type {boolean}
          * @default false
+         * @see {@link https://naver.github.io/egjs-flicking/Options#adaptive adaptive ( Options )}
          */
         get: function () {
           return this._adaptive;
@@ -12679,6 +12718,7 @@ version: 4.10.3
          * @ko 한 화면에 보이는 패널의 개수. 이 옵션을 활성화할 경우 패널의 크기를 강제로 재조정합니다
          * @type {number}
          * @default -1
+         * @see {@link https://naver.github.io/egjs-flicking/Options#panelsperview panelsPerView ( Options )}
          */
         get: function () {
           return this._panelsPerView;
@@ -12717,6 +12757,7 @@ version: 4.10.3
          * 이 동작은 Flicking 내부에 로드 전/후로 크기가 변하는 콘텐츠를 포함하고 있을 때 유용하게 사용하실 수 있습니다.
          * @type {boolean}
          * @default false
+         * @see {@link https://naver.github.io/egjs-flicking/Options#resizeOnContentsReady resizeOnContentsReady ( Options )}
          */
         get: function () {
           return this._resizeOnContentsReady;
@@ -12739,6 +12780,7 @@ version: 4.10.3
          * 만약 상위 Flicking과 하위 Flicking이 서로 다른 horizontal 옵션을 가지고 있다면 이 옵션을 설정할 필요가 없습니다.
          * @type {boolean}
          * @default false
+         * @see {@link https://naver.github.io/egjs-flicking/Options#nested nested ( Options )}
          */
         get: function () {
           return this._nested;
@@ -12762,6 +12804,7 @@ version: 4.10.3
          * @ko `needPanel`이벤트가 발생하기 위한 뷰포트 끝으로부터의 최대 거리
          * @type {number}
          * @default 0
+         * @see {@link https://naver.github.io/egjs-flicking/Options#needpanelthreshold needPanelThreshold ( Options )}
          */
         get: function () {
           return this._needPanelThreshold;
@@ -12779,6 +12822,7 @@ version: 4.10.3
          * @ko 활성화할 경우 초기화시 `ready` 이벤트 이전의 이벤트가 발생하지 않습니다.
          * @type {boolean}
          * @default true
+         * @see {@link https://naver.github.io/egjs-flicking/Options#preventeventsbeforeinit preventEventsBeforeInit ( Options )}
          */
         get: function () {
           return this._preventEventsBeforeInit;
@@ -12797,6 +12841,7 @@ version: 4.10.3
          * @ko 사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아집니다
          * @type {number}
          * @default 0.0075
+         * @see {@link https://naver.github.io/egjs-flicking/Options#deceleration deceleration ( Options )}
          */
         get: function () {
           return this._deceleration;
@@ -12820,6 +12865,7 @@ version: 4.10.3
          * @type {function}
          * @default x => 1 - Math.pow(1 - x, 3)
          * @see Easing Functions Cheat Sheet {@link http://easings.net/} <ko>이징 함수 Cheat Sheet {@link http://easings.net/}</ko>
+         * @see {@link https://naver.github.io/egjs-flicking/Options#easing Easing ( Options )}
          */
         get: function () {
           return this._easing;
@@ -12841,6 +12887,7 @@ version: 4.10.3
          * @ko 디폴트 애니메이션 재생 시간 (ms)
          * @type {number}
          * @default 500
+         * @see {@link https://naver.github.io/egjs-flicking/Options#duration duration ( Options )}
          */
         get: function () {
           return this._duration;
@@ -12859,8 +12906,9 @@ version: 4.10.3
          * @ko 활성화할 입력 장치 종류
          * @type {string[]}
          * @default ["touch", "mouse"]
-         * @see {@link https://naver.github.io/egjs-axes/release/latest/doc/global.html#PanInputOption Possible values (PanInputOption#inputType)}
-         * <ko>{@link https://naver.github.io/egjs-axes/release/latest/doc/global.html#PanInputOption 가능한 값들 (PanInputOption#inputType)}</ko>
+         * @see {@link https://naver.github.io/egjs-axes/Options#paninput-options Possible values (PanInputOption#inputType)}
+         * <ko>{@link https://naver.github.io/egjs-axes/Options#paninput-options 가능한 값들 (PanInputOption#inputType)}</ko>
+         * @see {@link https://naver.github.io/egjs-flicking/Options#inputtype inputType ( Options )}
          */
         get: function () {
           return this._inputType;
@@ -12885,6 +12933,7 @@ version: 4.10.3
          * 상수 {@link MOVE_TYPE}에 정의된 값들을 이용할 수 있습니다
          * @type {MOVE_TYPE | Pair<string, object>}
          * @default "snap"
+         * @see {@link https://naver.github.io/egjs-flicking/Options#movetype moveType ( Options )}
          * @example
          * |moveType|control|options|
          * |:---:|:---:|:---:|
@@ -12935,6 +12984,7 @@ version: 4.10.3
          * @ko 패널 변경을 위한 이동 임계값 (단위: px). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능하다.
          * @type {number}
          * @default 40
+         * @see {@link https://naver.github.io/egjs-flicking/Options#threshold Threshold ( Options )}
          */
         get: function () {
           return this._threshold;
@@ -12951,6 +13001,7 @@ version: 4.10.3
          * @ko 사용자의 클릭/터치로 인해 애니메이션을 도중에 멈출 수 있도록 설정합니다.
          * @type {boolean}
          * @default true
+         * @see {@link https://naver.github.io/egjs-flicking/Options#interruptable Interruptable ( Options )}
          */
         get: function () {
           return this._interruptable;
@@ -12978,6 +13029,7 @@ version: 4.10.3
          * 이 값을 변경시 {@link Control#updateInput}를 호출해야 합니다.
          * @type {string | number | Array<string | number>}
          * @default "20%"
+         * @see {@link https://naver.github.io/egjs-flicking/Options#bounce bounce ( Options )}
          * @example
          * ```ts
          * const possibleOptions = [
@@ -13015,6 +13067,7 @@ version: 4.10.3
          * @ko iOS Safari에서 swipe를 통한 뒤로가기/앞으로가기를 활성화하는 오른쪽 끝으로부터의 영역의 크기 (px)
          * @type {number}
          * @default 30
+         * @see {@link https://naver.github.io/egjs-flicking/Options#iosedgeswipethreshold iOSEdgeSwipeThreshold ( Options )}
          */
         get: function () {
           return this._iOSEdgeSwipeThreshold;
@@ -13036,6 +13089,7 @@ version: 4.10.3
          * @ko 사용자가 뷰포트 영역을 1픽셀이라도 드래그했을 경우 자동으로 {@link https://developer.mozilla.org/ko/docs/Web/API/Element/click_event click} 이벤트를 취소합니다
          * @type {boolean}
          * @default true
+         * @see {@link https://naver.github.io/egjs-flicking/Options#preventclickondrag preventClickOnDrag ( Options )}
          */
         get: function () {
           return this._preventClickOnDrag;
@@ -13062,6 +13116,7 @@ version: 4.10.3
          * @ko Flicking init시에 {@link Flicking#disableInput disableInput()}을 바로 호출합니다
          * @type {boolean}
          * @default false
+         * @see {@link https://naver.github.io/egjs-flicking/Options#disableoninit disableOnInit ( Options )}
          */
         get: function () {
           return this._disableOnInit;
@@ -13080,6 +13135,7 @@ version: 4.10.3
          * `willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다.
          * @type {boolean}
          * @default false
+         * @see {@link https://naver.github.io/egjs-flicking/Options#changeonhold changeOnHold ( Options )}
          */
         get: function () {
           return this._changeOnHold;
@@ -13098,6 +13154,7 @@ version: 4.10.3
          * @ko 보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다
          * @type {boolean}
          * @default false
+         * @see {@link https://naver.github.io/egjs-flicking/Options#renderonlyvisible renderOnlyVisible ( Options )}
          */
         get: function () {
           return this._renderOnlyVisible;
@@ -13123,6 +13180,7 @@ version: 4.10.3
          * @property {number} initialPanelCount Initial panel count to render<ko>최초로 렌더링할 패널의 개수</ko>
          * @property {boolean} [cache=false] Whether to cache rendered panel's innerHTML<ko>렌더링된 패널의 innerHTML 정보를 캐시할지 여부</ko>
          * @property {string} [panelClass="flicking-panel"] The class name that will be applied to rendered panel elements<ko>렌더링되는 패널 엘리먼트에 적용될 클래스 이름</ko>
+         * @see {@link https://naver.github.io/egjs-flicking/Options#virtual virtual ( Options )}
          * @example
          * ```ts
          * import Flicking, { VirtualPanel } from "@egjs/flicking";
@@ -13156,6 +13214,7 @@ version: 4.10.3
          * @ko Flicking 인스턴스를 생성할 때 자동으로 {@link Flicking#init init()}를 호출합니다
          * @type {boolean}
          * @default true
+         * @see {@link https://naver.github.io/egjs-flicking/Options#autoinit autoInit ( Options )}
          * @readonly
          */
         get: function () {
@@ -13193,6 +13252,7 @@ version: 4.10.3
          * @ko autoResize 옵션 사용시 {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}의 이벤트를 Window객체의 {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} 이벤트 대신 수신할지 여부를 설정합니다
          * @type {boolean}
          * @default true
+         * @see {@link https://naver.github.io/egjs-flicking/Options#useresizeobserver useResizeObserver ( Options )}
          */
         get: function () {
           return this._useResizeObserver;
@@ -13217,6 +13277,7 @@ version: 4.10.3
          * 이를 통해 `resize`가 너무 많이 호출되는 것을 방지하여 성능을 향상시킬 수 있습니다.
          * @type {number}
          * @default 0
+         * @see {@link https://naver.github.io/egjs-flicking/Options#resizedebounce resizeDebounce ( Options )}
          */
         get: function () {
           return this._resizeDebounce;
@@ -13232,6 +13293,7 @@ version: 4.10.3
          * 이를 통해, 적어도 (n)ms에 한번은 크기 재계산을 수행하는 것을 보장할 수 있습니다.
          * @type {number}
          * @default 100
+         * @see {@link https://naver.github.io/egjs-flicking/Options#maxresizedebounce maxResizeDebounce ( Options )}
          */
         get: function () {
           return this._maxResizeDebounce;
@@ -13249,6 +13311,7 @@ version: 4.10.3
          * 모든 크기는 CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform}이 엘리먼트에 적용되기 이전의 크기를 사용할 것입니다.
          * @type {boolean}
          * @default false
+         * @see {@link https://naver.github.io/egjs-flicking/Options#usefractionalsize useFractionalSize ( Options )}
          */
         get: function () {
           return this._useFractionalSize;
@@ -14115,7 +14178,7 @@ version: 4.10.3
        */
 
 
-      Flicking.VERSION = "4.10.3";
+      Flicking.VERSION = "4.10.5-beta.0";
       return Flicking;
     }(Component);