@egjs/flicking 4.9.0 → 4.9.3-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.9.0
+version: 4.9.3-beta.0
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1087,7 +1087,7 @@ version: 4.9.0
     var parsePanelAlign = function (align) {
       return typeof align === "object" ? align.panel : align;
     };
-    var getDirection = function (start, end) {
+    var getDirection$1 = function (start, end) {
       if (start === end) return DIRECTION.NONE;
       return start < end ? DIRECTION.NEXT : DIRECTION.PREV;
     };
@@ -1290,7 +1290,7 @@ version: 4.9.0
         parseArithmeticExpression: parseArithmeticExpression,
         parseCSSSizeValue: parseCSSSizeValue,
         parsePanelAlign: parsePanelAlign,
-        getDirection: getDirection,
+        getDirection: getDirection$1,
         parseElement: parseElement,
         getMinusCompensatedIndex: getMinusCompensatedIndex,
         includes: includes,
@@ -2319,12 +2319,114 @@ version: 4.9.0
     }
 
     /*
-    Copyright (c) 2015 NAVER Corp.
+    Copyright (c) NAVER Crop.
+    name: @cfcs/core
+    license: MIT
+    author: NAVER Crop.
+    repository: https://github.com/naver/cfcs
+    version: 0.0.4
+    */
+
+    /**
+     * cfcs
+     * Copyright (c) 2022-present NAVER Corp.
+     * MIT license
+     */
+    function keys(obj) {
+      return Object.keys(obj);
+    }
+
+    var OBSERVERS_PATH = "__observers__";
+
+    var Observer =
+    /*#__PURE__*/
+    function () {
+      function Observer(value) {
+        this._emitter = new Component();
+        this._current = value;
+      }
+
+      var __proto = Observer.prototype;
+      Object.defineProperty(__proto, "current", {
+        get: function () {
+          return this._current;
+        },
+        set: function (value) {
+          var isUpdate = value !== this._current;
+          this._current = value;
+
+          if (isUpdate) {
+            this._emitter.trigger("update", value);
+          }
+        },
+        enumerable: false,
+        configurable: true
+      });
+
+      __proto.subscribe = function (callback) {
+        this._emitter.on("update", callback);
+      };
+
+      __proto.unsubscribe = function (callback) {
+        this._emitter.off("update", callback);
+      };
+
+      return Observer;
+    }();
+    function observe(defaultValue) {
+      return new Observer(defaultValue);
+    }
+    function getObservers(instance) {
+      if (!instance[OBSERVERS_PATH]) {
+        instance[OBSERVERS_PATH] = {};
+      }
+
+      return instance[OBSERVERS_PATH];
+    }
+    function getObserver(instance, name, defaultValue) {
+      var observers = getObservers(instance);
+
+      if (!observers[name]) {
+        observers[name] = observe(defaultValue);
+      }
+
+      return observers[name];
+    }
+
+    function injectReactiveSubscribe(object) {
+      object["subscribe"] = function (name, callback) {
+        getObserver(this, name).subscribe(callback);
+      };
+
+      object["unsubscribe"] = function (name, callback) {
+        var _this = this;
+
+        if (!name) {
+          keys(getObservers(this)).forEach(function (observerName) {
+            _this.unsubscribe(observerName);
+          });
+          return;
+        }
+
+        if (!(name in this)) {
+          return;
+        }
+
+        getObserver(this, name).unsubscribe(callback);
+      };
+    }
+    function ReactiveSubscribe(Constructor) {
+      var prototype = Constructor.prototype;
+      injectReactiveSubscribe(prototype);
+    }
+
+    /*
+    Copyright (c) NAVER Corp.
     name: @egjs/axes
     license: MIT
     author: NAVER Corp.
     repository: https://github.com/naver/egjs-axes
-    version: 3.2.2
+    version: 3.8.0
     */
 
     /*! *****************************************************************************
@@ -2377,6 +2479,18 @@ version: 4.9.0
 
       return __assign$1.apply(this, arguments);
     };
+    function __decorate(decorators, target, key, desc) {
+      var c = arguments.length,
+          r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+          d;
+      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
+     */
 
     /* eslint-disable no-new-func, no-nested-ternary */
     var win;
@@ -2392,6 +2506,10 @@ version: 4.9.0
       win = window;
     }
 
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
+     */
     var DIRECTION_NONE = 1;
     var DIRECTION_LEFT = 2;
     var DIRECTION_RIGHT = 4;
@@ -2466,6 +2584,8 @@ version: 4.9.0
       } else if (param === win) {
         // window
         el = param;
+      } else if ("value" in param || "current" in param) {
+        el = param.value || param.current;
       } else if (param.nodeName && (param.nodeType === 1 || param.nodeType === 9)) {
         // HTMLElement, Document
         el = param;
@@ -2527,7 +2647,7 @@ version: 4.9.0
     };
     /**
      * 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>
+     * @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
      */
@@ -2594,7 +2714,7 @@ version: 4.9.0
         return 0;
       }
 
-      var v = "" + val;
+      var v = "".concat(val);
 
       if (v.indexOf("e") >= 0) {
         // Exponential Format
@@ -2641,6 +2761,24 @@ version: 4.9.0
       });
       return same;
     };
+    var getDirection = function (useHorizontal, useVertical) {
+      if (useHorizontal && useVertical) {
+        return DIRECTION_ALL;
+      } else if (useHorizontal) {
+        return DIRECTION_HORIZONTAL;
+      } else if (useVertical) {
+        return DIRECTION_VERTICAL;
+      } else {
+        return DIRECTION_NONE;
+      }
+    };
+    var useDirection = function (checkType, direction, userDirection) {
+      if (userDirection) {
+        return !!(direction === DIRECTION_ALL || direction & checkType && userDirection & checkType);
+      } else {
+        return !!(direction & checkType);
+      }
+    };
     var setCssProps = function (element, option, direction) {
       var _a;
 
@@ -2850,6 +2988,8 @@ version: 4.9.0
 
 
       __proto.triggerChange = function (pos, depaPos, option, holding) {
+        var _this = this;
+
         if (holding === void 0) {
           holding = false;
         }
@@ -2872,12 +3012,18 @@ version: 4.9.0
           inputEvent: inputEvent,
           isTrusted: !!inputEvent,
           input: (option === null || option === void 0 ? void 0 : option.input) || (eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.input) || null,
-          set: inputEvent ? this._createUserControll(moveTo.pos) : function () {}
+          set: inputEvent ? this._createUserControll(moveTo.pos) : function () {} // eslint-disable-line @typescript-eslint/no-empty-function
+
         };
         var event = new ComponentEvent$1("change", param);
 
         this._axes.trigger(event);
 
+        Object.keys(moveTo.pos).forEach(function (axis) {
+          var p = moveTo.pos[axis];
+          getObserver(_this._axes, axis, p).current = p;
+        });
+
         if (inputEvent) {
           axisManager.set(param.set().destPos);
         }
@@ -3036,7 +3182,7 @@ version: 4.9.0
       __proto._getRoundPos = function (pos, depaPos) {
         // round value if round exist
         var roundUnit = this._axes.options.round; // if (round == null) {
-        // 	return {pos, depaPos}; // undefined, undefined
+        //   return {pos, depaPos}; // undefined, undefined
         // }
 
         return {
@@ -3088,6 +3234,10 @@ version: 4.9.0
       return InterruptManager;
     }();
 
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
+     */
     var getInsidePosition = function (destPos, range, circular, bounce) {
       var toDestPos = destPos;
       var targetRange = [circular[0] ? range[0] : bounce ? range[0] - bounce[0] : range[0], circular[1] ? range[1] : bounce ? range[1] + bounce[1] : range[1]];
@@ -3140,9 +3290,9 @@ version: 4.9.0
 
         this._complementOptions();
 
-        this._pos = Object.keys(this._axis).reduce(function (acc, v) {
-          acc[v] = _this._axis[v].range[0];
-          return acc;
+        this._pos = Object.keys(this._axis).reduce(function (pos, v) {
+          pos[v] = _this._axis[v].startPos;
+          return pos;
         }, {});
       }
 
@@ -3226,6 +3376,20 @@ version: 4.9.0
       __proto.getAxisOptions = function (key) {
         return this._axis[key];
       };
+
+      __proto.setAxis = function (axis) {
+        var _this = this;
+
+        Object.keys(axis).forEach(function (key) {
+          if (!_this._axis[key]) {
+            throw new Error("Axis ".concat(key, " does not exist in Axes instance"));
+          }
+
+          _this._axis[key] = __assign$1(__assign$1({}, _this._axis[key]), axis[key]);
+        });
+
+        this._complementOptions();
+      };
       /**
        * set up 'css' expression
        * @private
@@ -3238,6 +3402,7 @@ version: 4.9.0
         Object.keys(this._axis).forEach(function (axis) {
           _this._axis[axis] = __assign$1({
             range: [0, 100],
+            startPos: _this._axis[axis].range[0],
             bounce: [0, 0],
             circular: [false, false]
           }, _this._axis[axis]);
@@ -3404,7 +3569,16 @@ version: 4.9.0
         return;
       };
 
-      __proto.getTouches = function () {
+      __proto.getTouches = function (event, inputButton) {
+        if (inputButton) {
+          var buttonCodeMap = {
+            1: MOUSE_LEFT,
+            2: MOUSE_MIDDLE,
+            3: MOUSE_RIGHT
+          };
+          return this._isValidButton(buttonCodeMap[event.which], inputButton) && this.end.indexOf(event.type) === -1 ? 1 : 0;
+        }
+
         return 0;
       };
 
@@ -3837,7 +4011,7 @@ version: 4.9.0
         this._moveDistance = this._axisManager.get(input.axes);
       };
 
-      __proto.change = function (input, event, offset, useDuration) {
+      __proto.change = function (input, event, offset, useAnimation) {
         if (this._isStopped || !this._interruptManager.isInterrupting() || this._axisManager.every(offset, function (v) {
           return v === 0;
         })) {
@@ -3885,7 +4059,7 @@ version: 4.9.0
           event: event
         };
 
-        if (useDuration) {
+        if (useAnimation) {
           var duration = this._animationManager.getDuration(destPos, depaPos);
 
           this._animationManager.animateTo(destPos, duration, changeOption);
@@ -4469,9 +4643,10 @@ version: 4.9.0
     /**
      * @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 coordinate of range <ko>좌표 범위</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>
@@ -4506,50 +4681,50 @@ version: 4.9.0
      *
      * @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=null] The coordinates to be moved when creating an instance. not triggering change event.<ko>인스턴스 생성시 이동할 좌표, change 이벤트는 발생하지 않음.</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],
-     *	}
+     *  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) {
-     *	}
+     *  "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]
+     *  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
+     *  scale: 1.5
      * });
      *
      * // 4. Connect eg.Axes and InputTypes
@@ -4588,7 +4763,7 @@ version: 4.9.0
         }
 
         if (startPos === void 0) {
-          startPos = null;
+          startPos = {};
         }
 
         var _this = _super.call(this) || this;
@@ -4606,6 +4781,9 @@ version: 4.9.0
           round: null,
           nested: false
         }, options);
+        Object.keys(startPos).forEach(function (key) {
+          _this.axis[key].startPos = startPos[key];
+        });
         _this.interruptManager = new InterruptManager(_this.options);
         _this.axisManager = new AxisManager(_this.axis);
         _this.eventManager = new EventManager(_this);
@@ -4614,9 +4792,7 @@ version: 4.9.0
 
         _this.eventManager.setAnimationManager(_this.animationManager);
 
-        if (startPos) {
-          _this.eventManager.triggerChange(startPos);
-        }
+        _this.eventManager.triggerChange(_this.axisManager.get());
 
         return _this;
       }
@@ -4733,7 +4909,7 @@ version: 4.9.0
        *   "xOther": {
        *      range: [-100, 100]
        *   },
-       * 	 "zoom": {
+       *    "zoom": {
        *      range: [50, 30]
        *   }
        * });
@@ -4762,7 +4938,7 @@ version: 4.9.0
        *   "xOther": {
        *      range: [-100, 100]
        *   },
-       * 	 "zoom": {
+       *    "zoom": {
        *      range: [50, 30]
        *   }
        * });
@@ -4801,7 +4977,7 @@ version: 4.9.0
        *   "xOther": {
        *      range: [-100, 100]
        *   },
-       * 	 "zoom": {
+       *    "zoom": {
        *      range: [50, 30]
        *   }
        * });
@@ -4825,6 +5001,70 @@ version: 4.9.0
         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}
+       * ```
+       */
+
+
+      __proto.setOptions = function (options) {
+        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}
+       * ```
+       */
+
+
+      __proto.setAxis = function (axis) {
+        this.axisManager.setAxis(axis);
+        return this;
+      };
       /**
        * Stop an animation in progress.
        * @ko 재생 중인 애니메이션을 정지한다.
@@ -4897,7 +5137,7 @@ version: 4.9.0
        *   "xOther": {
        *      range: [-100, 100]
        *   },
-       * 	 "zoom": {
+       *    "zoom": {
        *      range: [50, 30]
        *   }
        * });
@@ -4936,7 +5176,7 @@ version: 4.9.0
        */
 
 
-      Axes.VERSION = "3.2.2";
+      Axes.VERSION = "3.8.0";
       /* eslint-enable */
 
       /**
@@ -5009,10 +5249,14 @@ version: 4.9.0
        */
 
       Axes.DIRECTION_ALL = DIRECTION_ALL;
+      Axes = __decorate([ReactiveSubscribe], Axes);
       return Axes;
     }(Component);
 
-    /* eslint-disable @typescript-eslint/no-empty-function */
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
+     */
 
     var getDirectionByAngle = function (angle, thresholdAngle) {
       if (thresholdAngle < 0 || thresholdAngle > 90) {
@@ -5022,13 +5266,6 @@ version: 4.9.0
       var toAngle = Math.abs(angle);
       return toAngle > thresholdAngle && toAngle < 180 - thresholdAngle ? DIRECTION_VERTICAL : DIRECTION_HORIZONTAL;
     };
-    var useDirection = function (checkType, direction, userDirection) {
-      if (userDirection) {
-        return !!(direction === DIRECTION_ALL || direction & checkType && userDirection & checkType);
-      } else {
-        return !!(direction & checkType);
-      }
-    };
     /**
      * @typedef {Object} PanInputOption The option object of the eg.Axes.PanInput module.
      * @ko eg.Axes.PanInput 모듈의 옵션 객체
@@ -5051,6 +5288,7 @@ version: 4.9.0
      * @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>
      **/
@@ -5062,8 +5300,8 @@ version: 4.9.0
      * @example
      * ```js
      * const pan = new eg.Axes.PanInput("#area", {
-     * 		inputType: ["touch"],
-     * 		scale: [1, 1.3],
+     *     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.
@@ -5076,7 +5314,7 @@ version: 4.9.0
      * // 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 {HTMLElement|String|jQuery} element An element to use the eg.Axes.PanInput module <ko>eg.Axes.PanInput 모듈을 사용할 엘리먼트</ko>
+     * @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>
      */
 
@@ -5095,18 +5333,19 @@ version: 4.9.0
         this._activeEvent = null;
         this._atRightEdge = false;
         this._rightEdgeTimer = 0;
+        this._dragged = false;
 
-        this._forceRelease = function () {
-          var activeEvent = _this._activeEvent;
-          var prevEvent = activeEvent.prevEvent;
-
-          _this._detachWindowEvent(activeEvent);
-
-          activeEvent.onRelease();
+        this._preventClickWhenDragged = function (e) {
+          if (_this._dragged) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
 
-          _this._observer.release(_this, prevEvent, [0, 0]);
+          _this._dragged = false;
         };
 
+        this._voidFunction = function () {};
+
         this.element = $(el);
         this.options = __assign$1({
           inputType: ["touch", "mouse", "pointer"],
@@ -5114,6 +5353,7 @@ version: 4.9.0
           scale: [1, 1],
           thresholdAngle: 45,
           threshold: 0,
+          preventClickOnDrag: false,
           iOSEdgeSwipeThreshold: IOS_EDGE_THRESHOLD,
           releaseOnScroll: false,
           touchAction: null
@@ -5126,19 +5366,7 @@ version: 4.9.0
       var __proto = PanInput.prototype;
 
       __proto.mapAxes = function (axes) {
-        var useHorizontal = !!axes[0];
-        var useVertical = !!axes[1];
-
-        if (useHorizontal && useVertical) {
-          this._direction = DIRECTION_ALL;
-        } else if (useHorizontal) {
-          this._direction = DIRECTION_HORIZONTAL;
-        } else if (useVertical) {
-          this._direction = DIRECTION_VERTICAL;
-        } else {
-          this._direction = DIRECTION_NONE;
-        }
-
+        this._direction = getDirection(!!axes[0], !!axes[1]);
         this.axes = axes;
       };
 
@@ -5201,7 +5429,7 @@ version: 4.9.0
       };
       /**
        * Returns whether to use an input device
-       * @ko 입력 장치를 사용 여부를 반환한다.
+       * @ko 입력 장치 사용 여부를 반환한다.
        * @return {Boolean} Whether to use an input device <ko>입력장치 사용여부</ko>
        */
 
@@ -5209,17 +5437,37 @@ version: 4.9.0
       __proto.isEnabled = function () {
         return this._enabled;
       };
+      /**
+       * Releases current user input.
+       * @ko 사용자의 입력을 강제로 중단시킨다.
+       * @return {PanInput} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+       */
+
+
+      __proto.release = function () {
+        var activeEvent = this._activeEvent;
+        var prevEvent = activeEvent.prevEvent;
+        activeEvent.onRelease();
+
+        this._observer.release(this, prevEvent, [0, 0]);
+
+        this._detachWindowEvent(activeEvent);
+
+        return this;
+      };
 
       __proto._onPanstart = function (event) {
+        var inputButton = this.options.inputButton;
         var activeEvent = this._activeEvent;
-        var panEvent = activeEvent.onEventStart(event, this.options.inputButton);
+        var panEvent = activeEvent.onEventStart(event, inputButton);
 
-        if (!panEvent || !this._enabled || activeEvent.getTouches(event) > 1) {
+        if (!panEvent || !this._enabled || activeEvent.getTouches(event, inputButton) > 1) {
           return;
         }
 
         if (panEvent.srcEvent.cancelable !== false) {
           var edgeThreshold = this.options.iOSEdgeSwipeThreshold;
+          this._dragged = false;
 
           this._observer.hold(this, panEvent);
 
@@ -5234,31 +5482,33 @@ version: 4.9.0
       __proto._onPanmove = function (event) {
         var _this = this;
 
-        var activeEvent = this._activeEvent;
-        var panEvent = activeEvent.onEventMove(event, this.options.inputButton);
-
-        if (!panEvent || !this._enabled || activeEvent.getTouches(event) > 1) {
-          return;
-        }
-
         var _a = this.options,
             iOSEdgeSwipeThreshold = _a.iOSEdgeSwipeThreshold,
-            releaseOnScroll = _a.releaseOnScroll;
-        var userDirection = getDirectionByAngle(panEvent.angle, this.options.thresholdAngle);
+            releaseOnScroll = _a.releaseOnScroll,
+            inputButton = _a.inputButton,
+            thresholdAngle = _a.thresholdAngle;
+        var activeEvent = this._activeEvent;
+        var panEvent = activeEvent.onEventMove(event, inputButton);
+        var touches = activeEvent.getTouches(event, inputButton);
 
-        if (releaseOnScroll && !panEvent.srcEvent.cancelable) {
+        if (touches === 0 || releaseOnScroll && panEvent && !panEvent.srcEvent.cancelable) {
           this._onPanend(event);
 
           return;
         }
 
+        if (!panEvent || !this._enabled || touches > 1) {
+          return;
+        }
+
+        var userDirection = getDirectionByAngle(panEvent.angle, thresholdAngle);
+
         if (activeEvent.prevEvent && IS_IOS_SAFARI) {
           var swipeLeftToRight = panEvent.center.x < 0;
 
           if (swipeLeftToRight) {
             // iOS swipe left => right
-            this._forceRelease();
-
+            this.release();
             return;
           } else if (this._atRightEdge) {
             clearTimeout(this._rightEdgeTimer); // - is right to left
@@ -5270,13 +5520,13 @@ version: 4.9.0
             } else {
               // iOS swipe right => left
               this._rightEdgeTimer = window.setTimeout(function () {
-                return _this._forceRelease();
+                return _this.release();
               }, 100);
             }
           }
         }
 
-        var offset = this._applyScale([panEvent.offsetX, panEvent.offsetY], [useDirection(DIRECTION_HORIZONTAL, this._direction, userDirection), useDirection(DIRECTION_VERTICAL, this._direction, userDirection)]);
+        var offset = this._getOffset([panEvent.offsetX, panEvent.offsetY], [useDirection(DIRECTION_HORIZONTAL, this._direction, userDirection), useDirection(DIRECTION_VERTICAL, this._direction, userDirection)]);
 
         var prevent = offset.some(function (v) {
           return v !== 0;
@@ -5293,6 +5543,8 @@ version: 4.9.0
         panEvent.preventSystemEvent = prevent;
 
         if (prevent) {
+          this._dragged = true;
+
           this._observer.change(this, panEvent, toAxis(this.axes, offset));
         }
 
@@ -5300,10 +5552,11 @@ version: 4.9.0
       };
 
       __proto._onPanend = function (event) {
+        var inputButton = this.options.inputButton;
         var activeEvent = this._activeEvent;
         activeEvent.onEventEnd(event);
 
-        if (!this._enabled || activeEvent.getTouches(event) !== 0) {
+        if (!this._enabled || activeEvent.getTouches(event, inputButton) !== 0) {
           return;
         }
 
@@ -5312,7 +5565,7 @@ version: 4.9.0
         clearTimeout(this._rightEdgeTimer);
         var prevEvent = activeEvent.prevEvent;
 
-        var velocity = this._applyScale([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)]);
+        var velocity = 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)]);
 
         activeEvent.onRelease();
 
@@ -5345,28 +5598,39 @@ version: 4.9.0
         });
       };
 
+      __proto._getOffset = function (properties, direction) {
+        var scale = this.options.scale;
+        return [direction[0] ? properties[0] * scale[0] : 0, direction[1] ? properties[1] * scale[1] : 0];
+      };
+
       __proto._attachElementEvent = function (observer) {
         var _this = this;
 
         var activeEvent = convertInputType(this.options.inputType);
+        var element = this.element;
 
         if (!activeEvent) {
           return;
         }
 
+        if (!element) {
+          throw new Error("Element to connect input does not exist.");
+        }
+
         this._observer = observer;
         this._enabled = true;
         this._activeEvent = activeEvent;
-        activeEvent.start.forEach(function (event) {
-          var _a;
 
-          (_a = _this.element) === null || _a === void 0 ? void 0 : _a.addEventListener(event, _this._onPanstart);
+        if (this.options.preventClickOnDrag) {
+          element.addEventListener("click", this._preventClickWhenDragged, true);
+        }
+
+        activeEvent.start.forEach(function (event) {
+          element.addEventListener(event, _this._onPanstart);
         }); // adding event listener to element prevents invalid behavior in iOS Safari
 
         activeEvent.move.forEach(function (event) {
-          var _a;
-
-          (_a = _this.element) === null || _a === void 0 ? void 0 : _a.addEventListener(event, function () {});
+          element.addEventListener(event, _this._voidFunction);
         });
       };
 
@@ -5374,38 +5638,33 @@ version: 4.9.0
         var _this = this;
 
         var activeEvent = this._activeEvent;
-        activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.start.forEach(function (event) {
-          var _a;
-
-          (_a = _this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, _this._onPanstart);
-        });
-        activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.move.forEach(function (event) {
-          var _a;
-
-          (_a = _this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, function () {});
-        });
-        this._enabled = false;
-        this._observer = null;
-      };
-
-      __proto._applyScale = function (properties, direction) {
-        var offset = [0, 0];
-        var scale = this.options.scale;
+        var element = this.element;
 
-        if (direction[0]) {
-          offset[0] = properties[0] * scale[0];
-        }
+        if (element) {
+          if (this.options.preventClickOnDrag) {
+            element.removeEventListener("click", this._preventClickWhenDragged, true);
+          }
 
-        if (direction[1]) {
-          offset[1] = properties[1] * scale[1];
+          activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.start.forEach(function (event) {
+            element.removeEventListener(event, _this._onPanstart);
+          });
+          activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.move.forEach(function (event) {
+            element.removeEventListener(event, _this._voidFunction);
+          });
         }
 
-        return offset;
+        this._enabled = false;
+        this._observer = null;
       };
 
       return PanInput;
     }();
 
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
+     */
+
     var Axes$1 = Axes;
 
     /**
@@ -5580,7 +5839,7 @@ version: 4.9.0
         var moveEvent = new ComponentEvent$1(EVENTS.MOVE, {
           isTrusted: axesEvent.isTrusted,
           holding: this.holding,
-          direction: getDirection(0, axesEvent.delta[POSITION_KEY]),
+          direction: getDirection$1(0, axesEvent.delta[POSITION_KEY]),
           axesEvent: axesEvent
         });
         flicking.trigger(moveEvent);
@@ -5668,7 +5927,7 @@ version: 4.9.0
         var moveStartEvent = new ComponentEvent$1(EVENTS.MOVE_START, {
           isTrusted: axesEvent.isTrusted,
           holding: this.holding,
-          direction: getDirection(animatingContext.start, animatingContext.end),
+          direction: getDirection$1(animatingContext.start, animatingContext.end),
           axesEvent: axesEvent
         });
         flicking.trigger(moveStartEvent);
@@ -5729,7 +5988,7 @@ version: 4.9.0
         var moveStartEvent = new ComponentEvent$1(EVENTS.MOVE_START, {
           isTrusted: axesEvent.isTrusted,
           holding: this.holding,
-          direction: getDirection(0, -offset),
+          direction: getDirection$1(0, -offset),
           axesEvent: axesEvent
         });
         flicking.trigger(moveStartEvent);
@@ -5831,7 +6090,7 @@ version: 4.9.0
             index: clickedPanel.index,
             panel: clickedPanel,
             // Direction to the clicked panel
-            direction: getDirection(cameraPosition, clickedPanelPosition)
+            direction: getDirection$1(cameraPosition, clickedPanelPosition)
           }));
         }
       };
@@ -5986,7 +6245,7 @@ version: 4.9.0
         transitTo(STATE_TYPE.IDLE);
         flicking.trigger(new ComponentEvent$1(EVENTS.MOVE_END, {
           isTrusted: axesEvent.isTrusted,
-          direction: getDirection(animatingContext.start, animatingContext.end),
+          direction: getDirection$1(animatingContext.start, animatingContext.end),
           axesEvent: axesEvent
         }));
         var targetPanel = this._targetPanel;
@@ -6428,6 +6687,20 @@ version: 4.9.0
         (_a = this._panInput) === null || _a === void 0 ? void 0 : _a.disable();
         return this;
       };
+      /**
+       * Releases ongoing user input (mouse/touch)
+       * @ko 사용자의 현재 입력(마우스/터치)를 중단시킵니다
+       * @chainable
+       * @return {this}
+       */
+
+
+      __proto.release = function () {
+        var _a;
+
+        (_a = this._panInput) === null || _a === void 0 ? void 0 : _a.release();
+        return this;
+      };
       /**
        * Update {@link https://naver.github.io/egjs-axes/ @egjs/axes}'s state
        * @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 상태를 갱신합니다
@@ -6739,6 +7012,19 @@ version: 4.9.0
 
         return this;
       };
+      /**
+       * Releases ongoing user input (mouse/touch)
+       * @ko 사용자의 현재 입력(마우스/터치)를 중단시킵니다
+       * @chainable
+       * @return {this}
+       */
+
+
+      __proto.release = function () {
+        this._controller.release();
+
+        return this;
+      };
       /**
        * Update position after resizing
        * @ko resize 이후에 position을 업데이트합니다
@@ -6899,7 +7185,7 @@ version: 4.9.0
             prevIndex: (_a = prevActivePanel === null || prevActivePanel === void 0 ? void 0 : prevActivePanel.index) !== null && _a !== void 0 ? _a : -1,
             prevPanel: prevActivePanel,
             isTrusted: isTrusted,
-            direction: prevActivePanel ? getDirection(prevActivePanel.position, newActivePanel.position) : DIRECTION.NONE
+            direction: prevActivePanel ? getDirection$1(prevActivePanel.position, newActivePanel.position) : DIRECTION.NONE
           }));
         } else {
           flicking.trigger(new ComponentEvent$1(EVENTS.RESTORED, {
@@ -6919,7 +7205,7 @@ version: 4.9.0
           index: panel.index,
           panel: panel,
           isTrusted: (axesEvent === null || axesEvent === void 0 ? void 0 : axesEvent.isTrusted) || false,
-          direction: getDirection((_a = activePanel === null || activePanel === void 0 ? void 0 : activePanel.position) !== null && _a !== void 0 ? _a : camera.position, position)
+          direction: getDirection$1((_a = activePanel === null || activePanel === void 0 ? void 0 : activePanel.position) !== null && _a !== void 0 ? _a : camera.position, position)
         });
         flicking.trigger(event);
 
@@ -10511,11 +10797,13 @@ version: 4.9.0
         } : {
           height: panelSize
         };
-        var firstPanelSizeObj = {
+
+        var firstPanelSizeObj = __assign$2({
           size: panelSize,
-          height: referencePanel.height,
           margin: referencePanel.margin
-        };
+        }, !flicking.horizontal && {
+          height: referencePanel.height
+        });
 
         if (!flicking.noPanelStyleOverride) {
           this._strategy.updatePanelSizes(flicking, panelSizeObj);
@@ -11049,6 +11337,8 @@ version: 4.9.0
 
 
       __proto.resize = function (cached) {
+        var _a;
+
         var el = this.element;
         var flicking = this._flicking;
         var horizontal = flicking.horizontal,
@@ -11057,7 +11347,13 @@ version: 4.9.0
         if (cached) {
           this._size = cached.size;
           this._margin = __assign$2({}, cached.margin);
-          this._height = cached.height;
+          this._height = (_a = cached.height) !== null && _a !== void 0 ? _a : getElementSize({
+            el: el,
+            horizontal: false,
+            useFractionalSize: useFractionalSize,
+            useOffset: true,
+            style: getStyle(el)
+          });
         } else {
           var elStyle = getStyle(el);
           this._size = getElementSize({
@@ -13033,6 +13329,10 @@ version: 4.9.0
           return Promise.reject(new FlickingError(MESSAGE.ANIMATION_ALREADY_PLAYING, CODE.ANIMATION_ALREADY_PLAYING));
         }
 
+        if (this._control.holding) {
+          this._control.controller.release();
+        }
+
         return this._control.moveToPanel(panel, {
           duration: duration,
           direction: direction
@@ -13517,9 +13817,10 @@ version: 4.9.0
         var renderer = this._renderer;
         var control = this._control;
         var camera = this._camera;
-        var initialPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
-        if (!initialPanel) return;
-        var nearestAnchor = camera.findNearestAnchor(initialPanel.position);
+        var defaultPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
+        if (!defaultPanel) return;
+        var nearestAnchor = camera.findNearestAnchor(defaultPanel.position);
+        var initialPanel = nearestAnchor && defaultPanel.index !== nearestAnchor.panel.index ? nearestAnchor.panel : defaultPanel;
         control.setActive(initialPanel, null, false);
 
         if (!nearestAnchor) {
@@ -13580,7 +13881,7 @@ version: 4.9.0
        */
 
 
-      Flicking.VERSION = "4.9.0";
+      Flicking.VERSION = "4.9.3-beta.0";
       return Flicking;
     }(Component);