@egjs/flicking 4.16.0-beta.3 → 4.16.1-beta.0

package/dist/flicking.js

@@ -1,7 +1,50 @@
 (function(global, factory) {
   typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory(require("@egjs/component"), require("@egjs/axes"), require("@egjs/imready")) : typeof define === "function" && define.amd ? define(["@egjs/component", "@egjs/axes", "@egjs/imready"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, global.Flicking = factory(global.eg.Component, global.eg.Axes, global.eg.ImReady));
 })(this, (function(Component, Axes, ImReady) {
-  "use strict";
+  "use strict";var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __reflectGet = Reflect.get;
+var __pow = Math.pow;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __superGet = (cls, obj, key) => __reflectGet(__getProtoOf(cls), key, obj);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
   const ALIGN = {
     /** left/top align */
     PREV: "prev",
@@ -879,10 +922,11 @@
       return true;
     }
     getRange() {
+      var _a, _b;
       const renderer = this._flicking.renderer;
       const firstPanel = renderer.getPanel(0);
       const lastPanel = renderer.getPanel(renderer.panelCount - 1);
-      return { min: firstPanel?.position ?? 0, max: lastPanel?.position ?? 0 };
+      return { min: (_a = firstPanel == null ? void 0 : firstPanel.position) != null ? _a : 0, max: (_b = lastPanel == null ? void 0 : lastPanel.position) != null ? _b : 0 };
     }
   }
   let Camera$1 = class Camera {
@@ -1211,10 +1255,11 @@
      * @returns The {@link AnchorPoint} that matches current panel
      */
     findActiveAnchor() {
+      var _a;
       const flicking = getFlickingAttached(this._flicking);
       const activePanel = flicking.control.activePanel;
       if (!activePanel) return null;
-      return find(this._anchors, (anchor) => anchor.panel.index === activePanel.index) ?? this.findNearestAnchor(activePanel.position);
+      return (_a = find(this._anchors, (anchor) => anchor.panel.index === activePanel.index)) != null ? _a : this.findNearestAnchor(activePanel.position);
     }
     /**
      * Clamp the given position between camera's range
@@ -1852,7 +1897,7 @@
     }
     fire(eventType, externalCtx) {
       const currentState = this._state;
-      const ctx = { ...externalCtx, transitTo: this.transitTo };
+      const ctx = __spreadProps(__spreadValues({}, externalCtx), { transitTo: this.transitTo });
       switch (eventType) {
         case EVENT.HOLD:
           currentState.onHold(ctx);
@@ -1878,7 +1923,8 @@
         this._dragged = false;
       };
       this._onAxesChange = () => {
-        this._dragged = !!this._panInput?.isEnabled();
+        var _a;
+        this._dragged = !!((_a = this._panInput) == null ? void 0 : _a.isEnabled());
       };
       this._preventClickWhenDragged = (e) => {
         if (this._dragged) {
@@ -1949,28 +1995,32 @@
      * @readonly
      */
     get enabled() {
-      return this._panInput?.isEnabled() ?? false;
+      var _a, _b;
+      return (_b = (_a = this._panInput) == null ? void 0 : _a.isEnabled()) != null ? _b : false;
     }
     /**
      * Current position value in {@link https://naver.github.io/egjs-axes/docs/api/Axes | Axes} instance
      * @readonly
      */
     get position() {
-      return this._axes?.get([POSITION_KEY])[POSITION_KEY] ?? 0;
+      var _a, _b;
+      return (_b = (_a = this._axes) == null ? void 0 : _a.get([POSITION_KEY])[POSITION_KEY]) != null ? _b : 0;
     }
     /**
      * Current range value in {@link https://naver.github.io/egjs-axes/docs/api/Axes | Axes} instance
      * @readonly
      */
     get range() {
-      return this._axes?.axis[POSITION_KEY].range ?? [0, 0];
+      var _a, _b;
+      return (_b = (_a = this._axes) == null ? void 0 : _a.axis[POSITION_KEY].range) != null ? _b : [0, 0];
     }
     /**
      * Actual bounce size(px)
      * @readonly
      */
     get bounce() {
-      return this._axes?.axis[POSITION_KEY].bounce;
+      var _a;
+      return (_a = this._axes) == null ? void 0 : _a.axis[POSITION_KEY].bounce;
     }
     /**
      * Initialize AxesController
@@ -2023,11 +2073,12 @@
      * This method destroys the Axes and PanInput instances and removes all event handlers.
      */
     destroy() {
+      var _a;
       if (this._axes) {
         this.removePreventClickHandler();
         this._axes.destroy();
       }
-      this._panInput?.destroy();
+      (_a = this._panInput) == null ? void 0 : _a.destroy();
       this._resetInternalValues();
     }
     /**
@@ -2037,7 +2088,8 @@
      * @returns The current instance for method chaining
      */
     enable() {
-      this._panInput?.enable();
+      var _a;
+      (_a = this._panInput) == null ? void 0 : _a.enable();
       return this;
     }
     /**
@@ -2047,7 +2099,8 @@
      * @returns The current instance for method chaining
      */
     disable() {
-      this._panInput?.disable();
+      var _a;
+      (_a = this._panInput) == null ? void 0 : _a.disable();
       return this;
     }
     /**
@@ -2057,7 +2110,8 @@
      * @returns The current instance for method chaining
      */
     release() {
-      this._panInput?.release();
+      var _a;
+      (_a = this._panInput) == null ? void 0 : _a.release();
       return this;
     }
     /**
@@ -2069,11 +2123,11 @@
      * @returns The current instance for method chaining
      */
     updateAnimation(position, duration) {
-      this._animatingContext = {
-        ...this._animatingContext,
+      var _a;
+      this._animatingContext = __spreadProps(__spreadValues({}, this._animatingContext), {
         end: position
-      };
-      this._axes?.updateAnimation({
+      });
+      (_a = this._axes) == null ? void 0 : _a.updateAnimation({
         destPos: { [POSITION_KEY]: position },
         duration
       });
@@ -2086,7 +2140,8 @@
      * @returns The current instance for method chaining
      */
     stopAnimation() {
-      this._axes?.stopAnimation();
+      var _a;
+      (_a = this._axes) == null ? void 0 : _a.stopAnimation();
       return this;
     }
     /**
@@ -2149,6 +2204,7 @@
      * @returns A Promise which will be resolved after reaching the target position
      */
     animateTo(position, duration, axesEvent) {
+      var _a;
       const axes = this._axes;
       const state = this._stateMachine.state;
       if (!axes) {
@@ -2161,7 +2217,7 @@
         const flicking = getFlickingAttached(this._flicking);
         flicking.camera.lookAt(position);
         if (state.targetPanel) {
-          flicking.control.setActive(state.targetPanel, flicking.control.activePanel, axesEvent?.isTrusted ?? false);
+          flicking.control.setActive(state.targetPanel, flicking.control.activePanel, (_a = axesEvent == null ? void 0 : axesEvent.isTrusted) != null ? _a : false);
         }
         return Promise.resolve();
       }
@@ -2199,7 +2255,8 @@
      * Returns the current axes position
      */
     getCurrentPosition() {
-      return this._axes?.get([POSITION_KEY])[POSITION_KEY] ?? 0;
+      var _a, _b;
+      return (_b = (_a = this._axes) == null ? void 0 : _a.get([POSITION_KEY])[POSITION_KEY]) != null ? _b : 0;
     }
     updateDirection() {
       const flicking = getFlickingAttached(this._flicking);
@@ -2236,7 +2293,8 @@
      * @readonly
      */
     get activeIndex() {
-      return this._activePanel?.index ?? -1;
+      var _a, _b;
+      return (_b = (_a = this._activePanel) == null ? void 0 : _a.index) != null ? _b : -1;
     }
     /**
      * An active panel
@@ -2328,7 +2386,7 @@
      */
     updateAnimation(panel, duration, direction) {
       const state = this._controller.state;
-      const position = this._getPosition(panel, direction ?? DIRECTION.NONE);
+      const position = this._getPosition(panel, direction != null ? direction : DIRECTION.NONE);
       state.targetPanel = panel;
       this._controller.updateAnimation(position, duration);
       return this;
@@ -2390,10 +2448,12 @@
      * @throws {@link MovementErrors}
      * @returns A Promise which will be resolved after reaching the target panel
      */
-    async moveToPanel(panel, { duration, direction = DIRECTION.NONE, axesEvent }) {
-      const position = this._getPosition(panel, direction);
-      this._triggerIndexChangeEvent(panel, panel.position, axesEvent, direction);
-      return this._animateToPosition({ position, duration, newActivePanel: panel, axesEvent });
+    moveToPanel(_0, _1) {
+      return __async(this, arguments, function* (panel, { duration, direction = DIRECTION.NONE, axesEvent }) {
+        const position = this._getPosition(panel, direction);
+        this._triggerIndexChangeEvent(panel, panel.position, axesEvent, direction);
+        return this._animateToPosition({ position, duration, newActivePanel: panel, axesEvent });
+      });
     }
     /**
      * @internal
@@ -2401,6 +2461,7 @@
      * Sets the active panel and triggers {@link ChangedEvent} or {@link RestoredEvent} based on whether the panel changed.
      */
     setActive(newActivePanel, prevActivePanel, isTrusted) {
+      var _a;
       const flicking = getFlickingAttached(this._flicking);
       this._activePanel = newActivePanel;
       this._nextPanel = null;
@@ -2410,7 +2471,7 @@
           new Component.ComponentEvent(EVENTS.CHANGED, {
             index: newActivePanel.index,
             panel: newActivePanel,
-            prevIndex: prevActivePanel?.index ?? -1,
+            prevIndex: (_a = prevActivePanel == null ? void 0 : prevActivePanel.index) != null ? _a : -1,
             prevPanel: prevActivePanel,
             isTrusted,
             direction: prevActivePanel ? getDirection(prevActivePanel.position, newActivePanel.position) : DIRECTION.NONE
@@ -2440,6 +2501,7 @@
      * Triggers {@link WillChangeEvent} or {@link WillRestoreEvent} based on whether the target panel differs from the active panel.
      */
     _triggerIndexChangeEvent(panel, position, axesEvent, direction) {
+      var _a;
       const flicking = getFlickingAttached(this._flicking);
       const triggeringEvent = panel !== this._activePanel ? EVENTS.WILL_CHANGE : EVENTS.WILL_RESTORE;
       const camera = flicking.camera;
@@ -2447,8 +2509,8 @@
       const event = new Component.ComponentEvent(triggeringEvent, {
         index: panel.index,
         panel,
-        isTrusted: axesEvent?.isTrusted || false,
-        direction: direction ?? getDirection(activePanel?.position ?? camera.position, position)
+        isTrusted: (axesEvent == null ? void 0 : axesEvent.isTrusted) || false,
+        direction: direction != null ? direction : getDirection((_a = activePanel == null ? void 0 : activePanel.position) != null ? _a : camera.position, position)
       });
       this._nextPanel = panel;
       flicking.trigger(event);
@@ -2461,32 +2523,34 @@
      * @privateRemarks
      * Animates the camera to the target position and handles animation completion or interruption.
      */
-    async _animateToPosition({
-      position,
-      duration,
-      newActivePanel,
-      axesEvent
-    }) {
-      const flicking = getFlickingAttached(this._flicking);
-      let nextDuration = duration;
-      if (Math.abs(nextDuration - position) < flicking.animationThreshold) {
-        nextDuration = 0;
-      }
-      const animate = () => this._controller.animateTo(position, nextDuration, axesEvent);
-      const state = this._controller.state;
-      state.targetPanel = newActivePanel;
-      if (nextDuration <= 0) {
-        return animate();
-      } else {
-        return animate().then(async () => {
-          if (flicking.initialized) {
-            await flicking.renderer.render();
-          }
-        }).catch((err) => {
-          if (axesEvent && err instanceof FlickingError && err.code === CODE.ANIMATION_INTERRUPTED) return;
-          throw err;
-        });
-      }
+    _animateToPosition(_0) {
+      return __async(this, arguments, function* ({
+        position,
+        duration,
+        newActivePanel,
+        axesEvent
+      }) {
+        const flicking = getFlickingAttached(this._flicking);
+        let nextDuration = duration;
+        if (Math.abs(nextDuration - position) < flicking.animationThreshold) {
+          nextDuration = 0;
+        }
+        const animate = () => this._controller.animateTo(position, nextDuration, axesEvent);
+        const state = this._controller.state;
+        state.targetPanel = newActivePanel;
+        if (nextDuration <= 0) {
+          return animate();
+        } else {
+          return animate().then(() => __async(this, null, function* () {
+            if (flicking.initialized) {
+              yield flicking.renderer.render();
+            }
+          })).catch((err) => {
+            if (axesEvent && err instanceof FlickingError && err.code === CODE.ANIMATION_INTERRUPTED) return;
+            throw err;
+          });
+        }
+      });
     }
     /**
      * @internal
@@ -2708,6 +2772,7 @@
      * Finds the adjacent anchor point based on the movement direction.
      */
     _findAdjacentAnchor(position, posDelta, anchorAtCamera) {
+      var _a;
       const flicking = getFlickingAttached(this._flicking);
       const camera = flicking.camera;
       if (camera.circularEnabled) {
@@ -2716,7 +2781,7 @@
           return anchorIncludePosition;
         }
       }
-      const adjacentAnchor = (posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) ?? anchorAtCamera;
+      const adjacentAnchor = (_a = posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) != null ? _a : anchorAtCamera;
       return adjacentAnchor;
     }
     /**
@@ -2772,13 +2837,14 @@
      * @returns The current instance for method chaining
      */
     updateInput() {
+      var _a;
       const flicking = getFlickingAttached(this._flicking);
       const camera = flicking.camera;
       const renderer = flicking.renderer;
       const controller = this._controller;
       const controlParams = camera.controlParams;
       const count = this._count;
-      const activePanel = controller.state.animating ? camera.findNearestAnchor(camera.position)?.panel : this._activePanel;
+      const activePanel = controller.state.animating ? (_a = camera.findNearestAnchor(camera.position)) == null ? void 0 : _a.panel : this._activePanel;
       if (!activePanel) {
         controller.update(controlParams);
         this._resetIndexRange();
@@ -2826,12 +2892,14 @@
       };
       return this;
     }
-    async moveToPanel(panel, options) {
-      const flicking = getFlickingAttached(this._flicking);
-      const camera = flicking.camera;
-      const controller = this._controller;
-      controller.update(camera.controlParams);
-      return super.moveToPanel(panel, options);
+    moveToPanel(panel, options) {
+      return __async(this, null, function* () {
+        const flicking = getFlickingAttached(this._flicking);
+        const camera = flicking.camera;
+        const controller = this._controller;
+        controller.update(camera.controlParams);
+        return __superGet(StrictControl.prototype, this, "moveToPanel").call(this, panel, options);
+      });
     }
     /**
      * Move {@link Camera} to the given position
@@ -2845,9 +2913,10 @@
      * @returns A Promise which will be resolved after reaching the target position
      */
     moveToPosition(position, duration, axesEvent) {
+      var _a;
       const flicking = getFlickingAttached(this._flicking);
       const camera = flicking.camera;
-      const currentPanel = this._nextPanel ?? this._activePanel;
+      const currentPanel = (_a = this._nextPanel) != null ? _a : this._activePanel;
       const axesRange = this._controller.range;
       const indexRange = this._indexRange;
       const cameraRange = camera.range;
@@ -3266,11 +3335,12 @@
       this._panelClass = val;
     }
     constructor(flicking, options) {
+      var _a, _b, _c, _d;
       this._flicking = flicking;
-      this._renderPanel = options?.renderPanel ?? (() => "");
-      this._initialPanelCount = options?.initialPanelCount ?? -1;
-      this._cache = options?.cache ?? false;
-      this._panelClass = options?.panelClass ?? CLASS.DEFAULT_VIRTUAL;
+      this._renderPanel = (_a = options == null ? void 0 : options.renderPanel) != null ? _a : (() => "");
+      this._initialPanelCount = (_b = options == null ? void 0 : options.initialPanelCount) != null ? _b : -1;
+      this._cache = (_c = options == null ? void 0 : options.cache) != null ? _c : false;
+      this._panelClass = (_d = options == null ? void 0 : options.panelClass) != null ? _d : CLASS.DEFAULT_VIRTUAL;
       this._elements = [];
     }
     init() {
@@ -3496,6 +3566,7 @@
       const prevFirstPanel = panels[0];
       const align = parsePanelAlign(this._align);
       const allPanelsInserted = items.reduce((addedPanels, item) => {
+        var _a;
         const insertingIdx = getMinusCompensatedIndex(item.index, panels.length);
         const panelsPushed = panels.slice(insertingIdx);
         const panelsInserted = item.elements.map(
@@ -3503,7 +3574,7 @@
         );
         panels.splice(insertingIdx, 0, ...panelsInserted);
         if (item.hasDOMInElements) {
-          this._insertPanelElements(panelsInserted, panelsPushed[0] ?? null);
+          this._insertPanelElements(panelsInserted, (_a = panelsPushed[0]) != null ? _a : null);
         }
         if (flicking.panelsPerView > 0) {
           const firstPanel = prevFirstPanel || panelsInserted[0].resize();
@@ -3570,6 +3641,7 @@
      * Updates camera, control, and triggers {@link PanelChangeEvent} after panels are added or removed.
      */
     updateAfterPanelChange(panelsAdded, panelsRemoved) {
+      var _a;
       const flicking = getFlickingAttached(this._flicking);
       const { camera, control } = flicking;
       const panels = this._panels;
@@ -3593,7 +3665,7 @@
           if (panels.length <= 0) {
             camera.lookAt(0);
           } else {
-            let targetIndex = activePanel?.index ?? 0;
+            let targetIndex = (_a = activePanel == null ? void 0 : activePanel.index) != null ? _a : 0;
             if (targetIndex > panels.length - 1) {
               targetIndex = panels.length - 1;
             }
@@ -3723,11 +3795,10 @@
       const gap = referencePanel.margin.prev + referencePanel.margin.next;
       const panelSize = (viewportSize - gap * (panelsPerView - 1)) / panelsPerView;
       const panelSizeObj = flicking.horizontal ? { width: panelSize } : { height: panelSize };
-      const firstPanelSizeObj = {
+      const firstPanelSizeObj = __spreadValues({
         size: panelSize,
-        margin: referencePanel.margin,
-        ...!flicking.horizontal && { height: referencePanel.height }
-      };
+        margin: referencePanel.margin
+      }, !flicking.horizontal && { height: referencePanel.height });
       if (!flicking.noPanelStyleOverride) {
         this._strategy.updatePanelSizes(flicking, panelSizeObj);
       }
@@ -3754,7 +3825,7 @@
       const flicking = getFlickingAttached(this._flicking);
       const camera = flicking.camera;
       const cameraElement = camera.element;
-      const nextSiblingElement = nextSibling?.element || null;
+      const nextSiblingElement = (nextSibling == null ? void 0 : nextSibling.element) || null;
       const fragment = document.createDocumentFragment();
       panels.forEach((panel) => fragment.appendChild(panel.element));
       cameraElement.insertBefore(fragment, nextSiblingElement);
@@ -3799,13 +3870,15 @@
   }
   class VanillaRenderer extends Renderer$1 {
     // eslint-disable-next-line @typescript-eslint/require-await
-    async render() {
-      const flicking = getFlickingAttached(this._flicking);
-      const strategy = this._strategy;
-      strategy.updateRenderingPanels(flicking);
-      strategy.renderPanels(flicking);
-      this._resetPanelElementOrder();
-      this._afterRender();
+    render() {
+      return __async(this, null, function* () {
+        const flicking = getFlickingAttached(this._flicking);
+        const strategy = this._strategy;
+        strategy.updateRenderingPanels(flicking);
+        strategy.renderPanels(flicking);
+        this._resetPanelElementOrder();
+        this._afterRender();
+      });
     }
     _collectPanels() {
       const flicking = getFlickingAttached(this._flicking);
@@ -4077,6 +4150,7 @@
      * @returns The current instance for method chaining
      */
     resize(cached) {
+      var _a;
       const el = this.element;
       const flicking = this._flicking;
       const { horizontal, useFractionalSize } = flicking;
@@ -4085,8 +4159,8 @@
       }
       if (cached) {
         this._size = cached.size;
-        this._margin = { ...cached.margin };
-        this._height = cached.height ?? getElementSize({
+        this._margin = __spreadValues({}, cached.margin);
+        this._height = (_a = cached.height) != null ? _a : getElementSize({
           el,
           horizontal: false,
           useFractionalSize,
@@ -4140,7 +4214,8 @@
      * @returns A Boolean value indicating the element is inside of this panel {@link Panel.element | element}
      */
     contains(element) {
-      return !!this.element?.contains(element);
+      var _a;
+      return !!((_a = this.element) == null ? void 0 : _a.contains(element));
     }
     /**
      * Reset internal state and set {@link Panel.removed | removed} to `true`
@@ -4375,10 +4450,9 @@
       );
     }
     createPanel(element, options) {
-      return new Panel({
-        ...options,
+      return new Panel(__spreadProps(__spreadValues({}, options), {
         elementProvider: new this._providerCtor(element)
-      });
+      }));
     }
     updatePanelSizes(flicking, size) {
       flicking.panels.forEach((panel) => panel.setSize(size));
@@ -4489,7 +4563,7 @@
       });
       if (visiblePanels.length <= 0) return virtualManager.elements.map((_, idx) => idx);
       const visibleIndexes = visiblePanels.map((panel) => panel.elementIndex);
-      const invisibleIndexes = virtualManager.elements.map((el, idx) => ({ ...el, idx })).filter((el) => !el.visible).map((el) => el.idx);
+      const invisibleIndexes = virtualManager.elements.map((el, idx) => __spreadProps(__spreadValues({}, el), { idx })).filter((el) => !el.visible).map((el) => el.idx);
       return [...visibleIndexes, ...invisibleIndexes];
     }
     getRenderingElementsByOrder(flicking) {
@@ -4525,10 +4599,9 @@
       );
     }
     createPanel(_el, options) {
-      return new VirtualPanel({
-        ...options,
+      return new VirtualPanel(__spreadProps(__spreadValues({}, options), {
         elementProvider: new VirtualElementProvider(options.flicking)
-      });
+      }));
     }
     updatePanelSizes(flicking, size) {
       flicking.virtual.elements.forEach((el) => {
@@ -4580,7 +4653,7 @@
         preventEventsBeforeInit = true,
         deceleration = 75e-4,
         duration = 500,
-        easing = (x) => 1 - (1 - x) ** 3,
+        easing = (x) => 1 - __pow(1 - x, 3),
         inputType = ["mouse", "touch"],
         moveType = "snap",
         threshold = 40,
@@ -5435,7 +5508,8 @@
      * @returns Promise that resolves after reaching the previous panel
      */
     prev(duration = this._duration) {
-      return this.moveTo(this._control.activePanel?.prev()?.index ?? -1, duration, DIRECTION.PREV);
+      var _a, _b, _c;
+      return this.moveTo((_c = (_b = (_a = this._control.activePanel) == null ? void 0 : _a.prev()) == null ? void 0 : _b.index) != null ? _c : -1, duration, DIRECTION.PREV);
     }
     /**
      * Move to the next panel (current index + 1).
@@ -5445,7 +5519,8 @@
      * @returns Promise that resolves after reaching the next panel
      */
     next(duration = this._duration) {
-      return this.moveTo(this._control.activePanel?.next()?.index ?? this._renderer.panelCount, duration, DIRECTION.NEXT);
+      var _a, _b, _c;
+      return this.moveTo((_c = (_b = (_a = this._control.activePanel) == null ? void 0 : _a.next()) == null ? void 0 : _b.index) != null ? _c : this._renderer.panelCount, duration, DIRECTION.NEXT);
     }
     /**
      * Move to the panel with the given index.
@@ -5556,6 +5631,7 @@
      * @returns Status object that can be used with {@link Flicking.setStatus} to restore the state
      */
     getStatus(options = {}) {
+      var _a, _b;
       const { index = true, position = true, includePanelHTML = false, visiblePanelsOnly = false } = options;
       const camera = this._camera;
       const panels = visiblePanelsOnly ? this.visiblePanels : this.panels;
@@ -5582,7 +5658,7 @@
       }
       if (visiblePanelsOnly) {
         const visiblePanels = this.visiblePanels;
-        status.visibleOffset = visiblePanels[0]?.index ?? 0;
+        status.visibleOffset = (_b = (_a = visiblePanels[0]) == null ? void 0 : _a.index) != null ? _b : 0;
       }
       return status;
     }
@@ -5592,13 +5668,14 @@
      * @throws {@link StatusRestoreErrors}
      */
     setStatus(status) {
+      var _a;
       if (!this._initialized) {
         throw new FlickingError(MESSAGE.NOT_INITIALIZED, CODE.NOT_INITIALIZED);
       }
       const { index, position, visibleOffset, panels } = status;
       const renderer = this._renderer;
       const control = this._control;
-      if (panels[0]?.html && !this._renderExternal) {
+      if (((_a = panels[0]) == null ? void 0 : _a.html) && !this._renderExternal) {
         renderer.batchRemove({
           index: 0,
           deleteCount: this.panels.length,
@@ -5660,78 +5737,80 @@
      * @fires {@link ResizeEvents}
      * @returns Promise that resolves when resize is complete
      */
-    async resize() {
-      if (!this._initialized) {
-        return;
-      }
-      if (this._isResizing) {
-        this._scheduleResize = true;
-        return;
-      }
-      this._scheduleResize = false;
-      this._isResizing = true;
-      const viewport = this._viewport;
-      const renderer = this._renderer;
-      const camera = this._camera;
-      const control = this._control;
-      const activePanel = control.activePanel;
-      const prevWidth = viewport.width;
-      const prevHeight = viewport.height;
-      const prevProgressInPanel = activePanel ? camera.getProgressInPanel(activePanel) : 0;
-      this.trigger(
-        new Component.ComponentEvent(EVENTS.BEFORE_RESIZE, {
-          width: prevWidth,
-          height: prevHeight,
-          element: viewport.element
-        })
-      );
-      viewport.resize();
-      if (this._optimizeSizeUpdate) {
-        if (this.horizontal && viewport.width !== prevWidth || !this.horizontal && viewport.height !== prevHeight) {
-          await renderer.forceRenderAllPanels();
+    resize() {
+      return __async(this, null, function* () {
+        if (!this._initialized) {
+          return;
         }
-      } else {
-        await renderer.forceRenderAllPanels();
-      }
-      if (!this._initialized) {
-        return;
-      }
-      renderer.updatePanelSize();
-      camera.updateAlignPos();
-      camera.updateRange();
-      camera.updateAnchors();
-      camera.updateAdaptiveHeight();
-      camera.updatePanelOrder();
-      camera.updateOffset();
-      await renderer.render();
-      if (!this._initialized) {
-        return;
-      }
-      if (control.animating) ;
-      else {
-        control.updatePosition(prevProgressInPanel);
-        control.updateInput();
-      }
-      const newWidth = viewport.width;
-      const newHeight = viewport.height;
-      const sizeChanged = newWidth !== prevWidth || newHeight !== prevHeight;
-      this.trigger(
-        new Component.ComponentEvent(EVENTS.AFTER_RESIZE, {
-          width: viewport.width,
-          height: viewport.height,
-          prev: {
+        if (this._isResizing) {
+          this._scheduleResize = true;
+          return;
+        }
+        this._scheduleResize = false;
+        this._isResizing = true;
+        const viewport = this._viewport;
+        const renderer = this._renderer;
+        const camera = this._camera;
+        const control = this._control;
+        const activePanel = control.activePanel;
+        const prevWidth = viewport.width;
+        const prevHeight = viewport.height;
+        const prevProgressInPanel = activePanel ? camera.getProgressInPanel(activePanel) : 0;
+        this.trigger(
+          new Component.ComponentEvent(EVENTS.BEFORE_RESIZE, {
             width: prevWidth,
-            height: prevHeight
-          },
-          sizeChanged,
-          element: viewport.element
-        })
-      );
-      this._isResizing = false;
-      if (this._scheduleResize) {
-        void this.resize();
-      }
-      return;
+            height: prevHeight,
+            element: viewport.element
+          })
+        );
+        viewport.resize();
+        if (this._optimizeSizeUpdate) {
+          if (this.horizontal && viewport.width !== prevWidth || !this.horizontal && viewport.height !== prevHeight) {
+            yield renderer.forceRenderAllPanels();
+          }
+        } else {
+          yield renderer.forceRenderAllPanels();
+        }
+        if (!this._initialized) {
+          return;
+        }
+        renderer.updatePanelSize();
+        camera.updateAlignPos();
+        camera.updateRange();
+        camera.updateAnchors();
+        camera.updateAdaptiveHeight();
+        camera.updatePanelOrder();
+        camera.updateOffset();
+        yield renderer.render();
+        if (!this._initialized) {
+          return;
+        }
+        if (control.animating) ;
+        else {
+          control.updatePosition(prevProgressInPanel);
+          control.updateInput();
+        }
+        const newWidth = viewport.width;
+        const newHeight = viewport.height;
+        const sizeChanged = newWidth !== prevWidth || newHeight !== prevHeight;
+        this.trigger(
+          new Component.ComponentEvent(EVENTS.AFTER_RESIZE, {
+            width: viewport.width,
+            height: viewport.height,
+            prev: {
+              width: prevWidth,
+              height: prevHeight
+            },
+            sizeChanged,
+            element: viewport.element
+          })
+        );
+        this._isResizing = false;
+        if (this._scheduleResize) {
+          void this.resize();
+        }
+        return;
+      });
     }
     /**
      * Add new panels after the last panel.
@@ -5820,10 +5899,11 @@
      * Throws error if moveType is invalid.
      */
     _createControl() {
+      var _a;
       const moveType = this._moveType;
       const moveTypes = Object.keys(MOVE_TYPE).map((key) => MOVE_TYPE[key]);
       const moveTypeStr = Array.isArray(moveType) ? moveType[0] : moveType;
-      const moveTypeOptions = Array.isArray(moveType) ? moveType[1] ?? {} : {};
+      const moveTypeOptions = Array.isArray(moveType) ? (_a = moveType[1]) != null ? _a : {} : {};
       if (!includes(moveTypes, moveTypeStr)) {
         throw new FlickingError(
           MESSAGE.WRONG_OPTION("moveType", JSON.stringify(moveType)),
@@ -5876,7 +5956,7 @@
      */
     _createExternalRenderer() {
       const { renderer, rendererOptions } = this._renderExternal;
-      return new renderer({ align: this._align, ...rendererOptions });
+      return new renderer(__spreadValues({ align: this._align }, rendererOptions));
     }
     /**
      * Factory method to create VanillaRenderer for vanilla JavaScript rendering.
@@ -5967,7 +6047,7 @@
       );
     }
   };
-  _Flicking.VERSION = "4.16.0-beta.3";
+  _Flicking.VERSION = "4.16.1-beta.0";
   let Flicking = _Flicking;
   const SIDE_EVENTS = {
     HOLD_START: "sideHoldStart",
@@ -6150,10 +6230,9 @@
         Object.keys(SIDE_EVENTS).forEach((name) => {
           flicking.on(EVENTS[name], (event) => {
             this.trigger(
-              new Component.ComponentEvent(SIDE_EVENTS[name], {
-                mainIndex,
-                ...event
-              })
+              new Component.ComponentEvent(SIDE_EVENTS[name], __spreadValues({
+                mainIndex
+              }, event))
             );
           });
         });
@@ -6254,12 +6333,11 @@
     }
     _createSideFlicking() {
       return this.sideState.map((state, i) => {
-        return new Flicking(this.camera.children[i], {
-          ...this.sideOptions,
+        return new Flicking(this.camera.children[i], __spreadProps(__spreadValues({}, this.sideOptions), {
           horizontal: false,
           panelsPerView: 1,
           defaultIndex: state.start
-        });
+        }));
       });
     }
   }
@@ -6421,13 +6499,15 @@
           const getterDescriptor = {};
           if (descriptor.get) {
             getterDescriptor.get = function() {
+              var _a;
               const flicking = this[flickingName];
-              return flicking && descriptor.get?.call(flicking);
+              return flicking && ((_a = descriptor.get) == null ? void 0 : _a.call(flicking));
             };
           }
           if (descriptor.set) {
             getterDescriptor.set = function(...args) {
-              return descriptor.set?.call(this[flickingName], ...args);
+              var _a;
+              return (_a = descriptor.set) == null ? void 0 : _a.call(this[flickingName], ...args);
             };
           }
           Object.defineProperty(prototype, name, getterDescriptor);
@@ -6864,12 +6944,13 @@
     return indexProgress;
   };
   const flickingReactiveAPIAdapter = ({ onInit, onDestroy, setMethods, getProps }) => {
+    var _a, _b, _c;
     let flicking;
     const moveTo = (i) => {
       if (flicking == null) {
         return Promise.reject(new Error("Flicking instance is not available"));
       }
-      if (flicking?.animating) {
+      if (flicking == null ? void 0 : flicking.animating) {
         return Promise.resolve();
       }
       return flicking.moveTo(i);
@@ -6877,12 +6958,12 @@
     setMethods(["moveTo"]);
     const options = getProps().options;
     const reactiveObj = reactive({
-      isReachStart: options?.defaultIndex ? options?.defaultIndex === 0 : true,
-      isReachEnd: options?.totalPanelCount && options?.defaultIndex ? options.defaultIndex === options.totalPanelCount - 1 : false,
-      totalPanelCount: options?.totalPanelCount ?? 0,
-      currentPanelIndex: options?.defaultIndex ?? 0,
+      isReachStart: (options == null ? void 0 : options.defaultIndex) ? (options == null ? void 0 : options.defaultIndex) === 0 : true,
+      isReachEnd: (options == null ? void 0 : options.totalPanelCount) && (options == null ? void 0 : options.defaultIndex) ? options.defaultIndex === options.totalPanelCount - 1 : false,
+      totalPanelCount: (_a = options == null ? void 0 : options.totalPanelCount) != null ? _a : 0,
+      currentPanelIndex: (_b = options == null ? void 0 : options.defaultIndex) != null ? _b : 0,
       progress: 0,
-      indexProgress: options?.defaultIndex ?? 0,
+      indexProgress: (_c = options == null ? void 0 : options.defaultIndex) != null ? _c : 0,
       moveTo
     });
     const onChanged = () => {
@@ -6909,14 +6990,14 @@
       reactiveObj.currentPanelIndex = getCurrentPanelIndex(flicking);
       reactiveObj.progress = getProgress(flicking);
       reactiveObj.totalPanelCount = getTotalPanelCount(flicking);
-      flicking?.on("changed", onChanged);
-      flicking?.on("panelChange", onPanelChange);
-      flicking?.on("move", onMove);
+      flicking == null ? void 0 : flicking.on("changed", onChanged);
+      flicking == null ? void 0 : flicking.on("panelChange", onPanelChange);
+      flicking == null ? void 0 : flicking.on("move", onMove);
     });
     onDestroy(() => {
-      flicking?.off("changed", onChanged);
-      flicking?.off("panelChange", onPanelChange);
-      flicking?.off("move", onMove);
+      flicking == null ? void 0 : flicking.off("changed", onChanged);
+      flicking == null ? void 0 : flicking.off("panelChange", onPanelChange);
+      flicking == null ? void 0 : flicking.off("move", onMove);
     });
     return reactiveObj;
   };
@@ -6932,7 +7013,7 @@
     connectFlickingReactiveAPI,
     flickingReactiveAPIAdapter
   }, Symbol.toStringTag, { value: "Module" }));
-  const Constants = { ...Events, ...Values };
+  const Constants = __spreadValues(__spreadValues({}, Events), Values);
   merge(Flicking, Core);
   merge(Flicking, Camera);
   merge(Flicking, Control);