@egjs/flicking 4.12.0-beta.5 → 4.12.0-beta.7

package/declaration/utils.d.ts

@@ -1,45 +1,47 @@
-import Flicking, { FlickingOptions } from "./Flicking";
-import { ALIGN, DIRECTION } from "./const/external";
-import { LiteralUnion, Merged, ValueOf } from "./type/internal";
-import { ElementLike } from "./type/external";
-export declare const merge: <From extends object, To extends object>(target: From, ...sources: To[]) => Merged<From, To>;
-export declare const getElement: (el: HTMLElement | string | null, parent?: HTMLElement) => HTMLElement;
-export declare const checkExistence: (value: any, nameOnErrMsg: string) => void;
-export declare const clamp: (x: number, min: number, max: number) => number;
-export declare const getFlickingAttached: (val: Flicking | null) => Flicking;
-export declare const toArray: <T>(iterable: ArrayLike<T>) => T[];
-export declare const parseAlign: (align: LiteralUnion<ValueOf<typeof ALIGN>> | number, size: number) => number;
-export declare const parseBounce: (bounce: FlickingOptions["bounce"], size: number) => number[];
-export declare const parseArithmeticSize: (cssValue: number | string, base: number) => number | null;
-export declare const parseArithmeticExpression: (cssValue: number | string) => {
-    percentage: number;
-    absolute: number;
-} | null;
-export declare const parseCSSSizeValue: (val: string | number) => string;
-export declare const parsePanelAlign: (align: FlickingOptions["align"]) => string | number;
-export declare const getDirection: (start: number, end: number) => ValueOf<typeof DIRECTION>;
-export declare const parseElement: (element: ElementLike | ElementLike[]) => HTMLElement[];
-export declare const getMinusCompensatedIndex: (idx: number, max: number) => number;
-export declare const includes: <T>(array: T[], target: any) => target is T;
-export declare const isString: (val: any) => val is string;
-export declare const circulatePosition: (pos: number, min: number, max: number) => number;
-export declare const find: <T>(array: T[], checker: (val: T) => boolean) => T;
-export declare const findRight: <T>(array: T[], checker: (val: T) => boolean) => T;
-export declare const findIndex: <T>(array: T[], checker: (val: T) => boolean) => number;
-export declare const getProgress: (pos: number, prev: number, next: number) => number;
-export declare const getStyle: (el: HTMLElement) => CSSStyleDeclaration;
-export declare const setSize: (el: HTMLElement, { width, height }: Partial<{
-    width: number | string;
-    height: number | string;
-}>) => void;
-export declare const isBetween: (val: number, min: number, max: number) => boolean;
-export declare const circulateIndex: (index: number, max: number) => number;
-export declare const range: (end: number) => number[];
-export declare const getElementSize: ({ el, horizontal, useFractionalSize, useOffset, style }: {
-    el: HTMLElement;
-    horizontal: boolean;
-    useFractionalSize: boolean;
-    useOffset: boolean;
-    style: CSSStyleDeclaration;
-}) => number;
-export declare const setPrototypeOf: (o: any, proto: object) => any;
+import Flicking, { FlickingOptions } from "./Flicking";
+import { ALIGN, DIRECTION } from "./const/external";
+import { LiteralUnion, Merged, ValueOf } from "./type/internal";
+import { ElementLike } from "./type/external";
+export declare const merge: <From extends object, To extends object>(target: From, ...sources: To[]) => Merged<From, To>;
+export declare const getElement: (el: HTMLElement | string | null, parent?: HTMLElement) => HTMLElement;
+export declare const checkExistence: (value: any, nameOnErrMsg: string) => void;
+export declare const clamp: (x: number, min: number, max: number) => number;
+export declare const getFlickingAttached: (val: Flicking | null) => Flicking;
+export declare const toArray: <T>(iterable: ArrayLike<T>) => T[];
+export declare const parseAlign: (align: LiteralUnion<ValueOf<typeof ALIGN>> | number, size: number) => number;
+export declare const parseBounce: (bounce: FlickingOptions["bounce"], size: number) => number[];
+export declare const parseArithmeticSize: (cssValue: number | string, base: number) => number | null;
+export declare const parseArithmeticExpression: (cssValue: number | string) => {
+    percentage: number;
+    absolute: number;
+} | null;
+export declare const parseCSSSizeValue: (val: string | number) => string;
+export declare const parsePanelAlign: (align: FlickingOptions["align"]) => string | number;
+export declare const getDirection: (start: number, end: number) => ValueOf<typeof DIRECTION>;
+export declare const parseElement: (element: ElementLike | ElementLike[]) => HTMLElement[];
+export declare const getMinusCompensatedIndex: (idx: number, max: number) => number;
+export declare const includes: <T>(array: T[], target: any) => target is T;
+export declare const isString: (val: any) => val is string;
+export declare const circulatePosition: (pos: number, min: number, max: number) => number;
+export declare const find: <T>(array: T[], checker: (val: T) => boolean) => T;
+export declare const findRight: <T>(array: T[], checker: (val: T) => boolean) => T;
+export declare const findIndex: <T>(array: T[], checker: (val: T) => boolean) => number;
+export declare const getProgress: (pos: number, prev: number, next: number) => number;
+export declare const getStyle: (el: HTMLElement) => CSSStyleDeclaration;
+export declare const setSize: (el: HTMLElement, { width, height }: Partial<{
+    width: number | string;
+    height: number | string;
+}>) => void;
+export declare const isBetween: (val: number, min: number, max: number) => boolean;
+export declare const circulateIndex: (index: number, max: number) => number;
+export declare const range: (end: number) => number[];
+export declare const getElementSize: ({ el, horizontal, useFractionalSize, useOffset, style }: {
+    el: HTMLElement;
+    horizontal: boolean;
+    useFractionalSize: boolean;
+    useOffset: boolean;
+    style: CSSStyleDeclaration;
+}) => number;
+export declare const setPrototypeOf: (o: any, proto: object) => any;
+export declare const camelize: (str: string) => string;
+export declare const getDataAttributes: (element: HTMLElement, attributePrefix: string) => Record<string, string>;

package/dist/flicking.cjs.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.12.0-beta.5
+version: 4.12.0-beta.7
 */
 'use strict';
 
@@ -12,7 +12,7 @@ var Component = require('@egjs/component');
 var Axes = require('@egjs/axes');
 var ImReady = require('@egjs/imready');
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -26,7 +26,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 var extendStatics = function (d, b) {
   extendStatics = Object.setPrototypeOf || {
@@ -111,7 +111,7 @@ function __generator(thisArg, body) {
   }
   function step(op) {
     if (f) throw new TypeError("Generator is already executing.");
-    while (_) try {
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
       if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
       if (y = 0, t) op = [op[0] & 2, t.value];
       switch (op[0]) {
@@ -215,6 +215,10 @@ function __spread() {
   for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
   return ar;
 }
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 /*
  * Copyright (c) 2015 NAVER Corp.
@@ -383,6 +387,8 @@ var MOVE_TYPE = {
   STRICT: "strict"
 };
 var CLASS = {
+  VIEWPORT: "flicking-viewport",
+  CAMERA: "flicking-camera",
   VERTICAL: "vertical",
   HIDDEN: "flicking-hidden",
   DEFAULT_VIRTUAL: "flicking-panel"
@@ -409,6 +415,17 @@ var ORDER = {
   LTR: "ltr",
   RTL: "rtl"
 };
+/**
+ * An object that contains the direction that {@link Flicking} is moving
+ * @ko {@link Flicking}이 움직이는 방향을 담고 있는 객체
+ * @type {object}
+ * @property {"horizontal"} HORIZONTAL horizontal<ko>수평 방향</ko>
+ * @property {"vertical"} VERTICAL vertical<ko>수직 방향</ko>
+ */
+var MOVE_DIRECTION = {
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical"
+};
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 var merge = function (target) {
@@ -723,6 +740,26 @@ var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
   obj.__proto__ = proto;
   return obj;
 };
+var camelize = function (str) {
+  return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
+    return letter.toUpperCase();
+  });
+};
+var getDataAttributes = function (element, attributePrefix) {
+  var dataAttributes = {};
+  var attributes = element.attributes;
+  var length = attributes.length;
+  for (var i = 0; i < length; ++i) {
+    var attribute = attributes[i];
+    var name_1 = attribute.name,
+      value = attribute.value;
+    if (name_1.indexOf(attributePrefix) === -1) {
+      continue;
+    }
+    dataAttributes[camelize(name_1.replace(attributePrefix, ""))] = value;
+  }
+  return dataAttributes;
+};
 
 /*
  * Copyright (c) 2015 NAVER Corp.
@@ -3709,7 +3746,6 @@ var Camera = /*#__PURE__*/function () {
     var _this = this;
     var _b = (_a === void 0 ? {} : _a).align,
       align = _b === void 0 ? ALIGN.CENTER : _b;
-    this._lookedOffset = 0;
     this._checkTranslateSupport = function () {
       var e_1, _a;
       var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
@@ -4069,8 +4105,6 @@ var Camera = /*#__PURE__*/function () {
    */
   __proto.lookAt = function (pos) {
     var _this = this;
-    var prevOffset = this._offset;
-    var isChangedOffset = this._lookedOffset !== prevOffset;
     var flicking = getFlickingAttached(this._flicking);
     var prevPos = this._position;
     this._position = pos;
@@ -4081,12 +4115,7 @@ var Camera = /*#__PURE__*/function () {
     if (toggled) {
       void flicking.renderer.render().then(function () {
         _this.updateOffset();
-        _this._lookedOffset = _this._offset;
       });
-    } else if (isChangedOffset) {
-      // sync offset for renderOnlyVisible on resize
-      this.updateOffset();
-      this._lookedOffset = this._offset;
     } else {
       this.applyTransform();
     }
@@ -4261,8 +4290,8 @@ var Camera = /*#__PURE__*/function () {
     return this;
   };
   /**
-   * Update Viewport's height to visible panel's max height
-   * @ko 현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
+   * Update Viewport's height to active panel's height
+   * @ko 현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
    * @throws {FlickingError}
    * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
    * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
@@ -4272,17 +4301,9 @@ var Camera = /*#__PURE__*/function () {
   __proto.updateAdaptiveHeight = function () {
     var flicking = getFlickingAttached(this._flicking);
     var activePanel = flicking.control.activePanel;
-    var visiblePanels = flicking.visiblePanels;
-    var selectedPanels = __spread(visiblePanels);
-    if (activePanel) {
-      selectedPanels.push(activePanel);
-    }
-    if (!flicking.horizontal || !flicking.adaptive || !selectedPanels.length) return;
-    var maxHeight = Math.max.apply(Math, __spread(selectedPanels.map(function (panel) {
-      return panel.height;
-    })));
+    if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
     flicking.viewport.setSize({
-      height: maxHeight
+      height: activePanel.height
     });
   };
   /**
@@ -4353,7 +4374,6 @@ var Camera = /*#__PURE__*/function () {
   };
   __proto._resetInternalValues = function () {
     this._position = 0;
-    this._lookedOffset = 0;
     this._alignPos = 0;
     this._offset = 0;
     this._circularOffset = 0;
@@ -7875,10 +7895,318 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.12.0-beta.5";
+  Flicking.VERSION = "4.12.0-beta.7";
   return Flicking;
 }(Component);
 
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+/**
+ * @extends Component
+ * @support {"ie": "9+(with polyfill)", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "4.X+"}
+ * @requires {@link https://github.com/naver/egjs-component|@egjs/component}
+ * @requires {@link https://github.com/naver/egjs-axes|@egjs/axes}
+ */
+var CrossFlicking = /*#__PURE__*/function (_super) {
+  __extends(CrossFlicking, _super);
+  // Options Setter
+  // public set align(val: FlickingOptions["align"]) {
+  //   this._align = val;
+  // }
+  function CrossFlicking(root, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    var _this = _super.call(this, root, options) || this;
+    _this._onHorizontalHoldStart = function () {
+      _this.dragThreshold = 10;
+      _this._moveDirection = null;
+    };
+    _this._onHorizontalMove = function (e) {
+      if (e.isTrusted && !_this._moveDirection) {
+        _this._sideFlicking.forEach(function (child) {
+          child.dragThreshold = Infinity;
+        });
+        _this._moveDirection = MOVE_DIRECTION.HORIZONTAL;
+      }
+    };
+    _this._onHorizontalMoveEnd = function (e) {
+      var visiblePanels = _this.visiblePanels;
+      _this._sideFlicking.forEach(function (child) {
+        child.dragThreshold = 10;
+      });
+      _this._moveDirection = null;
+      if (visiblePanels.length > 1) {
+        _this._nextIndex = e.direction === "NEXT" ? visiblePanels[1].index : visiblePanels[0].index;
+      } else {
+        _this._nextIndex = visiblePanels[0].index;
+      }
+      // _syncToCategory에서 완전히 가로 이동이 이루어지기 전에 세로 방향 index가 변하는 경우가 있어 timeout으로 처리
+      _this._sideFlicking.forEach(function (child, i) {
+        if (_this._nextIndex !== i) {
+          var _a = _this._sideState[i],
+            start = _a.start,
+            end = _a.end;
+          if (child.index < start) {
+            child.stopAnimation();
+            void child.moveTo(start, 0);
+          } else if (child.index > end) {
+            child.stopAnimation();
+            void child.moveTo(end, 0);
+          }
+        }
+      });
+      if (e.isTrusted) {
+        _this._syncToCategory(_this._sideFlicking[_this._nextIndex].index, _this._nextIndex);
+      }
+    };
+    _this._onSideHoldStart = function () {
+      _this._sideFlicking.forEach(function (child) {
+        child.dragThreshold = 10;
+      });
+      _this._moveDirection = null;
+    };
+    _this._onSideMove = function (e) {
+      if (e.isTrusted && !_this._moveDirection) {
+        _this.dragThreshold = Infinity;
+        _this._moveDirection = MOVE_DIRECTION.VERTICAL;
+      }
+    };
+    _this._onSideMoveEnd = function () {
+      _this.dragThreshold = 10;
+      _this._moveDirection = null;
+    };
+    _this._onSideChanged = function (e) {
+      // this.visiblePanels.length 가 2보다 크다면 가로 방향 Flicking이 조작 중이라는 것을 의미합니다.
+      // 이 경우 가로 방향 Flicking의 이동이 완전히 끝난 뒤 _onHorizontalMoveEnd 에서 syncToCategory할 것이므로 여기서는 하지 않습니다.
+      if (_this.visiblePanels.length < 2 && _this._sideFlicking[_this.index] === e.currentTarget) {
+        _this._syncToCategory(e.index, _this.index);
+      }
+    };
+    // Internal states
+    _this._sideState = _this._createSideState();
+    _this._moveDirection = null;
+    _this._nextIndex = 0;
+    // Bind options
+    _this._sideOptions = options.sideOptions;
+    // Create core components
+    _this._sideFlicking = _this._createSideFlicking();
+    return _this;
+  }
+  var __proto = CrossFlicking.prototype;
+  Object.defineProperty(__proto, "sideFlicking", {
+    // Components
+    /**
+     * {@link Control} instance of the Flicking
+     * @ko 현재 Flicking에 활성화된 {@link Control} 인스턴스
+     * @type {Control}
+     * @default SnapControl
+     * @readonly
+     * @see Control
+     * @see SnapControl
+     * @see FreeControl
+     */
+    get: function () {
+      return this._sideFlicking;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "sideState", {
+    // Internal States
+    /**
+     * Whether Flicking's {@link Flicking#init init()} is called.
+     * This is `true` when {@link Flicking#init init()} is called, and is `false` after calling {@link Flicking#destroy destroy()}.
+     * @ko Flicking의 {@link Flicking#init init()}이 호출되었는지를 나타내는 멤버 변수.
+     * 이 값은 {@link Flicking#init init()}이 호출되었으면 `true`로 변하고, {@link Flicking#destroy destroy()}호출 이후에 다시 `false`로 변경됩니다.
+     * @type {boolean}
+     * @default false
+     * @readonly
+     */
+    get: function () {
+      return this._sideState;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "sideOptions", {
+    // Options Getter
+    /**
+     * Change active panel index on mouse/touch hold while animating.
+     * `index` of the `willChange`/`willRestore` event will be used as new index.
+     * @ko 애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
+     * `willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다.
+     * @type {FlickingOptions}
+     * @default undefined
+     * @see {@link https://naver.github.io/egjs-flicking/Options#changeonhold changeOnHold ( Options )}
+     */
+    get: function () {
+      return this._sideOptions;
+    },
+    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)
+   * @ko Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
+   * 이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
+   * @fires Flicking#ready
+   * @return {Promise<void>}
+   */
+  __proto.init = function () {
+    var _this = this;
+    return _super.prototype.init.call(this).then(function () {
+      return _this._addComponentEvents();
+    });
+  };
+  /**
+   * Destroy Flicking and remove all event handlers
+   * @ko Flicking과 하위 컴포넌트들을 초기 상태로 되돌리고, 부착된 모든 이벤트 핸들러를 제거합니다
+   * @return {void}
+   */
+  __proto.destroy = function () {
+    // TODO 모든 child flicking destroy
+    _super.prototype.destroy.call(this);
+  };
+  __proto._addComponentEvents = function () {
+    var _this = this;
+    this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
+    this.on(EVENTS.MOVE, this._onHorizontalMove);
+    this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
+    this._sideFlicking.forEach(function (flicking) {
+      flicking.on(EVENTS.HOLD_START, _this._onSideHoldStart);
+      flicking.on(EVENTS.MOVE, _this._onSideMove);
+      flicking.on(EVENTS.MOVE_END, _this._onSideMoveEnd);
+      flicking.on(EVENTS.CHANGED, _this._onSideChanged);
+    });
+  };
+  __proto._createSideState = function () {
+    var _this = this;
+    // data-index로 분류하기 전에 임시로 모든 children에 대해 side flicking으로 해보자.
+    // panels에 data-attributes가 붙어있을 때와 안 붙어있을 때를 다르게 처리
+    // 붙어있다면 가상의 viewport들을 index 갯수만큼 만들어줘야 한다
+    var viewportEl = this.element;
+    var cameraEl = this.camera.element;
+    var panels = toArray(cameraEl.children);
+    var sideState = [];
+    var sidePanels = "";
+    // check data attribute exists
+    var groupKeys = [];
+    var groupPanels = {};
+    var sideCamera = document.createElement("div");
+    sideCamera.classList.add(CLASS.CAMERA);
+    var isCrossStructure = getDataAttributes(viewportEl, "data-cross-").structure;
+    if (!isCrossStructure) {
+      viewportEl.setAttribute("data-cross-structure", "true");
+      panels.forEach(function (panel) {
+        var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
+        if (groupKey && !includes(groupKeys, groupKey)) {
+          groupKeys.push(groupKey);
+          groupPanels[groupKey] = [panel];
+        } else if (groupKey) {
+          groupPanels[groupKey].push(panel);
+        }
+      });
+      if (groupKeys.length) {
+        sideState = groupKeys.reduce(function (state, key) {
+          var start = state.length ? +state[state.length - 1].end + 1 : 0;
+          var element = groupPanels[key].reduce(function (el, panel) {
+            sidePanels += panel.outerHTML;
+            el.innerHTML += panel.outerHTML;
+            return el;
+          }, document.createElement("div"));
+          return __spread(state, [{
+            key: key,
+            start: start,
+            end: start + groupPanels[key].length - 1,
+            element: element
+          }]);
+        }, []);
+        this.remove(0, this.panelCount - groupKeys.length);
+        sideState.forEach(function (_, i) {
+          var panel = _this.camera.children[i];
+          Array.from(panel.attributes).forEach(function (attribute) {
+            return panel.removeAttribute(attribute.name);
+          });
+        });
+      } else {
+        sideState = panels.reduce(function (state, panel, i) {
+          var start = state.length ? +state[state.length - 1].end + 1 : 0;
+          sidePanels += panel.innerHTML;
+          return __spread(state, [{
+            key: i.toString(),
+            start: start,
+            end: start + panel.children.length - 1,
+            element: panel
+          }]);
+        }, []);
+      }
+      sideCamera.innerHTML = sidePanels;
+      sideState.forEach(function (_, i) {
+        var panel = _this.camera.children[i];
+        [CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
+          if (!panel.classList.contains(className)) {
+            panel.classList.add(className);
+          }
+        });
+        panel.innerHTML = sideCamera.outerHTML;
+      });
+    } else {
+      toArray(panels[0].children[0].children).forEach(function (panel) {
+        var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
+        if (groupKey && !includes(groupKeys, groupKey)) {
+          groupKeys.push(groupKey);
+          groupPanels[groupKey] = [panel];
+        } else if (groupKey) {
+          groupPanels[groupKey].push(panel);
+        }
+      });
+      sideState = groupKeys.reduce(function (state, key) {
+        var start = state.length ? +state[state.length - 1].end + 1 : 0;
+        var element = groupPanels[key].reduce(function (el, panel) {
+          el.innerHTML += panel.outerHTML;
+          return el;
+        }, document.createElement("div"));
+        return __spread(state, [{
+          key: key,
+          start: start,
+          end: start + groupPanels[key].length - 1,
+          element: element
+        }]);
+      }, []);
+    }
+    return sideState;
+  };
+  __proto._createSideFlicking = function () {
+    var _this = this;
+    return this.sideState.map(function (state, i) {
+      return new Flicking(_this.camera.children[i], __assign(__assign({}, _this.sideOptions), {
+        horizontal: false,
+        panelsPerView: 1,
+        defaultIndex: state.start
+      }));
+    });
+  };
+  __proto._syncToCategory = function (index, outerIndex) {
+    var _this = this;
+    this.stopAnimation();
+    this._sideFlicking.forEach(function (child, i) {
+      var _a = _this._sideState[i],
+        start = _a.start,
+        end = _a.end;
+      if (start <= index && end >= index && outerIndex !== i) {
+        child.stopAnimation();
+        void child.moveTo(index, 0);
+        void _this.moveTo(i, 0);
+      }
+    });
+  };
+  return CrossFlicking;
+}(Flicking);
+
 /**
  * Decorator that makes the method of flicking available in the framework.
  * @ko 프레임워크에서 플리킹의 메소드를 사용할 수 있게 하는 데코레이터.
@@ -8096,6 +8424,7 @@ var parseAlign = function (alignVal) {
 var modules = {
     __proto__: null,
     'default': Flicking,
+    CrossFlicking: CrossFlicking,
     VanillaElementProvider: VanillaElementProvider,
     VirtualElementProvider: VirtualElementProvider,
     Panel: Panel,
@@ -8133,6 +8462,7 @@ var modules = {
     CLASS: CLASS,
     CIRCULAR_FALLBACK: CIRCULAR_FALLBACK,
     ORDER: ORDER,
+    MOVE_DIRECTION: MOVE_DIRECTION,
     withFlickingMethods: withFlickingMethods,
     sync: sync,
     getRenderingPanels: getRenderingPanels,
@@ -8165,7 +8495,9 @@ var modules = {
     circulateIndex: circulateIndex,
     range: range,
     getElementSize: getElementSize,
-    setPrototypeOf: setPrototypeOf
+    setPrototypeOf: setPrototypeOf,
+    camelize: camelize,
+    getDataAttributes: getDataAttributes
 };
 
 /*
@@ -8187,6 +8519,7 @@ exports.CLASS = CLASS;
 exports.Camera = Camera;
 exports.CircularCameraMode = CircularCameraMode;
 exports.Control = Control;
+exports.CrossFlicking = CrossFlicking;
 exports.DIRECTION = DIRECTION;
 exports.DisabledState = DisabledState;
 exports.DraggingState = DraggingState;
@@ -8198,6 +8531,7 @@ exports.FreeControl = FreeControl;
 exports.HoldingState = HoldingState;
 exports.IdleState = IdleState;
 exports.LinearCameraMode = LinearCameraMode;
+exports.MOVE_DIRECTION = MOVE_DIRECTION;
 exports.MOVE_TYPE = MOVE_TYPE;
 exports.NormalRenderingStrategy = NormalRenderingStrategy;
 exports.ORDER = ORDER;
@@ -8214,6 +8548,7 @@ exports.VirtualElementProvider = VirtualElementProvider;
 exports.VirtualManager = VirtualManager;
 exports.VirtualPanel = VirtualPanel;
 exports.VirtualRenderingStrategy = VirtualRenderingStrategy;
+exports.camelize = camelize;
 exports.checkExistence = checkExistence;
 exports.circulateIndex = circulateIndex;
 exports.circulatePosition = circulatePosition;
@@ -8222,6 +8557,7 @@ exports["default"] = Flicking;
 exports.find = find;
 exports.findIndex = findIndex;
 exports.findRight = findRight;
+exports.getDataAttributes = getDataAttributes;
 exports.getDefaultCameraTransform = getDefaultCameraTransform;
 exports.getDirection = getDirection;
 exports.getElement = getElement;