@egjs/flicking 4.16.0 → 4.16.1-beta.0

package/dist/flicking.esm.js

@@ -1,3 +1,46 @@
+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());
+  });
+};
 import Component, { ComponentEvent } from "@egjs/component";
 import Axes, { PanInput } from "@egjs/axes";
 import ImReady from "@egjs/imready";
@@ -830,10 +873,11 @@ class LinearCameraMode extends CameraMode {
     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 };
   }
 }
 class Camera {
@@ -1162,10 +1206,11 @@ class Camera {
    * @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
@@ -1796,7 +1841,7 @@ class StateMachine {
   }
   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);
@@ -1822,7 +1867,8 @@ class AxesController {
       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) {
@@ -1893,28 +1939,32 @@ class AxesController {
    * @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
@@ -1967,11 +2017,12 @@ class AxesController {
    * 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();
   }
   /**
@@ -1981,7 +2032,8 @@ class AxesController {
    * @returns The current instance for method chaining
    */
   enable() {
-    this._panInput?.enable();
+    var _a;
+    (_a = this._panInput) == null ? void 0 : _a.enable();
     return this;
   }
   /**
@@ -1991,7 +2043,8 @@ class AxesController {
    * @returns The current instance for method chaining
    */
   disable() {
-    this._panInput?.disable();
+    var _a;
+    (_a = this._panInput) == null ? void 0 : _a.disable();
     return this;
   }
   /**
@@ -2001,7 +2054,8 @@ class AxesController {
    * @returns The current instance for method chaining
    */
   release() {
-    this._panInput?.release();
+    var _a;
+    (_a = this._panInput) == null ? void 0 : _a.release();
     return this;
   }
   /**
@@ -2013,11 +2067,11 @@ class AxesController {
    * @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
     });
@@ -2030,7 +2084,8 @@ class AxesController {
    * @returns The current instance for method chaining
    */
   stopAnimation() {
-    this._axes?.stopAnimation();
+    var _a;
+    (_a = this._axes) == null ? void 0 : _a.stopAnimation();
     return this;
   }
   /**
@@ -2093,6 +2148,7 @@ class AxesController {
    * @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) {
@@ -2105,7 +2161,7 @@ class AxesController {
       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();
     }
@@ -2143,7 +2199,8 @@ class AxesController {
    * 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);
@@ -2180,7 +2237,8 @@ class Control {
    * @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
@@ -2272,7 +2330,7 @@ class Control {
    */
   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;
@@ -2334,10 +2392,12 @@ class Control {
    * @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
@@ -2345,6 +2405,7 @@ class Control {
    * 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;
@@ -2354,7 +2415,7 @@ class Control {
         new 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
@@ -2384,6 +2445,7 @@ class Control {
    * 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;
@@ -2391,8 +2453,8 @@ class Control {
     const event = new 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);
@@ -2405,32 +2467,34 @@ class Control {
    * @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
@@ -2652,6 +2716,7 @@ class SnapControl extends Control {
    * 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) {
@@ -2660,7 +2725,7 @@ class SnapControl extends Control {
         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;
   }
   /**
@@ -2716,13 +2781,14 @@ class StrictControl extends Control {
    * @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();
@@ -2770,12 +2836,14 @@ class StrictControl extends Control {
     };
     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
@@ -2789,9 +2857,10 @@ class StrictControl extends Control {
    * @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;
@@ -3195,11 +3264,12 @@ class VirtualManager {
     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() {
@@ -3425,6 +3495,7 @@ class Renderer {
     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(
@@ -3432,7 +3503,7 @@ class Renderer {
       );
       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();
@@ -3499,6 +3570,7 @@ class Renderer {
    * 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;
@@ -3522,7 +3594,7 @@ class Renderer {
         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;
           }
@@ -3652,11 +3724,10 @@ class Renderer {
     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);
     }
@@ -3683,7 +3754,7 @@ class Renderer {
     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);
@@ -3728,13 +3799,15 @@ class ExternalRenderer extends Renderer {
 }
 class VanillaRenderer extends Renderer {
   // 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);
@@ -4006,6 +4079,7 @@ class Panel {
    * @returns The current instance for method chaining
    */
   resize(cached) {
+    var _a;
     const el = this.element;
     const flicking = this._flicking;
     const { horizontal, useFractionalSize } = flicking;
@@ -4014,8 +4088,8 @@ class Panel {
     }
     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,
@@ -4069,7 +4143,8 @@ class Panel {
    * @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`
@@ -4304,10 +4379,9 @@ class NormalRenderingStrategy {
     );
   }
   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));
@@ -4418,7 +4492,7 @@ class VirtualRenderingStrategy {
     });
     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) {
@@ -4454,10 +4528,9 @@ class VirtualRenderingStrategy {
     );
   }
   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) => {
@@ -4501,7 +4574,7 @@ const _Flicking = class _Flicking extends Component {
       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,
@@ -5356,7 +5429,8 @@ const _Flicking = class _Flicking extends Component {
    * @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).
@@ -5366,7 +5440,8 @@ const _Flicking = class _Flicking extends Component {
    * @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.
@@ -5477,6 +5552,7 @@ const _Flicking = class _Flicking extends Component {
    * @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;
@@ -5503,7 +5579,7 @@ const _Flicking = class _Flicking extends Component {
     }
     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;
   }
@@ -5513,13 +5589,14 @@ const _Flicking = class _Flicking extends Component {
    * @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,
@@ -5581,78 +5658,80 @@ const _Flicking = class _Flicking extends Component {
    * @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 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 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 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 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.
@@ -5741,10 +5820,11 @@ const _Flicking = class _Flicking extends Component {
    * 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)),
@@ -5797,7 +5877,7 @@ const _Flicking = class _Flicking extends Component {
    */
   _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.
@@ -5888,7 +5968,7 @@ const _Flicking = class _Flicking extends Component {
     );
   }
 };
-_Flicking.VERSION = "4.16.0";
+_Flicking.VERSION = "4.16.1-beta.0";
 let Flicking = _Flicking;
 const SIDE_EVENTS = {
   HOLD_START: "sideHoldStart",
@@ -6071,10 +6151,9 @@ class CrossFlicking extends Flicking {
       Object.keys(SIDE_EVENTS).forEach((name) => {
         flicking.on(EVENTS[name], (event) => {
           this.trigger(
-            new ComponentEvent(SIDE_EVENTS[name], {
-              mainIndex,
-              ...event
-            })
+            new ComponentEvent(SIDE_EVENTS[name], __spreadValues({
+              mainIndex
+            }, event))
           );
         });
       });
@@ -6175,12 +6254,11 @@ class CrossFlicking extends Flicking {
   }
   _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
-      });
+      }));
     });
   }
 }
@@ -6327,13 +6405,15 @@ const withFlickingMethods = (prototype, flickingName) => {
         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);
@@ -6763,12 +6843,13 @@ const getIndexProgress = (flicking) => {
   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);
@@ -6776,12 +6857,12 @@ const flickingReactiveAPIAdapter = ({ onInit, onDestroy, setMethods, getProps })
   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 = () => {
@@ -6808,14 +6889,14 @@ const flickingReactiveAPIAdapter = ({ onInit, onDestroy, setMethods, getProps })
     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;
 };