@egjs/flicking 4.6.1 → 4.7.0

package/dist/flicking.esm.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.6.1
+version: 4.7.0
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
@@ -1868,6 +1868,8 @@ function (_super) {
   };
 
   __proto.onRelease = function (ctx) {
+    var _a;
+
     var flicking = ctx.flicking,
         axesEvent = ctx.axesEvent,
         transitTo = ctx.transitTo; // Update last position to cope with Axes's animating behavior
@@ -1887,7 +1889,13 @@ function (_super) {
     var control = flicking.control;
     var position = axesEvent.destPos[POSITION_KEY];
     var duration = Math.max(axesEvent.duration, flicking.duration);
-    void control.moveToPosition(position, duration, axesEvent);
+
+    try {
+      void control.moveToPosition(position, duration, axesEvent);
+    } catch (err) {
+      transitTo(STATE_TYPE.IDLE);
+      axesEvent.setTo((_a = {}, _a[POSITION_KEY] = flicking.camera.position, _a), 0);
+    }
   };
 
   return DraggingState;
@@ -1963,7 +1971,11 @@ function (_super) {
       direction: getDirection(animatingContext.start, animatingContext.end),
       axesEvent: axesEvent
     }));
-    control.setActive(this._targetPanel, control.activePanel, axesEvent.isTrusted);
+    var targetPanel = this._targetPanel;
+
+    if (targetPanel) {
+      control.setActive(targetPanel, control.activePanel, axesEvent.isTrusted);
+    }
   };
 
   return AnimatingState;
@@ -2249,7 +2261,7 @@ function () {
     get: function () {
       var _a, _b;
 
-      return (_b = (_a = this._panInput) === null || _a === void 0 ? void 0 : _a.isEnable()) !== null && _b !== void 0 ? _b : false;
+      return (_b = (_a = this._panInput) === null || _a === void 0 ? void 0 : _a.isEnabled()) !== null && _b !== void 0 ? _b : false;
     },
     enumerable: false,
     configurable: true
@@ -2320,6 +2332,7 @@ function () {
     }, _a), {
       deceleration: flicking.deceleration,
       interruptable: flicking.interruptable,
+      nested: flicking.nested,
       easing: flicking.easing
     });
     this._panInput = new PanInput(flicking.viewport.element, {
@@ -2416,7 +2429,7 @@ function () {
     axis.circular = [controlParams.circular, controlParams.circular];
     axis.range = [controlParams.range.min, controlParams.range.max];
     axis.bounce = parseBounce(flicking.bounce, camera.size);
-    axes.axm.set((_a = {}, _a[POSITION_KEY] = controlParams.position, _a));
+    axes.axisManager.set((_a = {}, _a[POSITION_KEY] = controlParams.position, _a));
     return this;
   };
   /**
@@ -2532,7 +2545,7 @@ function () {
       var camera = flicking.camera;
       animate();
       var newPos = flicking.circularEnabled ? circulatePosition(position, camera.range.min, camera.range.max) : position;
-      axes.axm.set((_a = {}, _a[POSITION_KEY] = newPos, _a));
+      axes.axisManager.set((_a = {}, _a[POSITION_KEY] = newPos, _a));
       return Promise.resolve();
     } else {
       return new Promise(function (resolve, reject) {
@@ -2718,7 +2731,7 @@ function () {
    */
 
 
-  __proto.updatePosition = function (_progressInPanel) {
+  __proto.updatePosition = function (progressInPanel) {
     var flicking = getFlickingAttached(this._flicking);
     var camera = flicking.camera;
     var activePanel = this._activePanel;
@@ -3094,48 +3107,41 @@ function (_super) {
    */
 
   __proto.moveToPosition = function (position, duration, axesEvent) {
-    return __awaiter(this, void 0, void 0, function () {
-      var flicking, camera, activeAnchor, anchorAtCamera, state, snapThreshold, posDelta, absPosDelta, snapDelta, targetAnchor;
-      return __generator(this, function (_a) {
-        flicking = getFlickingAttached(this._flicking);
-        camera = flicking.camera;
-        activeAnchor = camera.findActiveAnchor();
-        anchorAtCamera = camera.findNearestAnchor(camera.position);
-        state = flicking.control.controller.state;
+    var flicking = getFlickingAttached(this._flicking);
+    var camera = flicking.camera;
+    var activeAnchor = camera.findActiveAnchor();
+    var anchorAtCamera = camera.findNearestAnchor(camera.position);
+    var state = flicking.control.controller.state;
 
-        if (!activeAnchor || !anchorAtCamera) {
-          return [2
-          /*return*/
-          , Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE))];
-        }
+    if (!activeAnchor || !anchorAtCamera) {
+      return Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE));
+    }
 
-        snapThreshold = this._calcSnapThreshold(position, activeAnchor);
-        posDelta = flicking.animating ? state.delta : position - camera.position;
-        absPosDelta = Math.abs(posDelta);
-        snapDelta = axesEvent && axesEvent.delta[POSITION_KEY] !== 0 ? Math.abs(axesEvent.delta[POSITION_KEY]) : absPosDelta;
-
-        if (snapDelta >= snapThreshold && snapDelta > 0) {
-          // Move to anchor at position
-          targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
-        } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
-          // Move to the adjacent panel
-          targetAnchor = this._findAdjacentAnchor(posDelta, anchorAtCamera);
-        } else {
-          // Restore to active panel
-          targetAnchor = anchorAtCamera;
-        }
+    var snapThreshold = this._calcSnapThreshold(position, activeAnchor);
 
-        this._triggerIndexChangeEvent(targetAnchor.panel, position, axesEvent);
+    var posDelta = flicking.animating ? state.delta : position - camera.position;
+    var absPosDelta = Math.abs(posDelta);
+    var snapDelta = axesEvent && axesEvent.delta[POSITION_KEY] !== 0 ? Math.abs(axesEvent.delta[POSITION_KEY]) : absPosDelta;
+    var targetAnchor;
 
-        return [2
-        /*return*/
-        , this._animateToPosition({
-          position: camera.clampToReachablePosition(targetAnchor.position),
-          duration: duration,
-          newActivePanel: targetAnchor.panel,
-          axesEvent: axesEvent
-        })];
-      });
+    if (snapDelta >= snapThreshold && snapDelta > 0) {
+      // Move to anchor at position
+      targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
+    } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
+      // Move to the adjacent panel
+      targetAnchor = this._findAdjacentAnchor(posDelta, anchorAtCamera);
+    } else {
+      // Restore to active panel
+      targetAnchor = anchorAtCamera;
+    }
+
+    this._triggerIndexChangeEvent(targetAnchor.panel, position, axesEvent);
+
+    return this._animateToPosition({
+      position: camera.clampToReachablePosition(targetAnchor.position),
+      duration: duration,
+      newActivePanel: targetAnchor.panel,
+      axesEvent: axesEvent
     });
   };
 
@@ -3324,35 +3330,26 @@ function (_super) {
 
 
   __proto.moveToPosition = function (position, duration, axesEvent) {
-    return __awaiter(this, void 0, void 0, function () {
-      var flicking, camera, targetPos, anchorAtPosition, targetPanel;
-      return __generator(this, function (_a) {
-        flicking = getFlickingAttached(this._flicking);
-        camera = flicking.camera;
-        targetPos = camera.clampToReachablePosition(position);
-        anchorAtPosition = camera.findAnchorIncludePosition(targetPos);
+    var flicking = getFlickingAttached(this._flicking);
+    var camera = flicking.camera;
+    var targetPos = camera.clampToReachablePosition(position);
+    var anchorAtPosition = camera.findAnchorIncludePosition(targetPos);
 
-        if (!anchorAtPosition) {
-          return [2
-          /*return*/
-          , Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE))];
-        }
+    if (!anchorAtPosition) {
+      return Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE));
+    }
 
-        targetPanel = anchorAtPosition.panel; // Trigger only change event
+    var targetPanel = anchorAtPosition.panel; // Trigger only change event
 
-        if (targetPanel !== this._activePanel) {
-          this._triggerIndexChangeEvent(targetPanel, position, axesEvent);
-        }
+    if (targetPanel !== this._activePanel) {
+      this._triggerIndexChangeEvent(targetPanel, position, axesEvent);
+    }
 
-        return [2
-        /*return*/
-        , this._animateToPosition({
-          position: this._stopAtEdge ? targetPos : position,
-          duration: duration,
-          newActivePanel: targetPanel,
-          axesEvent: axesEvent
-        })];
-      });
+    return this._animateToPosition({
+      position: this._stopAtEdge ? targetPos : position,
+      duration: duration,
+      newActivePanel: targetPanel,
+      axesEvent: axesEvent
     });
   };
 
@@ -3550,62 +3547,57 @@ function (_super) {
 
 
   __proto.moveToPosition = function (position, duration, axesEvent) {
-    return __awaiter(this, void 0, void 0, function () {
-      var flicking, camera, activePanel, axesRange, indexRange, cameraRange, clampedPosition, anchorAtPosition, prevPos, isOverThreshold, adjacentAnchor, targetPos, targetPanel, anchors, firstAnchor, lastAnchor, shouldBounceToFirst, shouldBounceToLast, targetAnchor;
-      return __generator(this, function (_a) {
-        flicking = getFlickingAttached(this._flicking);
-        camera = flicking.camera;
-        activePanel = this._activePanel;
-        axesRange = this._controller.range;
-        indexRange = this._indexRange;
-        cameraRange = camera.range;
-        clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);
-        anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
-
-        if (!anchorAtPosition || !activePanel) {
-          return [2
-          /*return*/
-          , Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE))];
-        }
+    var flicking = getFlickingAttached(this._flicking);
+    var camera = flicking.camera;
+    var activePanel = this._activePanel;
+    var axesRange = this._controller.range;
+    var indexRange = this._indexRange;
+    var cameraRange = camera.range;
+    var clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);
+    var anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
 
-        prevPos = activePanel.position;
-        isOverThreshold = Math.abs(position - prevPos) >= flicking.threshold;
-        adjacentAnchor = position > prevPos ? camera.getNextAnchor(anchorAtPosition) : camera.getPrevAnchor(anchorAtPosition);
-        anchors = camera.anchorPoints;
-        firstAnchor = anchors[0];
-        lastAnchor = anchors[anchors.length - 1];
-        shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
-        shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
-
-        if (shouldBounceToFirst || shouldBounceToLast) {
-          targetAnchor = position < cameraRange.min ? firstAnchor : lastAnchor;
-          targetPanel = targetAnchor.panel;
-          targetPos = targetAnchor.position;
-        } else if (isOverThreshold && anchorAtPosition.position !== activePanel.position) {
-          // Move to anchor at position
-          targetPanel = anchorAtPosition.panel;
-          targetPos = anchorAtPosition.position;
-        } else if (isOverThreshold && adjacentAnchor && isBetween(adjacentAnchor.index, indexRange.min, indexRange.max)) {
-          // Move to adjacent anchor
-          targetPanel = adjacentAnchor.panel;
-          targetPos = adjacentAnchor.position;
-        } else {
-          // Restore to active panel
-          targetPos = camera.clampToReachablePosition(activePanel.position);
-          targetPanel = activePanel;
-        }
+    if (!anchorAtPosition || !activePanel) {
+      return Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE));
+    }
 
-        this._triggerIndexChangeEvent(targetPanel, position, axesEvent);
+    var prevPos = activePanel.position;
+    var isOverThreshold = Math.abs(position - prevPos) >= flicking.threshold;
+    var adjacentAnchor = position > prevPos ? camera.getNextAnchor(anchorAtPosition) : camera.getPrevAnchor(anchorAtPosition);
+    var targetPos;
+    var targetPanel;
+    var anchors = camera.anchorPoints;
+    var firstAnchor = anchors[0];
+    var lastAnchor = anchors[anchors.length - 1];
+    var shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
+    var shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
+    var isAdjacent = adjacentAnchor && (indexRange.min <= indexRange.max ? isBetween(adjacentAnchor.index, indexRange.min, indexRange.max) : adjacentAnchor.index >= indexRange.min || adjacentAnchor.index <= indexRange.max);
+
+    if (shouldBounceToFirst || shouldBounceToLast) {
+      // In bounce area
+      var targetAnchor = position < cameraRange.min ? firstAnchor : lastAnchor;
+      targetPanel = targetAnchor.panel;
+      targetPos = targetAnchor.position;
+    } else if (isOverThreshold && anchorAtPosition.position !== activePanel.position) {
+      // Move to anchor at position
+      targetPanel = anchorAtPosition.panel;
+      targetPos = anchorAtPosition.position;
+    } else if (isOverThreshold && isAdjacent) {
+      // Move to adjacent anchor
+      targetPanel = adjacentAnchor.panel;
+      targetPos = adjacentAnchor.position;
+    } else {
+      // Restore to active panel
+      targetPos = camera.clampToReachablePosition(activePanel.position);
+      targetPanel = activePanel;
+    }
 
-        return [2
-        /*return*/
-        , this._animateToPosition({
-          position: targetPos,
-          duration: duration,
-          newActivePanel: targetPanel,
-          axesEvent: axesEvent
-        })];
-      });
+    this._triggerIndexChangeEvent(targetPanel, position, axesEvent);
+
+    return this._animateToPosition({
+      position: targetPos,
+      duration: duration,
+      newActivePanel: targetPanel,
+      axesEvent: axesEvent
     });
   };
 
@@ -3655,6 +3647,27 @@ function () {
     }, null);
   };
 
+  __proto.findNearestAnchor = function (position) {
+    var anchors = this._flicking.camera.anchorPoints;
+    if (anchors.length <= 0) return null;
+    var prevDist = Infinity;
+
+    for (var anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
+      var anchor = anchors[anchorIdx];
+      var dist = Math.abs(anchor.position - position);
+
+      if (dist > prevDist) {
+        // Return previous anchor
+        return anchors[anchorIdx - 1];
+      }
+
+      prevDist = dist;
+    } // Return last anchor
+
+
+    return anchors[anchors.length - 1];
+  };
+
   __proto.clampToReachablePosition = function (position) {
     var camera = this._flicking.camera;
     var range = camera.range;
@@ -3784,6 +3797,28 @@ function (_super) {
     });
   };
 
+  __proto.findNearestAnchor = function (position) {
+    var camera = this._flicking.camera;
+    var anchors = camera.anchorPoints;
+    if (anchors.length <= 0) return null;
+    var camRange = camera.range;
+    var minDist = Infinity;
+    var minDistIndex = -1;
+
+    for (var anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
+      var anchor = anchors[anchorIdx];
+      var dist = Math.min(Math.abs(anchor.position - position), Math.abs(anchor.position - camRange.min + camRange.max - position), Math.abs(position - camRange.min + camRange.max - anchor.position));
+
+      if (dist < minDist) {
+        minDist = dist;
+        minDistIndex = anchorIdx;
+      }
+    } // Return last anchor
+
+
+    return anchors[minDistIndex];
+  };
+
   __proto.findAnchorIncludePosition = function (position) {
     var camera = this._flicking.camera;
     var range = camera.range;
@@ -4552,24 +4587,7 @@ function () {
 
 
   __proto.findNearestAnchor = function (position) {
-    var anchors = this._anchors;
-    if (anchors.length <= 0) return null;
-    var prevDist = Infinity;
-
-    for (var anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
-      var anchor = anchors[anchorIdx];
-      var dist = Math.abs(anchor.position - position);
-
-      if (dist > prevDist) {
-        // Return previous anchor
-        return anchors[anchorIdx - 1];
-      }
-
-      prevDist = dist;
-    } // Return last anchor
-
-
-    return anchors[anchors.length - 1];
+    return this._mode.findNearestAnchor(position);
   };
   /**
    * Return {@link AnchorPoint} that matches {@link Flicking#currentPanel}
@@ -5253,29 +5271,31 @@ function () {
 
     void this.render();
 
-    if (!activePanel || activePanel.removed) {
-      if (panels.length <= 0) {
-        // All panels removed
-        camera.lookAt(0);
-      } else {
-        var targetIndex = (_a = activePanel === null || activePanel === void 0 ? void 0 : activePanel.index) !== null && _a !== void 0 ? _a : 0;
+    if (!flicking.animating) {
+      if (!activePanel || activePanel.removed) {
+        if (panels.length <= 0) {
+          // All panels removed
+          camera.lookAt(0);
+        } else {
+          var targetIndex = (_a = activePanel === null || activePanel === void 0 ? void 0 : activePanel.index) !== null && _a !== void 0 ? _a : 0;
 
-        if (targetIndex > panels.length - 1) {
-          targetIndex = panels.length - 1;
-        }
+          if (targetIndex > panels.length - 1) {
+            targetIndex = panels.length - 1;
+          }
 
-        void control.moveToPanel(panels[targetIndex], {
+          void control.moveToPanel(panels[targetIndex], {
+            duration: 0
+          }).catch(function () {
+            return void 0;
+          });
+        }
+      } else {
+        void control.moveToPanel(activePanel, {
           duration: 0
         }).catch(function () {
           return void 0;
         });
       }
-    } else {
-      void control.moveToPanel(control.activePanel, {
-        duration: 0
-      }).catch(function () {
-        return void 0;
-      });
     }
 
     flicking.camera.updateOffset();
@@ -6612,52 +6632,54 @@ function (_super) {
         noPanelStyleOverride = _l === void 0 ? false : _l,
         _m = _b.resizeOnContentsReady,
         resizeOnContentsReady = _m === void 0 ? false : _m,
-        _o = _b.needPanelThreshold,
-        needPanelThreshold = _o === void 0 ? 0 : _o,
-        _p = _b.preventEventsBeforeInit,
-        preventEventsBeforeInit = _p === void 0 ? true : _p,
-        _q = _b.deceleration,
-        deceleration = _q === void 0 ? 0.0075 : _q,
-        _r = _b.duration,
-        duration = _r === void 0 ? 500 : _r,
-        _s = _b.easing,
-        easing = _s === void 0 ? function (x) {
+        _o = _b.nested,
+        nested = _o === void 0 ? false : _o,
+        _p = _b.needPanelThreshold,
+        needPanelThreshold = _p === void 0 ? 0 : _p,
+        _q = _b.preventEventsBeforeInit,
+        preventEventsBeforeInit = _q === void 0 ? true : _q,
+        _r = _b.deceleration,
+        deceleration = _r === void 0 ? 0.0075 : _r,
+        _s = _b.duration,
+        duration = _s === void 0 ? 500 : _s,
+        _t = _b.easing,
+        easing = _t === void 0 ? function (x) {
       return 1 - Math.pow(1 - x, 3);
-    } : _s,
-        _t = _b.inputType,
-        inputType = _t === void 0 ? ["mouse", "touch"] : _t,
-        _u = _b.moveType,
-        moveType = _u === void 0 ? "snap" : _u,
-        _v = _b.threshold,
-        threshold = _v === void 0 ? 40 : _v,
-        _w = _b.interruptable,
-        interruptable = _w === void 0 ? true : _w,
-        _x = _b.bounce,
-        bounce = _x === void 0 ? "20%" : _x,
-        _y = _b.iOSEdgeSwipeThreshold,
-        iOSEdgeSwipeThreshold = _y === void 0 ? 30 : _y,
-        _z = _b.preventClickOnDrag,
-        preventClickOnDrag = _z === void 0 ? true : _z,
-        _0 = _b.disableOnInit,
-        disableOnInit = _0 === void 0 ? false : _0,
-        _1 = _b.renderOnlyVisible,
-        renderOnlyVisible = _1 === void 0 ? false : _1,
-        _2 = _b.virtual,
-        virtual = _2 === void 0 ? null : _2,
-        _3 = _b.autoInit,
-        autoInit = _3 === void 0 ? true : _3,
-        _4 = _b.autoResize,
-        autoResize = _4 === void 0 ? true : _4,
-        _5 = _b.useResizeObserver,
-        useResizeObserver = _5 === void 0 ? true : _5,
-        _6 = _b.resizeDebounce,
-        resizeDebounce = _6 === void 0 ? 0 : _6,
-        _7 = _b.maxResizeDebounce,
-        maxResizeDebounce = _7 === void 0 ? 100 : _7,
-        _8 = _b.externalRenderer,
-        externalRenderer = _8 === void 0 ? null : _8,
-        _9 = _b.renderExternal,
-        renderExternal = _9 === void 0 ? null : _9;
+    } : _t,
+        _u = _b.inputType,
+        inputType = _u === void 0 ? ["mouse", "touch"] : _u,
+        _v = _b.moveType,
+        moveType = _v === void 0 ? "snap" : _v,
+        _w = _b.threshold,
+        threshold = _w === void 0 ? 40 : _w,
+        _x = _b.interruptable,
+        interruptable = _x === void 0 ? true : _x,
+        _y = _b.bounce,
+        bounce = _y === void 0 ? "20%" : _y,
+        _z = _b.iOSEdgeSwipeThreshold,
+        iOSEdgeSwipeThreshold = _z === void 0 ? 30 : _z,
+        _0 = _b.preventClickOnDrag,
+        preventClickOnDrag = _0 === void 0 ? true : _0,
+        _1 = _b.disableOnInit,
+        disableOnInit = _1 === void 0 ? false : _1,
+        _2 = _b.renderOnlyVisible,
+        renderOnlyVisible = _2 === void 0 ? false : _2,
+        _3 = _b.virtual,
+        virtual = _3 === void 0 ? null : _3,
+        _4 = _b.autoInit,
+        autoInit = _4 === void 0 ? true : _4,
+        _5 = _b.autoResize,
+        autoResize = _5 === void 0 ? true : _5,
+        _6 = _b.useResizeObserver,
+        useResizeObserver = _6 === void 0 ? true : _6,
+        _7 = _b.resizeDebounce,
+        resizeDebounce = _7 === void 0 ? 0 : _7,
+        _8 = _b.maxResizeDebounce,
+        maxResizeDebounce = _8 === void 0 ? 100 : _8,
+        _9 = _b.externalRenderer,
+        externalRenderer = _9 === void 0 ? null : _9,
+        _10 = _b.renderExternal,
+        renderExternal = _10 === void 0 ? null : _10;
 
     var _this = _super.call(this) || this; // Internal states
 
@@ -6675,6 +6697,7 @@ function (_super) {
     _this._panelsPerView = panelsPerView;
     _this._noPanelStyleOverride = noPanelStyleOverride;
     _this._resizeOnContentsReady = resizeOnContentsReady;
+    _this._nested = nested;
     _this._virtual = virtual;
     _this._needPanelThreshold = needPanelThreshold;
     _this._preventEventsBeforeInit = preventEventsBeforeInit;
@@ -7148,6 +7171,24 @@ function (_super) {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "nested", {
+    /**
+     * If you enable this option on child Flicking when the Flicking is placed inside the Flicking, the parent Flicking will move in the same direction after the child Flicking reaches the first/last panel.
+     * If the parent Flicking and child Flicking have different horizontal option, you do not need to set this option.
+     * @ko Flicking 내부에 Flicking이 배치될 때 하위 Flicking에서 이 옵션을 활성화하면 하위 Flicking이 첫/마지막 패널에 도달한 뒤부터 같은 방향으로 상위 Flicking이 움직입니다.
+     * 만약 상위 Flicking과 하위 Flicking이 서로 다른 horizontal 옵션을 가지고 있다면 이 옵션을 설정할 필요가 없습니다.
+     * @type {boolean}
+     * @default false
+     */
+    get: function () {
+      return this._nested;
+    },
+    set: function (val) {
+      this._nested = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "needPanelThreshold", {
     // EVENTS
 
@@ -8384,7 +8425,7 @@ function (_super) {
    */
 
 
-  Flicking.VERSION = "4.6.1";
+  Flicking.VERSION = "4.7.0";
   return Flicking;
 }(Component);
 
@@ -8538,7 +8579,9 @@ var sync = (function (flicking, diffResult, rendered) {
     }
   }
 
-  renderer.updateAfterPanelChange(added, removed);
+  if (diffResult.added.length > 0 || diffResult.removed.length > 0) {
+    renderer.updateAfterPanelChange(added, removed);
+  }
 });
 
 var batchInsert = function (renderer, diffResult, addedElements, startIdx, endIdx) {