@egjs/flicking 4.13.2-beta.0 → 4.14.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.13.2-beta.0
+version: 4.14.0
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1089,11 +1089,14 @@ version: 4.13.2-beta.0
       }
       return -1;
     };
-    var getProgress = function (pos, prev, next) {
+    var getProgress$1 = function (pos, prev, next) {
       return (pos - prev) / (next - prev);
     };
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     var getStyle = function (el) {
+      if (!el) {
+        return {};
+      }
       return window.getComputedStyle(el) || el.currentStyle;
     };
     var setSize = function (el, _a) {
@@ -1207,7 +1210,7 @@ version: 4.13.2-beta.0
         find: find$1,
         findRight: findRight,
         findIndex: findIndex,
-        getProgress: getProgress,
+        getProgress: getProgress$1,
         getStyle: getStyle,
         setSize: setSize,
         isBetween: isBetween,
@@ -1401,13 +1404,59 @@ version: 4.13.2-beta.0
       return Viewport;
     }();
 
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
+     */
+    /**
+     * A component that detects size change and trigger resize method when the autoResize option is used
+     * @ko autoResize 옵션을 사용할 때 크기 변화를 감지하고 Flicking의 resize를 호출하는 컴포넌트
+     */
     var AutoResizer = /*#__PURE__*/function () {
       function AutoResizer(flicking) {
         var _this = this;
-        this._onResize = function () {
+        this._onResizeWrapper = function () {
+          _this._onResize([]);
+        };
+        this._onResize = function (entries) {
           var flicking = _this._flicking;
           var resizeDebounce = flicking.resizeDebounce;
           var maxResizeDebounce = flicking.maxResizeDebounce;
+          var resizedViewportElement = flicking.element;
+          // 현재 구현에서 리사이즈 옵저빙 대상은 패널과 뷰포트 2개만 존재.
+          // 아래는 뷰포트만 변경되었을 때 동작해야하는 로직이 있으므로 아래와 같이 조건문을 건다.
+          // 패널 쪽에서는 리사이즈 감지에 resizeObserver를 사용하지 않는 경우가 없으므로 이 조건은 곧 뷰포트만 리사이즈가 된 경우를 의미한다.
+          var isResizedViewportOnly = entries.find(function (e) {
+            return e.target === flicking.element;
+          }) && entries.length === 1;
+          // 참고: resizeObserver를 사용하지 않은 경우에는 entries.length가 0으로 오는데 이 경우에는 그냥 항상 리사이즈가 진행되도록 한다.
+          //   (vw, vh 등을 사용하는 경우 이상 동작이 발생할 여지가 있기 때문이다)
+          if (isResizedViewportOnly) {
+            // resize 이벤트가 발생했으나 이전과 width, height의 변화가 없다면 이후 로직을 진행하지 않는다.
+            var beforeSize = {
+              width: flicking.viewport.width,
+              height: flicking.viewport.height
+            };
+            var afterSize = {
+              width: getElementSize({
+                el: resizedViewportElement,
+                horizontal: true,
+                useFractionalSize: _this._flicking.useFractionalSize,
+                useOffset: false,
+                style: getStyle(resizedViewportElement)
+              }),
+              height: getElementSize({
+                el: resizedViewportElement,
+                horizontal: false,
+                useFractionalSize: _this._flicking.useFractionalSize,
+                useOffset: false,
+                style: getStyle(resizedViewportElement)
+              })
+            };
+            if (beforeSize.height === afterSize.height && beforeSize.width === afterSize.width) {
+              return;
+            }
+          }
           if (resizeDebounce <= 0) {
             void flicking.resize();
           } else {
@@ -1433,12 +1482,12 @@ version: 4.13.2-beta.0
         // eslint-disable-next-line @typescript-eslint/member-ordering
         this._skipFirstResize = function () {
           var isFirstResize = true;
-          return function () {
+          return function (entries) {
             if (isFirstResize) {
               isFirstResize = false;
               return;
             }
-            _this._onResize();
+            _this._onResize(entries);
           };
         }();
         this._flicking = flicking;
@@ -1464,14 +1513,46 @@ version: 4.13.2-beta.0
         if (flicking.useResizeObserver && !!window.ResizeObserver) {
           var viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
           var resizeObserver = viewportSizeNot0 ? new ResizeObserver(this._skipFirstResize) : new ResizeObserver(this._onResize);
-          resizeObserver.observe(flicking.viewport.element);
           this._resizeObserver = resizeObserver;
+          this.observe(flicking.viewport.element);
+          if (flicking.observePanelResize) {
+            this.observePanels();
+          }
         } else {
-          window.addEventListener("resize", this._onResize);
+          window.addEventListener("resize", this._onResizeWrapper);
         }
         this._enabled = true;
         return this;
       };
+      __proto.observePanels = function () {
+        var _this = this;
+        this._flicking.panels.forEach(function (panel) {
+          _this.observe(panel.element);
+        });
+        return this;
+      };
+      __proto.unobservePanels = function () {
+        var _this = this;
+        this._flicking.panels.forEach(function (panel) {
+          _this.unobserve(panel.element);
+        });
+        return this;
+      };
+      __proto.observe = function (element) {
+        var resizeObserver = this._resizeObserver;
+        if (!resizeObserver) return this;
+        resizeObserver.observe(element);
+        return this;
+      };
+      __proto.unobserve = function (element) {
+        var resizeObserver = this._resizeObserver;
+        if (!resizeObserver) return this;
+        resizeObserver.unobserve(element);
+        if (this._flicking.observePanelResize) {
+          this.unobservePanels();
+        }
+        return this;
+      };
       __proto.disable = function () {
         if (!this._enabled) return this;
         var resizeObserver = this._resizeObserver;
@@ -1479,7 +1560,7 @@ version: 4.13.2-beta.0
           resizeObserver.disconnect();
           this._resizeObserver = null;
         } else {
-          window.removeEventListener("resize", this._onResize);
+          window.removeEventListener("resize", this._onResizeWrapper);
         }
         this._enabled = false;
         return this;
@@ -2171,6 +2252,20 @@ version: 4.13.2-beta.0
     function keys(obj) {
       return Object.keys(obj);
     }
+    /**
+     * @hidden
+     */
+
+    function isObject(val) {
+      return typeof val === "object";
+    }
+    /**
+     * @hidden
+     */
+
+    function isFunction(val) {
+      return typeof val === "function";
+    }
 
     /**
      * cfcs
@@ -2220,6 +2315,15 @@ version: 4.13.2-beta.0
 
       d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     }
+    function __spreadArray(to, from, pack) {
+      if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+          ar[i] = from[i];
+        }
+      }
+      return to.concat(ar || Array.prototype.slice.call(from));
+    }
 
     /**
      * cfcs
@@ -2548,6 +2652,56 @@ version: 4.13.2-beta.0
       var prototype = Constructor.prototype;
       injectReactiveSubscribe(prototype);
     }
+
+    /**
+     * cfcs
+     * Copyright (c) 2022-present NAVER Corp.
+     * MIT license
+     */
+
+    function makeReactiveObject(setup, all) {
+      var result = isFunction(setup) ? setup() : setup;
+      var reactiveObject = {};
+      defineObservers(reactiveObject);
+      keys(result).forEach(function (name) {
+        var value = result[name];
+
+        if (isObserver(value)) {
+          setObserver(reactiveObject, name, value);
+        } else {
+          setObserver(reactiveObject, name, observe(value));
+        }
+
+        Observe(name)(reactiveObject, name);
+      });
+      injectReactiveSubscribe(reactiveObject);
+      return reactiveObject;
+    }
+    /**
+     * @description Make the return value of the corresponding object or function a reactive object.
+     * @category Reactive
+     * @param setup - The target object or function to which reactive is applied
+     * @returns Makes all values into reactive objects.
+     * @example
+     * ```ts
+     * import { reactive } from "@cfcs/core";
+     *
+     * const obj = reactive({
+     *  value1: 1,
+     *  value2: 2,
+     * });
+     *
+     * obj.subscribe("value1", value1 => {
+     *   console.log(value1);
+     * });
+     * obj.value1 = 2;
+     * ```
+     */
+
+
+    function reactive(setup) {
+      return makeReactiveObject(setup);
+    }
     /**
      * @description Creates a mutable ref object. You can access the `.current` value and detect the value change through `.subscribe`.
      * @category Reactive
@@ -2575,6 +2729,37 @@ version: 4.13.2-beta.0
     function computed(computedCallback) {
       return new ComputedObserver(computedCallback);
     }
+
+    /**
+     * cfcs
+     * Copyright (c) 2022-present NAVER Corp.
+     * MIT license
+     */
+    /**
+     * @hidden
+     */
+
+    function withReactiveMethods(ref, methods) {
+      var obj = {};
+
+      if (!methods) {
+        return obj;
+      }
+
+      methods.forEach(function (name) {
+        obj[name] = function () {
+          var args = [];
+
+          for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+          }
+
+          var current = ref.current || ref.value;
+          return current[name].apply(current, args);
+        };
+      });
+      return obj;
+    }
     /**
      * @hidden
      */
@@ -2628,6 +2813,227 @@ version: 4.13.2-beta.0
 
       return observers[name];
     }
+    /**
+     * @hidden
+     */
+
+    function setObserver(instance, name, observer) {
+      var observers = getObservers(instance);
+      observers[name] = observer;
+    }
+    /**
+     * @description Whether that object is an observer instance
+     * @category Reactive
+     */
+
+    function isObserver(val) {
+      return val && isObject(val) && "current" in val && "subscribe" in val && "unsubscribe" in val;
+    }
+
+    /**
+     * @category Reactive
+     * @hidden
+     */
+
+    function adaptReactive(adapter, props) {
+      var objectAdapter = isFunction(adapter) ? {
+        setup: adapter
+      } : adapter;
+
+      function getProps() {
+        var _a, _b, _c, _d, _e;
+
+        return (_e = (_c = (_a = props === null || props === void 0 ? void 0 : props()) !== null && _a !== void 0 ? _a : (_b = objectAdapter.props) === null || _b === void 0 ? void 0 : _b.call(objectAdapter)) !== null && _c !== void 0 ? _c : (_d = objectAdapter.data) === null || _d === void 0 ? void 0 : _d.call(objectAdapter)) !== null && _e !== void 0 ? _e : {};
+      }
+
+      var eventEmitter = new Component();
+      var mountedHooks = [];
+      var initHooks = [];
+      var destroyHooks = [];
+      var onHooks = [];
+      var instanceRef = {
+        current: null
+      };
+      var offHooksList = [];
+      var initialState = null;
+      var eventNames = [];
+      var methodNames = [];
+
+      var onMounted = function (callback) {
+        mountedHooks.push(callback);
+      };
+
+      var onInit = function (callback) {
+        initHooks.push(callback);
+      };
+
+      var onDestroy = function (callback) {
+        destroyHooks.push(callback);
+      };
+
+      var on = function (callback) {
+        onHooks.push(callback);
+      };
+
+      var emit = function (eventName) {
+        var params = [];
+
+        for (var _i = 1; _i < arguments.length; _i++) {
+          params[_i - 1] = arguments[_i];
+        }
+
+        eventEmitter.trigger.apply(eventEmitter, __spreadArray([eventName], params, false));
+      };
+
+      var setInitialState = function (state) {
+        initialState = state;
+      };
+
+      var setEvents = function (events) {
+        eventNames = events;
+      };
+
+      var setMethods = function (methods) {
+        methodNames = methods;
+      };
+
+      if (objectAdapter.setup) {
+        instanceRef.current = objectAdapter.setup({
+          getProps: getProps,
+          setInitialState: setInitialState,
+          setEvents: setEvents,
+          setMethods: setMethods,
+          onMounted: onMounted,
+          onDestroy: onDestroy,
+          onInit: onInit,
+          emit: emit,
+          on: on
+        }) || null;
+      }
+
+      if (objectAdapter.created) {
+        instanceRef.current = objectAdapter.created(getProps()) || null;
+      }
+
+      if (objectAdapter.events) {
+        setEvents(objectAdapter.events);
+      }
+
+      if (objectAdapter.state) {
+        setInitialState(objectAdapter.state);
+      }
+
+      if (objectAdapter.methods) {
+        setMethods(objectAdapter.methods);
+      }
+
+      if (objectAdapter.mounted) {
+        onMounted(objectAdapter.mounted);
+      }
+
+      if (objectAdapter.destroy) {
+        destroyHooks.push(objectAdapter.destroy);
+      }
+
+      if (objectAdapter.init) {
+        initHooks.push(objectAdapter.init);
+      }
+
+      if (objectAdapter.on) {
+        onHooks.push(function (instance, eventName, listener) {
+          var off = objectAdapter.on(instance, eventName, listener);
+          return function () {
+            var _a;
+
+            off && off();
+            (_a = objectAdapter.off) === null || _a === void 0 ? void 0 : _a.call(objectAdapter, instance, eventName, listener);
+          };
+        });
+      }
+
+      return {
+        events: function () {
+          return eventNames;
+        },
+        state: function () {
+          var inst = instanceRef.current;
+
+          if (initialState) {
+            return initialState;
+          }
+
+          if (inst) {
+            var observers_1 = getObservers(inst);
+            setInitialState(keys(observers_1).reduce(function (prev, cur) {
+              prev[cur] = observers_1[cur].current;
+              return prev;
+            }, {}));
+          }
+
+          return initialState || {};
+        },
+        instance: function () {
+          return instanceRef.current;
+        },
+        mounted: function () {
+          var props = getProps();
+          mountedHooks.forEach(function (hook) {
+            instanceRef.current = hook(props, instanceRef.current) || instanceRef.current;
+          });
+        },
+        init: function () {
+          // on events
+          var instance = instanceRef.current;
+          var props = getProps();
+          offHooksList = eventNames.map(function (eventName) {
+            var listener = function () {
+              var _a;
+
+              var params = [];
+
+              for (var _i = 0; _i < arguments.length; _i++) {
+                params[_i] = arguments[_i];
+              }
+
+              (_a = eventEmitter).trigger.apply(_a, __spreadArray([eventName], params, false));
+            };
+
+            var instance = instanceRef.current;
+            return onHooks.map(function (hook) {
+              return hook(instance, eventName, listener);
+            }).filter(Boolean);
+          }); // init
+
+          initHooks.forEach(function (hook) {
+            hook(instance, props);
+          });
+        },
+        destroy: function () {
+          // off events
+          offHooksList.forEach(function (offHooks) {
+            offHooks.forEach(function (hook) {
+              hook();
+            });
+          }); // destroy
+
+          eventEmitter.off();
+          var instance = instanceRef.current;
+          var props = getProps();
+          destroyHooks.forEach(function (hook) {
+            hook(instance, props);
+          });
+        },
+        methods: function () {
+          return withReactiveMethods(instanceRef, methodNames);
+        },
+        on: function (eventName, listener) {
+          eventEmitter.on(eventName, listener);
+        },
+        off: function (eventName, listener) {
+          eventEmitter.off(eventName, listener);
+        }
+      };
+    }
 
     /**
      * cfcs
@@ -2698,7 +3104,7 @@ version: 4.13.2-beta.0
     license: MIT
     author: NAVER Corp.
     repository: https://github.com/naver/egjs-axes
-    version: 3.9.2
+    version: 3.9.1
     */
 
     /*! *****************************************************************************
@@ -3624,19 +4030,6 @@ version: 4.13.2-beta.0
         var deltaTime = latestInterval ? timeStamp - latestInterval.timestamp : 0;
         var velocityX = prevEvent ? prevEvent.velocityX : 0;
         var velocityY = prevEvent ? prevEvent.velocityY : 0;
-        var directionX = prevEvent ? prevEvent.directionX : 1;
-        var directionY = prevEvent ? prevEvent.directionY : 1;
-        // If offset is 0, it inherits the direction of the previous event.
-        if (offsetX > 0) {
-          directionX = 1;
-        } else if (offsetX < 0) {
-          directionX = -1;
-        }
-        if (offsetY > 0) {
-          directionY = 1;
-        } else if (offsetY < 0) {
-          directionY = -1;
-        }
         if (!latestInterval || deltaTime >= VELOCITY_INTERVAL) {
           if (latestInterval) {
             _a = [(deltaX - latestInterval.deltaX) / deltaTime, (deltaY - latestInterval.deltaY) / deltaTime], velocityX = _a[0], velocityY = _a[1];
@@ -3656,8 +4049,6 @@ version: 4.13.2-beta.0
           deltaY: deltaY,
           offsetX: offsetX,
           offsetY: offsetY,
-          directionX: directionX,
-          directionY: directionY,
           velocityX: velocityX,
           velocityY: velocityY,
           preventSystemEvent: true
@@ -5121,7 +5512,7 @@ version: 4.13.2-beta.0
        * eg.Axes.VERSION;  // ex) 3.3.3
        * ```
        */
-      Axes.VERSION = "3.9.2";
+      Axes.VERSION = "3.9.1";
       /* eslint-enable */
       /**
        * @name TRANSFORM
@@ -5472,7 +5863,7 @@ version: 4.13.2-beta.0
         this._detachWindowEvent(activeEvent);
         clearTimeout(this._rightEdgeTimer);
         var prevEvent = activeEvent.prevEvent;
-        var velocity = this._isOverThreshold ? this._getOffset([Math.abs(prevEvent.velocityX) * prevEvent.directionX, Math.abs(prevEvent.velocityY) * prevEvent.directionY], [useDirection(DIRECTION_HORIZONTAL, this._direction), useDirection(DIRECTION_VERTICAL, this._direction)]) : [0, 0];
+        var velocity = this._isOverThreshold ? this._getOffset([Math.abs(prevEvent.velocityX) * (prevEvent.offsetX < 0 ? -1 : 1), Math.abs(prevEvent.velocityY) * (prevEvent.offsetY < 0 ? -1 : 1)], [useDirection(DIRECTION_HORIZONTAL, this._direction), useDirection(DIRECTION_VERTICAL, this._direction)]) : [0, 0];
         activeEvent.onRelease();
         this._observer.release(this, prevEvent, velocity);
       };
@@ -7143,11 +7534,7 @@ version: 4.13.2-beta.0
         if (snapDelta >= snapThreshold && snapDelta > 0) {
           // Move to anchor at position
           targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
-          // const targetPanel = targetAnchor.panel;
-          // const nextPosition = this._getPosition(targetPanel, DIRECTION.NEXT);
-          // const prevPosition = this._getPosition(targetPanel, DIRECTION.PREV);
-          // targetPosition = Math.abs(camera.position - nextPosition) < Math.abs(camera.position - prevPosition) ? nextPosition : prevPosition;
-        } else if (absPosDelta >= flicking.threshold && absPosDelta > 0 && anchorAtCamera === activeAnchor) {
+        } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
           // Move to the adjacent panel
           targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);
         } else {
@@ -7175,7 +7562,6 @@ version: 4.13.2-beta.0
         if (!anchorAtCamera || !anchorAtPosition) {
           throw new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE);
         }
-        //    console.log("_findSnappedAnchor", anchorAtPosition);
         if (!isFinite(count)) {
           return anchorAtPosition;
         }
@@ -7617,7 +8003,10 @@ version: 4.13.2-beta.0
       };
       __proto.findAnchorIncludePosition = function (position) {
         var anchors = this._flicking.camera.anchorPoints;
-        return anchors.reduce(function (nearest, anchor) {
+        var anchorsIncludingPosition = anchors.filter(function (anchor) {
+          return anchor.panel.includePosition(position, true);
+        });
+        return anchorsIncludingPosition.reduce(function (nearest, anchor) {
           if (!nearest) return anchor;
           return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
         }, null);
@@ -8282,7 +8671,7 @@ version: 4.13.2-beta.0
             if (prevPosition > panelPos) {
               prevPosition -= rangeDiff;
             }
-            return nearestPanel.index - 1 + getProgress(position, prevPosition, panelPos);
+            return nearestPanel.index - 1 + getProgress$1(position, prevPosition, panelPos);
           } else {
             var nextPanel = nearestPanel.next();
             var nextPosition = nextPanel ? nextPanel.position + nextPanel.offset : nextRange + bounceSize[1];
@@ -8290,7 +8679,7 @@ version: 4.13.2-beta.0
             if (nextPosition < panelPos) {
               nextPosition += rangeDiff;
             }
-            return nearestPanel.index + getProgress(position, panelPos, nextPosition);
+            return nearestPanel.index + getProgress$1(position, panelPos, nextPosition);
           }
         },
         enumerable: false,
@@ -9956,6 +10345,18 @@ version: 4.13.2-beta.0
         var activePanel = control.activePanel;
         // Update camera & control
         this._updateCameraAndControl();
+        if (flicking.autoResize && flicking.useResizeObserver) {
+          panelsAdded.forEach(function (panel) {
+            if (panel.element) {
+              flicking.autoResizer.observe(panel.element);
+            }
+          });
+          panelsRemoved.forEach(function (panel) {
+            if (panel.element) {
+              flicking.autoResizer.unobserve(panel.element);
+            }
+          });
+        }
         void this.render();
         if (!flicking.animating) {
           if (!activePanel || activePanel.removed) {
@@ -10504,10 +10905,10 @@ version: 4.13.2-beta.0
           }
           if (camPos < position) {
             var disappearPosNext = position + (camera.size - camera.alignPosition) + alignPosition;
-            return -getProgress(camPos, position, disappearPosNext);
+            return -getProgress$1(camPos, position, disappearPosNext);
           } else {
             var disappearPosPrev = position - (camera.alignPosition + this._size - alignPosition);
-            return 1 - getProgress(camPos, disappearPosPrev, position);
+            return 1 - getProgress$1(camPos, disappearPosPrev, position);
           }
         },
         enumerable: false,
@@ -11247,18 +11648,23 @@ version: 4.13.2-beta.0
           useResizeObserver = _9 === void 0 ? true : _9,
           _10 = _b.resizeDebounce,
           resizeDebounce = _10 === void 0 ? 0 : _10,
-          _11 = _b.maxResizeDebounce,
-          maxResizeDebounce = _11 === void 0 ? 100 : _11,
-          _12 = _b.useFractionalSize,
-          useFractionalSize = _12 === void 0 ? false : _12,
-          _13 = _b.externalRenderer,
-          externalRenderer = _13 === void 0 ? null : _13,
-          _14 = _b.renderExternal,
-          renderExternal = _14 === void 0 ? null : _14;
+          _11 = _b.observePanelResize,
+          observePanelResize = _11 === void 0 ? false : _11,
+          _12 = _b.maxResizeDebounce,
+          maxResizeDebounce = _12 === void 0 ? 100 : _12,
+          _13 = _b.useFractionalSize,
+          useFractionalSize = _13 === void 0 ? false : _13,
+          _14 = _b.externalRenderer,
+          externalRenderer = _14 === void 0 ? null : _14,
+          _15 = _b.renderExternal,
+          renderExternal = _15 === void 0 ? null : _15,
+          _16 = _b.optimizeSizeUpdate,
+          optimizeSizeUpdate = _16 === void 0 ? false : _16;
         var _this = _super.call(this) || this;
         // Internal states
         _this._initialized = false;
         _this._plugins = [];
+        _this._isResizing = false;
         // Bind options
         _this._align = align;
         _this._defaultIndex = defaultIndex;
@@ -11294,9 +11700,11 @@ version: 4.13.2-beta.0
         _this._useResizeObserver = useResizeObserver;
         _this._resizeDebounce = resizeDebounce;
         _this._maxResizeDebounce = maxResizeDebounce;
+        _this._observePanelResize = observePanelResize;
         _this._useFractionalSize = useFractionalSize;
         _this._externalRenderer = externalRenderer;
         _this._renderExternal = renderExternal;
+        _this._optimizeSizeUpdate = optimizeSizeUpdate;
         // Create core components
         _this._viewport = new Viewport(_this, getElement(root));
         _this._autoResizer = new AutoResizer(_this);
@@ -11377,6 +11785,19 @@ version: 4.13.2-beta.0
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "autoResizer", {
+        /**
+         * {@link AutoResizer} instance of the Flicking
+         * @ko 현재 Flicking에 활성화된 {@link AutoResizer} 인스턴스
+         * @internal
+         * @readonly
+         */
+        get: function () {
+          return this._autoResizer;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "initialized", {
         // Internal States
         /**
@@ -12250,6 +12671,9 @@ version: 4.13.2-beta.0
         // OTHERS
         set: function (val) {
           this._autoResize = val;
+          if (!this._initialized) {
+            return;
+          }
           if (val) {
             this._autoResizer.enable();
           } else {
@@ -12272,13 +12696,38 @@ version: 4.13.2-beta.0
         },
         set: function (val) {
           this._useResizeObserver = val;
-          if (this._autoResize) {
+          if (this._initialized && this._autoResize) {
             this._autoResizer.enable();
           }
         },
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "observePanelResize", {
+        /**
+         * Whether to use {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver} to observe the size of the panel element
+         * This is only available when `useResizeObserver` is enabled.
+         * This option garantees that the resize event is triggered when the size of the panel element is changed.
+         * @ko 이 옵션을 활성화할 경우, {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}를 사용하여 패널 엘리먼트의 크기를 추적합니다.
+         * 이 옵션은 `useResizeObserver` 옵션이 활성화된 경우에만 사용할 수 있습니다.
+         * 이 옵션은 패널 엘리먼트의 크기가 변경될 경우 resize 이벤트가 발생하도록 보장합니다.
+         */
+        get: function () {
+          return this._observePanelResize;
+        },
+        set: function (val) {
+          this._observePanelResize = val;
+          if (this._initialized && this._autoResize) {
+            if (val) {
+              this._autoResizer.observePanels();
+            } else {
+              this._autoResizer.unobservePanels();
+            }
+          }
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "resizeDebounce", {
         /**
          * Delays size recalculation from `autoResize` by the given time in milisecond.
@@ -12360,6 +12809,30 @@ version: 4.13.2-beta.0
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "optimizeSizeUpdate", {
+        /**
+         * This option works only when autoResize is set to true.
+         * By default, autoResize listens to changes in both the viewport's width and height, updating all panel sizes accordingly.
+         * When optimizeSizeUpdate is enabled, the update behavior is optimized based on the flicking direction:
+         * If direction is "horizontal", only changes in width will trigger panel size updates.
+         * If direction is "vertical", only changes in height will do so.
+         * This option is useful when panel heights vary and unwanted flickering occurs due to frequent size recalculations during flicking. Enabling optimizeSizeUpdate prevents unnecessary updates and helps maintain visual stability.
+         * @ko optimizeSizeUpdate는 autoResize가 true일 때만 동작합니다.
+         * 기본적으로 autoResize는 뷰포트의 width와 height 변화를 모두 감지하여 패널들의 사이즈를 업데이트합니다.
+         * 이 옵션을 활성화하면 플리킹 방향에 따라 필요한 차원(horizontal → width, vertical → height)에 대해서만 사이즈를 업데이트합니다.
+         * 내부 패널의 높이가 서로 다를 때, 플리킹 중 과도한 리사이징으로 인한 깜빡임 현상을 줄이는 데 유용합니다.
+         * @type {boolean}
+         * @default false
+         */
+        get: function () {
+          return this._optimizeSizeUpdate;
+        },
+        set: function (val) {
+          this._optimizeSizeUpdate = val;
+        },
+        enumerable: false,
+        configurable: true
+      });
       /**
        * Initialize Flicking and move to the default index
        * This is automatically called on Flicking's constructor when `autoInit` is true(default)
@@ -12798,6 +13271,8 @@ version: 4.13.2-beta.0
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
+                if (this._isResizing) return [2 /*return*/];
+                this._isResizing = true;
                 viewport = this._viewport;
                 renderer = this._renderer;
                 camera = this._camera;
@@ -12812,9 +13287,20 @@ version: 4.13.2-beta.0
                   element: viewport.element
                 }));
                 viewport.resize();
+                if (!this._optimizeSizeUpdate) return [3 /*break*/, 3];
+                if (!(this.horizontal && viewport.width !== prevWidth || !this.horizontal && viewport.height !== prevHeight)) return [3 /*break*/, 2];
                 return [4 /*yield*/, renderer.forceRenderAllPanels()];
               case 1:
+                _a.sent();
+                _a.label = 2;
+              case 2:
+                return [3 /*break*/, 5];
+              case 3:
+                return [4 /*yield*/, renderer.forceRenderAllPanels()];
+              case 4:
                 _a.sent(); // Render all panel elements, to update sizes
+                _a.label = 5;
+              case 5:
                 if (!this._initialized) {
                   return [2 /*return*/];
                 }
@@ -12827,7 +13313,7 @@ version: 4.13.2-beta.0
                 camera.updatePanelOrder();
                 camera.updateOffset();
                 return [4 /*yield*/, renderer.render()];
-              case 2:
+              case 6:
                 _a.sent();
                 if (!this._initialized) {
                   return [2 /*return*/];
@@ -12850,6 +13336,7 @@ version: 4.13.2-beta.0
                   sizeChanged: sizeChanged,
                   element: viewport.element
                 }));
+                this._isResizing = false;
                 return [2 /*return*/];
             }
           });
@@ -13069,7 +13556,7 @@ version: 4.13.2-beta.0
        * Flicking.VERSION;  // ex) 4.0.0
        * ```
        */
-      Flicking.VERSION = "4.13.2-beta.0";
+      Flicking.VERSION = "4.14.0";
       return Flicking;
     }(Component);
 
@@ -13656,6 +14143,196 @@ version: 4.13.2-beta.0
         getDefaultCameraTransform: getDefaultCameraTransform
     };
 
+    // Check if Flicking has reached the first panel
+    var getIsReachStart = function (flicking) {
+      return !flicking.circular && flicking.index === 0;
+    };
+    // Check if Flicking has reached the last panel
+    var getIsReachEnd = function (flicking) {
+      return !flicking.circular && flicking.index === flicking.panelCount - 1;
+    };
+    // Get the total number of panels
+    var getTotalPanelCount = function (flicking) {
+      return flicking.panelCount;
+    };
+    // Get the current active panel index
+    var getCurrentPanelIndex = function (flicking) {
+      return flicking.index;
+    };
+    // Calculate the overall scroll progress percentage based on the current camera position
+    var getProgress = function (flicking) {
+      var cam = flicking.camera;
+      var progressRatio = (cam.position - cam.range.min) / (cam.range.max - cam.range.min);
+      var percent = Math.min(Math.max(progressRatio, 0), 1) * 100;
+      return percent;
+    };
+    // Calculate the progress between panels including decimal values
+    var getIndexProgress = function (flicking) {
+      var cam = flicking.camera;
+      var anchorPoints = cam.anchorPoints;
+      var length = anchorPoints.length;
+      var cameraPosition = cam.position;
+      var isCircular = flicking.circularEnabled;
+      var indexProgress = 0;
+      var _a = cam.range,
+        min = _a.min,
+        max = _a.max;
+      var firstAnchorPoint = anchorPoints[0];
+      var lastAnchorPoint = anchorPoints[length - 1];
+      var distanceLastToFirst = max - lastAnchorPoint.position + (firstAnchorPoint.position - min);
+      anchorPoints.some(function (anchorPoint, index) {
+        var anchorPosition = anchorPoint.position;
+        var nextAnchorPoint = anchorPoints[index + 1];
+        if (index === 0 && cameraPosition <= anchorPosition) {
+          if (isCircular) {
+            indexProgress = (cameraPosition - anchorPosition) / distanceLastToFirst;
+          } else {
+            indexProgress = (cameraPosition - anchorPosition) / anchorPoint.panel.size;
+          }
+        } else if (index === length - 1 && cameraPosition >= anchorPosition) {
+          if (isCircular) {
+            indexProgress = index + (cameraPosition - anchorPosition) / distanceLastToFirst;
+          } else {
+            indexProgress = index + (cameraPosition - anchorPosition) / anchorPoint.panel.size;
+          }
+        } else if (nextAnchorPoint && anchorPosition <= cameraPosition && cameraPosition <= nextAnchorPoint.position) {
+          indexProgress = index + (cameraPosition - anchorPosition) / (nextAnchorPoint.position - anchorPosition);
+        } else {
+          return false;
+        }
+        return true;
+      });
+      return indexProgress;
+    };
+    /**
+     * Internal reactive API adapter for Flicking that manages state and event listeners
+     * This adapter is used internally by framework-specific packages (react-flicking, vue-flicking, etc.)
+     * to provide reactive API support. Users rarely need to use this directly.
+     * @ko Flicking의 상태와 이벤트 리스너를 관리하는 내부 반응형 API 어댑터
+     * 이 어댑터는 react-flicking, vue-flicking 등의 프레임워크별 패키지에서 내부적으로 사용되어
+     * 반응형 API 지원을 제공합니다. 사용자가 직접 사용할 일은 거의 없습니다.
+     * @param onInit - Callback when reactive object is initialized<ko>반응형 객체가 초기화될 때 호출되는 콜백</ko>
+     * @param onDestroy - Callback when reactive object is destroyed<ko>반응형 객체가 파괴될 때 호출되는 콜백</ko>
+     * @param setMethods - Function to set available methods<ko>사용 가능한 메서드를 설정하는 함수</ko>
+     * @returns Reactive object with Flicking state and methods<ko>Flicking 상태와 메서드를 포함한 반응형 객체</ko>
+     */
+    var flickingReactiveAPIAdapter = function (_a) {
+      var _b, _c, _d;
+      var onInit = _a.onInit,
+        onDestroy = _a.onDestroy,
+        setMethods = _a.setMethods,
+        getProps = _a.getProps;
+      var flicking;
+      // Move to a specific panel index
+      var moveTo = function (i) {
+        if (flicking == null) {
+          return Promise.reject(new Error("Flicking instance is not available"));
+        }
+        if (flicking === null || flicking === void 0 ? void 0 : flicking.animating) {
+          return Promise.resolve();
+        }
+        return flicking.moveTo(i);
+      };
+      setMethods(["moveTo"]);
+      var options = getProps().options;
+      // options를 고려하지 않고 초기값을 설정해도 동작에는 아무런 문제가 없으나, 이 시점의 초기값과 컴포넌트 init 단계에서의 초기값이 다르면 화면 리렌더링이 발생할 수 있으므로
+      // 이렇게 미리 옵션을 통해서 예측할 수 있는 부분들은 맞춰둔다.
+      var reactiveObj = reactive({
+        isReachStart: (options === null || options === void 0 ? void 0 : options.defaultIndex) ? (options === null || options === void 0 ? void 0 : options.defaultIndex) === 0 : true,
+        isReachEnd: (options === null || options === void 0 ? void 0 : options.totalPanelCount) && (options === null || options === void 0 ? void 0 : options.defaultIndex) ? options.defaultIndex === options.totalPanelCount - 1 : false,
+        totalPanelCount: (_b = options === null || options === void 0 ? void 0 : options.totalPanelCount) !== null && _b !== void 0 ? _b : 0,
+        currentPanelIndex: (_c = options === null || options === void 0 ? void 0 : options.defaultIndex) !== null && _c !== void 0 ? _c : 0,
+        progress: 0,
+        indexProgress: (_d = options === null || options === void 0 ? void 0 : options.defaultIndex) !== null && _d !== void 0 ? _d : 0,
+        moveTo: moveTo
+      });
+      // Update state when panel changes
+      var onChanged = function () {
+        if (flicking === undefined) return;
+        reactiveObj.isReachStart = getIsReachStart(flicking);
+        reactiveObj.isReachEnd = getIsReachEnd(flicking);
+        reactiveObj.currentPanelIndex = getCurrentPanelIndex(flicking);
+      };
+      // Update state when panel count changes
+      var onPanelChange = function () {
+        if (flicking === undefined) return;
+        onChanged();
+        reactiveObj.totalPanelCount = getTotalPanelCount(flicking);
+      };
+      // Update progress when camera moves
+      var onMove = function () {
+        if (flicking === undefined) return;
+        reactiveObj.progress = getProgress(flicking);
+        reactiveObj.indexProgress = getIndexProgress(flicking);
+      };
+      onInit(function (inst, data) {
+        flicking = data.flicking;
+        if (flicking === undefined) return;
+        reactiveObj.isReachStart = getIsReachStart(flicking);
+        reactiveObj.isReachEnd = getIsReachEnd(flicking);
+        reactiveObj.currentPanelIndex = getCurrentPanelIndex(flicking);
+        reactiveObj.progress = getProgress(flicking);
+        reactiveObj.totalPanelCount = getTotalPanelCount(flicking);
+        flicking === null || flicking === void 0 ? void 0 : flicking.on("changed", onChanged);
+        flicking === null || flicking === void 0 ? void 0 : flicking.on("panelChange", onPanelChange);
+        flicking === null || flicking === void 0 ? void 0 : flicking.on("move", onMove);
+      });
+      onDestroy(function () {
+        flicking === null || flicking === void 0 ? void 0 : flicking.off("changed", onChanged);
+        flicking === null || flicking === void 0 ? void 0 : flicking.off("panelChange", onPanelChange);
+        flicking === null || flicking === void 0 ? void 0 : flicking.off("move", onMove);
+      });
+      return reactiveObj;
+    };
+    /**
+     * Connect Flicking instance to reactive API
+     * @ko Flicking 인스턴스를 반응형 API에 연결합니다
+     * @param {Flicking} flicking - Flicking instance to connect<ko>연결할 Flicking 인스턴스</ko>
+     * @param {FlickingReactiveAPIOptions} [options] - Flicking options<ko>Flicking 옵션</ko>
+     * @returns {FlickingReactiveObject} Reactive object with Flicking state and methods<ko>Flicking 상태와 메서드를 포함한 반응형 객체</ko>
+     * @example
+     * ```js
+     * import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";
+     *
+     * const flicking = new Flicking("#el");
+     * const reactiveObj = connectFlickingReactiveAPI(flicking);
+     *
+     * // Access reactive state
+     * console.log("Current panel:", reactiveObj.currentPanelIndex);
+     * console.log("Progress:", reactiveObj.progress + "%");
+     * console.log("Is at start:", reactiveObj.isReachStart);
+     * console.log("Is at end:", reactiveObj.isReachEnd);
+     * console.log("Total panels:", reactiveObj.totalPanelCount);
+     * console.log("Index progress:", reactiveObj.indexProgress);
+     *
+     * // Subscribe to state changes
+     * reactiveObj.subscribe("currentPanelIndex", (nextValue) => {
+     *   console.log("Panel changed to:", nextValue);
+     * });
+     *
+     * // Use reactive methods
+     * reactiveObj.moveTo(2); // Move to third panel
+     * ```
+     */
+    var connectFlickingReactiveAPI = function (flicking, options) {
+      var obj = adaptReactive(flickingReactiveAPIAdapter, function () {
+        return {
+          flicking: flicking,
+          options: options
+        };
+      });
+      obj.mounted();
+      var instance = obj.instance();
+      obj.init();
+      return instance;
+    };
+
+    var FlickingReactiveAPI = {
+        __proto__: null,
+        flickingReactiveAPIAdapter: flickingReactiveAPIAdapter,
+        connectFlickingReactiveAPI: connectFlickingReactiveAPI
+    };
+
     /*
      * Copyright (c) 2015 NAVER Corp.
      * egjs projects are licensed under the MIT license
@@ -13668,6 +14345,7 @@ version: 4.13.2-beta.0
     merge(Flicking, CFC);
     merge(Flicking, Utils);
     merge(Flicking, CrossFlicking$1);
+    merge(Flicking, FlickingReactiveAPI);
 
     return Flicking;