@egjs/flicking 4.8.1 → 4.9.2

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.8.1
+version: 4.9.2
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1087,7 +1087,7 @@ version: 4.8.1
     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;
     };
@@ -1248,6 +1248,29 @@ version: 4.8.1
 
       return arr;
     };
+    var getElementSize = function (_a) {
+      var el = _a.el,
+          horizontal = _a.horizontal,
+          useFractionalSize = _a.useFractionalSize,
+          useOffset = _a.useOffset,
+          style = _a.style;
+
+      if (useFractionalSize) {
+        var baseSize = parseFloat(horizontal ? style.width : style.height);
+        var isBorderBoxSizing = style.boxSizing === "border-box";
+        var border = horizontal ? parseFloat(style.borderLeftWidth || "0") + parseFloat(style.borderRightWidth || "0") : parseFloat(style.borderTopWidth || "0") + parseFloat(style.borderBottomWidth || "0");
+
+        if (isBorderBoxSizing) {
+          return useOffset ? baseSize : baseSize - border;
+        } else {
+          var padding = horizontal ? parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0") : parseFloat(style.paddingTop || "0") + parseFloat(style.paddingBottom || "0");
+          return useOffset ? baseSize + padding + border : baseSize + padding;
+        }
+      } else {
+        var sizeStr = horizontal ? "Width" : "Height";
+        return useOffset ? el["offset" + sizeStr] : el["client" + sizeStr];
+      }
+    };
     var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
       obj.__proto__ = proto;
       return obj;
@@ -1267,7 +1290,7 @@ version: 4.8.1
         parseArithmeticExpression: parseArithmeticExpression,
         parseCSSSizeValue: parseCSSSizeValue,
         parsePanelAlign: parsePanelAlign,
-        getDirection: getDirection,
+        getDirection: getDirection$1,
         parseElement: parseElement,
         getMinusCompensatedIndex: getMinusCompensatedIndex,
         includes: includes,
@@ -1282,6 +1305,7 @@ version: 4.8.1
         isBetween: isBetween,
         circulateIndex: circulateIndex,
         range: range,
+        getElementSize: getElementSize,
         setPrototypeOf: setPrototypeOf
     };
 
@@ -1330,10 +1354,6 @@ version: 4.8.1
       return FlickingError;
     }(Error);
 
-    /*
-     * Copyright (c) 2015 NAVER Corp.
-     * egjs projects are licensed under the MIT license
-     */
     /**
      * A component that manages viewport size
      * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
@@ -1345,7 +1365,8 @@ version: 4.8.1
       /**
        * @param el A viewport element<ko>뷰포트 엘리먼트</ko>
        */
-      function Viewport(el) {
+      function Viewport(flicking, el) {
+        this._flicking = flicking;
         this._el = el;
         this._width = 0;
         this._height = 0;
@@ -1461,8 +1482,21 @@ version: 4.8.1
       __proto.resize = function () {
         var el = this._el;
         var elStyle = getStyle(el);
-        this._width = el.clientWidth;
-        this._height = el.clientHeight;
+        var useFractionalSize = this._flicking.useFractionalSize;
+        this._width = getElementSize({
+          el: el,
+          horizontal: true,
+          useFractionalSize: useFractionalSize,
+          useOffset: false,
+          style: elStyle
+        });
+        this._height = getElementSize({
+          el: el,
+          horizontal: false,
+          useFractionalSize: useFractionalSize,
+          useOffset: false,
+          style: elStyle
+        });
         this._padding = {
           left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,
           right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,
@@ -1916,7 +1950,7 @@ version: 4.8.1
     license: MIT
     author: NAVER Corp.
     repository: git+https://github.com/naver/agent.git
-    version: 2.3.0
+    version: 2.4.2
     */
     function some(arr, callback) {
       var length = arr.length;
@@ -1940,7 +1974,7 @@ version: 4.8.1
 
       return null;
     }
-    function getUserAgent(agent) {
+    function getUserAgentString(agent) {
       var userAgent = agent;
 
       if (typeof userAgent === "undefined") {
@@ -2106,15 +2140,18 @@ version: 4.8.1
     }, {
       test: "windows nt",
       id: "window"
+    }, {
+      test: "win32|windows",
+      id: "window"
     }, {
       test: "iphone|ipad|ipod",
       id: "ios",
       versionTest: "iphone os|cpu os"
     }, {
-      test: "mac os x",
+      test: "macos|macintel|mac os x",
       id: "mac"
     }, {
-      test: "android",
+      test: "android|linux armv81",
       id: "android"
     }, {
       test: "tizen",
@@ -2124,85 +2161,17 @@ version: 4.8.1
       id: "webos"
     }];
 
-    function parseUserAgentData(osData) {
-      var userAgentData = navigator.userAgentData;
-      var brands = (userAgentData.uaList || userAgentData.brands).slice();
-      var isMobile = userAgentData.mobile || false;
-      var firstBrand = brands[0];
-      var browser = {
-        name: firstBrand.brand,
-        version: firstBrand.version,
-        majorVersion: -1,
-        webkit: false,
-        webkitVersion: "-1",
-        chromium: false,
-        chromiumVersion: "-1",
-        webview: !!findPresetBrand(WEBVIEW_PRESETS, brands).brand
-      };
-      var os = {
-        name: "unknown",
-        version: "-1",
-        majorVersion: -1
-      };
-      browser.webkit = !browser.chromium && some(WEBKIT_PRESETS, function (preset) {
-        return findBrand(brands, preset);
-      });
-      var chromiumBrand = findPresetBrand(CHROMIUM_PRESETS, brands);
-      browser.chromium = !!chromiumBrand.brand;
-      browser.chromiumVersion = chromiumBrand.version;
-
-      if (!browser.chromium) {
-        var webkitBrand = findPresetBrand(WEBKIT_PRESETS, brands);
-        browser.webkit = !!webkitBrand.brand;
-        browser.webkitVersion = webkitBrand.version;
-      }
-
-      if (osData) {
-        var platform_1 = osData.platform.toLowerCase();
-        var result = find(OS_PRESETS, function (preset) {
-          return new RegExp("" + preset.test, "g").exec(platform_1);
-        });
-        os.name = result ? result.id : platform_1;
-        os.version = osData.platformVersion;
-      }
-
-      var browserBrand = findPresetBrand(BROWSER_PRESETS, brands);
-
-      if (browserBrand.brand) {
-        browser.name = browserBrand.brand;
-        browser.version = osData ? osData.uaFullVersion : browserBrand.version;
-      }
-
-      if (navigator.platform === "Linux armv8l") {
-        os.name = "android";
-      } else if (browser.webkit) {
-        os.name = isMobile ? "ios" : "mac";
-      }
-
-      if (os.name === "ios" && browser.webview) {
-        browser.version = "-1";
-      }
-
-      os.version = convertVersion(os.version);
-      browser.version = convertVersion(browser.version);
-      os.majorVersion = parseInt(os.version, 10);
-      browser.majorVersion = parseInt(browser.version, 10);
-      return {
-        browser: browser,
-        os: os,
-        isMobile: isMobile,
-        isHints: true
-      };
+    function isWebView(userAgent) {
+      return !!findPreset(WEBVIEW_PRESETS, userAgent).preset;
     }
-
-    function parseUserAgent(userAgent) {
-      var nextAgent = getUserAgent(userAgent);
+    function getLegacyAgent(userAgent) {
+      var nextAgent = getUserAgentString(userAgent);
       var isMobile = !!/mobi/g.exec(nextAgent);
       var browser = {
         name: "unknown",
         version: "-1",
         majorVersion: -1,
-        webview: !!findPreset(WEBVIEW_PRESETS, nextAgent).preset,
+        webview: isWebView(nextAgent),
         chromium: false,
         chromiumVersion: "-1",
         webkit: false,
@@ -2240,7 +2209,7 @@ version: 4.8.1
 
       if (browserPreset) {
         browser.name = browserPreset.id;
-        browser.version = browserVersion;
+        browser.version = browserVersion; // Early whale bugs
 
         if (browser.webview && os.name === "ios" && browser.name !== "safari") {
           browser.webview = false;
@@ -2255,6 +2224,80 @@ version: 4.8.1
         isHints: false
       };
     }
+
+    function getClientHintsAgent(osData) {
+      var userAgentData = navigator.userAgentData;
+      var brands = (userAgentData.uaList || userAgentData.brands).slice();
+      var fullVersionList = osData && osData.fullVersionList;
+      var isMobile = userAgentData.mobile || false;
+      var firstBrand = brands[0];
+      var platform = (osData && osData.platform || userAgentData.platform || navigator.platform).toLowerCase();
+      var browser = {
+        name: firstBrand.brand,
+        version: firstBrand.version,
+        majorVersion: -1,
+        webkit: false,
+        webkitVersion: "-1",
+        chromium: false,
+        chromiumVersion: "-1",
+        webview: !!findPresetBrand(WEBVIEW_PRESETS, brands).brand || isWebView(getUserAgentString())
+      };
+      var os = {
+        name: "unknown",
+        version: "-1",
+        majorVersion: -1
+      };
+      browser.webkit = !browser.chromium && some(WEBKIT_PRESETS, function (preset) {
+        return findBrand(brands, preset);
+      });
+      var chromiumBrand = findPresetBrand(CHROMIUM_PRESETS, brands);
+      browser.chromium = !!chromiumBrand.brand;
+      browser.chromiumVersion = chromiumBrand.version;
+
+      if (!browser.chromium) {
+        var webkitBrand = findPresetBrand(WEBKIT_PRESETS, brands);
+        browser.webkit = !!webkitBrand.brand;
+        browser.webkitVersion = webkitBrand.version;
+      }
+
+      var platfomResult = find(OS_PRESETS, function (preset) {
+        return new RegExp("" + preset.test, "g").exec(platform);
+      });
+      os.name = platfomResult ? platfomResult.id : "";
+
+      if (osData) {
+        os.version = osData.platformVersion;
+      }
+
+      if (fullVersionList && fullVersionList.length) {
+        var browserBrandByFullVersionList = findPresetBrand(BROWSER_PRESETS, fullVersionList);
+        browser.name = browserBrandByFullVersionList.brand || browser.name;
+        browser.version = browserBrandByFullVersionList.version || browser.version;
+      } else {
+        var browserBrand = findPresetBrand(BROWSER_PRESETS, brands);
+        browser.name = browserBrand.brand || browser.name;
+        browser.version = browserBrand.brand && osData ? osData.uaFullVersion : browserBrand.version;
+      }
+
+      if (browser.webkit) {
+        os.name = isMobile ? "ios" : "mac";
+      }
+
+      if (os.name === "ios" && browser.webview) {
+        browser.version = "-1";
+      }
+
+      os.version = convertVersion(os.version);
+      browser.version = convertVersion(browser.version);
+      os.majorVersion = parseInt(os.version, 10);
+      browser.majorVersion = parseInt(browser.version, 10);
+      return {
+        browser: browser,
+        os: os,
+        isMobile: isMobile,
+        isHints: true
+      };
+    }
     /**
      * Extracts browser and operating system information from the user agent string.
      * @ko 유저 에이전트 문자열에서 브라우저와 운영체제 정보를 추출한다.
@@ -2269,19 +2312,121 @@ version: 4.8.1
 
     function agent(userAgent) {
       if (typeof userAgent === "undefined" && hasUserAgentData()) {
-        return parseUserAgentData();
+        return getClientHintsAgent();
       } else {
-        return parseUserAgent(userAgent);
+        return getLegacyAgent(userAgent);
       }
     }
 
     /*
-    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.6.0
     */
 
     /*! *****************************************************************************
@@ -2334,6 +2479,18 @@ version: 4.8.1
 
       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;
@@ -2349,6 +2506,10 @@ version: 4.8.1
       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;
@@ -2423,6 +2584,8 @@ version: 4.8.1
       } 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;
@@ -2484,7 +2647,7 @@ version: 4.8.1
     };
     /**
      * 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
      */
@@ -2551,7 +2714,7 @@ version: 4.8.1
         return 0;
       }
 
-      var v = "" + val;
+      var v = "".concat(val);
 
       if (v.indexOf("e") >= 0) {
         // Exponential Format
@@ -2598,6 +2761,33 @@ version: 4.8.1
       });
       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 getInitialPos = function (axis, startPos) {
+      return __assign$1(__assign$1({}, Object.keys(axis).reduce(function (result, key) {
+        var _a;
+
+        var _b, _c;
+
+        return Object.assign(result, (_a = {}, _a[key] = (_c = (_b = axis[key].startPos) !== null && _b !== void 0 ? _b : axis[key].range[0]) !== null && _c !== void 0 ? _c : 0, _a));
+      }, {})), startPos);
+    };
+    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;
 
@@ -2807,6 +2997,8 @@ version: 4.8.1
 
 
       __proto.triggerChange = function (pos, depaPos, option, holding) {
+        var _this = this;
+
         if (holding === void 0) {
           holding = false;
         }
@@ -2829,12 +3021,18 @@ version: 4.8.1
           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);
         }
@@ -2993,7 +3191,7 @@ version: 4.8.1
       __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 {
@@ -3045,6 +3243,10 @@ version: 4.8.1
       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]];
@@ -3195,6 +3397,7 @@ version: 4.8.1
         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]);
@@ -3794,7 +3997,7 @@ version: 4.8.1
         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;
         })) {
@@ -3842,7 +4045,7 @@ version: 4.8.1
           event: event
         };
 
-        if (useDuration) {
+        if (useAnimation) {
           var duration = this._animationManager.getDuration(destPos, depaPos);
 
           this._animationManager.animateTo(destPos, duration, changeOption);
@@ -4429,6 +4632,7 @@ version: 4.8.1
      * @param {Number[]} [range] The coordinate of range <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>
@@ -4463,50 +4667,50 @@ version: 4.8.1
      *
      * @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=null] 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
@@ -4571,9 +4775,7 @@ version: 4.8.1
 
         _this.eventManager.setAnimationManager(_this.animationManager);
 
-        if (startPos) {
-          _this.eventManager.triggerChange(startPos);
-        }
+        _this.eventManager.triggerChange(getInitialPos(axis, startPos));
 
         return _this;
       }
@@ -4690,7 +4892,7 @@ version: 4.8.1
        *   "xOther": {
        *      range: [-100, 100]
        *   },
-       * 	 "zoom": {
+       *    "zoom": {
        *      range: [50, 30]
        *   }
        * });
@@ -4719,7 +4921,7 @@ version: 4.8.1
        *   "xOther": {
        *      range: [-100, 100]
        *   },
-       * 	 "zoom": {
+       *    "zoom": {
        *      range: [50, 30]
        *   }
        * });
@@ -4758,7 +4960,7 @@ version: 4.8.1
        *   "xOther": {
        *      range: [-100, 100]
        *   },
-       * 	 "zoom": {
+       *    "zoom": {
        *      range: [50, 30]
        *   }
        * });
@@ -4854,7 +5056,7 @@ version: 4.8.1
        *   "xOther": {
        *      range: [-100, 100]
        *   },
-       * 	 "zoom": {
+       *    "zoom": {
        *      range: [50, 30]
        *   }
        * });
@@ -4893,7 +5095,7 @@ version: 4.8.1
        */
 
 
-      Axes.VERSION = "3.2.2";
+      Axes.VERSION = "3.6.0";
       /* eslint-enable */
 
       /**
@@ -4966,10 +5168,14 @@ version: 4.8.1
        */
 
       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) {
@@ -4979,13 +5185,6 @@ version: 4.8.1
       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 모듈의 옵션 객체
@@ -5019,8 +5218,8 @@ version: 4.8.1
      * @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.
@@ -5033,7 +5232,7 @@ version: 4.8.1
      * // 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>
      */
 
@@ -5044,8 +5243,6 @@ version: 4.8.1
        *
        */
       function PanInput(el, options) {
-        var _this = this;
-
         this.axes = [];
         this.element = null;
         this._enabled = false;
@@ -5053,16 +5250,7 @@ version: 4.8.1
         this._atRightEdge = false;
         this._rightEdgeTimer = 0;
 
-        this._forceRelease = function () {
-          var activeEvent = _this._activeEvent;
-          var prevEvent = activeEvent.prevEvent;
-
-          _this._detachWindowEvent(activeEvent);
-
-          activeEvent.onRelease();
-
-          _this._observer.release(_this, prevEvent, [0, 0]);
-        };
+        this._voidFunction = function () {};
 
         this.element = $(el);
         this.options = __assign$1({
@@ -5083,19 +5271,7 @@ version: 4.8.1
       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;
       };
 
@@ -5158,7 +5334,7 @@ version: 4.8.1
       };
       /**
        * Returns whether to use an input device
-       * @ko 입력 장치를 사용 여부를 반환한다.
+       * @ko 입력 장치 사용 여부를 반환한다.
        * @return {Boolean} Whether to use an input device <ko>입력장치 사용여부</ko>
        */
 
@@ -5166,6 +5342,24 @@ version: 4.8.1
       __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 activeEvent = this._activeEvent;
@@ -5214,8 +5408,7 @@ version: 4.8.1
 
           if (swipeLeftToRight) {
             // iOS swipe left => right
-            this._forceRelease();
-
+            this.release();
             return;
           } else if (this._atRightEdge) {
             clearTimeout(this._rightEdgeTimer); // - is right to left
@@ -5227,13 +5420,13 @@ version: 4.8.1
             } 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;
@@ -5269,7 +5462,7 @@ version: 4.8.1
         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();
 
@@ -5302,6 +5495,11 @@ version: 4.8.1
         });
       };
 
+      __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;
 
@@ -5323,7 +5521,7 @@ version: 4.8.1
         activeEvent.move.forEach(function (event) {
           var _a;
 
-          (_a = _this.element) === null || _a === void 0 ? void 0 : _a.addEventListener(event, function () {});
+          (_a = _this.element) === null || _a === void 0 ? void 0 : _a.addEventListener(event, _this._voidFunction);
         });
       };
 
@@ -5339,30 +5537,20 @@ version: 4.8.1
         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 () {});
+          (_a = _this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, _this._voidFunction);
         });
         this._enabled = false;
         this._observer = null;
       };
 
-      __proto._applyScale = function (properties, direction) {
-        var offset = [0, 0];
-        var scale = this.options.scale;
-
-        if (direction[0]) {
-          offset[0] = properties[0] * scale[0];
-        }
-
-        if (direction[1]) {
-          offset[1] = properties[1] * scale[1];
-        }
-
-        return offset;
-      };
-
       return PanInput;
     }();
 
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
+     */
+
     var Axes$1 = Axes;
 
     /**
@@ -5537,7 +5725,7 @@ version: 4.8.1
         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);
@@ -5625,7 +5813,7 @@ version: 4.8.1
         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);
@@ -5686,7 +5874,7 @@ version: 4.8.1
         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);
@@ -5788,7 +5976,7 @@ version: 4.8.1
             index: clickedPanel.index,
             panel: clickedPanel,
             // Direction to the clicked panel
-            direction: getDirection(cameraPosition, clickedPanelPosition)
+            direction: getDirection$1(cameraPosition, clickedPanelPosition)
           }));
         }
       };
@@ -5943,7 +6131,7 @@ version: 4.8.1
         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;
@@ -6385,6 +6573,20 @@ version: 4.8.1
         (_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}의 상태를 갱신합니다
@@ -6696,6 +6898,19 @@ version: 4.8.1
 
         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을 업데이트합니다
@@ -6856,7 +7071,7 @@ version: 4.8.1
             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, {
@@ -6876,7 +7091,7 @@ version: 4.8.1
           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);
 
@@ -8952,7 +9167,7 @@ version: 4.8.1
     license: MIT
     author: NAVER Corp.
     repository: https://github.com/naver/egjs-imready
-    version: 1.2.0
+    version: 1.3.0
     */
 
     /*! *****************************************************************************
@@ -9039,8 +9254,12 @@ version: 4.8.1
 
       return !!target.getAttribute(prefix + "width");
     }
-    function hasLoadingAttribute(target) {
-      return "loading" in target && target.getAttribute("loading") === "lazy";
+    function hasLoadingAttribute(target, prefix) {
+      if (prefix === void 0) {
+        prefix = "data-";
+      }
+
+      return "loading" in target && target.getAttribute("loading") === "lazy" || !!target.getAttribute(prefix + "lazy");
     }
     function hasSkipAttribute(target, prefix) {
       if (prefix === void 0) {
@@ -9165,6 +9384,11 @@ version: 4.8.1
 
           if (e && e.type === "error") {
             _this.onError(_this.element);
+          }
+
+          if (_this.hasLoading && _this.checkElement()) {
+            // I'm not ready
+            return;
           } // I'm pre-ready and ready!
 
 
@@ -9180,7 +9404,7 @@ version: 4.8.1
         var prefix = _this.options.prefix;
         _this.hasDataSize = hasSizeAttribute(element, prefix);
         _this.isSkip = hasSkipAttribute(element, prefix);
-        _this.hasLoading = hasLoadingAttribute(element);
+        _this.hasLoading = hasLoadingAttribute(element, prefix);
         return _this;
       }
 
@@ -9566,6 +9790,7 @@ version: 4.8.1
 
         var tagName = element.tagName.toLowerCase();
         var loaders = this.options.loaders;
+        var prefix = options.prefix;
         var tags = Object.keys(loaders);
 
         if (loaders[tagName]) {
@@ -9575,7 +9800,7 @@ version: 4.8.1
         var loader = new ElementLoader(element, options);
         var children = toArray(element.querySelectorAll(tags.join(", ")));
         loader.setHasLoading(children.some(function (el) {
-          return hasLoadingAttribute(el);
+          return hasLoadingAttribute(el, prefix);
         }));
         var withPreReady = false;
         var childrenImReady = this.clone().on("error", function (e) {
@@ -9660,13 +9885,13 @@ version: 4.8.1
          * ```
          */
 
-        this.trigger("error", {
+        this.trigger(new ComponentEvent$1("error", {
           element: info.element,
           index: index,
           target: target,
           errorCount: this.getErrorCount(),
           totalErrorCount: ++this.totalErrorCount
-        });
+        }));
       };
 
       __proto.onPreReadyElement = function (index) {
@@ -9700,7 +9925,7 @@ version: 4.8.1
          * ```
          */
 
-        this.trigger("preReadyElement", {
+        this.trigger(new ComponentEvent$1("preReadyElement", {
           element: info.element,
           index: index,
           preReadyCount: this.preReadyCount,
@@ -9710,7 +9935,7 @@ version: 4.8.1
           isReady: this.isReady(),
           hasLoading: info.hasLoading,
           isSkip: info.isSkip
-        });
+        }));
       };
 
       __proto.onPreReady = function () {
@@ -9742,12 +9967,12 @@ version: 4.8.1
          * ```
          */
 
-        this.trigger("preReady", {
+        this.trigger(new ComponentEvent$1("preReady", {
           readyCount: this.readyCount,
           totalCount: this.totalCount,
           isReady: this.isReady(),
           hasLoading: this.hasLoading()
-        });
+        }));
       };
 
       __proto.onReadyElement = function (index) {
@@ -9781,7 +10006,7 @@ version: 4.8.1
          * ```
          */
 
-        this.trigger("readyElement", {
+        this.trigger(new ComponentEvent$1("readyElement", {
           index: index,
           element: info.element,
           hasError: info.hasError,
@@ -9795,7 +10020,7 @@ version: 4.8.1
           hasLoading: info.hasLoading,
           isPreReadyOver: this.isPreReadyOver,
           isSkip: info.isSkip
-        });
+        }));
       };
 
       __proto.onReady = function () {
@@ -9829,11 +10054,11 @@ version: 4.8.1
          * });
          * ```
          */
-        this.trigger("ready", {
+        this.trigger(new ComponentEvent$1("ready", {
           errorCount: this.getErrorCount(),
           totalErrorCount: this.totalErrorCount,
           totalCount: this.totalCount
-        });
+        }));
       };
 
       __proto.getErrorCount = function () {
@@ -10458,11 +10683,13 @@ version: 4.8.1
         } : {
           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);
@@ -10996,17 +11223,32 @@ version: 4.8.1
 
 
       __proto.resize = function (cached) {
+        var _a;
+
         var el = this.element;
         var flicking = this._flicking;
-        var horizontal = flicking.horizontal;
+        var horizontal = flicking.horizontal,
+            useFractionalSize = flicking.useFractionalSize;
 
         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 = horizontal ? el.offsetWidth : el.offsetHeight;
+          this._size = getElementSize({
+            el: el,
+            horizontal: horizontal,
+            useFractionalSize: useFractionalSize,
+            useOffset: true,
+            style: elStyle
+          });
           this._margin = horizontal ? {
             prev: parseFloat(elStyle.marginLeft || "0"),
             next: parseFloat(elStyle.marginRight || "0")
@@ -11014,7 +11256,13 @@ version: 4.8.1
             prev: parseFloat(elStyle.marginTop || "0"),
             next: parseFloat(elStyle.marginBottom || "0")
           };
-          this._height = horizontal ? el.offsetHeight : this._size;
+          this._height = horizontal ? getElementSize({
+            el: el,
+            horizontal: false,
+            useFractionalSize: useFractionalSize,
+            useOffset: true,
+            style: elStyle
+          }) : this._size;
         }
 
         this.updatePosition();
@@ -11724,10 +11972,12 @@ version: 4.8.1
             resizeDebounce = _8 === void 0 ? 0 : _8,
             _9 = _b.maxResizeDebounce,
             maxResizeDebounce = _9 === void 0 ? 100 : _9,
-            _10 = _b.externalRenderer,
-            externalRenderer = _10 === void 0 ? null : _10,
-            _11 = _b.renderExternal,
-            renderExternal = _11 === void 0 ? null : _11;
+            _10 = _b.useFractionalSize,
+            useFractionalSize = _10 === void 0 ? false : _10,
+            _11 = _b.externalRenderer,
+            externalRenderer = _11 === void 0 ? null : _11,
+            _12 = _b.renderExternal,
+            renderExternal = _12 === void 0 ? null : _12;
 
         var _this = _super.call(this) || this; // Internal states
 
@@ -11767,10 +12017,11 @@ version: 4.8.1
         _this._useResizeObserver = useResizeObserver;
         _this._resizeDebounce = resizeDebounce;
         _this._maxResizeDebounce = maxResizeDebounce;
+        _this._useFractionalSize = useFractionalSize;
         _this._externalRenderer = externalRenderer;
         _this._renderExternal = renderExternal; // Create core components
 
-        _this._viewport = new Viewport(getElement(root));
+        _this._viewport = new Viewport(_this, getElement(root));
         _this._autoResizer = new AutoResizer(_this);
         _this._renderer = _this._createRenderer();
         _this._camera = _this._createCamera();
@@ -12683,6 +12934,23 @@ version: 4.8.1
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "useFractionalSize", {
+        /**
+         * By enabling this, Flicking will calculate all internal size with CSS width computed with getComputedStyle.
+         * This can prevent 1px offset issue in some cases where panel size has the fractional part.
+         * All sizes will have the original size before CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform} is applied on the element.
+         * @ko 이 옵션을 활성화할 경우, Flicking은 내부의 모든 크기를 {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect getBoundingClientRect}를 이용하여 계산합니다.
+         * 이를 통해, 패널 크기에 소수점을 포함할 경우에 발생할 수 있는 일부 1px 오프셋 이슈를 해결 가능합니다.
+         * 모든 크기는 CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform}이 엘리먼트에 적용되기 이전의 크기를 사용할 것입니다.
+         * @type {boolean}
+         * @default false
+         */
+        get: function () {
+          return this._useFractionalSize;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "externalRenderer", {
         /**
          * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
@@ -12947,6 +13215,10 @@ version: 4.8.1
           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
@@ -13431,9 +13703,10 @@ version: 4.8.1
         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) {
@@ -13494,7 +13767,7 @@ version: 4.8.1
        */
 
 
-      Flicking.VERSION = "4.8.1";
+      Flicking.VERSION = "4.9.2";
       return Flicking;
     }(Component);